Merge pull request #271 from microsoft/users/t-xunguy/gestures-microbit

Gesture features for micro:bit

Author: xnkevinnguyen

src/extension.ts

@@ -16,9 +16,9 @@ import {
     DialogResponses,
     GLOBAL_ENV_VARS,
     HELPER_FILES,
+    LANGUAGE_VARS,
     SERVER_INFO,
     TelemetryEventName,
-    LANGUAGE_VARS,
 } from "./constants";
 import { CPXWorkspace } from "./cpxWorkspace";
 import { DebugAdapterFactory } from "./debugger/debugAdapterFactory";
@@ -31,6 +31,7 @@ import { FileSelectionService } from "./service/fileSelectionService";
 import { MessagingService } from "./service/messagingService";
 import { PopupService } from "./service/PopupService";
 import { SetupService } from "./service/SetupService";
+import { WebviewService } from "./service/webviewService";
 import { SimulatorDebugConfigurationProvider } from "./simulatorDebugConfigurationProvider";
 import getPackageInfo from "./telemetry/getPackageInfo";
 import TelemetryAI from "./telemetry/telemetryAI";
@@ -40,7 +41,6 @@ import {
     WEBVIEW_MESSAGES,
     WEBVIEW_TYPES,
 } from "./view/constants";
-import { WebviewService } from "./service/webviewService";
 
 let telemetryAI: TelemetryAI;
 let pythonExecutablePath: string = GLOBAL_ENV_VARS.PYTHON;
@@ -215,7 +215,7 @@ export async function activate(context: vscode.ExtensionContext) {
                                 }
 
                                 break;
-
+                            case WEBVIEW_MESSAGES.GESTURE:
                             case WEBVIEW_MESSAGES.SENSOR_CHANGED:
                                 handleGestureTelemetry(message.text);
                                 console.log(`Sensor changed ${messageJson} \n`);

src/micropython/microbit/__model/accelerometer.py

@@ -123,8 +123,14 @@ def __add_current_gesture_to_gesture_lists(self):
             self.__gestures.append(self.__current_gesture)
             self.__prev_gestures.add(self.__current_gesture)
 
-    def __update(self, axis, accel):
+    def __update_motion(self, axis, accel):
         if accel is not None:
             previous_accel = self.__get_accel(axis)
             if accel != previous_accel:
                 self.__set_accel(axis, accel)
+
+    def __update_gesture(self, gesture):
+        if gesture is not None:
+            previous_gesture = self.__current_gesture
+            if previous_gesture != gesture:
+                self.__set_gesture(gesture)

src/micropython/microbit/__model/constants.py

@@ -165,3 +165,5 @@
 EXPECTED_INPUT_LIGHT = "light"
 
 EXPECTED_INPUT_TEMP = "temperature"
+
+EXPECTED_INPUT_GESTURE = "gesture"

src/micropython/microbit/__model/microbit_model.py

@@ -64,6 +64,7 @@ def update_state(self, new_state):
         self.__update_motion(new_state)
         self.__update_light(new_state)
         self.__update_temp(new_state)
+        self.__update_gesture(new_state)
 
     # helpers
     def __update_buttons(self, new_state):
@@ -75,7 +76,9 @@ def __update_buttons(self, new_state):
     def __update_motion(self, new_state):
         # set motion_x, motion_y, motion_z
         for name, direction in CONSTANTS.EXPECTED_INPUT_ACCEL.items():
-            self.accelerometer._Accelerometer__update(direction, new_state.get(name))
+            self.accelerometer._Accelerometer__update_motion(
+                direction, new_state.get(name)
+            )
 
     def __update_light(self, new_state):
         # set light level
@@ -90,6 +93,11 @@ def __update_temp(self, new_state):
             if new_temp != previous_temp:
                 self._MicrobitModel__set_temperature(new_temp)
 
+    def __update_gesture(self, new_state):
+        # set gesture
+        new_gesture = new_state.get(CONSTANTS.EXPECTED_INPUT_GESTURE)
+        self.accelerometer._Accelerometer__update_gesture(new_gesture)
+
     def __set_debug_mode(self, mode):
         self.display._Display__debug_mode = mode
 

src/view/components/Dropdown.tsx

@@ -2,59 +2,28 @@
 // Licensed under the MIT license.
 
 import * as React from "react";
-
-import { CONSTANTS } from "../constants";
 import "../styles/Dropdown.css";
 
 export interface IDropdownProps {
-    label: string;
-    textOptions: string[];
-    lastChosen: string;
-    styleLabel: string;
-    width: number;
-    onBlur: (event: React.FocusEvent<HTMLSelectElement>) => void;
+    options: string[];
+    // styleLabel: string;
+    onSelect?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 
-const Dropdown: React.FC<IDropdownProps> = props => {
-    const parsedPath = parsePath(props.lastChosen);
-    const defaultText =
-        props.lastChosen !== ""
-            ? CONSTANTS.CURRENTLY_RUNNING(parsedPath[1])
-            : CONSTANTS.FILES_PLACEHOLDER;
+export const Dropdown: React.FC<IDropdownProps> = props => {
     return (
-        <div>
-            <select
-                id={props.label}
-                className={props.styleLabel}
-                onBlur={props.onBlur}
-            >
-                <option value="" disabled selected>
-                    {defaultText}
-                </option>
-                {renderOptions(props.textOptions)}
-            </select>
-        </div>
+        <select className="dropdown" onChange={props.onSelect}>
+            {renderOptions(props.options)}
+        </select>
     );
 };
 
 const renderOptions = (options: string[]) => {
     return options.map((name, index) => {
-        const key = `option-${index}`;
-        const parsedPath = parsePath(name);
         return (
-            <option key={key} value={name}>
-                {`${parsedPath[1]} : ${parsedPath[0]}`}
+            <option key={name} value={name}>
+                {name}
             </option>
         );
     });
 };
-
-const parsePath = (filePath: string) => {
-    const lastSlash =
-        filePath.lastIndexOf("/") !== -1
-            ? filePath.lastIndexOf("/")
-            : filePath.lastIndexOf("\\");
-    return [filePath.slice(0, lastSlash), filePath.substr(lastSlash + 1)];
-};
-
-export default Dropdown;

src/view/components/microbit/Microbit.tsx

@@ -3,15 +3,22 @@
 
 import * as React from "react";
 import { MICROBIT_TOOLBAR_ID } from "../../components/toolbar/SensorModalUtils";
-import { SENSOR_LIST, VSCODE_MESSAGES_TO_WEBVIEW } from "../../constants";
+import {
+    GESTURES,
+    SENSOR_LIST,
+    VSCODE_MESSAGES_TO_WEBVIEW,
+    WEBVIEW_MESSAGES,
+} from "../../constants";
 import "../../styles/Simulator.css";
 import * as TOOLBAR_SVG from "../../svgs/toolbar_svg";
+import { sendMessage } from "../../utils/MessageUtils";
 import ToolBar from "../toolbar/ToolBar";
 import { MicrobitSimulator } from "./MicrobitSimulator";
 
 // Component grouping the functionality for micro:bit functionalities
 interface IState {
     sensors: { [key: string]: number };
+    currentSelectedGesture?: string;
 }
 const DEFAULT_STATE = {
     sensors: {
@@ -21,6 +28,7 @@ const DEFAULT_STATE = {
         [SENSOR_LIST.MOTION_Y]: 0,
         [SENSOR_LIST.MOTION_Z]: 0,
     },
+    currentSelectedGesture: GESTURES[0],
 };
 
 export class Microbit extends React.Component<{}, IState> {
@@ -51,13 +59,31 @@ export class Microbit extends React.Component<{}, IState> {
                     buttonList={MICROBIT_TOOLBAR_BUTTONS}
                     onUpdateSensor={this.updateSensor}
                     sensorValues={this.state.sensors}
+                    onSelectGesture={this.updateGesture}
+                    sendGesture={this.sendGesture}
                 />
             </React.Fragment>
         );
     }
     updateSensor = (sensor: SENSOR_LIST, value: number) => {
         this.setState({ sensors: { ...this.state.sensors, [sensor]: value } });
     };
+    updateGesture = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        this.setState({ currentSelectedGesture: event.target.value });
+    };
+    sendGesture = (isActive: boolean) => {
+        if (this.state.currentSelectedGesture) {
+            if (isActive) {
+                sendMessage(WEBVIEW_MESSAGES.GESTURE, {
+                    gesture: this.state.currentSelectedGesture,
+                });
+            } else {
+                sendMessage(WEBVIEW_MESSAGES.GESTURE, {
+                    gesture: "",
+                });
+            }
+        }
+    };
 }
 
 const MICROBIT_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [

src/view/components/microbit/MicrobitSimulator.tsx

@@ -29,6 +29,7 @@ interface IState {
     play_button: boolean;
     selected_file: string;
     microbit: IMicrobitState;
+    sendGesture?: (isActive: boolean) => void;
 }
 
 interface IMicrobitState {

src/view/components/toolbar/SensorButton.tsx

@@ -5,20 +5,35 @@ import * as React from "react";
 import "../../styles/SensorButton.css";
 import { ISensorButtonProps } from "../../viewUtils";
 
-const SensorButton: React.FC<ISensorButtonProps> = props => {
-    return (
-        <button
-            id={`${props.label}-button`}
-            onMouseUp={props.onMouseUp}
-            onMouseDown={props.onMouseDown}
-            onKeyUp={props.onKeyUp}
-            onKeyDown={props.onKeyDown}
-            aria-label={`${props.type} sensor button`}
-            className="sensor-button"
-        >
-            {props.label}
-        </button>
-    );
-};
+class SensorButton extends React.Component<ISensorButtonProps> {
+    private buttonRef: React.RefObject<HTMLButtonElement> = React.createRef();
+
+    public setButtonClass = (isActive: boolean) => {
+        if (isActive) {
+            this.buttonRef!.current!.setAttribute(
+                "class",
+                "sensor-button active-button"
+            );
+        } else {
+            this.buttonRef!.current!.setAttribute("class", "sensor-button");
+        }
+    };
+    render() {
+        return (
+            <button
+                id={`${this.props.label}-button`}
+                ref={this.buttonRef}
+                onMouseUp={this.props.onMouseUp}
+                onMouseDown={this.props.onMouseDown}
+                onKeyUp={this.props.onKeyUp}
+                onKeyDown={this.props.onKeyDown}
+                aria-label={`${this.props.type} sensor button`}
+                className="sensor-button"
+            >
+                {this.props.label}
+            </button>
+        );
+    }
+}
 
 export default SensorButton;

src/view/components/toolbar/SensorModalUtils.tsx

@@ -274,7 +274,9 @@ export const TEMPERATURE_MODAL_CONTENT = (
 
 export const ACCELEROMETER_MODAL_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
+    sensorValues: { [key: string]: number },
+    onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
+    sendGesture?: (isActive: boolean) => void
 ): IModalContent => {
     const accelerometerSensorValues = {
         X_AXIS: sensorValues[SENSOR_LIST.MOTION_X],
@@ -286,6 +288,8 @@ export const ACCELEROMETER_MODAL_CONTENT = (
             <Accelerometer
                 onUpdateValue={onUpdateValue}
                 axisValues={accelerometerSensorValues}
+                onSelectGestures={onSelectGestures}
+                onSendGesture={sendGesture}
             />
         ),
         descriptionText: "toolbar-accelerometer-sensor.description",
@@ -391,12 +395,22 @@ export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
 export const getModalContent = (
     label: string,
     onUpdateValue: (onUpdateValue: SENSOR_LIST, value: number) => void,
-    sensorValues: { [key: string]: number }
+    sensorValues: { [key: string]: number },
+    onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
+    sendGesture?: (isActive: boolean) => void
 ) => {
     const modalContentConstructor = LABEL_TO_MODAL_CONTENT_CONSTRUCTOR.get(
         label
     );
     if (modalContentConstructor) {
+        if (label === MICROBIT_TOOLBAR_ID.ACCELEROMETER) {
+            return ACCELEROMETER_MODAL_CONTENT(
+                onUpdateValue,
+                sensorValues,
+                onSelectGestures,
+                sendGesture
+            );
+        }
         return modalContentConstructor(onUpdateValue, sensorValues);
     } else {
         return;

src/view/components/toolbar/ToolBar.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
+import { initializeIcons } from "@uifabric/icons";
 import { Callout, TooltipHost } from "office-ui-fabric-react";
 import { IconButton } from "office-ui-fabric-react";
-import { initializeIcons } from "@uifabric/icons";
 import * as React from "react";
 import {
     FormattedMessage,
@@ -31,6 +31,8 @@ interface IProps extends WrappedComponentProps {
     }>;
     onUpdateSensor: (sensor: SENSOR_LIST, value: number) => void;
     sensorValues: { [key: string]: number };
+    onSelectGesture?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    sendGesture?: (isActive: boolean) => void;
 }
 
 class ToolBar extends React.Component<IProps, IToolbarState, any> {
@@ -152,7 +154,9 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
             !getModalContent(
                 this.state.currentOpenedId,
                 this.props.onUpdateSensor,
-                this.props.sensorValues
+                this.props.sensorValues,
+                this.props.onSelectGesture,
+                this.props.sendGesture
             )
         ) {
             return null;
@@ -161,7 +165,9 @@ class ToolBar extends React.Component<IProps, IToolbarState, any> {
         const content = getModalContent(
             this.state.currentOpenedId,
             this.props.onUpdateSensor,
-            this.props.sensorValues
+            this.props.sensorValues,
+            this.props.onSelectGesture,
+            this.props.sendGesture
         ) as IModalContent;
 
         const components = content

src/view/components/toolbar/Toolbar.spec.tsx

@@ -2,10 +2,10 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { IntlProvider } from "react-intl";
 import * as testRenderer from "react-test-renderer";
-import Toolbar from "./ToolBar";
+import { SENSOR_LIST } from "../../constants";
 import * as TOOLBAR_SVG from "../../svgs/toolbar_svg";
 import { MICROBIT_TOOLBAR_ID } from "./SensorModalUtils";
-import { SENSOR_LIST } from "../../constants";
+import Toolbar from "./ToolBar";
 
 const MOCK_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [
     {