Switch slider support (#25)

[PBI #29091]

* Adding switch svg interaction

* Moving the switch click logic out to simulator.tsx

* Adding state handling for the switch on React side

* Adding the switch state handling on the Python side and API method

* Removing comments in Cpx.txs

* Using prpos.switch for the switch state check in Cpx.tsx

* Correcting the name of HOVER attribute in the css class to allow on hover color change

* Adding the correct pressed attribute for click on the switch

* Correcting errors printing

Author: Christellah

src/adafruit_circuitplayground/express.py

@@ -6,7 +6,6 @@
 from . import utils
 
 
-
 class Express:
     def __init__(self):
         # State in the Python process
@@ -26,7 +25,8 @@ def __init__(self):
                 (0, 0, 0),
                 (0, 0, 0)
             ],
-          'red_led': False
+            'red_led': False,
+            'switch': False
         }
 
         self.pixels = Pixel(self.__state)
@@ -50,6 +50,10 @@ def red_led(self, value):
         self.__state['red_led'] = bool(value)
         self.__show()
 
+    @property
+    def switch(self):
+        return self.__state['switch']
+
     def __show(self):
         utils.show(self.__state)
 
@@ -71,5 +75,5 @@ def play_file(self, file_name):
                 raise TypeError(file_name + " is not a path to a .wav file.")
         else:
             raise NotImplementedError("Please use Python 3 or higher.")
-    
+
 cpx = Express()

src/constants.ts

@@ -7,7 +7,7 @@ const localize: nls.LocalizeFunc = nls.config({
 export const CONSTANTS = {
   ERROR: {
     STDERR: (data: string) => {
-      return localize("error.stderr", "[ERROR] {0} \n", data);
+      return localize("error.stderr", `[ERROR] ${data} \n`);
     },
     UNEXPECTED_MESSAGE: localize(
       "error.unexpectedMessage",

src/setup.py

@@ -25,6 +25,8 @@ def run(self):
                     'button_a', cpx._Express__state['button_a'])
                 cpx._Express__state['button_b'] = new_state.get(
                     'button_b', cpx._Express__state['button_b'])
+                cpx._Express__state['switch'] = new_state.get(
+                    'switch', cpx._Express__state['switch'])
             except Exception as e:
                 print("Error trying to send event to the process : ",
                       e, file=sys.stderr, flush=True)

src/view/components/Simulator.tsx

@@ -1,13 +1,15 @@
 import * as React from "react";
 import { BUTTON_NEUTRAL, BUTTON_PRESSED } from "./cpx/Cpx_svg_style";
 import Cpx from "./cpx/Cpx";
+import svg from "./cpx/Svg_utils";
 
 interface IState {
   pixels: Array<Array<number>>;
   brightness: number;
   red_led: boolean;
-  button_a: any;
-  button_b: any;
+  button_a: boolean;
+  button_b: boolean;
+  switch: boolean;
 }
 interface IMyProps {
   children?: any;
@@ -29,8 +31,8 @@ const DEFAULT_STATE: IState = {
     [0, 0, 0],
     [0, 0, 0]
   ],
-
-  red_led: false
+  red_led: false,
+  switch: false
 };
 
 interface vscode {
@@ -89,6 +91,7 @@ class Simulator extends React.Component<any, IState> {
           pixels={this.state.pixels}
           brightness={this.state.brightness}
           red_led={this.state.red_led}
+          switch={this.state.switch}
           onMouseUp={this.onMouseUp}
           onMouseDown={this.onMouseDown}
           onMouseLeave={this.onMouseLeave}
@@ -115,6 +118,17 @@ class Simulator extends React.Component<any, IState> {
   }
 
   private handleClick(button: HTMLElement, active: boolean) {
+    let newState = undefined;
+    if (button.id.includes("BTN")) {
+      newState = this.handleButtonClick(button, active);
+    } else if (button.id.includes("SWITCH")) {
+      newState = this.handleSwitchClick(button);
+    } else return;
+
+    if (newState) sendMessage(newState);
+  }
+
+  private handleButtonClick(button: HTMLElement, active: boolean) {
     const ButtonA: boolean = button.id.match(/BTN_A/) !== null;
     const ButtonB: boolean = button.id.match(/BTN_B/) !== null;
     const ButtonAB: boolean = button.id.match(/BTN_AB/) !== null;
@@ -140,16 +154,37 @@ class Simulator extends React.Component<any, IState> {
       };
       this.setState(newState);
     }
-    button.setAttribute("pressed", `${active}`);
-    if (newState) sendMessage(newState);
     if (innerButton) innerButton.style.fill = this.getButtonColor(active);
+    button.setAttribute("pressed", `${active}`);
+    return newState;
   }
 
   private getButtonColor(pressed: boolean) {
     const buttonUps = BUTTON_NEUTRAL;
     const buttonDown = BUTTON_PRESSED;
     return pressed ? buttonDown : buttonUps;
   }
+
+  private handleSwitchClick(button: HTMLElement) {
+    const switchInner = (window.document.getElementById(
+      "SWITCH_INNER"
+    ) as unknown) as SVGElement;
+
+    svg.addClass(switchInner, "sim-slide-switch-inner");
+
+    let switchIsOn: boolean = !this.state.switch;
+
+    if (switchIsOn) {
+      svg.addClass(switchInner, "on");
+      switchInner.setAttribute("transform", "translate(-5,0)");
+    } else {
+      svg.removeClass(switchInner, "on");
+      switchInner.removeAttribute("transform");
+    }
+    this.setState({ switch: switchIsOn });
+    button.setAttribute("aria-pressed", switchIsOn.toString());
+    return { switch: switchIsOn };
+  }
 }
 
 export default Simulator;

src/view/components/cpx/Cpx.tsx

@@ -8,6 +8,7 @@ interface IProps {
   pixels: Array<Array<number>>;
   red_led: boolean;
   brightness: number;
+  switch: boolean;
   onMouseUp: (button: HTMLElement, event: Event) => void;
   onMouseDown: (button: HTMLElement, event: Event) => void;
   onMouseLeave: (button: HTMLElement, event: Event) => void;
@@ -23,12 +24,12 @@ const Cpx: React.FC<IProps> = props => {
     if (firstTime) {
       initSvgStyle(svgElement, props.brightness);
       setupButtons(props);
+      setupSwitch(props);
       firstTime = false;
     }
-    // Update Neopixels state
+    // Update Neopixels and red LED state
     updateNeopixels(props);
     updateRedLED(props.red_led);
-    setupButtons(props);
   }
 
   return CPX_SVG;
@@ -261,4 +262,29 @@ const setupButton = (button: HTMLElement, className: string, props: IProps) => {
   svgButton.onmouseleave = e => props.onMouseLeave(button, e);
 };
 
+const setupSwitch = (props: IProps): void => {
+  const switchElement = window.document.getElementById("SWITCH");
+  const swInnerElement = window.document.getElementById("SWITCH_INNER");
+  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;
+
+    svg.addClass(svgSwitch, "sim-slide-switch");
+
+    svgSwitch.onmouseup = e => props.onMouseUp(switchElement, e);
+    svgSwitchInner.onmouseup = e => props.onMouseUp(swInnerElement, e);
+    svgSwitchHousing.onmouseup = e => props.onMouseUp(swHousingElement, e);
+
+    accessibility.makeFocusable(svgSwitch);
+    accessibility.setAria(
+      svgSwitch,
+      "button",
+      "On/Off Switch. Current state : " + props.switch ? "On" : "Off"
+    );
+  }
+};
+
 export default Cpx;

src/view/components/cpx/Cpx_svg.tsx

@@ -2706,17 +2706,17 @@ export const CPX_SVG = (
         id="path2486"
         fill="#b4b4b4"
       />
-      <path d="M62.138 51.542h19.8v-9.899h-19.8v9.899z" id="SLIDE_HOUSING" />
-      <g id="SLIDE" transform="matrix(1 0 0 -1 80.538 51.542)">
+      <path d="M62.138 51.542h19.8v-9.899h-19.8v9.899z" id="SWITCH_HOUSING" />
+      <g id="SWITCH" transform="matrix(1 0 0 -1 80.538 51.542)">
         <path
           d="M0 0v2.9h1.4v4.201H0V10h-4.2V7.101h-8.5V10H-17V7.101h-1.4V2.9h1.4V0H0z"
-          id="SLIDE_HOVER"
+          id="SWITCH_HOVER"
           fill="#dcdcdc"
         />
       </g>
       <path
         d="M72.038 44.342h4.3v-2.8h-4.3v2.8z"
-        id="SLIDE_INNER"
+        id="SWITCH_INNER"
         fill="#333"
       />
       <g id="g2496" transform="translate(69.938 47.943)">

src/view/components/cpx/Cpx_svg_style.tsx

@@ -162,10 +162,10 @@ export const SVG_STYLE = `
         r:8px;
     }
 
-    #SLIDE_HOVER {
+    #SWITCH_HOVER {
         cursor: pointer;
     }
-    .sim-slide-switch:hover #SLIDE_HOVER {
+    .sim-slide-switch:hover #SWITCH_HOVER {
         stroke:orange !important;
         stroke-width: 1px;
     }

src/view/components/cpx/Svg_utils.tsx

@@ -7,51 +7,64 @@ namespace svg {
       el.className.baseVal += " " + cls;
   }
 
-    export function hydrate(el: SVGElement, props: any) {
-        for (let k in props) {
-            if (k == "title") {
-                svg.title(el, props[k])
-            } else el.setAttributeNS(null, k, props[k])
-        }
-    }
+  export function removeClass(el: SVGElement, cls: string) {
+    if (el.classList) el.classList.remove(cls);
+    else
+      el.className.baseVal = el.className.baseVal
+        .replace(cls, "")
+        .replace(/\s{2,}/, " ");
+  }
 
-    export function createElement(name: string, props?: any): SVGElement {
-        let newElement = document.createElementNS("http://www.w3.org/2000/svg", name)
-        if (props)
-            svg.hydrate(newElement, props);
-        return newElement;
+  export function hydrate(el: SVGElement, props: any) {
+    for (let k in props) {
+      if (k == "title") {
+        svg.title(el, props[k]);
+      } else el.setAttributeNS(null, k, props[k]);
     }
+  }
 
-    export function child(parent: Element, name: string, props?: any): SVGElement {
-        let childElement = svg.createElement(name, props);
-        parent.appendChild(childElement);
-        return childElement;
-    }
+  export function createElement(name: string, props?: any): SVGElement {
+    let newElement = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      name
+    );
+    if (props) svg.hydrate(newElement, props);
+    return newElement;
+  }
 
-    export function fill(el: SVGElement, c: string) {
-        el.style.fill = c;
-    }
+  export function child(
+    parent: Element,
+    name: string,
+    props?: any
+  ): SVGElement {
+    let childElement = svg.createElement(name, props);
+    parent.appendChild(childElement);
+    return childElement;
+  }
 
-    export function filter(el: SVGElement, c: string) {
-        el.style.filter = c;
-    }
+  export function fill(el: SVGElement, c: string) {
+    el.style.fill = c;
+  }
 
-    export function fills(els: SVGElement[], c: string) {
-        els.forEach(el => el.style.fill = c);
-    }
+  export function filter(el: SVGElement, c: string) {
+    el.style.filter = c;
+  }
 
-    export function mkTitle(txt: string): SVGTitleElement {
-        let t = svg.createElement("title") as SVGTitleElement;
-        t.textContent = txt;
-        return t;
-    }
+  export function fills(els: SVGElement[], c: string) {
+    els.forEach(el => (el.style.fill = c));
+  }
 
-    export function title(el: SVGElement, txt: string): SVGTitleElement {
-        let t = mkTitle(txt);
-        el.appendChild(t);
-        return t;
-    }
-}
+  export function mkTitle(txt: string): SVGTitleElement {
+    let t = svg.createElement("title") as SVGTitleElement;
+    t.textContent = txt;
+    return t;
+  }
 
+  export function title(el: SVGElement, txt: string): SVGTitleElement {
+    let t = mkTitle(txt);
+    el.appendChild(t);
+    return t;
+  }
+}
 
-export default svg;
+export default svg;