Use generic slider to remove accelerometer

Author: xnkevinnguyen

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],

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: (
-            <Accelerometer
+            <GenericSliderComponent
                 onUpdateValue={onUpdateValue}
                 axisValues={accelerometerSensorValues}
+                axisProperties={SENSOR_PROPERTIES.MOTION_SENSOR_PROPERTIES}
             />
         ),
         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: (
             <GenericSliderComponent
                 onUpdateValue={onUpdateValue}
-                axisValues={accelerometerSensorValues}
+                axisValues={lightSensorValues}
                 axisProperties={SENSOR_PROPERTIES.CLUE_LIGHT_PROPERTIES}
             />
         ),

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",
+};

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: (
-            <Accelerometer
+            <GenericSliderComponent
                 onUpdateValue={onUpdateValue}
                 axisValues={accelerometerSensorValues}
+                axisProperties={SENSOR_PROPERTIES.MOTION_SENSOR_PROPERTIES}
             />
         ),
         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: [
+            <GenericSliderComponent
+                onUpdateValue={onUpdateValue}
+                axisValues={lightSensorValues}
+                axisProperties={SENSOR_PROPERTIES.LIGHT_SENSOR_PROPERTIES}
+            />,
+        ],
+        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: [
+            <GenericSliderComponent
+                onUpdateValue={onUpdateValue}
+                axisValues={temperatureSensorValues}
+                axisProperties={SENSOR_PROPERTIES.TEMPERATURE_SENSOR_PROPERTIES}
+            />,
+        ],
+        descriptionText: "toolbar-temperature-sensor.description",
+        descriptionTitle: "toolbar-temperature-sensor.title",
+        id: "temperature",
+        tagInput: TAG_INPUT_SVG,
+        tagOutput: undefined,
+        tryItDescription: "toolbar-temperature-sensor.tryItDescription",
+    };
+};

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",
+};