Add sliders for pressure and proximity

Author: xnkevinnguyen

src/view/components/clue/Clue.tsx

@@ -23,6 +23,9 @@ const DEFAULT_STATE = {
         [SENSOR_LIST.MOTION_X]: 0,
         [SENSOR_LIST.MOTION_Y]: 0,
         [SENSOR_LIST.MOTION_Z]: 0,
+        [SENSOR_LIST.HUMIDITY]: 0,
+        [SENSOR_LIST.PRESSURE]: 0,
+        [SENSOR_LIST.PROXIMITY]: 0,
     },
 };
 

src/view/components/toolbar/clue/ClueModalContent.tsx

@@ -101,16 +101,20 @@ export const CLUE_HUMIDITY_MODAL_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
     sensorValues: { [key: string]: number }
 ): IModalContent => {
+    const humiditySensorValues = {
+        H: sensorValues[SENSOR_LIST.HUMIDITY],
+    };
     return {
         descriptionTitle: "toolbar-light-sensor.title",
         tagInput: TAG_INPUT_SVG,
         tagOutput: undefined,
         descriptionText: "toolbar-light-sensor.description",
         tryItDescription: "toolbar-light-sensor.tryItDescription",
         components: [
-            <LightSensorBar
+            <ThreeDimensionSlider
                 onUpdateValue={onUpdateValue}
-                value={sensorValues[SENSOR_LIST.LIGHT]}
+                axisValues={humiditySensorValues}
+                axisProperties={SENSOR_PROPERTIES.CLUE_HUMIDITY_PROPERTIES}
             />,
         ],
         id: "light_sensor",
@@ -139,16 +143,20 @@ export const CLUE_PROXIMITY_MODAL_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
     sensorValues: { [key: string]: number }
 ): IModalContent => {
+    const proximitySensorValues = {
+        P: sensorValues[SENSOR_LIST.PROXIMITY],
+    };
     return {
         descriptionTitle: "toolbar-light-sensor.title",
         tagInput: TAG_INPUT_SVG,
         tagOutput: undefined,
         descriptionText: "toolbar-light-sensor.description",
         tryItDescription: "toolbar-light-sensor.tryItDescription",
         components: [
-            <LightSensorBar
+            <ThreeDimensionSlider
                 onUpdateValue={onUpdateValue}
-                value={sensorValues[SENSOR_LIST.LIGHT]}
+                axisValues={proximitySensorValues}
+                axisProperties={SENSOR_PROPERTIES.CLUE__PROXIMITY_PROPERTIES}
             />,
         ],
         id: "light_sensor",
@@ -158,16 +166,20 @@ export const CLUE_PRESSURE_MODAL_CONTENT = (
     onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
     sensorValues: { [key: string]: number }
 ): IModalContent => {
+    const pressureSensorValues = {
+        P: sensorValues[SENSOR_LIST.PRESSURE],
+    };
     return {
         descriptionTitle: "toolbar-light-sensor.title",
         tagInput: TAG_INPUT_SVG,
         tagOutput: undefined,
         descriptionText: "toolbar-light-sensor.description",
         tryItDescription: "toolbar-light-sensor.tryItDescription",
         components: [
-            <LightSensorBar
+            <ThreeDimensionSlider
                 onUpdateValue={onUpdateValue}
-                value={sensorValues[SENSOR_LIST.LIGHT]}
+                axisValues={pressureSensorValues}
+                axisProperties={SENSOR_PROPERTIES.CLUE_PRESSURE_PROPERTIES}
             />,
         ],
         id: "light_sensor",

src/view/components/toolbar/clue/ClueSensorProperties.tsx

@@ -40,3 +40,45 @@ export const CLUE_LIGHT_PROPERTIES: ISensorProps = {
     sliderProps: [CLUE_SLIDER_R, CLUE_SLIDER_G, CLUE_SLIDER_B, CLUE_SLIDER_C],
     unitLabel: "Lux",
 };
+export const CLUE_HUMIDITY_PROPERTIES: ISensorProps = {
+    LABEL: "Humidity Sensor",
+    sliderProps: [
+        {
+            axisLabel: "H",
+            maxLabel: "Max",
+            maxValue: 100,
+            minLabel: "Min",
+            minValue: 0,
+            type: SENSOR_LIST.HUMIDITY,
+        },
+    ],
+    unitLabel: "%",
+};
+export const CLUE__PROXIMITY_PROPERTIES: ISensorProps = {
+    LABEL: "Humidity Sensor",
+    sliderProps: [
+        {
+            axisLabel: "P",
+            maxLabel: "Max",
+            maxValue: 100,
+            minLabel: "Min",
+            minValue: 0,
+            type: SENSOR_LIST.PROXIMITY,
+        },
+    ],
+    unitLabel: "%",
+};
+export const CLUE_PRESSURE_PROPERTIES: ISensorProps = {
+    LABEL: "Humidity Sensor",
+    sliderProps: [
+        {
+            axisLabel: "P",
+            maxLabel: "Max",
+            maxValue: 100,
+            minLabel: "Min",
+            minValue: 0,
+            type: SENSOR_LIST.PRESSURE,
+        },
+    ],
+    unitLabel: "%",
+};

src/view/components/toolbar/motion/threeDimensionSlider/ThreeDimensionSlider.tsx

@@ -1,12 +1,6 @@
 import * as React from "react";
 import { SENSOR_LIST } from "../../../../constants";
-import {
-    ISensorProps,
-    X_SLIDER_INDEX,
-    Y_SLIDER_INDEX,
-    Z_SLIDER_INDEX,
-    ISliderProps,
-} from "../../../../viewUtils";
+import { ISensorProps, ISliderProps } from "../../../../viewUtils";
 import InputSlider from "../../InputSlider";
 
 interface IProps {

src/view/constants.ts

@@ -103,6 +103,9 @@ export enum SENSOR_LIST {
     LIGHT_G = "light_g",
     LIGHT_B = "light_b",
     LIGHT_C = "light_c",
+    HUMIDITY = "humidity",
+    PRESSURE = "pressure",
+    PROXIMITY = "proximity",
 }
 
 export const GESTURES = [