Green LED turns on when running code

locales/en/out/constants.i18n.json

@@ -16,5 +16,5 @@
   "info.runningCode": "Running user code",
   "info.welcomeOutputTab": "Welcome to the Adafruit Simulator output tab !\n\n",
   "label.webviewPanel": "Adafruit CPX",
-  "name": "Adafruit Simulator"
-}
+  "name": "Pacifica Simulator"
+}

src/constants.ts

@@ -84,7 +84,7 @@ export const CONSTANTS = {
     TUTORIALS:
       "https://learn.adafruit.com/circuitpython-made-easy-on-circuit-playground-express/circuit-playground-express-library"
   },
-  NAME: localize("name", "Adafruit Simulator")
+  NAME: localize("name", "Pacifica Simulator")
 };
 
 // Need the different events we want to track and the name of it

src/extension.ts

@@ -21,8 +21,8 @@ let currentFileAbsPath: string = "";
 let firstTimeClosed: boolean = true;
 let shouldShowNewProject: boolean = true;
 
-function loadScript(context: vscode.ExtensionContext, path: string) {
-  return `<script src="${vscode.Uri.file(context.asAbsolutePath(path))
+function loadScript(context: vscode.ExtensionContext, scriptPath: string) {
+  return `<script src="${vscode.Uri.file(context.asAbsolutePath(scriptPath))
     .with({ scheme: "vscode-resource" })
     .toString()}"></script>`;
 }
@@ -177,11 +177,13 @@ export function activate(context: vscode.ExtensionContext) {
 
     openWebview();
 
+    // tslint:disable-next-line: ban-comma-operator
     vscode.workspace
       .openTextDocument({ content: file, language: "python" })
       .then((template: vscode.TextDocument) => {
         vscode.window.showTextDocument(template, 1, false);
       }),
+      // tslint:disable-next-line: no-unused-expression
       (error: any) => {
         TelemetryAI.trackFeatureUsage(
           TelemetryEventName.ERROR_COMMAND_NEW_PROJECT
@@ -493,7 +495,7 @@ const logToOutputChannel = (
   show: boolean = false
 ) => {
   if (outChannel) {
-    if (show) outChannel.show(true);
+    if (show) { outChannel.show(true); }
     outChannel.append(message);
   }
 };

src/view/components/Simulator.tsx

@@ -13,8 +13,7 @@ import svg from "./cpx/Svg_utils";
 import "../styles/Simulator.css";
 
 interface ICpxState {
-  pixels: Array<Array<number>>;
-  power_led: boolean;
+  pixels: number[][];
   brightness: number;
   red_led: boolean;
   button_a: boolean;
@@ -46,7 +45,6 @@ const DEFAULT_CPX_STATE: ICpxState = {
     [0, 0, 0],
     [0, 0, 0]
   ],
-  power_led: true,
   red_led: false,
   switch: false
 };
@@ -119,8 +117,8 @@ class Simulator extends React.Component<any, IState> {
             pixels={this.state.cpx.pixels}
             brightness={this.state.cpx.brightness}
             red_led={this.state.cpx.red_led}
-            power_led={this.state.cpx.power_led}
             switch={this.state.cpx.switch}
+            on={this.state.play_button}
             onMouseUp={this.onMouseUp}
             onMouseDown={this.onMouseDown}
             onMouseLeave={this.onMouseLeave}

src/view/components/cpx/Cpx.tsx

@@ -8,21 +8,21 @@ import svg from "./Svg_utils";
 import accessibility from "./Accessibility_utils";
 
 interface IProps {
-  pixels: Array<Array<number>>;
-  power_led: boolean;
+  pixels: number[][];
   red_led: boolean;
   brightness: number;
   switch: boolean;
+  on: boolean;
   onMouseUp: (button: HTMLElement, event: Event) => void;
   onMouseDown: (button: HTMLElement, event: Event) => void;
   onMouseLeave: (button: HTMLElement, event: Event) => void;
 }
 
 let firstTime = true;
 
-/** Functional Component render */
+// Functional Component render
 const Cpx: React.FC<IProps> = props => {
-  let svgElement = window.document.getElementById("cpx_svg");
+  const svgElement = window.document.getElementById("cpx_svg");
 
   if (svgElement) {
     if (firstTime) {
@@ -34,8 +34,9 @@ const Cpx: React.FC<IProps> = props => {
     // Update Neopixels and red LED state
     updateNeopixels(props);
     updateRedLED(props.red_led);
-    updatePowerLED(props.power_led);
+    updatePowerLED(props.on);
     updateSwitch(props.switch);
+
   }
 
   return CPX_SVG;
@@ -52,14 +53,14 @@ const makeButton = (
   const buttonCircleRadius = SvgStyle.BUTTON_CIRCLE_RADIUS;
   const btng = svg.child(g, "g", { class: "sim-button-group" });
   svg.child(btng, "rect", {
+    fill: SvgStyle.BUTTON_OUTER,
+    height: buttonWidth,
     id: id + "_OUTER",
-    x: left,
-    y: top,
     rx: buttonCornerRadius,
     ry: buttonCornerRadius,
     width: buttonWidth,
-    height: buttonWidth,
-    fill: SvgStyle.BUTTON_OUTER
+    x: left,
+    y: top
   });
 
   const outer = btng;
@@ -83,46 +84,46 @@ const initSvgStyle = (svgElement: HTMLElement, brightness: number): void => {
   style.textContent = SvgStyle.SVG_STYLE;
 
   // Filters for the glow effect (Adapted from : https://github.com/microsoft/pxt-adafruit/blob/master/sim/visuals/board.ts)
-  let defs: SVGDefsElement = svg.child(
+  const defs: SVGDefsElement = svg.child(
     svgElement,
     "defs",
     {}
   ) as SVGDefsElement;
 
-  let g = svg.createElement("g") as SVGElement;
+  const g = svg.createElement("g") as SVGElement;
   svgElement.appendChild(g);
 
-  let glow = svg.child(defs, "filter", {
+  const glow = svg.child(defs, "filter", {
+    height: "120%",
     id: "filterglow",
-    x: "-5%",
-    y: "-5%",
     width: "120%",
-    height: "120%"
+    x: "-5%",
+    y: "-5%"
   });
   svg.child(glow, "feGaussianBlur", { stdDeviation: "5", result: "glow" });
-  let merge = svg.child(glow, "feMerge", {});
+  const merge = svg.child(glow, "feMerge", {});
   for (let i = 0; i < 3; ++i) {
     svg.child(merge, "feMergeNode", { in: "glow" });
   }
 
-  let neopixelglow = svg.child(defs, "filter", {
+  const neopixelglow = svg.child(defs, "filter", {
+    height: "600%",
     id: "neopixelglow",
-    x: "-300%",
-    y: "-300%",
     width: "600%",
-    height: "600%"
+    x: "-300%",
+    y: "-300%"
   });
   svg.child(neopixelglow, "feGaussianBlur", {
-    stdDeviation: "4.3",
-    result: "coloredBlur"
+    result: "coloredBlur",
+    stdDeviation: "4.3"
   });
-  let neopixelmerge = svg.child(neopixelglow, "feMerge", {});
+  const neopixelmerge = svg.child(neopixelglow, "feMerge", {});
   svg.child(neopixelmerge, "feMergeNode", { in: "coloredBlur" });
   svg.child(neopixelmerge, "feMergeNode", { in: "coloredBlur" });
   svg.child(neopixelmerge, "feMergeNode", { in: "SourceGraphic" });
 
   // Brightness
-  let neopixelfeComponentTransfer = svg.child(
+  const neopixelfeComponentTransfer = svg.child(
     neopixelglow,
     "feComponentTransfer",
     {}
@@ -134,41 +135,40 @@ const initSvgStyle = (svgElement: HTMLElement, brightness: number): void => {
   });
   svg.child(neopixelfeComponentTransfer, "feFuncG", {
     id: "brightnessFilterG",
-    type: "linear",
-    slope: brightness
+    slope: brightness,
+    type: "linear"
   });
   svg.child(neopixelfeComponentTransfer, "feFuncB", {
     id: "brightnessFilterB",
-    type: "linear",
-    slope: brightness
+    slope: brightness,
+    type: "linear"
   });
 
   // BTN A+B
   const outerBtn = (left: number, top: number, label: string) => {
-    const button = makeButton(g, left, top, "BTN_AB");
-    return button;
+    return makeButton(g, left, top, "BTN_AB");
   };
 
-  let ab = outerBtn(165, SvgStyle.MB_HEIGHT - 15, "A+B");
-  let abtext = svg.child(ab.outer, "text", {
+  const ab = outerBtn(165, SvgStyle.MB_HEIGHT - 15, "A+B");
+  const abtext = svg.child(ab.outer, "text", {
+    class: "sim-text",
     x: SvgStyle.BUTTON_TEXT_BASELINE,
-    y: SvgStyle.MB_HEIGHT - 18,
-    class: "sim-text"
+    y: SvgStyle.MB_HEIGHT - 18
   }) as SVGTextElement;
   abtext.textContent = "A+B";
 };
 
 const updateNeopixels = (props: IProps): void => {
   for (let i = 0; i < props.pixels.length; i++) {
-    let led = window.document.getElementById(`NEOPIXEL_${i}`);
+    const led = window.document.getElementById(`NEOPIXEL_${i}`);
     if (led) {
       setNeopixel(led, props.pixels[i], props.brightness);
     }
   }
 };
 
 const updateRedLED = (propsRedLED: boolean): void => {
-  let redLED = window.document.getElementById("SERIAL_LED");
+  const redLED = window.document.getElementById("SERIAL_LED");
   if (redLED) {
     redLED.style.fill = propsRedLED
       ? SvgStyle.RED_LED_ON
@@ -177,7 +177,7 @@ const updateRedLED = (propsRedLED: boolean): void => {
 };
 
 const updatePowerLED = (propsPowerLED: boolean): void => {
-  let powerLED = window.document.getElementById("PWR_LED");
+  const powerLED = window.document.getElementById("PWR_LED");
   if (powerLED) {
     powerLED.style.fill = propsPowerLED
       ? SvgStyle.POWER_LED_ON
@@ -187,7 +187,7 @@ const updatePowerLED = (propsPowerLED: boolean): void => {
 
 const setNeopixel = (
   led: HTMLElement,
-  pixValue: Array<number>,
+  pixValue: number[],
   brightness: number
 ): void => {
   if (isLightOn(pixValue) && brightness > 0) {
@@ -201,7 +201,7 @@ const setNeopixel = (
       pixValue[1],
       pixValue[2]
     ]);
-    let innerLum = Math.max(
+    const innerLum = Math.max(
       lum * SvgStyle.INTENSITY_FACTOR,
       SvgStyle.MIN_INNER_LUM
     );
@@ -221,18 +221,19 @@ const setNeopixel = (
   }
 };
 
-const isLightOn = (pixValue: Array<number>): boolean => {
+const isLightOn = (pixValue: number[]): boolean => {
   return !pixValue.every(val => {
-    return val == 0;
+    return val === 0;
   });
 };
 
 const changeBrightness = (filterID: string, brightness: number): void => {
-  let brightnessFilter: HTMLElement | null = window.document.getElementById(
+  const brightnessFilter: HTMLElement | null = window.document.getElementById(
     filterID
   );
-  if (brightnessFilter)
+  if (brightnessFilter) {
     brightnessFilter.setAttribute("slope", brightness.toString());
+  }
 };
 
 const setupButtons = (props: IProps): void => {
@@ -283,9 +284,9 @@ const setupSwitch = (props: IProps): void => {
   const swHousingElement = window.document.getElementById("SWITCH_HOUSING");
 
   if (switchElement && swInnerElement && swHousingElement) {
-    let svgSwitch: SVGElement = (switchElement as unknown) as SVGElement;
-    let svgSwitchInner: SVGElement = (swInnerElement as unknown) as SVGElement;
-    let svgSwitchHousing: SVGElement = (swHousingElement as unknown) as SVGElement;
+    const svgSwitch: SVGElement = (switchElement as unknown) as SVGElement;
+    const svgSwitchInner: SVGElement = (swInnerElement as unknown) as SVGElement;
+    const svgSwitchHousing: SVGElement = (swHousingElement as unknown) as SVGElement;
 
     svg.addClass(svgSwitch, "sim-slide-switch");