Adding support for the shake sensor

src/adafruit_circuitplayground/express.py

@@ -32,12 +32,20 @@ def __init__(self):
             'switch': False,
             'temperature': 0,
             'light': 0,
+            'motion_x': 0,
+            'motion_y': 0,
+            'motion_z': 0,
+            'shake': False
         }
 
         self.pixels = Pixel(self.__state)
         self.__abs_path_to_code_file = ''
 
 
+    @property
+    def acceleration(self):
+        return (self.__state['motion_x'], self.__state['motion_y'], self.__state['motion_z'])
+
     @property
     def button_a(self):
         return self.__state['button_a']
@@ -70,6 +78,9 @@ def light(self):
     def __show(self):
         utils.show(self.__state)
 
+    def shake(self, shake_threshold=30):
+        return self.__state['shake']
+
     def play_file(self, file_name):
         file_name = utils.remove_leading_slashes(file_name)
         abs_path_parent_dir = os.path.abspath(

src/process_user_code.py

@@ -16,7 +16,7 @@
     'switch',
     'temperature',
     'light',
-
+    'shake'
 ]
 
 read_val = ""
@@ -34,6 +34,8 @@ def run(self):
             sys.stdin.flush()
             try:
                 new_state = json.loads(read_val)
+                print('newstae is ')
+                print(new_state)
                 for event in EXPECTED_INPUT_EVENTS:
                     cpx._Express__state[event] = new_state.get(
                         event, cpx._Express__state[event])

src/view/components/toolbar/InputSlider.tsx

@@ -12,6 +12,7 @@ interface vscode {
 declare const vscode: vscode;
 
 const sendMessage = (state: any) => {
+  console.log("posting shake");
   vscode.postMessage({ command: "sensor-changed", text: state });
 };
 

src/view/components/toolbar/MotionSensorBar.tsx

@@ -3,13 +3,16 @@
 
 import * as React from "react";
 import InputSlider from "./InputSlider";
+import SensorButton from "./SensorButton";
+
 import {
   ISensorProps,
   ISliderProps,
   X_SLIDER_INDEX,
   Z_SLIDER_INDEX,
   Y_SLIDER_INDEX
 } from "./Toolbar_utils";
+
 import "../../styles/MotionSensorBar.css";
 
 const MOTION_SLIDER_PROPS_X: ISliderProps = {
@@ -55,6 +58,8 @@ class MotionSensorBar extends React.Component {
         <div className="header">
           <div className="title">{MOTION_SENSOR_PROPERTIES.LABEL}</div>
         </div>
+        <SensorButton label="Shake" type="shake" />
+        <br />
         <InputSlider
           minValue={
             MOTION_SENSOR_PROPERTIES.sliderProps[X_SLIDER_INDEX].minValue
@@ -102,6 +107,7 @@ class MotionSensorBar extends React.Component {
             MOTION_SENSOR_PROPERTIES.sliderProps[Z_SLIDER_INDEX].maxLabel
           }
         />
+        <br />
       </div>
     );
   }

src/view/components/toolbar/SensorButton.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { ISensorButtonProps } from "./Toolbar_utils";
+import { CONSTANTS } from "../../constants";
+import "../../styles/SensorButton.css";
+
+interface vscode {
+  postMessage(message: any): void;
+}
+
+declare const vscode: vscode;
+
+const sendMessage = (state: any) => {
+  vscode.postMessage({ command: "sensor-changed", text: state });
+};
+
+class SensorButton extends React.Component<ISensorButtonProps, any, any> {
+  constructor(props: any) {
+    super(props);
+    this.onMouseUp = this.onMouseUp.bind(this);
+    this.onMouseDown = this.onMouseDown.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+  }
+
+  render() {
+    return (
+      <button
+        onMouseUp={this.onMouseUp}
+        onMouseDown={this.onMouseDown}
+        onKeyUp={this.onKeyUp}
+        onKeyDown={this.onKeyDown}
+        aria-label={`${this.props.type} sensor button`}
+        className="sensor-button"
+      >
+        {this.props.label}
+      </button>
+    );
+  }
+
+  private onMouseDown() {
+    this.handleOnclick(true);
+  }
+  private onKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {
+    this.onKeyEvent(event, false);
+  }
+  private onKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {
+    this.onKeyEvent(event, true);
+  }
+  private onMouseUp() {
+    this.handleOnclick(false);
+  }
+  private handleOnclick(active: boolean) {
+    this.writeMessage(active);
+  }
+  private writeMessage(isActive: boolean) {
+    const messageState = { [this.props.type]: isActive };
+    sendMessage(messageState);
+  }
+
+  private onKeyEvent(
+    event: React.KeyboardEvent<HTMLButtonElement>,
+    active: boolean
+  ) {
+    if ([event.keyCode, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER)) {
+      this.handleOnclick(active);
+    }
+  }
+}
+
+export default SensorButton;

src/view/components/toolbar/Toolbar_utils.tsx

@@ -8,12 +8,18 @@ export interface ISliderProps {
   type: string;
 }
 
+export interface ISensorButtonProps {
+  label: string;
+  type: string;
+}
+
 export interface ISensorProps {
   LABEL: string;
   sliderProps: ISliderProps[];
   unitLabel: string;
 }
 
+export const SHAKE_SENSOR_EVENT: string = "shake";
 export const X_SLIDER_INDEX = 0;
 export const Y_SLIDER_INDEX = 1;
 export const Z_SLIDER_INDEX = 2;

src/view/styles/SensorButton.css

@@ -0,0 +1,24 @@
+.sensor-button {
+  color: var(--vscode-badge-foreground);
+  text-align: center;
+  background-color: var(--vscode-button-background);
+  width: 343px;
+  height: 32px;
+  border: none;
+  font-weight: bolder;
+  margin-top: 30px;
+  margin-bottom: 30px;
+  float: left;
+  padding-left: 20px;
+}
+
+.sensor-button:focus {
+  outline: var(--vscode-focusBorder);
+  outline-width: thick;
+  outline-offset: 15px;
+  outline-style: auto;
+}
+.sensor-button:hover {
+  outline: none;
+  background-color: var(--vscode-button-hoverBackground);
+}