From acacf3a64e1626c1524a9b388c15ad4736bf76c2 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Sun, 12 Apr 2020 11:33:31 -0700 Subject: [PATCH 1/6] Modify CSS for slider area --- src/view/components/toolbar/GenericSliderComponent.tsx | 2 +- src/view/components/toolbar/InputSlider.tsx | 4 ++-- src/view/styles/ToolBar.css | 6 ++++++ 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/view/components/toolbar/GenericSliderComponent.tsx b/src/view/components/toolbar/GenericSliderComponent.tsx index 0f7e24b92..48e2ec091 100644 --- a/src/view/components/toolbar/GenericSliderComponent.tsx +++ b/src/view/components/toolbar/GenericSliderComponent.tsx @@ -13,7 +13,7 @@ interface IProps { } export const GenericSliderComponent: React.FC = props => { return ( -
+
{props.axisProperties.sliderProps.map( (sliderProperties: ISliderProps, index: number) => { return ( diff --git a/src/view/components/toolbar/InputSlider.tsx b/src/view/components/toolbar/InputSlider.tsx index 1e293ebaa..d0c6ea62e 100644 --- a/src/view/components/toolbar/InputSlider.tsx +++ b/src/view/components/toolbar/InputSlider.tsx @@ -22,7 +22,7 @@ class InputSlider extends React.Component { render() { const isInputDisabled = this.context === VIEW_STATE.PAUSE; return ( -
+
{this.props.axisLabel} { defaultValue={this.props.minValue.toLocaleString()} pattern={`^-?[0-9]{0,${ this.props.maxValue.toString().length - }}$`} + }}$`} onKeyUp={this.handleOnChange} aria-label={`${this.props.type} sensor input ${this.props.axisLabel}`} /> diff --git a/src/view/styles/ToolBar.css b/src/view/styles/ToolBar.css index ef35688a9..5c4d300db 100644 --- a/src/view/styles/ToolBar.css +++ b/src/view/styles/ToolBar.css @@ -167,10 +167,16 @@ -webkit-appearance: none; text-decoration: none; } + .gesture-container { display: "flex"; justify-content: "space-between"; flex-direction: "column"; align-items: "center"; height: 750; + padding-top:10px; } + +.generic-slider-component{ + padding-top:10px; +} \ No newline at end of file From d784817c05c227b341c12df8c6d0d48b056cf348 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Sun, 12 Apr 2020 13:18:09 -0700 Subject: [PATCH 2/6] Use generic slider to remove accelerometer --- .../components/toolbar/SensorModalUtils.tsx | 3 +- .../toolbar/clue/ClueModalContent.tsx | 8 +- .../toolbar/clue/ClueSensorProperties.tsx | 36 +++ .../toolbar/microbit/MicrobitModalContent.tsx | 53 ++++- .../microbit/MicrobitSensorProperties.tsx | 70 ++++++ .../toolbar/motion/Accelerometer.spec.tsx | 44 ---- .../toolbar/motion/Accelerometer.tsx | 65 ------ .../__snapshots__/Accelerometer.spec.tsx.snap | 210 ------------------ 8 files changed, 163 insertions(+), 326 deletions(-) create mode 100644 src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx delete mode 100644 src/view/components/toolbar/motion/Accelerometer.spec.tsx delete mode 100644 src/view/components/toolbar/motion/Accelerometer.tsx delete mode 100644 src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx index b49979fa9..0ae8ff139 100644 --- a/src/view/components/toolbar/SensorModalUtils.tsx +++ b/src/view/components/toolbar/SensorModalUtils.tsx @@ -66,7 +66,7 @@ export const CPX_TOOLBAR_ICON_ID = { export const MICROBIT_TOOLBAR_ICON_ID = { TEMPERATURE: "toolbar-temperature-sensor", - LIGHT: "toolbar-light-sensor", + LIGHT: "toolbar-microbit-light-sensor", ACCELEROMETER: "toolbar-accelerometer-sensor", LEDS: "toolbar-microbit-led", PUSH_BUTTON: "toolbar-microbit-a-b-push", @@ -309,6 +309,7 @@ export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([ MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER, MICROBIT_MODAL.ACCELEROMETER_CONTENT, ], + [MICROBIT_TOOLBAR_ICON_ID.LIGHT, MICROBIT_MODAL.LIGHT_CONTENT], [MICROBIT_TOOLBAR_ICON_ID.COMPASS, MICROBIT_MODAL.COMPASS_CONTENT], [MICROBIT_TOOLBAR_ICON_ID.LEDS, MICROBIT_MODAL.LED_CONTENT], [MICROBIT_TOOLBAR_ICON_ID.PUSH_BUTTON, MICROBIT_MODAL.BUTTON_CONTENT], diff --git a/src/view/components/toolbar/clue/ClueModalContent.tsx b/src/view/components/toolbar/clue/ClueModalContent.tsx index d18aaa862..97eb1a5ab 100644 --- a/src/view/components/toolbar/clue/ClueModalContent.tsx +++ b/src/view/components/toolbar/clue/ClueModalContent.tsx @@ -3,7 +3,6 @@ import { GESTURES_CLUE, SENSOR_LIST } from "../../../constants"; import { TAG_INPUT_SVG } from "../../../svgs/tag_input_svg"; import { TAG_OUTPUT_SVG } from "../../../svgs/tag_output_svg"; import { GenericSliderComponent } from "../GenericSliderComponent"; -import { Accelerometer } from "../motion/Accelerometer"; import { Gesture } from "../motion/Gesture"; import { FEATURE_REQUEST_ON_GITHUB, IModalContent } from "../SensorModalUtils"; import TemperatureSensorBar from "../TemperatureSensorBar"; @@ -55,9 +54,10 @@ export const ACCELEROMETER_CONTENT = ( }; return { components: ( - ), descriptionText: "toolbar-clue-accelerometer-sensor.description", @@ -123,7 +123,7 @@ export const LIGHT_CONTENT = ( onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, sensorValues: { [key: string]: number } ): IModalContent => { - const accelerometerSensorValues = { + const lightSensorValues = { R: sensorValues[SENSOR_LIST.LIGHT_R], G: sensorValues[SENSOR_LIST.LIGHT_G], B: sensorValues[SENSOR_LIST.LIGHT_B], @@ -133,7 +133,7 @@ export const LIGHT_CONTENT = ( components: ( ), diff --git a/src/view/components/toolbar/clue/ClueSensorProperties.tsx b/src/view/components/toolbar/clue/ClueSensorProperties.tsx index 77b1109cb..1456cfa1f 100644 --- a/src/view/components/toolbar/clue/ClueSensorProperties.tsx +++ b/src/view/components/toolbar/clue/ClueSensorProperties.tsx @@ -146,3 +146,39 @@ export const CLUE_PRESSURE_PROPERTIES: ISensorProps = { ], unitLabel: "hPa", }; +const MOTION_SLIDER_PROPS_X: ISliderProps = { + axisLabel: "X", + maxLabel: "Right", + maxValue: 1023, + minLabel: "Left", + minValue: -1023, + type: SENSOR_LIST.MOTION_X, +}; + +const MOTION_SLIDER_PROPS_Y: ISliderProps = { + axisLabel: "Y", + maxLabel: "Front", + maxValue: 1023, + minLabel: "Back", + minValue: -1023, + type: SENSOR_LIST.MOTION_Y, +}; + +const MOTION_SLIDER_PROPS_Z: ISliderProps = { + axisLabel: "Z", + maxLabel: "Down", + maxValue: 1023, + minLabel: "Up", + minValue: -1023, + type: SENSOR_LIST.MOTION_Z, +}; + +export const MOTION_SENSOR_PROPERTIES: ISensorProps = { + LABEL: "Motion sensor", + sliderProps: [ + MOTION_SLIDER_PROPS_X, + MOTION_SLIDER_PROPS_Y, + MOTION_SLIDER_PROPS_Z, + ], + unitLabel: "m/s2", +}; \ No newline at end of file diff --git a/src/view/components/toolbar/microbit/MicrobitModalContent.tsx b/src/view/components/toolbar/microbit/MicrobitModalContent.tsx index 9eb4fd8a3..2aedaea17 100644 --- a/src/view/components/toolbar/microbit/MicrobitModalContent.tsx +++ b/src/view/components/toolbar/microbit/MicrobitModalContent.tsx @@ -2,9 +2,10 @@ import * as React from "react"; import { GESTURES_MICROBIT, SENSOR_LIST } from "../../../constants"; import { TAG_INPUT_SVG } from "../../../svgs/tag_input_svg"; import { TAG_OUTPUT_SVG } from "../../../svgs/tag_output_svg"; -import { Accelerometer } from "../motion/Accelerometer"; import { Gesture } from "../motion/Gesture"; import { FEATURE_REQUEST_ON_GITHUB, IModalContent } from "../SensorModalUtils"; +import { GenericSliderComponent } from "../GenericSliderComponent"; +import * as SENSOR_PROPERTIES from './MicrobitSensorProperties' export const ACCELEROMETER_CONTENT = ( onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, @@ -18,9 +19,10 @@ export const ACCELEROMETER_CONTENT = ( }; return { components: ( - ), descriptionText: "toolbar-accelerometer-sensor.description", @@ -136,3 +138,50 @@ export const GESTURE_CONTENT = ( id: "gesture_sensor", }; }; +export const LIGHT_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + const lightSensorValues = { + L: sensorValues[SENSOR_LIST.LIGHT] + } + return { + descriptionTitle: "toolbar-light-sensor.title", + tagInput: TAG_INPUT_SVG, + tagOutput: undefined, + descriptionText: "toolbar-light-sensor.description", + tryItDescription: "toolbar-light-sensor.tryItDescription", + components: [ + , + ], + id: "light_sensor", + }; +}; + +export const TEMPERATURE_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + const temperatureSensorValues = { + T: sensorValues[SENSOR_LIST.TEMPERATURE] + } + return { + components: [ + , + ], + descriptionText: "toolbar-temperature-sensor.description", + descriptionTitle: "toolbar-temperature-sensor.title", + id: "temperature", + tagInput: TAG_INPUT_SVG, + tagOutput: undefined, + tryItDescription: "toolbar-temperature-sensor.tryItDescription", + }; +}; diff --git a/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx b/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx new file mode 100644 index 000000000..b711cabba --- /dev/null +++ b/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx @@ -0,0 +1,70 @@ +import { ISliderProps, ISensorProps } from "../../../viewUtils"; +import { SENSOR_LIST } from "../../../constants"; + +const LIGHT_SLIDER_PROPS: ISliderProps = { + maxValue: 255, + minValue: 0, + minLabel: "Dark", + maxLabel: "Bright", + type: "light", + axisLabel: "L", +}; + + +export const LIGHT_SENSOR_PROPERTIES: ISensorProps = { + LABEL: "Light sensor", + sliderProps: [LIGHT_SLIDER_PROPS], + unitLabel: "Lux", +}; + +const MOTION_SLIDER_PROPS_X: ISliderProps = { + axisLabel: "X", + maxLabel: "Right", + maxValue: 1023, + minLabel: "Left", + minValue: -1023, + type: SENSOR_LIST.MOTION_X, +}; + +const MOTION_SLIDER_PROPS_Y: ISliderProps = { + axisLabel: "Y", + maxLabel: "Front", + maxValue: 1023, + minLabel: "Back", + minValue: -1023, + type: SENSOR_LIST.MOTION_Y, +}; + +const MOTION_SLIDER_PROPS_Z: ISliderProps = { + axisLabel: "Z", + maxLabel: "Down", + maxValue: 1023, + minLabel: "Up", + minValue: -1023, + type: SENSOR_LIST.MOTION_Z, +}; + +export const MOTION_SENSOR_PROPERTIES: ISensorProps = { + LABEL: "Motion sensor", + sliderProps: [ + MOTION_SLIDER_PROPS_X, + MOTION_SLIDER_PROPS_Y, + MOTION_SLIDER_PROPS_Z, + ], + unitLabel: "m/s2", +}; + +const TEMPERATURE_SLIDER_PROPS: ISliderProps = { + axisLabel: " ", + maxLabel: "Hot", + maxValue: 125, + minLabel: "Cold", + minValue: -55, + type: SENSOR_LIST.TEMPERATURE, +}; + +export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = { + LABEL: "Temperature sensor", + sliderProps: [TEMPERATURE_SLIDER_PROPS], + unitLabel: "°C", +}; \ No newline at end of file diff --git a/src/view/components/toolbar/motion/Accelerometer.spec.tsx b/src/view/components/toolbar/motion/Accelerometer.spec.tsx deleted file mode 100644 index 548e496ff..000000000 --- a/src/view/components/toolbar/motion/Accelerometer.spec.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from "react"; -import * as ReactDOM from "react-dom"; -import { IntlProvider } from "react-intl"; -import * as testRenderer from "react-test-renderer"; -import { Accelerometer } from "./Accelerometer"; - -describe("Accelerometer component ", () => { - const mockProps = { - axisValues: { - X: 1, - Y: 0, - Z: 1, - }, - onUpdateValue: () => {}, - }; - - it("should render correctly", () => { - const component = testRenderer - .create( - - - - ) - .toJSON(); - expect(component).toMatchSnapshot(); - }); - - it("should render without crashing", () => { - const div = document.createElement("div"); - ReactDOM.render( - - - , - div - ); - ReactDOM.unmountComponentAtNode(div); - }); -}); diff --git a/src/view/components/toolbar/motion/Accelerometer.tsx b/src/view/components/toolbar/motion/Accelerometer.tsx deleted file mode 100644 index d6f4759d0..000000000 --- a/src/view/components/toolbar/motion/Accelerometer.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import * as React from "react"; -import { SENSOR_LIST } from "../../../constants"; -import { ISensorProps, ISliderProps } from "../../../viewUtils"; - -import { GenericSliderComponent } from "../GenericSliderComponent"; - -const MOTION_SLIDER_PROPS_X: ISliderProps = { - axisLabel: "X", - maxLabel: "Right", - maxValue: 1023, - minLabel: "Left", - minValue: -1023, - type: SENSOR_LIST.MOTION_X, -}; - -const MOTION_SLIDER_PROPS_Y: ISliderProps = { - axisLabel: "Y", - maxLabel: "Front", - maxValue: 1023, - minLabel: "Back", - minValue: -1023, - type: SENSOR_LIST.MOTION_Y, -}; - -const MOTION_SLIDER_PROPS_Z: ISliderProps = { - axisLabel: "Z", - maxLabel: "Down", - maxValue: 1023, - minLabel: "Up", - minValue: -1023, - type: SENSOR_LIST.MOTION_Z, -}; - -const MOTION_SENSOR_PROPERTIES: ISensorProps = { - LABEL: "Motion sensor", - sliderProps: [ - MOTION_SLIDER_PROPS_X, - MOTION_SLIDER_PROPS_Y, - MOTION_SLIDER_PROPS_Z, - ], - unitLabel: "Lux", -}; - -interface IProps { - axisValues: { - X: number; - Y: number; - Z: number; - }; - onUpdateValue: (sensor: SENSOR_LIST, value: number) => void; -} - -export class Accelerometer extends React.Component { - render() { - return ( -
- -
- ); - } -} diff --git a/src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap b/src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap deleted file mode 100644 index 2e78e8daf..000000000 --- a/src/view/components/toolbar/motion/__snapshots__/Accelerometer.spec.tsx.snap +++ /dev/null @@ -1,210 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Accelerometer component should render correctly 1`] = ` -
-
-
- - X - - - - - - -1023 - - - 1023 - - - - - - Left - - - Right - - - -
-
-
- - Y - - - - - - -1023 - - - 1023 - - - - - - Back - - - Front - - - -
-
-
- - Z - - - - - - -1023 - - - 1023 - - - - - - Up - - - Down - - - -
-
-
-
-`; From 1b3ada1fb8df6c4a7b61a9b20046110602d48037 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Sun, 12 Apr 2020 13:32:46 -0700 Subject: [PATCH 3/6] Refactor sensor for microbit & clue --- src/view/components/toolbar/SensorModalUtils.tsx | 3 ++- .../components/toolbar/clue/ClueModalContent.tsx | 10 +++++++--- .../toolbar/clue/ClueSensorProperties.tsx | 15 +++++++++++++++ .../toolbar/microbit/MicrobitSensorProperties.tsx | 2 +- 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx index 0ae8ff139..e6a2da7bf 100644 --- a/src/view/components/toolbar/SensorModalUtils.tsx +++ b/src/view/components/toolbar/SensorModalUtils.tsx @@ -65,7 +65,7 @@ export const CPX_TOOLBAR_ICON_ID = { }; export const MICROBIT_TOOLBAR_ICON_ID = { - TEMPERATURE: "toolbar-temperature-sensor", + TEMPERATURE: "toolbar-microbit-temperature-sensor", LIGHT: "toolbar-microbit-light-sensor", ACCELEROMETER: "toolbar-accelerometer-sensor", LEDS: "toolbar-microbit-led", @@ -309,6 +309,7 @@ export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([ MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER, MICROBIT_MODAL.ACCELEROMETER_CONTENT, ], + [MICROBIT_TOOLBAR_ICON_ID.TEMPERATURE, MICROBIT_MODAL.TEMPERATURE_CONTENT], [MICROBIT_TOOLBAR_ICON_ID.LIGHT, MICROBIT_MODAL.LIGHT_CONTENT], [MICROBIT_TOOLBAR_ICON_ID.COMPASS, MICROBIT_MODAL.COMPASS_CONTENT], [MICROBIT_TOOLBAR_ICON_ID.LEDS, MICROBIT_MODAL.LED_CONTENT], diff --git a/src/view/components/toolbar/clue/ClueModalContent.tsx b/src/view/components/toolbar/clue/ClueModalContent.tsx index 97eb1a5ab..5dd7ec816 100644 --- a/src/view/components/toolbar/clue/ClueModalContent.tsx +++ b/src/view/components/toolbar/clue/ClueModalContent.tsx @@ -12,11 +12,15 @@ export const TEMPERATURE_CONTENT = ( onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, sensorValues: { [key: string]: number } ): IModalContent => { + const temperatureSensorValues = { + T: sensorValues[SENSOR_LIST.TEMPERATURE] + } return { components: [ - , ], descriptionText: "toolbar-clue-temperature-sensor.description", diff --git a/src/view/components/toolbar/clue/ClueSensorProperties.tsx b/src/view/components/toolbar/clue/ClueSensorProperties.tsx index 1456cfa1f..1e5b9c471 100644 --- a/src/view/components/toolbar/clue/ClueSensorProperties.tsx +++ b/src/view/components/toolbar/clue/ClueSensorProperties.tsx @@ -181,4 +181,19 @@ export const MOTION_SENSOR_PROPERTIES: ISensorProps = { MOTION_SLIDER_PROPS_Z, ], unitLabel: "m/s2", +}; + +const TEMPERATURE_SLIDER_PROPS: ISliderProps = { + axisLabel: "T", + maxLabel: "Hot", + maxValue: 125, + minLabel: "Cold", + minValue: -55, + type: SENSOR_LIST.TEMPERATURE, +}; + +export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = { + LABEL: "Temperature sensor", + sliderProps: [TEMPERATURE_SLIDER_PROPS], + unitLabel: "°C", }; \ No newline at end of file diff --git a/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx b/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx index b711cabba..2f7dc2a38 100644 --- a/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx +++ b/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx @@ -55,7 +55,7 @@ export const MOTION_SENSOR_PROPERTIES: ISensorProps = { }; const TEMPERATURE_SLIDER_PROPS: ISliderProps = { - axisLabel: " ", + axisLabel: "T", maxLabel: "Hot", maxValue: 125, minLabel: "Cold", From 01133318112fdfbb796dd6891864c7cc9f344db5 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Sun, 12 Apr 2020 14:57:11 -0700 Subject: [PATCH 4/6] Remove non-generic sliders --- .../toolbar/{motion => }/Gesture.tsx | 6 +- .../components/toolbar/LightSensorBar.tsx | 69 ------ .../components/toolbar/SensorModalUtils.tsx | 205 ++---------------- .../toolbar/TemperatureSensorBar.tsx | 74 ------- .../toolbar/clue/ClueModalContent.tsx | 3 +- .../toolbar/cpx/CpxModalContent.tsx | 194 +++++++++++++++++ .../toolbar/cpx/CpxSensorProperties.tsx | 66 ++++++ .../toolbar/microbit/MicrobitModalContent.tsx | 2 +- .../toolbar/motion/MotionSensorBar.tsx | 131 ----------- 9 files changed, 278 insertions(+), 472 deletions(-) rename src/view/components/toolbar/{motion => }/Gesture.tsx (91%) delete mode 100644 src/view/components/toolbar/LightSensorBar.tsx delete mode 100644 src/view/components/toolbar/TemperatureSensorBar.tsx create mode 100644 src/view/components/toolbar/cpx/CpxModalContent.tsx create mode 100644 src/view/components/toolbar/cpx/CpxSensorProperties.tsx delete mode 100644 src/view/components/toolbar/motion/MotionSensorBar.tsx diff --git a/src/view/components/toolbar/motion/Gesture.tsx b/src/view/components/toolbar/Gesture.tsx similarity index 91% rename from src/view/components/toolbar/motion/Gesture.tsx rename to src/view/components/toolbar/Gesture.tsx index 934c19345..a89a3bd5c 100644 --- a/src/view/components/toolbar/motion/Gesture.tsx +++ b/src/view/components/toolbar/Gesture.tsx @@ -1,7 +1,7 @@ import * as React from "react"; -import { CONSTANTS } from "../../../constants"; -import { Dropdown } from "../../Dropdown"; -import SensorButton from "../SensorButton"; +import { CONSTANTS } from "../../constants"; +import { Dropdown } from "../Dropdown"; +import SensorButton from "./SensorButton"; const GESTURE_BUTTON_MESSAGE = "Send Gesture"; interface IProps { diff --git a/src/view/components/toolbar/LightSensorBar.tsx b/src/view/components/toolbar/LightSensorBar.tsx deleted file mode 100644 index 5d9d5df82..000000000 --- a/src/view/components/toolbar/LightSensorBar.tsx +++ /dev/null @@ -1,69 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// 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"; - -const LIGHT_SLIDER_PROPS: ISliderProps = { - maxValue: 255, - minValue: 0, - minLabel: "Dark", - maxLabel: "Bright", - type: "light", - axisLabel: " ", -}; - -const LIGHT_SENSOR_PROPERTIES: ISensorProps = { - LABEL: "Light sensor", - sliderProps: [LIGHT_SLIDER_PROPS], - unitLabel: "Lux", -}; -interface IProps { - onUpdateValue: (sensor: SENSOR_LIST, value: number) => void; - value: number; -} - -class LightSensorBar extends React.Component { - constructor(props: any) { - super(props); - } - - render() { - return ( -
- -
- ); - } -} - -export default LightSensorBar; diff --git a/src/view/components/toolbar/SensorModalUtils.tsx b/src/view/components/toolbar/SensorModalUtils.tsx index e6a2da7bf..2798079d6 100644 --- a/src/view/components/toolbar/SensorModalUtils.tsx +++ b/src/view/components/toolbar/SensorModalUtils.tsx @@ -3,13 +3,10 @@ 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"; +import * as CPX_MODAL from "./cpx/CpxModalContent" import * as CLUE_MODAL from "./clue/ClueModalContent"; -import LightSensorBar from "./LightSensorBar"; import * as MICROBIT_MODAL from "./microbit/MicrobitModalContent"; -import MotionSensorBar from "./motion/MotionSensorBar"; -import TemperatureSensorBar from "./TemperatureSensorBar"; + export const TRY_IT_MAKE_CODE = (
@@ -115,196 +112,20 @@ export const DEFAULT_MODAL_CONTENT: IModalContent = { id: "none", }; -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", - components: undefined, - id: "GPIO", - }; -}; -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", - components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB], - id: "IR", - }; -}; -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", - components: [ - , - ], - id: "light_sensor", - }; -}; -export const MOTION_MODAL_CONTENT = ( - onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, - sensorValues: { [key: string]: number } -): IModalContent => { - const motionSensorValues = { - X: sensorValues[SENSOR_LIST.MOTION_X], - Y: sensorValues[SENSOR_LIST.MOTION_Y], - Z: 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", - components: [ - , - TRY_IT_MAKE_CODE, - FEATURE_REQUEST_ON_GITHUB, - ], - id: "motion_sensor", - }; -}; -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", - components: undefined, - id: "neon_pixel", - }; -}; -export const PUSHB_MODAL_CONTENT = ( - onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, - sensorValues: { [key: string]: number } -): IModalContent => { - return { - descriptionTitle: "toolbar-a-b-push.title", - tagInput: TAG_INPUT_SVG, - tagOutput: undefined, - descriptionText: "toolbar-a-b-push.description", - tryItDescription: "toolbar-a-b-push.tryItDescription", - components: undefined, - id: "push_btn", - }; -}; -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", - components: 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", - components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB], - 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", - components: 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", - components: [FEATURE_REQUEST_ON_GITHUB], - id: "speaker", - }; -}; -export const TEMPERATURE_MODAL_CONTENT = ( - onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, - sensorValues: { [key: string]: number } -): IModalContent => { - return { - components: [ - , - ], - 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 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], - [CPX_TOOLBAR_ICON_ID.MOTION, MOTION_MODAL_CONTENT], - [CPX_TOOLBAR_ICON_ID.NEO_PIXEL, NEOP_MODAL_CONTENT], - [CPX_TOOLBAR_ICON_ID.PUSH_BUTTON, PUSHB_MODAL_CONTENT], - [CPX_TOOLBAR_ICON_ID.RED_LED, RED_LED_MODAL_CONTENT], - [CPX_TOOLBAR_ICON_ID.SOUND, SOUND_MODAL_CONTENT], - [CPX_TOOLBAR_ICON_ID.SPEAKER, SPEAKER_MODAL_CONTENT], - [CPX_TOOLBAR_ICON_ID.SWITCH, SWITCH_MODAL_CONTENT], - [CPX_TOOLBAR_ICON_ID.TEMPERATURE, TEMPERATURE_MODAL_CONTENT], + [CPX_TOOLBAR_ICON_ID.GPIO, CPX_MODAL.GPIO_CONTENT], + [CPX_TOOLBAR_ICON_ID.IR, CPX_MODAL.IR_CONTENT], + [CPX_TOOLBAR_ICON_ID.LIGHT, CPX_MODAL.LIGHT_CONTENT], + [CPX_TOOLBAR_ICON_ID.MOTION, CPX_MODAL.MOTION_CONTENT], + [CPX_TOOLBAR_ICON_ID.NEO_PIXEL, CPX_MODAL.NEOP_CONTENT], + [CPX_TOOLBAR_ICON_ID.PUSH_BUTTON, CPX_MODAL.PUSHB_CONTENT], + [CPX_TOOLBAR_ICON_ID.RED_LED, CPX_MODAL.RED_LED_CONTENT], + [CPX_TOOLBAR_ICON_ID.SOUND, CPX_MODAL.SOUND_CONTENT], + [CPX_TOOLBAR_ICON_ID.SPEAKER, CPX_MODAL.SPEAKER_CONTENT], + [CPX_TOOLBAR_ICON_ID.SWITCH, CPX_MODAL.SWITCH_CONTENT], + [CPX_TOOLBAR_ICON_ID.TEMPERATURE, CPX_MODAL.TEMPERATURE_CONTENT], [ MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER, MICROBIT_MODAL.ACCELEROMETER_CONTENT, diff --git a/src/view/components/toolbar/TemperatureSensorBar.tsx b/src/view/components/toolbar/TemperatureSensorBar.tsx deleted file mode 100644 index 064c32b6e..000000000 --- a/src/view/components/toolbar/TemperatureSensorBar.tsx +++ /dev/null @@ -1,74 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// 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"; - -const TEMPERATURE_SLIDER_PROPS: ISliderProps = { - axisLabel: " ", - maxLabel: "Hot", - maxValue: 125, - minLabel: "Cold", - minValue: -55, - type: SENSOR_LIST.TEMPERATURE, -}; -const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = { - LABEL: "Temperature sensor", - sliderProps: [TEMPERATURE_SLIDER_PROPS], - unitLabel: "°C", -}; -interface IProps { - onUpdateSensor: (sensor: SENSOR_LIST, value: number) => void; - value: number; -} -class TemperatureSensorBar extends React.Component { - constructor(props: any) { - super(props); - } - - render() { - return ( -
- -
- ); - } -} - -export default TemperatureSensorBar; diff --git a/src/view/components/toolbar/clue/ClueModalContent.tsx b/src/view/components/toolbar/clue/ClueModalContent.tsx index 5dd7ec816..a9eb49526 100644 --- a/src/view/components/toolbar/clue/ClueModalContent.tsx +++ b/src/view/components/toolbar/clue/ClueModalContent.tsx @@ -3,9 +3,8 @@ import { GESTURES_CLUE, SENSOR_LIST } from "../../../constants"; import { TAG_INPUT_SVG } from "../../../svgs/tag_input_svg"; import { TAG_OUTPUT_SVG } from "../../../svgs/tag_output_svg"; import { GenericSliderComponent } from "../GenericSliderComponent"; -import { Gesture } from "../motion/Gesture"; +import { Gesture } from "../Gesture"; import { FEATURE_REQUEST_ON_GITHUB, IModalContent } from "../SensorModalUtils"; -import TemperatureSensorBar from "../TemperatureSensorBar"; import * as SENSOR_PROPERTIES from "./ClueSensorProperties"; export const TEMPERATURE_CONTENT = ( diff --git a/src/view/components/toolbar/cpx/CpxModalContent.tsx b/src/view/components/toolbar/cpx/CpxModalContent.tsx new file mode 100644 index 000000000..94bf00956 --- /dev/null +++ b/src/view/components/toolbar/cpx/CpxModalContent.tsx @@ -0,0 +1,194 @@ +import * as React from "react"; +import { SENSOR_LIST } from "../../../constants"; +import { IModalContent, FEATURE_REQUEST_ON_GITHUB, TRY_IT_MAKE_CODE } from "../SensorModalUtils"; +import { TAG_INPUT_SVG } from "../../../svgs/tag_input_svg"; +import { TAG_OUTPUT_SVG } from "../../../svgs/tag_output_svg"; +import { GenericSliderComponent } from "../GenericSliderComponent"; +import * as SENSOR_PROPERTIES from './CpxSensorProperties' + +export const GPIO_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", + components: undefined, + id: "GPIO", + }; +}; + +export const IR_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", + components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB], + id: "IR", + }; +}; +export const LIGHT_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + const lightSensorValues = { + L: sensorValues[SENSOR_LIST.LIGHT] + } + return { + descriptionTitle: "toolbar-light-sensor.title", + tagInput: TAG_INPUT_SVG, + tagOutput: undefined, + descriptionText: "toolbar-light-sensor.description", + tryItDescription: "toolbar-light-sensor.tryItDescription", + components: [ + , + ], + id: "light_sensor", + }; +}; +export const MOTION_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + const motionSensorValues = { + X: sensorValues[SENSOR_LIST.MOTION_X], + Y: sensorValues[SENSOR_LIST.MOTION_Y], + Z: 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", + components: [ + , + TRY_IT_MAKE_CODE, + FEATURE_REQUEST_ON_GITHUB, + ], + id: "motion_sensor", + }; +}; +export const NEOP_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", + components: undefined, + id: "neon_pixel", + }; +}; +export const PUSHB_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + return { + descriptionTitle: "toolbar-a-b-push.title", + tagInput: TAG_INPUT_SVG, + tagOutput: undefined, + descriptionText: "toolbar-a-b-push.description", + tryItDescription: "toolbar-a-b-push.tryItDescription", + components: undefined, + id: "push_btn", + }; +}; +export const RED_LED_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", + components: undefined, + id: "red_LED", + }; +}; +export const SOUND_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", + components: [TRY_IT_MAKE_CODE, FEATURE_REQUEST_ON_GITHUB], + id: "sound_sensor", + }; +}; +export const SWITCH_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", + components: undefined, + id: "slider_switch", + }; +}; +export const SPEAKER_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", + components: [FEATURE_REQUEST_ON_GITHUB], + id: "speaker", + }; +}; +export const TEMPERATURE_CONTENT = ( + onUpdateValue: (sensor: SENSOR_LIST, value: number) => void, + sensorValues: { [key: string]: number } +): IModalContent => { + const temperatureSensorValues = { + T: sensorValues[SENSOR_LIST.TEMPERATURE] + } + return { + components: [ + , + ], + descriptionText: "toolbar-temperature-sensor.description", + descriptionTitle: "toolbar-temperature-sensor.title", + id: "temperature", + tagInput: TAG_INPUT_SVG, + tagOutput: undefined, + tryItDescription: "toolbar-temperature-sensor.tryItDescription", + }; +}; \ No newline at end of file diff --git a/src/view/components/toolbar/cpx/CpxSensorProperties.tsx b/src/view/components/toolbar/cpx/CpxSensorProperties.tsx new file mode 100644 index 000000000..816d12b5c --- /dev/null +++ b/src/view/components/toolbar/cpx/CpxSensorProperties.tsx @@ -0,0 +1,66 @@ +import { ISliderProps, ISensorProps } from "../../../viewUtils"; +import { SENSOR_LIST } from "../../../constants"; + +const LIGHT_SLIDER_PROPS: ISliderProps = { + maxValue: 255, + minValue: 0, + minLabel: "Dark", + maxLabel: "Bright", + type: "light", + axisLabel: "L", +}; + +export const LIGHT_SENSOR_PROPERTIES: ISensorProps = { + LABEL: "Light sensor", + sliderProps: [LIGHT_SLIDER_PROPS], + unitLabel: "Lux", +}; + +const TEMPERATURE_SLIDER_PROPS: ISliderProps = { + axisLabel: "T", + maxLabel: "Hot", + maxValue: 125, + minLabel: "Cold", + minValue: -55, + type: SENSOR_LIST.TEMPERATURE, +}; +export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = { + LABEL: "Temperature sensor", + sliderProps: [TEMPERATURE_SLIDER_PROPS], + unitLabel: "°C", +}; + +const MOTION_SLIDER_PROPS_X: ISliderProps = { + axisLabel: "X", + maxLabel: "Right", + maxValue: 78, + minLabel: "Left", + minValue: -78, + type: SENSOR_LIST.MOTION_X, +}; +const MOTION_SLIDER_PROPS_Y: ISliderProps = { + axisLabel: "Y", + maxLabel: "Front", + maxValue: 78, + minLabel: "Back", + minValue: -78, + type: SENSOR_LIST.MOTION_Y, +}; +const MOTION_SLIDER_PROPS_Z: ISliderProps = { + axisLabel: "Z", + maxLabel: "Down", + maxValue: 78, + minLabel: "Up", + minValue: -78, + type: SENSOR_LIST.MOTION_Z, +}; + +export const MOTION_SENSOR_PROPERTIES: ISensorProps = { + LABEL: "Motion sensor", + sliderProps: [ + MOTION_SLIDER_PROPS_X, + MOTION_SLIDER_PROPS_Y, + MOTION_SLIDER_PROPS_Z, + ], + unitLabel: "Lux", +}; \ No newline at end of file diff --git a/src/view/components/toolbar/microbit/MicrobitModalContent.tsx b/src/view/components/toolbar/microbit/MicrobitModalContent.tsx index 2aedaea17..16f01152b 100644 --- a/src/view/components/toolbar/microbit/MicrobitModalContent.tsx +++ b/src/view/components/toolbar/microbit/MicrobitModalContent.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { GESTURES_MICROBIT, SENSOR_LIST } from "../../../constants"; import { TAG_INPUT_SVG } from "../../../svgs/tag_input_svg"; import { TAG_OUTPUT_SVG } from "../../../svgs/tag_output_svg"; -import { Gesture } from "../motion/Gesture"; +import { Gesture } from "../Gesture"; import { FEATURE_REQUEST_ON_GITHUB, IModalContent } from "../SensorModalUtils"; import { GenericSliderComponent } from "../GenericSliderComponent"; import * as SENSOR_PROPERTIES from './MicrobitSensorProperties' diff --git a/src/view/components/toolbar/motion/MotionSensorBar.tsx b/src/view/components/toolbar/motion/MotionSensorBar.tsx deleted file mode 100644 index 5c54904a1..000000000 --- a/src/view/components/toolbar/motion/MotionSensorBar.tsx +++ /dev/null @@ -1,131 +0,0 @@ -// Copyright (c) Microsoft Corporation. -// Licensed under the MIT license. - -import * as React from "react"; -import { CONSTANTS, SENSOR_LIST, WEBVIEW_MESSAGES } from "../../../constants"; -import "../../../styles/MotionSensorBar.css"; -import { sendMessage } from "../../../utils/MessageUtils"; -import { ISensorProps, ISliderProps } from "../../../viewUtils"; -import svg from "../../cpx/Svg_utils"; -import { GenericSliderComponent } from "../GenericSliderComponent"; -import SensorButton from "../SensorButton"; - -const MOTION_SLIDER_PROPS_X: ISliderProps = { - axisLabel: "X", - maxLabel: "Right", - maxValue: 78, - minLabel: "Left", - minValue: -78, - type: SENSOR_LIST.MOTION_X, -}; -const MOTION_SLIDER_PROPS_Y: ISliderProps = { - axisLabel: "Y", - maxLabel: "Front", - maxValue: 78, - minLabel: "Back", - minValue: -78, - type: SENSOR_LIST.MOTION_Y, -}; -const MOTION_SLIDER_PROPS_Z: ISliderProps = { - axisLabel: "Z", - maxLabel: "Down", - maxValue: 78, - minLabel: "Up", - minValue: -78, - type: SENSOR_LIST.MOTION_Z, -}; - -const MOTION_SENSOR_PROPERTIES: ISensorProps = { - LABEL: "Motion sensor", - sliderProps: [ - MOTION_SLIDER_PROPS_X, - MOTION_SLIDER_PROPS_Y, - MOTION_SLIDER_PROPS_Z, - ], - unitLabel: "Lux", -}; -interface IProps { - axisValues: { - X: number; - Y: number; - Z: number; - }; - onUpdateValue: (sensor: SENSOR_LIST, value: number) => void; -} - -class MotionSensorBar extends React.Component { - constructor(props: any) { - super(props); - } - - render() { - return ( -
-
- -
-
- -
-
- ); - } - - private onMouseDown = (event: React.PointerEvent) => { - this.updateShakePress(true, event.currentTarget.id); - this.handleOnclick(true, "shake"); - }; - - private onKeyUp = (event: React.KeyboardEvent) => - this.onKeyEvent(event, false); - - private onKeyDown = (event: React.KeyboardEvent) => - this.onKeyEvent(event, true); - - private onMouseUp = (event: React.PointerEvent) => { - this.updateShakePress(false, event.currentTarget.id); - this.handleOnclick(false, "shake"); - }; - - private handleOnclick = (active: boolean, type: string) => { - const messageState = { [type]: active }; - sendMessage(WEBVIEW_MESSAGES.SENSOR_CHANGED, messageState); - }; - - private onKeyEvent( - event: React.KeyboardEvent, - active: boolean - ) { - if ( - [event.keyCode, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER) - ) { - this.handleOnclick(active, "shake"); - } - } - - private updateShakePress = (shakeState: boolean, id: string): void => { - const svgElement = window.document.getElementById("cpx_svg"); - const buttonElement = window.document.getElementById(id); - const cpxSvg: SVGElement = (svgElement as unknown) as SVGElement; - - if (svgElement && cpxSvg && buttonElement) { - buttonElement.setAttribute("aria-pressed", shakeState.toString()); - shakeState - ? svg.addClass(cpxSvg, "shake-pressed") - : svg.removeClass(cpxSvg, "shake-pressed"); - } - }; -} - -export default MotionSensorBar; From c1659728b057b820097a677f55c51e28902edf6b Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Sun, 12 Apr 2020 14:59:48 -0700 Subject: [PATCH 5/6] Update tests --- .../microbit/__snapshots__/Microbit.spec.tsx.snap | 8 ++++---- .../toolbar/__snapshots__/Toolbar.spec.tsx.snap | 4 ++-- .../container/device/__snapshots__/Device.spec.tsx.snap | 8 ++++---- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap b/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap index 8dc222774..1ab115851 100644 --- a/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap +++ b/src/view/components/microbit/__snapshots__/Microbit.spec.tsx.snap @@ -2781,9 +2781,9 @@ Array [ onMouseLeave={[Function]} >