From d3fb796077d1ce064752cbb3df24769dcd4f3593 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 24 Feb 2020 13:52:16 -0800 Subject: [PATCH 1/7] Keep the state for temperature sensor --- src/view/components/cpx/Cpx.tsx | 10 +- src/view/components/microbit/Microbit.tsx | 24 +- src/view/components/toolbar/InputSlider.tsx | 12 +- .../components/toolbar/SensorModalUtils.tsx | 324 +++++++++++------- .../toolbar/TemperatureSensorBar.tsx | 12 +- src/view/components/toolbar/ToolBar.tsx | 17 +- src/view/constants.ts | 5 + src/view/viewUtils.tsx | 7 +- 8 files changed, 278 insertions(+), 133 deletions(-) diff --git a/src/view/components/cpx/Cpx.tsx b/src/view/components/cpx/Cpx.tsx index dd9f1db84..05e3d0051 100644 --- a/src/view/components/cpx/Cpx.tsx +++ b/src/view/components/cpx/Cpx.tsx @@ -6,6 +6,7 @@ import { CPX_TOOLBAR_ICON_ID } from "../../components/toolbar/SensorModalUtils"; import ToolBar from "../../components/toolbar/ToolBar"; import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; import Simulator from "./CpxSimulator"; +import { SENSOR_LIST } from "../../constants"; // Component grouping the functionality for circuit playground express @@ -14,10 +15,17 @@ export class Cpx extends React.Component { return ( - + ); } + updateSensor = (sensor: SENSOR_LIST, value: number) => { + this.setState({ [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..a839af3f1 100644 --- a/src/view/components/microbit/Microbit.tsx +++ b/src/view/components/microbit/Microbit.tsx @@ -7,18 +7,38 @@ import "../../styles/Simulator.css"; import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; import ToolBar from "../toolbar/ToolBar"; import { MicrobitSimulator } from "./MicrobitSimulator"; +import { SENSOR_LIST } from "../../constants"; // Component grouping the functionality for micro:bit functionalities +interface IState { + sensors: { [key: string]: number }; +} -export class Microbit extends React.Component { +export class Microbit extends React.Component<{}, IState> { + state = { + sensors: { + [SENSOR_LIST.TEMPERATURE]: 0, + [SENSOR_LIST.LIGHT]: 0, + [SENSOR_LIST.ACCELEROMETER]: 0, + }, + }; render() { return ( - + ); } + updateSensor = (sensor: SENSOR_LIST, value: number) => { + console.log(value); + this.setState({ sensors: { ...this.state.sensors, [sensor]: value } }); + console.log(JSON.stringify(this.state.sensors)); + }; } 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..4e204cce9 100644 --- a/src/view/components/toolbar/InputSlider.tsx +++ b/src/view/components/toolbar/InputSlider.tsx @@ -12,7 +12,7 @@ class InputSlider extends React.Component { constructor(props: ISliderProps) { super(props); this.state = { - value: 0, + value: this.props.value, }; this.handleOnChange = this.handleOnChange.bind(this); @@ -44,7 +44,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 +104,11 @@ class InputSlider extends React.Component { const newValue = event.target.validity.valid ? event.target.value : this.state.value; - this.setState({ value: newValue }); + // this.setState({ value: newValue }); + if (this.props.onUpdateValue) { + console.log(this.props.type, newValue); + this.props.onUpdateValue(this.props.type as SENSOR_LIST, newValue); + } return newValue; }; diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx index 052f6bee6..42e306ac4 100644 --- a/src/view/components/toolbar/SensorModalUtils.tsx +++ b/src/view/components/toolbar/SensorModalUtils.tsx @@ -8,6 +8,7 @@ import LightSensorBar from "./LightSensorBar"; import { Accelerometer } from "./motion/Accelerometer"; import MotionSensorBar from "./motion/MotionSensorBar"; import TemperatureSensorBar from "./TemperatureSensorBar"; +import { SENSOR_LIST } from "../../constants"; export const TRY_IT_MAKE_CODE = (
@@ -77,137 +78,213 @@ 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 => { + 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 => { + 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 +300,16 @@ 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..40761c7dc 100644 --- a/src/view/components/toolbar/TemperatureSensorBar.tsx +++ b/src/view/components/toolbar/TemperatureSensorBar.tsx @@ -5,6 +5,7 @@ import * as React from "react"; import "../../styles/TemperatureSensorBar.css"; import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils"; import InputSlider from "./InputSlider"; +import { SENSOR_LIST } from "../../constants"; const TEMPERATURE_SLIDER_PROPS: ISliderProps = { axisLabel: " ", @@ -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..44577b0bd 100644 --- a/src/view/components/toolbar/ToolBar.tsx +++ b/src/view/components/toolbar/ToolBar.tsx @@ -12,8 +12,9 @@ import Button from "../Button"; import { DEFAULT_MODAL_CONTENT, IModalContent, - LABEL_TO_MODAL_CONTENT, + getModalContent, } from "./SensorModalUtils"; +import { SENSOR_LIST } from "../../constants"; interface IToolbarState { currentOpenedId: string; @@ -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/constants.ts b/src/view/constants.ts index 331d77be0..acec39e03 100644 --- a/src/view/constants.ts +++ b/src/view/constants.ts @@ -79,5 +79,10 @@ export enum DEBUG_COMMANDS { STACK_TRACE = "stackTrace", CONTINUE = "continue", } +export enum SENSOR_LIST { + TEMPERATURE = "temperature", + LIGHT = "light", + ACCELEROMETER = "accelerometer", +} 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[]; From 99b5d0de7e8b5a0d69f76958f89944013b325aea Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 24 Feb 2020 16:41:15 -0800 Subject: [PATCH 2/7] Manage state for sensors on both cpx and microbit --- src/view/components/cpx/Cpx.tsx | 13 ++++++-- src/view/components/microbit/Microbit.tsx | 4 ++- .../components/toolbar/LightSensorBar.tsx | 9 +++++- .../components/toolbar/SensorModalUtils.tsx | 31 +++++++++++++++++-- .../toolbar/motion/Accelerometer.tsx | 23 +++++++++++--- .../toolbar/motion/MotionSensorBar.tsx | 20 +++++++++--- .../ThreeDimensionSlider.tsx | 13 ++++++++ src/view/constants.ts | 3 ++ 8 files changed, 99 insertions(+), 17 deletions(-) diff --git a/src/view/components/cpx/Cpx.tsx b/src/view/components/cpx/Cpx.tsx index 05e3d0051..49fe49c4e 100644 --- a/src/view/components/cpx/Cpx.tsx +++ b/src/view/components/cpx/Cpx.tsx @@ -11,6 +11,15 @@ import { SENSOR_LIST } from "../../constants"; // Component grouping the functionality for circuit playground express export class Cpx extends React.Component { + 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, + }, + }; render() { return ( @@ -18,13 +27,13 @@ export class Cpx extends React.Component { ); } updateSensor = (sensor: SENSOR_LIST, value: number) => { - this.setState({ [sensor]: value }); + this.setState({ sensors: { ...this.state.sensors, [sensor]: value } }); }; } diff --git a/src/view/components/microbit/Microbit.tsx b/src/view/components/microbit/Microbit.tsx index a839af3f1..31c795f4d 100644 --- a/src/view/components/microbit/Microbit.tsx +++ b/src/view/components/microbit/Microbit.tsx @@ -19,7 +19,9 @@ export class Microbit extends React.Component<{}, IState> { sensors: { [SENSOR_LIST.TEMPERATURE]: 0, [SENSOR_LIST.LIGHT]: 0, - [SENSOR_LIST.ACCELEROMETER]: 0, + [SENSOR_LIST.MOTION_X]: 0, + [SENSOR_LIST.MOTION_Y]: 0, + [SENSOR_LIST.MOTION_Z]: 0, }, }; render() { diff --git a/src/view/components/toolbar/LightSensorBar.tsx b/src/view/components/toolbar/LightSensorBar.tsx index 3ecb69025..888984fc2 100644 --- a/src/view/components/toolbar/LightSensorBar.tsx +++ b/src/view/components/toolbar/LightSensorBar.tsx @@ -5,6 +5,7 @@ import * as React from "react"; import "../../styles/LightSensorBar.css"; import { ISensorProps, ISliderProps, X_SLIDER_INDEX } from "../../viewUtils"; import InputSlider from "./InputSlider"; +import { SENSOR_LIST } from "../../constants"; const LIGHT_SLIDER_PROPS: ISliderProps = { maxValue: 255, @@ -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 42e306ac4..05a863ffc 100644 --- a/src/view/components/toolbar/SensorModalUtils.tsx +++ b/src/view/components/toolbar/SensorModalUtils.tsx @@ -118,7 +118,12 @@ export const LIGHT_MODAL_CONTENT = ( tagOutput: undefined, descriptionText: "toolbar-light-sensor.description", tryItDescription: "toolbar-light-sensor.tryItDescription", - component: , + component: ( + + ), id: "light_sensor", }; }; @@ -126,13 +131,23 @@ 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: , + component: ( + + ), id: "motion_sensor", }; }; @@ -244,8 +259,18 @@ 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: , + component: ( + + ), descriptionText: "toolbar-accelerometer-sensor.description", descriptionTitle: "toolbar-accelerometer-sensor.title", id: "accelerometer", diff --git a/src/view/components/toolbar/motion/Accelerometer.tsx b/src/view/components/toolbar/motion/Accelerometer.tsx index 434688010..9ccd03879 100644 --- a/src/view/components/toolbar/motion/Accelerometer.tsx +++ b/src/view/components/toolbar/motion/Accelerometer.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import { ISensorProps, ISliderProps } from "../../../viewUtils"; import { ThreeDimensionSlider } from "./threeDimensionSlider/ThreeDimensionSlider"; +import { SENSOR_LIST } from "../../../constants"; const MOTION_SLIDER_PROPS_X: ISliderProps = { axisLabel: "X", @@ -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..7f4a8dd7f 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, WEBVIEW_MESSAGES, SENSOR_LIST } 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..838fde616 100644 --- a/src/view/components/toolbar/motion/threeDimensionSlider/ThreeDimensionSlider.tsx +++ b/src/view/components/toolbar/motion/threeDimensionSlider/ThreeDimensionSlider.tsx @@ -6,9 +6,16 @@ import { Z_SLIDER_INDEX, } from "../../../../viewUtils"; import InputSlider from "../../InputSlider"; +import { SENSOR_LIST } from "../../../../constants"; 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 acec39e03..dbb58f7fa 100644 --- a/src/view/constants.ts +++ b/src/view/constants.ts @@ -83,6 +83,9 @@ 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; From 83901da304ff8d77273de993dd875f0844ad8348 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 24 Feb 2020 17:27:20 -0800 Subject: [PATCH 3/7] Reset sensor on reset-state message --- src/view/components/cpx/Cpx.tsx | 41 ++++++++++++++++----- src/view/components/microbit/Microbit.tsx | 39 ++++++++++++++------ src/view/components/toolbar/InputSlider.tsx | 17 --------- src/view/constants.ts | 2 + 4 files changed, 62 insertions(+), 37 deletions(-) diff --git a/src/view/components/cpx/Cpx.tsx b/src/view/components/cpx/Cpx.tsx index 49fe49c4e..093344168 100644 --- a/src/view/components/cpx/Cpx.tsx +++ b/src/view/components/cpx/Cpx.tsx @@ -6,20 +6,43 @@ import { CPX_TOOLBAR_ICON_ID } from "../../components/toolbar/SensorModalUtils"; import ToolBar from "../../components/toolbar/ToolBar"; import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; import Simulator from "./CpxSimulator"; -import { SENSOR_LIST } from "../../constants"; +import { + SENSOR_LIST, + WEBVIEW_MESSAGES, + VSCODE_MESSAGES_TO_WEBVIEW, +} from "../../constants"; // 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 = { - sensors: { - [SENSOR_LIST.TEMPERATURE]: 0, - [SENSOR_LIST.LIGHT]: 0, - [SENSOR_LIST.MOTION_X]: 0, - [SENSOR_LIST.MOTION_Y]: 0, - [SENSOR_LIST.MOTION_Z]: 0, - }, + 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 ( diff --git a/src/view/components/microbit/Microbit.tsx b/src/view/components/microbit/Microbit.tsx index 31c795f4d..af228f9b4 100644 --- a/src/view/components/microbit/Microbit.tsx +++ b/src/view/components/microbit/Microbit.tsx @@ -7,22 +7,41 @@ import "../../styles/Simulator.css"; import * as TOOLBAR_SVG from "../../svgs/toolbar_svg"; import ToolBar from "../toolbar/ToolBar"; import { MicrobitSimulator } from "./MicrobitSimulator"; -import { SENSOR_LIST } from "../../constants"; +import { SENSOR_LIST, VSCODE_MESSAGES_TO_WEBVIEW } from "../../constants"; // 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 = { - sensors: { - [SENSOR_LIST.TEMPERATURE]: 0, - [SENSOR_LIST.LIGHT]: 0, - [SENSOR_LIST.MOTION_X]: 0, - [SENSOR_LIST.MOTION_Y]: 0, - [SENSOR_LIST.MOTION_Z]: 0, - }, + 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 ( @@ -37,9 +56,7 @@ export class Microbit extends React.Component<{}, IState> { ); } updateSensor = (sensor: SENSOR_LIST, value: number) => { - console.log(value); this.setState({ sensors: { ...this.state.sensors, [sensor]: value } }); - console.log(JSON.stringify(this.state.sensors)); }; } diff --git a/src/view/components/toolbar/InputSlider.tsx b/src/view/components/toolbar/InputSlider.tsx index 4e204cce9..c7da9e11a 100644 --- a/src/view/components/toolbar/InputSlider.tsx +++ b/src/view/components/toolbar/InputSlider.tsx @@ -19,23 +19,6 @@ class InputSlider extends React.Component { 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 ( diff --git a/src/view/constants.ts b/src/view/constants.ts index dbb58f7fa..48471efff 100644 --- a/src/view/constants.ts +++ b/src/view/constants.ts @@ -70,10 +70,12 @@ 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", From a987e9d26d5d702b49464fe5a20a1f50f6b7ea65 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Tue, 25 Feb 2020 08:20:47 -0800 Subject: [PATCH 4/7] Lint files --- src/view/components/cpx/Cpx.tsx | 6 +----- src/view/components/microbit/Microbit.tsx | 2 +- src/view/components/toolbar/LightSensorBar.tsx | 2 +- src/view/components/toolbar/SensorModalUtils.tsx | 4 ++-- src/view/components/toolbar/TemperatureSensorBar.tsx | 2 +- src/view/components/toolbar/ToolBar.tsx | 4 ++-- src/view/components/toolbar/motion/Accelerometer.tsx | 2 +- src/view/components/toolbar/motion/MotionSensorBar.tsx | 2 +- .../motion/threeDimensionSlider/ThreeDimensionSlider.tsx | 2 +- 9 files changed, 11 insertions(+), 15 deletions(-) diff --git a/src/view/components/cpx/Cpx.tsx b/src/view/components/cpx/Cpx.tsx index 093344168..d91728fba 100644 --- a/src/view/components/cpx/Cpx.tsx +++ b/src/view/components/cpx/Cpx.tsx @@ -4,13 +4,9 @@ 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"; -import { - SENSOR_LIST, - WEBVIEW_MESSAGES, - VSCODE_MESSAGES_TO_WEBVIEW, -} from "../../constants"; // Component grouping the functionality for circuit playground express const DEFAULT_STATE = { diff --git a/src/view/components/microbit/Microbit.tsx b/src/view/components/microbit/Microbit.tsx index af228f9b4..03f11fed9 100644 --- a/src/view/components/microbit/Microbit.tsx +++ b/src/view/components/microbit/Microbit.tsx @@ -3,11 +3,11 @@ 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"; -import { SENSOR_LIST, VSCODE_MESSAGES_TO_WEBVIEW } from "../../constants"; // Component grouping the functionality for micro:bit functionalities interface IState { diff --git a/src/view/components/toolbar/LightSensorBar.tsx b/src/view/components/toolbar/LightSensorBar.tsx index 888984fc2..5d9d5df82 100644 --- a/src/view/components/toolbar/LightSensorBar.tsx +++ b/src/view/components/toolbar/LightSensorBar.tsx @@ -2,10 +2,10 @@ // 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"; -import { SENSOR_LIST } from "../../constants"; const LIGHT_SLIDER_PROPS: ISliderProps = { maxValue: 255, diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx index 05a863ffc..833262d52 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"; @@ -8,7 +9,6 @@ import LightSensorBar from "./LightSensorBar"; import { Accelerometer } from "./motion/Accelerometer"; import MotionSensorBar from "./motion/MotionSensorBar"; import TemperatureSensorBar from "./TemperatureSensorBar"; -import { SENSOR_LIST } from "../../constants"; export const TRY_IT_MAKE_CODE = (
@@ -336,5 +336,5 @@ export const getModalContent = ( ); if (modalContentConstructor) { return modalContentConstructor(onUpdateValue, sensorValues); - } else return; + } else { return; } }; diff --git a/src/view/components/toolbar/TemperatureSensorBar.tsx b/src/view/components/toolbar/TemperatureSensorBar.tsx index 40761c7dc..064c32b6e 100644 --- a/src/view/components/toolbar/TemperatureSensorBar.tsx +++ b/src/view/components/toolbar/TemperatureSensorBar.tsx @@ -2,10 +2,10 @@ // 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"; -import { SENSOR_LIST } from "../../constants"; const TEMPERATURE_SLIDER_PROPS: ISliderProps = { axisLabel: " ", diff --git a/src/view/components/toolbar/ToolBar.tsx b/src/view/components/toolbar/ToolBar.tsx index 44577b0bd..c604cbc3b 100644 --- a/src/view/components/toolbar/ToolBar.tsx +++ b/src/view/components/toolbar/ToolBar.tsx @@ -7,14 +7,14 @@ import { injectIntl, WrappedComponentProps, } from "react-intl"; +import { SENSOR_LIST } from "../../constants"; import "../../styles/ToolBar.css"; import Button from "../Button"; import { DEFAULT_MODAL_CONTENT, - IModalContent, getModalContent, + IModalContent, } from "./SensorModalUtils"; -import { SENSOR_LIST } from "../../constants"; interface IToolbarState { currentOpenedId: string; diff --git a/src/view/components/toolbar/motion/Accelerometer.tsx b/src/view/components/toolbar/motion/Accelerometer.tsx index 9ccd03879..f57b7a6eb 100644 --- a/src/view/components/toolbar/motion/Accelerometer.tsx +++ b/src/view/components/toolbar/motion/Accelerometer.tsx @@ -1,7 +1,7 @@ import * as React from "react"; +import { SENSOR_LIST } from "../../../constants"; import { ISensorProps, ISliderProps } from "../../../viewUtils"; import { ThreeDimensionSlider } from "./threeDimensionSlider/ThreeDimensionSlider"; -import { SENSOR_LIST } from "../../../constants"; const MOTION_SLIDER_PROPS_X: ISliderProps = { axisLabel: "X", diff --git a/src/view/components/toolbar/motion/MotionSensorBar.tsx b/src/view/components/toolbar/motion/MotionSensorBar.tsx index 7f4a8dd7f..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, SENSOR_LIST } from "../../../constants"; +import { CONSTANTS, SENSOR_LIST, WEBVIEW_MESSAGES } from "../../../constants"; import "../../../styles/MotionSensorBar.css"; import { sendMessage } from "../../../utils/MessageUtils"; import { ISensorProps, ISliderProps } from "../../../viewUtils"; diff --git a/src/view/components/toolbar/motion/threeDimensionSlider/ThreeDimensionSlider.tsx b/src/view/components/toolbar/motion/threeDimensionSlider/ThreeDimensionSlider.tsx index 838fde616..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, @@ -6,7 +7,6 @@ import { Z_SLIDER_INDEX, } from "../../../../viewUtils"; import InputSlider from "../../InputSlider"; -import { SENSOR_LIST } from "../../../../constants"; interface IProps { axisProperties: ISensorProps; From adc5749c4697bbda0341e9860af90451380daca8 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Tue, 25 Feb 2020 09:04:00 -0800 Subject: [PATCH 5/7] Format files --- src/view/components/toolbar/SensorModalUtils.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx index 833262d52..3806b44b6 100644 --- a/src/view/components/toolbar/SensorModalUtils.tsx +++ b/src/view/components/toolbar/SensorModalUtils.tsx @@ -336,5 +336,7 @@ export const getModalContent = ( ); if (modalContentConstructor) { return modalContentConstructor(onUpdateValue, sensorValues); - } else { return; } + } else { + return; + } }; From fef3c916756cf40123f36157377b0506acd9d9a1 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Wed, 26 Feb 2020 10:50:19 -0800 Subject: [PATCH 6/7] Add missing import for typing --- src/view/components/toolbar/InputSlider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/view/components/toolbar/InputSlider.tsx b/src/view/components/toolbar/InputSlider.tsx index c7da9e11a..27e656b50 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"; From 732e5447bbee16e06584b105031497a58a41e450 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Wed, 26 Feb 2020 11:05:24 -0800 Subject: [PATCH 7/7] Remove a comment and console.log --- src/view/components/toolbar/InputSlider.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/view/components/toolbar/InputSlider.tsx b/src/view/components/toolbar/InputSlider.tsx index 27e656b50..800261095 100644 --- a/src/view/components/toolbar/InputSlider.tsx +++ b/src/view/components/toolbar/InputSlider.tsx @@ -87,9 +87,7 @@ 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) { - console.log(this.props.type, newValue); this.props.onUpdateValue(this.props.type as SENSOR_LIST, newValue); } return newValue;