Merge pull request #52 from microsoft/users/t-famoun/green-led

Modify svg to turn the power (green) LED on only when the simulator is running.
microsoft · Jul 16, 2019 · 42fbb4f · 42fbb4f
2 parents 6e054ca + 204b942
commit 42fbb4f
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/src/view/components/Simulator.tsx b/src/view/components/Simulator.tsx
@@ -8,6 +8,7 @@ import svg from "./cpx/Svg_utils";
 
 interface IState {
   pixels: Array<Array<number>>;
+  power_led: boolean;
   brightness: number;
   red_led: boolean;
   button_a: boolean;
@@ -34,6 +35,7 @@ const DEFAULT_STATE: IState = {
     [0, 0, 0],
     [0, 0, 0]
   ],
+  power_led: true,
   red_led: false,
   switch: false
 };
@@ -93,6 +95,7 @@ class Simulator extends React.Component<any, IState> {
       <div>
         <Cpx
           pixels={this.state.pixels}
+          power_led={this.state.power_led}
           brightness={this.state.brightness}
           red_led={this.state.red_led}
           switch={this.state.switch}

diff --git a/src/view/components/cpx/Cpx.tsx b/src/view/components/cpx/Cpx.tsx
@@ -9,6 +9,7 @@ import accessibility from "./Accessibility_utils";
 
 interface IProps {
   pixels: Array<Array<number>>;
+  power_led: boolean;
   red_led: boolean;
   brightness: number;
   switch: boolean;
@@ -33,6 +34,7 @@ const Cpx: React.FC<IProps> = props => {
     // Update Neopixels and red LED state
     updateNeopixels(props);
     updateRedLED(props.red_led);
+    updatePowerLED(props.power_led)
   }
 
   return CPX_SVG;
@@ -173,6 +175,16 @@ const updateRedLED = (propsRedLED: boolean): void => {
   }
 };
 
+
+const updatePowerLED = (propsPowerLED: boolean): void => {
+  let powerLED = window.document.getElementById("PWR_LED");
+  if (powerLED) {
+    powerLED.style.fill = propsPowerLED
+      ? SvgStyle.POWER_LED_ON
+      : SvgStyle.POWER_LED_OFF;
+  }
+};
+
 const setNeopixel = (
   led: HTMLElement,
   pixValue: Array<number>,

diff --git a/src/view/components/cpx/Cpx_svg.tsx b/src/view/components/cpx/Cpx_svg.tsx
@@ -2557,7 +2557,7 @@ export const CPX_SVG = (
       <path
         d="M52.266 135.795h3.543v-3.543h-3.543v3.543z"
         id="PWR_LED"
-        fill="#0f0"
+        fill="white"
       />
       <g id="g2334" transform="translate(54.038 134.59)">
         <path

diff --git a/src/view/components/cpx/Cpx_svg_style.tsx b/src/view/components/cpx/Cpx_svg_style.tsx
@@ -19,6 +19,8 @@ export const BUTTON_CORNER_RADIUS: number = 2;
 export const BUTTON_WIDTH: number = 10;
 export const BUTTON_CIRCLE_RADIUS: number = 3;
 export const BUTTON_TEXT_BASELINE: number = 163;
+export const POWER_LED_ON: string ="#00FF00";
+export const POWER_LED_OFF: string ="#FFFFFF";
 
 // Adapted from : https://github.com/microsoft/pxt/blob/master/pxtsim/simlib.ts
 export function rgbToHsl(