Skip to content
This repository was archived by the owner on Dec 23, 2021. It is now read-only.

Commit cfff5f1

Browse files
Merge pull request #285 from microsoft/users/t-xunguy/neopixels
Neopixel Display
2 parents 0e94c8a + 98f5ec0 commit cfff5f1

File tree

8 files changed

+96
-21
lines changed

8 files changed

+96
-21
lines changed

.vscode/settings.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
},
66
"search.exclude": {
77
"out": true // set this to false to include "out" folder in search results
8-
},
8+
}
99
// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
10-
"typescript.tsc.autoDetect": "off"
1110
}

src/base_circuitpython/neopixel_write.py

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,6 @@ def neopixel_write(gpio, buf):
3030

3131
def send_clue(buf):
3232
sendable_json = {CONSTANTS.PIXELS: tuple(buf)}
33-
34-
# for now, just print pixels
35-
print(sendable_json)
36-
3733
utils.send_to_simulator(sendable_json, CONSTANTS.CLUE)
3834

3935

src/view/components/clue/ClueImage.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ interface EventTriggers {
1717
interface IProps {
1818
eventTriggers: EventTriggers;
1919
displayMessage: string;
20+
neopixel: number[];
2021
}
2122

2223
const BUTTON_CLASSNAME = {
@@ -85,6 +86,7 @@ export class ClueImage extends React.Component<IProps, {}> {
8586
<ClueSvg
8687
ref={this.svgRef}
8788
displayImage={this.props.displayMessage}
89+
neopixel={this.props.neopixel}
8890
/>
8991
);
9092
}

src/view/components/clue/ClueSimulator.tsx

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,19 @@ import {
33
AB_BUTTONS_KEYS,
44
// DEVICE_LIST_KEY,
55
CONSTANTS,
6-
WEBVIEW_MESSAGES,
76
DEFAULT_IMG_CLUE,
7+
WEBVIEW_MESSAGES,
88
} from "../../constants";
99
import PlayLogo from "../../svgs/play_svg";
1010
import StopLogo from "../../svgs/stop_svg";
1111
import { sendMessage } from "../../utils/MessageUtils";
1212
import ActionBar from "../simulator/ActionBar";
1313
import { BUTTONS_KEYS, ClueImage } from "./ClueImage";
1414

15-
const DEFAULT_CLUE_STATE: IClueState = {
15+
export const DEFAULT_CLUE_STATE: IClueState = {
1616
buttons: { button_a: false, button_b: false },
1717
displayMessage: DEFAULT_IMG_CLUE,
18+
neopixel: [0, 0, 0],
1819
};
1920

2021
interface IState {
@@ -29,6 +30,7 @@ interface IState {
2930
interface IClueState {
3031
buttons: { button_a: boolean; button_b: boolean };
3132
displayMessage: string;
33+
neopixel: number[];
3234
}
3335
export class ClueSimulator extends React.Component<any, IState> {
3436
private imageRef: React.RefObject<ClueImage> = React.createRef();
@@ -55,12 +57,25 @@ export class ClueSimulator extends React.Component<any, IState> {
5557
});
5658
break;
5759
case "set-state":
58-
this.setState({
59-
clue: {
60-
...this.state.clue,
61-
displayMessage: message.state.display_base64,
62-
},
63-
});
60+
console.log(
61+
`message received ${JSON.stringify(message.state)}`
62+
);
63+
if (message.state.display_base64) {
64+
this.setState({
65+
clue: {
66+
...this.state.clue,
67+
displayMessage: message.state.display_base64,
68+
},
69+
});
70+
} else if (message.state.pixels) {
71+
this.setState({
72+
clue: {
73+
...this.state.clue,
74+
neopixel: message.state.pixels,
75+
},
76+
});
77+
}
78+
6479
break;
6580
case "activate-play":
6681
const newRunningFile = this.state.currently_selected_file;
@@ -121,6 +136,7 @@ export class ClueSimulator extends React.Component<any, IState> {
121136
onKeyEvent: this.onKeyEvent,
122137
}}
123138
displayMessage={this.state.clue.displayMessage}
139+
neopixel={this.state.clue.neopixel}
124140
/>
125141
</div>
126142
<ActionBar

src/view/components/clue/Clue_svg.tsx

Lines changed: 63 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,22 @@
22
// Licensed under the MIT license.
33

44
import * as React from "react";
5+
import CONSTANTS from "../../constants";
56
import "../../styles/Clue.css";
7+
import { DEFAULT_CLUE_STATE } from "./ClueSimulator";
68
export interface IRefObject {
79
[key: string]: React.RefObject<SVGRectElement>;
810
}
911
interface IProps {
1012
displayImage: string;
13+
neopixel: number[];
1114
}
12-
1315
export class ClueSvg extends React.Component<IProps, {}> {
1416
private svgRef: React.RefObject<SVGSVGElement> = React.createRef();
17+
private neopixel: React.RefObject<SVGCircleElement> = React.createRef();
18+
private pixelStopGradient: React.RefObject<
19+
SVGStopElement
20+
> = React.createRef();
1521

1622
private buttonRefs: IRefObject = {
1723
BTN_A: React.createRef(),
@@ -32,24 +38,43 @@ export class ClueSvg extends React.Component<IProps, {}> {
3238
}
3339
componentDidMount() {
3440
this.updateDisplay();
41+
this.updateNeopixel();
3542
}
3643
componentDidUpdate() {
3744
this.updateDisplay();
45+
this.updateNeopixel();
3846
}
3947

4048
render() {
4149
return (
4250
<div className="microbit-svg">
4351
<svg
4452
xmlns="http://www.w3.org/2000/svg"
45-
viewBox="0 0 304.89 250.98"
53+
viewBox="0 0 375 250.98"
4654
ref={this.svgRef}
4755
x="0px"
4856
y="0px"
4957
width="100%"
5058
height="100%"
5159
>
52-
<defs />
60+
<defs>
61+
<radialGradient
62+
id="grad1"
63+
cx="50%"
64+
cy="50%"
65+
r="70%"
66+
fx="50%"
67+
fy="50%"
68+
>
69+
<stop
70+
offset="0%"
71+
stopColor="rgb(0,0,0)"
72+
stopOpacity="1"
73+
ref={this.pixelStopGradient}
74+
/>
75+
<stop offset="100%" stopOpacity="0" />
76+
</radialGradient>
77+
</defs>
5378
<g id="Green">
5479
<rect
5580
className="cls-1"
@@ -308,8 +333,8 @@ export class ClueSvg extends React.Component<IProps, {}> {
308333
<circle cx="85.24" cy="210.35" r="12.23" />
309334
<circle cx="153.2" cy="210.35" r="12.23" />
310335
<circle cx="220.8" cy="210.35" r="12.23" />
311-
<circle cx="280.98" cy="210.98" r="12.23" />
312-
<circle cx="25.35" cy="210.72" r="12.23" />
336+
<circle cx="280.98" cy="210.35" r="12.23" />
337+
<circle cx="25.35" cy="210.35" r="12.23" />
313338
<rect
314339
className="cls-10"
315340
x="40.39"
@@ -926,7 +951,6 @@ export class ClueSvg extends React.Component<IProps, {}> {
926951
y={28}
927952
width={176}
928953
height={152}
929-
href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQICAQEBAQMCAgICAwMEBAMDAwMEBAYFBAQFBAMDBQcFBQYGBgYGBAUHBwcGBwYGBgb/2wBDAQEBAQEBAQMCAgMGBAMEBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgb/wAARCAJYAlgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD/AD/6KKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP//Z"
930954
/>
931955
<rect
932956
className="cls-23"
@@ -937,10 +961,16 @@ export class ClueSvg extends React.Component<IProps, {}> {
937961
rx="18.28"
938962
/>
939963
</g>
964+
<text x={318} y={85} className="sim-text-outside">
965+
Neopixel
966+
</text>
967+
<circle cx={345} cy={115} r="30" fill="url(#grad1)" />
968+
<circle cx={345} cy={115} r="12" ref={this.neopixel} />
940969
</svg>
941970
</div>
942971
);
943972
}
973+
944974
private updateDisplay() {
945975
if (this.displayRef.current && this.props.displayImage) {
946976
this.displayRef.current.setAttribute(
@@ -949,4 +979,31 @@ export class ClueSvg extends React.Component<IProps, {}> {
949979
);
950980
}
951981
}
982+
983+
private updateNeopixel() {
984+
const { neopixel } = this.props;
985+
const rgbColor = `rgb(${neopixel[0] +
986+
(255 - neopixel[0]) * CONSTANTS.LED_TINT_FACTOR},
987+
${neopixel[1] +
988+
(255 - neopixel[1]) * CONSTANTS.LED_TINT_FACTOR},${neopixel[2] +
989+
(255 - neopixel[2]) * CONSTANTS.LED_TINT_FACTOR})`;
990+
991+
if (this.neopixel.current) {
992+
this.neopixel.current.setAttribute("fill", rgbColor);
993+
}
994+
if (this.pixelStopGradient.current) {
995+
if (neopixel === DEFAULT_CLUE_STATE.neopixel) {
996+
this.pixelStopGradient.current.setAttribute(
997+
"stop-opacity",
998+
"0"
999+
);
1000+
} else {
1001+
this.pixelStopGradient.current.setAttribute(
1002+
"stop-opacity",
1003+
"1"
1004+
);
1005+
}
1006+
this.pixelStopGradient.current.setAttribute("stop-color", rgbColor);
1007+
}
1008+
}
9521009
}

src/view/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export const CONSTANTS = {
4646
"The simulator will run the .py file you have focused on.",
4747
SIMULATOR_BUTTON_WIDTH: 60,
4848
TOOLBAR_INFO: `Explore what's on the board:`,
49+
LED_TINT_FACTOR: 0.5,
4950
};
5051
export const AB_BUTTONS_KEYS = {
5152
BTN_A: "BTN_A",

src/view/styles/Clue.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,3 +129,7 @@
129129
.cls-22 {
130130
stroke: #7e7272;
131131
}
132+
.sim-text-outside {
133+
font-size: 14px;
134+
fill: var(--vscode-foreground);
135+
}

src/view/styles/Microbit.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ svg.sim.grayscale {
2424
}
2525
.sim-text-outside {
2626
font-size: 25px;
27-
fill: var(--vscode-descriptionForeground);
27+
fill: var(--vscode-foreground);
2828
}
2929
.sim-board,
3030
.sim-display,

0 commit comments

Comments
 (0)