diff --git a/src/view/components/cpx/Cpx.tsx b/src/view/components/cpx/Cpx.tsx index dd9f1db84..d91728fba 100644 --- a/src/view/components/cpx/Cpx.tsx +++ b/src/view/components/cpx/Cpx.tsx @@ -4,20 +4,56 @@ import * as React from "react"; import { CPX_TOOLBAR_ICON_ID } from "../../components/toolbar/SensorModalUtils"; import ToolBar from "../../components/toolbar/ToolBar"; +import { SENSOR_LIST, VSCODE_MESSAGES_TO_WEBVIEW } from "../../constants"; import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; import Simulator from "./CpxSimulator"; // Component grouping the functionality for circuit playground express +const DEFAULT_STATE = { + sensors: { + [SENSOR_LIST.TEMPERATURE]: 0, + [SENSOR_LIST.LIGHT]: 0, + [SENSOR_LIST.MOTION_X]: 0, + [SENSOR_LIST.MOTION_Y]: 0, + [SENSOR_LIST.MOTION_Z]: 0, + }, +}; export class Cpx extends React.Component { + state = DEFAULT_STATE; + componentDidMount() { + window.addEventListener("message", this.handleMessage); + } + + componentWillUnmount() { + // Make sure to remove the DOM listener when the component is unmounted. + window.removeEventListener("message", this.handleMessage); + } + handleMessage = (event: any): void => { + const message = event.data; + + switch (message.command) { + case VSCODE_MESSAGES_TO_WEBVIEW.RESET: + this.setState({ ...DEFAULT_STATE }); + break; + } + }; + render() { return ( - + ); } + updateSensor = (sensor: SENSOR_LIST, value: number) => { + this.setState({ sensors: { ...this.state.sensors, [sensor]: value } }); + }; } const CPX_TOOLBAR_BUTTONS: Array<{ label: any; image: any }> = [ diff --git a/src/view/components/microbit/Microbit.tsx b/src/view/components/microbit/Microbit.tsx index fb918df4b..03f11fed9 100644 --- a/src/view/components/microbit/Microbit.tsx +++ b/src/view/components/microbit/Microbit.tsx @@ -3,22 +3,61 @@ import * as React from "react"; import { MICROBIT_TOOLBAR_ID } from "../../components/toolbar/SensorModalUtils"; +import { SENSOR_LIST, VSCODE_MESSAGES_TO_WEBVIEW } from "../../constants"; import "../../styles/Simulator.css"; import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; import ToolBar from "../toolbar/ToolBar"; import { MicrobitSimulator } from "./MicrobitSimulator"; // Component grouping the functionality for micro:bit functionalities +interface IState { + sensors: { [key: string]: number }; +} +const DEFAULT_STATE = { + sensors: { + [SENSOR_LIST.TEMPERATURE]: 0, + [SENSOR_LIST.LIGHT]: 0, + [SENSOR_LIST.MOTION_X]: 0, + [SENSOR_LIST.MOTION_Y]: 0, + [SENSOR_LIST.MOTION_Z]: 0, + }, +}; + +export class Microbit extends React.Component<{}, IState> { + state = DEFAULT_STATE; + + componentDidMount() { + window.addEventListener("message", this.handleMessage); + } + + componentWillUnmount() { + // Make sure to remove the DOM listener when the component is unmounted. + window.removeEventListener("message", this.handleMessage); + } + handleMessage = (event: any): void => { + const message = event.data; -export class Microbit extends React.Component { + switch (message.command) { + case VSCODE_MESSAGES_TO_WEBVIEW.RESET: + this.setState({ ...DEFAULT_STATE }); + break; + } + }; render() { return ( - + ); } + updateSensor = (sensor: SENSOR_LIST, value: number) => { + this.setState({ sensors: { ...this.state.sensors, [sensor]: value } }); + }; } const MICROBIT_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [ diff --git a/src/view/components/toolbar/InputSlider.tsx b/src/view/components/toolbar/InputSlider.tsx index db917a845..800261095 100644 --- a/src/view/components/toolbar/InputSlider.tsx +++ b/src/view/components/toolbar/InputSlider.tsx @@ -2,7 +2,7 @@ // Licensed under the MIT license. import * as React from "react"; -import { VIEW_STATE, WEBVIEW_MESSAGES } from "../../constants"; +import { SENSOR_LIST, VIEW_STATE, WEBVIEW_MESSAGES } from "../../constants"; import { ViewStateContext } from "../../context"; import "../../styles/InputSlider.css"; import { sendMessage } from "../../utils/MessageUtils"; @@ -12,30 +12,13 @@ class InputSlider extends React.Component { constructor(props: ISliderProps) { super(props); this.state = { - value: 0, + value: this.props.value, }; this.handleOnChange = this.handleOnChange.bind(this); this.validateRange = this.validateRange.bind(this); } - handleMessage = (event: any): void => { - const message = event.data; // The JSON data our extension sent - switch (message.command) { - case "reset-state": - this.setState({ value: 0 }); - break; - } - }; - - componentDidMount() { - window.addEventListener("message", this.handleMessage); - } - - componentWillUnmount() { - // Make sure to remove the DOM listener when the component is unmounted. - window.removeEventListener("message", this.handleMessage); - } render() { const isInputDisabled = this.context === VIEW_STATE.PAUSE; return ( @@ -44,7 +27,7 @@ class InputSlider extends React.Component { { onKeyUp={this.sendTelemetry} onMouseUp={this.sendTelemetry} aria-valuenow={this.state.value} - value={this.state.value} + value={this.props.value} aria-label={`${this.props.type} sensor slider`} defaultValue={this.props.minValue.toLocaleString()} disabled={isInputDisabled} @@ -104,7 +87,9 @@ class InputSlider extends React.Component { const newValue = event.target.validity.valid ? event.target.value : this.state.value; - this.setState({ value: newValue }); + if (this.props.onUpdateValue) { + this.props.onUpdateValue(this.props.type as SENSOR_LIST, newValue); + } return newValue; }; diff --git a/src/view/components/toolbar/LightSensorBar.tsx b/src/view/components/toolbar/LightSensorBar.tsx index 3ecb69025..5d9d5df82 100644 --- a/src/view/components/toolbar/LightSensorBar.tsx +++ b/src/view/components/toolbar/LightSensorBar.tsx @@ -2,6 +2,7 @@ // Licensed under the MIT license. import * as React from "react"; +import { SENSOR_LIST } from "../../constants"; import "../../styles/LightSensorBar.css"; import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils"; import InputSlider from "./InputSlider"; @@ -20,8 +21,12 @@ const LIGHT_SENSOR_PROPERTIES: ISensorProps = { sliderProps: [LIGHT_SLIDER_PROPS], unitLabel: "Lux", }; +interface IProps { + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void; + value: number; +} -class LightSensorBar extends React.Component { +class LightSensorBar extends React.Component { constructor(props: any) { super(props); } @@ -53,6 +58,8 @@ class LightSensorBar extends React.Component { LIGHT_SENSOR_PROPERTIES.sliderProps[X_SLIDER_INDEX] .axisLabel } + onUpdateValue={this.props.onUpdateValue} + value={this.props.value} /> ); diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx index 052f6bee6..3806b44b6 100644 --- a/src/view/components/toolbar/SensorModalUtils.tsx +++ b/src/view/components/toolbar/SensorModalUtils.tsx @@ -1,6 +1,7 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. import * as React from "react"; +import { SENSOR_LIST } from "../../constants"; import { ARROW_RIGHT_SVG } from "../../svgs/arrow_right_svg"; import { TAG_INPUT_SVG } from "../../svgs/tag_input_svg"; import { TAG_OUTPUT_SVG } from "../../svgs/tag_output_svg"; @@ -77,137 +78,238 @@ export const DEFAULT_MODAL_CONTENT: IModalContent = { component: undefined, id: "none", }; -export const GPIO_MODAL_CONTENT: IModalContent = { - descriptionTitle: "toolbar-gpio.title", - tagInput: TAG_INPUT_SVG, - tagOutput: TAG_OUTPUT_SVG, - descriptionText: "toolbar-gpio.description", - tryItDescription: "toolbar-gpio.tryItDescription", - component: undefined, - id: "GPIO", + +export const GPIO_MODAL_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + descriptionTitle: "toolbar-gpio.title", + tagInput: TAG_INPUT_SVG, + tagOutput: TAG_OUTPUT_SVG, + descriptionText: "toolbar-gpio.description", + tryItDescription: "toolbar-gpio.tryItDescription", + component: undefined, + id: "GPIO", + }; }; -export const IR_MODAL_CONTENT: IModalContent = { - descriptionTitle: "toolbar-ir-sensor.title", - tagInput: TAG_INPUT_SVG, - tagOutput: TAG_OUTPUT_SVG, - descriptionText: "toolbar-ir-sensor.description", - tryItDescription: "toolbar-ir-sensor.tryItDescription", - component: TRY_IT_MAKE_CODE, - id: "IR", -}; -export const LIGHT_MODAL_CONTENT: IModalContent = { - descriptionTitle: "toolbar-light-sensor.title", - tagInput: TAG_INPUT_SVG, - tagOutput: undefined, - descriptionText: "toolbar-light-sensor.description", - tryItDescription: "toolbar-light-sensor.tryItDescription", - component: , - id: "light_sensor", -}; -export const MOTION_MODAL_CONTENT: IModalContent = { - descriptionTitle: "toolbar-motion-sensor.title", - tagInput: TAG_INPUT_SVG, - tagOutput: undefined, - descriptionText: "toolbar-motion-sensor.description", - tryItDescription: "toolbar-motion-sensor.tryItDescription", - component: , - id: "motion_sensor", +export const IR_MODAL_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + descriptionTitle: "toolbar-ir-sensor.title", + tagInput: TAG_INPUT_SVG, + tagOutput: TAG_OUTPUT_SVG, + descriptionText: "toolbar-ir-sensor.description", + tryItDescription: "toolbar-ir-sensor.tryItDescription", + component: TRY_IT_MAKE_CODE, + id: "IR", + }; }; -export const NEOP_MODAL_CONTENT: IModalContent = { - descriptionTitle: "toolbar-neo-pixels.title", - tagInput: undefined, - tagOutput: TAG_OUTPUT_SVG, - descriptionText: "toolbar-neo-pixels.description", - tryItDescription: "toolbar-neo-pixels.tryItDescription", - component: undefined, - id: "neon_pixel", +export const LIGHT_MODAL_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + descriptionTitle: "toolbar-light-sensor.title", + tagInput: TAG_INPUT_SVG, + tagOutput: undefined, + descriptionText: "toolbar-light-sensor.description", + tryItDescription: "toolbar-light-sensor.tryItDescription", + component: ( + + ), + id: "light_sensor", + }; }; -export const PUSHB_MODAL_CONTENT: IModalContent = { - descriptionTitle: "toolbar-push-button.title", - tagInput: TAG_INPUT_SVG, - tagOutput: undefined, - descriptionText: "toolbar-push-button.description", - tryItDescription: "toolbar-push-button.tryItDescription", - component: undefined, - id: "push_btn", +export const MOTION_MODAL_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + const motionSensorValues = { + X_AXIS: sensorValues[SENSOR_LIST.MOTION_X], + Y_AXIS: sensorValues[SENSOR_LIST.MOTION_Y], + Z_AXIS: sensorValues[SENSOR_LIST.MOTION_Z], + }; + return { + descriptionTitle: "toolbar-motion-sensor.title", + tagInput: TAG_INPUT_SVG, + tagOutput: undefined, + descriptionText: "toolbar-motion-sensor.description", + tryItDescription: "toolbar-motion-sensor.tryItDescription", + component: ( + + ), + id: "motion_sensor", + }; }; -export const RED_LED_MODAL_CONTENT: IModalContent = { - descriptionTitle: "toolbar-red-led.title", - tagInput: undefined, - tagOutput: TAG_OUTPUT_SVG, - descriptionText: "toolbar-red-led.description", - tryItDescription: "toolbar-red-led.tryItDescription", - component: undefined, - id: "red_LED", +export const NEOP_MODAL_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + descriptionTitle: "toolbar-neo-pixels.title", + tagInput: undefined, + tagOutput: TAG_OUTPUT_SVG, + descriptionText: "toolbar-neo-pixels.description", + tryItDescription: "toolbar-neo-pixels.tryItDescription", + component: undefined, + id: "neon_pixel", + }; }; -export const SOUND_MODAL_CONTENT: IModalContent = { - descriptionTitle: "toolbar-sound-sensor.title", - tagInput: TAG_INPUT_SVG, - tagOutput: undefined, - descriptionText: "toolbar-sound-sensor.description", - tryItDescription: "toolbar-sound-sensor.tryItDescription", - component: TRY_IT_MAKE_CODE, - id: "sound_sensor", -}; -export const SWITCH_MODAL_CONTENT: IModalContent = { - descriptionTitle: "toolbar-slider-switch.title", - tagInput: TAG_INPUT_SVG, - tagOutput: undefined, - descriptionText: "toolbar-slider-switch.description", - tryItDescription: "toolbar-slider-switch.tryItDescription", - component: undefined, - id: "slider_switch", +export const PUSHB_MODAL_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + descriptionTitle: "toolbar-push-button.title", + tagInput: TAG_INPUT_SVG, + tagOutput: undefined, + descriptionText: "toolbar-push-button.description", + tryItDescription: "toolbar-push-button.tryItDescription", + component: undefined, + id: "push_btn", + }; }; -export const SPEAKER_MODAL_CONTENT: IModalContent = { - descriptionTitle: "toolbar-speaker.title", - tagInput: undefined, - tagOutput: TAG_OUTPUT_SVG, - descriptionText: "toolbar-speaker.description", - tryItDescription: "toolbar-speaker.tryItDescription", - component: undefined, - id: "speaker", -}; -export const TEMPERATURE_MODAL_CONTENT: IModalContent = { - component: , - descriptionText: "toolbar-temperature-sensor.description", - descriptionTitle: "toolbar-temperature-sensor.title", - id: "temperature", - tagInput: TAG_INPUT_SVG, - tagOutput: undefined, - tryItDescription: "toolbar-temperature-sensor.tryItDescription", +export const RED_LED_MODAL_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + descriptionTitle: "toolbar-red-led.title", + tagInput: undefined, + tagOutput: TAG_OUTPUT_SVG, + descriptionText: "toolbar-red-led.description", + tryItDescription: "toolbar-red-led.tryItDescription", + component: undefined, + id: "red_LED", + }; +}; +export const SOUND_MODAL_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + descriptionTitle: "toolbar-sound-sensor.title", + tagInput: TAG_INPUT_SVG, + tagOutput: undefined, + descriptionText: "toolbar-sound-sensor.description", + tryItDescription: "toolbar-sound-sensor.tryItDescription", + component: TRY_IT_MAKE_CODE, + id: "sound_sensor", + }; +}; +export const SWITCH_MODAL_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + descriptionTitle: "toolbar-slider-switch.title", + tagInput: TAG_INPUT_SVG, + tagOutput: undefined, + descriptionText: "toolbar-slider-switch.description", + tryItDescription: "toolbar-slider-switch.tryItDescription", + component: undefined, + id: "slider_switch", + }; +}; +export const SPEAKER_MODAL_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + descriptionTitle: "toolbar-speaker.title", + tagInput: undefined, + tagOutput: TAG_OUTPUT_SVG, + descriptionText: "toolbar-speaker.description", + tryItDescription: "toolbar-speaker.tryItDescription", + component: undefined, + id: "speaker", + }; +}; +export const TEMPERATURE_MODAL_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + component: ( + + ), + descriptionText: "toolbar-temperature-sensor.description", + descriptionTitle: "toolbar-temperature-sensor.title", + id: "temperature", + tagInput: TAG_INPUT_SVG, + tagOutput: undefined, + tryItDescription: "toolbar-temperature-sensor.tryItDescription", + }; }; -export const ACCELEROMETER_MODAL_CONTENT: IModalContent = { - component: , - descriptionText: "toolbar-accelerometer-sensor.description", - descriptionTitle: "toolbar-accelerometer-sensor.title", - id: "accelerometer", - tagInput: TAG_INPUT_SVG, - tagOutput: undefined, - tryItDescription: "toolbar-accelerometer-sensor.tryItDescription", +export const ACCELEROMETER_MODAL_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + const accelerometerSensorValues = { + X_AXIS: sensorValues[SENSOR_LIST.MOTION_X], + Y_AXIS: sensorValues[SENSOR_LIST.MOTION_Y], + Z_AXIS: sensorValues[SENSOR_LIST.MOTION_Z], + }; + return { + component: ( + + ), + descriptionText: "toolbar-accelerometer-sensor.description", + descriptionTitle: "toolbar-accelerometer-sensor.title", + id: "accelerometer", + tagInput: TAG_INPUT_SVG, + tagOutput: undefined, + tryItDescription: "toolbar-accelerometer-sensor.tryItDescription", + }; }; -export const MICROBIT_LED_CONTENT: IModalContent = { - descriptionTitle: "toolbar-microbit-led.title", - tagInput: undefined, - tagOutput: TAG_OUTPUT_SVG, - descriptionText: "toolbar-microbit-led.description", - tryItDescription: "toolbar-microbit-led.tryItDescription", - component: undefined, - id: "microbit_LED", +export const MICROBIT_LED_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + descriptionTitle: "toolbar-microbit-led.title", + tagInput: undefined, + tagOutput: TAG_OUTPUT_SVG, + descriptionText: "toolbar-microbit-led.description", + tryItDescription: "toolbar-microbit-led.tryItDescription", + component: undefined, + id: "microbit_LED", + }; }; -export const MICROBIT_BUTTON_CONTENT: IModalContent = { - descriptionTitle: "toolbar-microbit-button.title", - tagInput: undefined, - tagOutput: TAG_INPUT_SVG, - descriptionText: "toolbar-microbit-button.description", - tryItDescription: "toolbar-microbit-button.tryItDescription", - component: undefined, - id: "microbit_button", +export const MICROBIT_BUTTON_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + descriptionTitle: "toolbar-microbit-button.title", + tagInput: undefined, + tagOutput: TAG_INPUT_SVG, + descriptionText: "toolbar-microbit-button.description", + tryItDescription: "toolbar-microbit-button.tryItDescription", + component: undefined, + id: "microbit_button", + }; }; -export const LABEL_TO_MODAL_CONTENT = new Map([ +export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([ [CPX_TOOLBAR_ICON_ID.GPIO, GPIO_MODAL_CONTENT], [CPX_TOOLBAR_ICON_ID.IR, IR_MODAL_CONTENT], [CPX_TOOLBAR_ICON_ID.LIGHT, LIGHT_MODAL_CONTENT], @@ -223,3 +325,18 @@ export const LABEL_TO_MODAL_CONTENT = new Map([ [MICROBIT_TOOLBAR_ID.LEDS, MICROBIT_LED_CONTENT], [MICROBIT_TOOLBAR_ID.PUSH_BUTTON, MICROBIT_BUTTON_CONTENT], ]); + +export const getModalContent = ( + label: string, + onUpdateValue: (onUpdateValue: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +) => { + const modalContentConstructor = LABEL_TO_MODAL_CONTENT_CONSTRUCTOR.get( + label + ); + if (modalContentConstructor) { + return modalContentConstructor(onUpdateValue, sensorValues); + } else { + return; + } +}; diff --git a/src/view/components/toolbar/TemperatureSensorBar.tsx b/src/view/components/toolbar/TemperatureSensorBar.tsx index 2c396494f..064c32b6e 100644 --- a/src/view/components/toolbar/TemperatureSensorBar.tsx +++ b/src/view/components/toolbar/TemperatureSensorBar.tsx @@ -2,6 +2,7 @@ // Licensed under the MIT license. import * as React from "react"; +import { SENSOR_LIST } from "../../constants"; import "../../styles/TemperatureSensorBar.css"; import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils"; import InputSlider from "./InputSlider"; @@ -12,15 +13,18 @@ const TEMPERATURE_SLIDER_PROPS: ISliderProps = { maxValue: 125, minLabel: "Cold", minValue: -55, - type: "temperature", + type: SENSOR_LIST.TEMPERATURE, }; const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = { LABEL: "Temperature sensor", sliderProps: [TEMPERATURE_SLIDER_PROPS], unitLabel: "°C", }; - -class TemperatureSensorBar extends React.Component { +interface IProps { + onUpdateSensor: (sensor: SENSOR_LIST, value: number) => void; + value: number; +} +class TemperatureSensorBar extends React.Component { constructor(props: any) { super(props); } @@ -59,6 +63,8 @@ class TemperatureSensorBar extends React.Component { X_SLIDER_INDEX ].axisLabel } + value={this.props.value} + onUpdateValue={this.props.onUpdateSensor} /> ); diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx index d529e57c9..c604cbc3b 100644 --- a/src/view/components/toolbar/ToolBar.tsx +++ b/src/view/components/toolbar/ToolBar.tsx @@ -7,12 +7,13 @@ import { injectIntl, WrappedComponentProps, } from "react-intl"; +import { SENSOR_LIST } from "../../constants"; import "../../styles/ToolBar.css"; import Button from "../Button"; import { DEFAULT_MODAL_CONTENT, + getModalContent, IModalContent, - LABEL_TO_MODAL_CONTENT, } from "./SensorModalUtils"; interface IToolbarState { @@ -25,6 +26,8 @@ interface IProps extends WrappedComponentProps { label: any; image: any; }>; + onUpdateSensor: (sensor: SENSOR_LIST, value: number) => void; + sensorValues: { [key: string]: number }; } class ToolBar extends React.Component { @@ -129,13 +132,19 @@ class ToolBar extends React.Component { private getIconModal() { if ( !this.state.showModal || - !LABEL_TO_MODAL_CONTENT.get(this.state.currentOpenedId) + !getModalContent( + this.state.currentOpenedId, + this.props.onUpdateSensor, + this.props.sensorValues + ) ) { return null; } - const content = LABEL_TO_MODAL_CONTENT.get( - this.state.currentOpenedId + const content = getModalContent( + this.state.currentOpenedId, + this.props.onUpdateSensor, + this.props.sensorValues ) as IModalContent; const component = content diff --git a/src/view/components/toolbar/motion/Accelerometer.tsx b/src/view/components/toolbar/motion/Accelerometer.tsx index 434688010..f57b7a6eb 100644 --- a/src/view/components/toolbar/motion/Accelerometer.tsx +++ b/src/view/components/toolbar/motion/Accelerometer.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import { SENSOR_LIST } from "../../../constants"; import { ISensorProps, ISliderProps } from "../../../viewUtils"; import { ThreeDimensionSlider } from "./threeDimensionSlider/ThreeDimensionSlider"; @@ -8,7 +9,7 @@ const MOTION_SLIDER_PROPS_X: ISliderProps = { maxValue: 1023, minLabel: "Left", minValue: -1023, - type: "motion_x", + type: SENSOR_LIST.MOTION_X, }; const MOTION_SLIDER_PROPS_Y: ISliderProps = { axisLabel: "Y", @@ -16,7 +17,7 @@ const MOTION_SLIDER_PROPS_Y: ISliderProps = { maxValue: 1023, minLabel: "Back", minValue: -1023, - type: "motion_y", + type: SENSOR_LIST.MOTION_Y, }; const MOTION_SLIDER_PROPS_Z: ISliderProps = { axisLabel: "Z", @@ -24,7 +25,7 @@ const MOTION_SLIDER_PROPS_Z: ISliderProps = { maxValue: 1023, minLabel: "Up", minValue: -1023, - type: "motion_z", + type: SENSOR_LIST.MOTION_Z, }; const MOTION_SENSOR_PROPERTIES: ISensorProps = { @@ -36,12 +37,24 @@ const MOTION_SENSOR_PROPERTIES: ISensorProps = { ], unitLabel: "Lux", }; -export const Accelerometer: React.FC<{}> = () => { +interface IProps { + axisValues: { + X_AXIS: number; + Y_AXIS: number; + Z_AXIS: number; + }; + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void; +} +export const Accelerometer: React.FC = (props: IProps) => { return (

{/* Implement Gestures Here */} - +
); }; diff --git a/src/view/components/toolbar/motion/MotionSensorBar.tsx b/src/view/components/toolbar/motion/MotionSensorBar.tsx index 08d959e12..a383e9eba 100644 --- a/src/view/components/toolbar/motion/MotionSensorBar.tsx +++ b/src/view/components/toolbar/motion/MotionSensorBar.tsx @@ -2,7 +2,7 @@ // Licensed under the MIT license. import * as React from "react"; -import { CONSTANTS, WEBVIEW_MESSAGES } from "../../../constants"; +import { CONSTANTS, SENSOR_LIST, WEBVIEW_MESSAGES } from "../../../constants"; import "../../../styles/MotionSensorBar.css"; import { sendMessage } from "../../../utils/MessageUtils"; import { ISensorProps, ISliderProps } from "../../../viewUtils"; @@ -16,7 +16,7 @@ const MOTION_SLIDER_PROPS_X: ISliderProps = { maxValue: 78, minLabel: "Left", minValue: -78, - type: "motion_x", + type: SENSOR_LIST.MOTION_X, }; const MOTION_SLIDER_PROPS_Y: ISliderProps = { axisLabel: "Y", @@ -24,7 +24,7 @@ const MOTION_SLIDER_PROPS_Y: ISliderProps = { maxValue: 78, minLabel: "Back", minValue: -78, - type: "motion_y", + type: SENSOR_LIST.MOTION_Y, }; const MOTION_SLIDER_PROPS_Z: ISliderProps = { axisLabel: "Z", @@ -32,7 +32,7 @@ const MOTION_SLIDER_PROPS_Z: ISliderProps = { maxValue: 78, minLabel: "Up", minValue: -78, - type: "motion_z", + type: SENSOR_LIST.MOTION_Z, }; const MOTION_SENSOR_PROPERTIES: ISensorProps = { @@ -44,8 +44,16 @@ const MOTION_SENSOR_PROPERTIES: ISensorProps = { ], unitLabel: "Lux", }; +interface IProps { + axisValues: { + X_AXIS: number; + Y_AXIS: number; + Z_AXIS: number; + }; + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void; +} -class MotionSensorBar extends React.Component { +class MotionSensorBar extends React.Component { constructor(props: any) { super(props); } @@ -64,6 +72,8 @@ class MotionSensorBar extends React.Component {

diff --git a/src/view/components/toolbar/motion/threeDimensionSlider/ThreeDimensionSlider.tsx b/src/view/components/toolbar/motion/threeDimensionSlider/ThreeDimensionSlider.tsx index 4ff3da796..9de3c0041 100644 --- a/src/view/components/toolbar/motion/threeDimensionSlider/ThreeDimensionSlider.tsx +++ b/src/view/components/toolbar/motion/threeDimensionSlider/ThreeDimensionSlider.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import { SENSOR_LIST } from "../../../../constants"; import { ISensorProps, X_SLIDER_INDEX, @@ -9,6 +10,12 @@ import InputSlider from "../../InputSlider"; interface IProps { axisProperties: ISensorProps; + axisValues: { + X_AXIS: number; + Y_AXIS: number; + Z_AXIS: number; + }; + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void; } export const ThreeDimensionSlider: React.FC = props => { return ( @@ -30,6 +37,8 @@ export const ThreeDimensionSlider: React.FC = props => { axisLabel={ props.axisProperties.sliderProps[X_SLIDER_INDEX].axisLabel } + onUpdateValue={props.onUpdateValue} + value={props.axisValues.X_AXIS} />
= props => { axisLabel={ props.axisProperties.sliderProps[Y_SLIDER_INDEX].axisLabel } + onUpdateValue={props.onUpdateValue} + value={props.axisValues.Y_AXIS} />
= props => { axisLabel={ props.axisProperties.sliderProps[Z_SLIDER_INDEX].axisLabel } + onUpdateValue={props.onUpdateValue} + value={props.axisValues.Z_AXIS} /> ); diff --git a/src/view/constants.ts b/src/view/constants.ts index 331d77be0..48471efff 100644 --- a/src/view/constants.ts +++ b/src/view/constants.ts @@ -70,14 +70,24 @@ export enum WEBVIEW_MESSAGES { SENSOR_CHANGED = "sensor-changed", SLIDER_TELEMETRY = "slider-telemetry", } + export enum VSCODE_MESSAGES_TO_WEBVIEW { SET_DEVICE = "set-device", PAUSE_DEVICE = "pause-device", RUN_DEVICE = "run-device", + RESET = "reset-state", } export enum DEBUG_COMMANDS { STACK_TRACE = "stackTrace", CONTINUE = "continue", } +export enum SENSOR_LIST { + TEMPERATURE = "temperature", + LIGHT = "light", + ACCELEROMETER = "accelerometer", + MOTION_X = "motion_x", + MOTION_Y = "motion_y", + MOTION_Z = "motion_z", +} export default CONSTANTS; diff --git a/src/view/viewUtils.tsx b/src/view/viewUtils.tsx index 7b6efed48..445b916b2 100644 --- a/src/view/viewUtils.tsx +++ b/src/view/viewUtils.tsx @@ -1,3 +1,5 @@ +import { SENSOR_LIST } from "./constants"; + // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. export interface ISliderProps { @@ -5,8 +7,10 @@ export interface ISliderProps { maxValue: number; maxLabel: string; minLabel: string; - type: string; + type: string | SENSOR_LIST; axisLabel: string; + value?: number; + onUpdateValue?: (sensor: SENSOR_LIST, value: number) => void; } export interface ISensorButtonProps { @@ -17,7 +21,6 @@ export interface ISensorButtonProps { onKeyUp: (event: React.KeyboardEvent) => void; onKeyDown: (event: React.KeyboardEvent) => void; } - export interface ISensorProps { LABEL: string; sliderProps: ISliderProps[];