From 609567d3c8e5a88823e248f14a7970da125f2d1c Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 20 Apr 2020 08:55:36 -0700 Subject: [PATCH 1/3] Add precision to input slider --- src/view/components/cpx/Cpx.tsx | 2 +- .../toolbar/GenericSliderComponent.tsx | 1 + src/view/components/toolbar/InputSlider.tsx | 12 +++++++++--- .../toolbar/clue/ClueSensorProperties.tsx | 17 +++++++++++++++++ .../toolbar/cpx/CpxSensorProperties.tsx | 7 ++++++- .../microbit/MicrobitSensorProperties.tsx | 5 +++++ src/view/viewUtils.tsx | 1 + 7 files changed, 40 insertions(+), 5 deletions(-) diff --git a/src/view/components/cpx/Cpx.tsx b/src/view/components/cpx/Cpx.tsx index d91728fba..a28343b28 100644 --- a/src/view/components/cpx/Cpx.tsx +++ b/src/view/components/cpx/Cpx.tsx @@ -11,7 +11,7 @@ import Simulator from "./CpxSimulator"; // Component grouping the functionality for circuit playground express const DEFAULT_STATE = { sensors: { - [SENSOR_LIST.TEMPERATURE]: 0, + [SENSOR_LIST.TEMPERATURE]: 0.0, [SENSOR_LIST.LIGHT]: 0, [SENSOR_LIST.MOTION_X]: 0, [SENSOR_LIST.MOTION_Y]: 0, diff --git a/src/view/components/toolbar/GenericSliderComponent.tsx b/src/view/components/toolbar/GenericSliderComponent.tsx index 48e2ec091..273896621 100644 --- a/src/view/components/toolbar/GenericSliderComponent.tsx +++ b/src/view/components/toolbar/GenericSliderComponent.tsx @@ -29,6 +29,7 @@ export const GenericSliderComponent: React.FC = props => { value={ props.axisValues[sliderProperties.axisLabel] } + step={sliderProperties.step} />
diff --git a/src/view/components/toolbar/InputSlider.tsx b/src/view/components/toolbar/InputSlider.tsx index d98e118cc..b4c0a167a 100644 --- a/src/view/components/toolbar/InputSlider.tsx +++ b/src/view/components/toolbar/InputSlider.tsx @@ -21,6 +21,7 @@ class InputSlider extends React.Component { render() { const isInputDisabled = this.context === VIEW_STATE.PAUSE; + const nbDecimals = this.props.step.toString().split(".")[1].length || 0; return (
{this.props.axisLabel} @@ -31,8 +32,9 @@ class InputSlider extends React.Component { onInput={this.handleOnChange} defaultValue={this.props.minValue.toLocaleString()} pattern={`^-?[0-9]{0,${ - this.props.maxValue.toString().length - }}$`} + (this.props.maxValue / this.props.step).toString() + .length + }}[.]{0,${nbDecimals > 0 ? 1 : 0}}[0-9]{0,${nbDecimals}}$`} onKeyUp={this.handleOnChange} aria-label={`${this.props.type} sensor input ${this.props.axisLabel}`} /> @@ -56,6 +58,7 @@ class InputSlider extends React.Component { aria-label={`${this.props.type} sensor`} defaultValue={this.props.minValue.toLocaleString()} disabled={isInputDisabled} + step={this.props.step} /> {this.props.minLabel} @@ -100,7 +103,8 @@ class InputSlider extends React.Component { }; private validateRange = (valueString: string) => { - let valueInt = parseInt(valueString, 10); + let valueInt = parseFloat(valueString); + console.log(`original value ${valueString}`); if (valueInt < this.props.minValue) { valueInt = this.props.minValue; this.setState({ value: valueInt }); @@ -108,6 +112,8 @@ class InputSlider extends React.Component { valueInt = this.props.maxValue; this.setState({ value: valueInt }); } + console.log(`updated value ${valueInt}`); + return valueInt; }; } diff --git a/src/view/components/toolbar/clue/ClueSensorProperties.tsx b/src/view/components/toolbar/clue/ClueSensorProperties.tsx index 2e2b9975a..e3293a493 100644 --- a/src/view/components/toolbar/clue/ClueSensorProperties.tsx +++ b/src/view/components/toolbar/clue/ClueSensorProperties.tsx @@ -8,6 +8,7 @@ const CLUE_SLIDER_R: ISliderProps = { minLabel: "Min", minValue: 0, type: SENSOR_LIST.LIGHT_R, + step: 1, }; const CLUE_SLIDER_G: ISliderProps = { @@ -17,6 +18,7 @@ const CLUE_SLIDER_G: ISliderProps = { minLabel: "Min", minValue: 0, type: SENSOR_LIST.LIGHT_G, + step: 1, }; const CLUE_SLIDER_B: ISliderProps = { @@ -26,6 +28,7 @@ const CLUE_SLIDER_B: ISliderProps = { minLabel: "Min", minValue: 0, type: SENSOR_LIST.LIGHT_B, + step: 1, }; const CLUE_SLIDER_C: ISliderProps = { axisLabel: "C", @@ -34,6 +37,7 @@ const CLUE_SLIDER_C: ISliderProps = { minLabel: "Min", minValue: 0, type: SENSOR_LIST.LIGHT_C, + step: 1, }; export const CLUE_LIGHT_PROPERTIES: ISensorProps = { @@ -50,6 +54,7 @@ const CLUE_MAGNET_X: ISliderProps = { maxValue: 1000, minValue: -1000, type: SENSOR_LIST.MAGNET_X, + step: 1, }; const CLUE_MAGNET_Y: ISliderProps = { axisLabel: "Y", @@ -58,6 +63,7 @@ const CLUE_MAGNET_Y: ISliderProps = { maxValue: 1000, minValue: -1000, type: SENSOR_LIST.MAGNET_Y, + step: 1, }; const CLUE_MAGNET_Z: ISliderProps = { axisLabel: "Z", @@ -66,6 +72,7 @@ const CLUE_MAGNET_Z: ISliderProps = { maxValue: 1000, minValue: -1000, type: SENSOR_LIST.MAGNET_Z, + step: 1, }; export const CLUE_MAGNET_PROPERTIES: ISensorProps = { @@ -80,6 +87,7 @@ const CLUE_GYRO_X: ISliderProps = { maxValue: 1000, minValue: -1000, type: SENSOR_LIST.GYRO_X, + step: 1, }; const CLUE_GYRO_Y: ISliderProps = { axisLabel: "Y", @@ -88,6 +96,7 @@ const CLUE_GYRO_Y: ISliderProps = { maxValue: 1000, minValue: -1000, type: SENSOR_LIST.GYRO_Y, + step: 1, }; const CLUE_GYRO_Z: ISliderProps = { axisLabel: "Z", @@ -96,6 +105,7 @@ const CLUE_GYRO_Z: ISliderProps = { maxValue: 1000, minValue: -1000, type: SENSOR_LIST.GYRO_Z, + step: 1, }; export const CLUE_GYRO_PROPERTIES: ISensorProps = { @@ -114,6 +124,7 @@ export const CLUE_HUMIDITY_PROPERTIES: ISensorProps = { minLabel: "Min", minValue: 0, type: SENSOR_LIST.HUMIDITY, + step: 1, }, ], unitLabel: "%", @@ -128,6 +139,7 @@ export const CLUE__PROXIMITY_PROPERTIES: ISensorProps = { minLabel: "Min", minValue: 0, type: SENSOR_LIST.PROXIMITY, + step: 1, }, ], unitLabel: "", @@ -142,6 +154,7 @@ export const CLUE_PRESSURE_PROPERTIES: ISensorProps = { minLabel: "Min", minValue: 800, type: SENSOR_LIST.PRESSURE, + step: 1, }, ], unitLabel: "hPa", @@ -153,6 +166,7 @@ const MOTION_SLIDER_PROPS_X: ISliderProps = { minLabel: "Left", minValue: -1023, type: SENSOR_LIST.MOTION_X, + step: 1, }; const MOTION_SLIDER_PROPS_Y: ISliderProps = { @@ -162,6 +176,7 @@ const MOTION_SLIDER_PROPS_Y: ISliderProps = { minLabel: "Back", minValue: -1023, type: SENSOR_LIST.MOTION_Y, + step: 1, }; const MOTION_SLIDER_PROPS_Z: ISliderProps = { @@ -171,6 +186,7 @@ const MOTION_SLIDER_PROPS_Z: ISliderProps = { minLabel: "Up", minValue: -1023, type: SENSOR_LIST.MOTION_Z, + step: 1, }; export const MOTION_SENSOR_PROPERTIES: ISensorProps = { @@ -190,6 +206,7 @@ const TEMPERATURE_SLIDER_PROPS: ISliderProps = { minLabel: "Cold", minValue: -55, type: SENSOR_LIST.TEMPERATURE, + step: 1, }; export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = { diff --git a/src/view/components/toolbar/cpx/CpxSensorProperties.tsx b/src/view/components/toolbar/cpx/CpxSensorProperties.tsx index 6a5a9990a..f91f91469 100644 --- a/src/view/components/toolbar/cpx/CpxSensorProperties.tsx +++ b/src/view/components/toolbar/cpx/CpxSensorProperties.tsx @@ -2,12 +2,13 @@ import { SENSOR_LIST } from "../../../constants"; import { ISensorProps, ISliderProps } from "../../../viewUtils"; const LIGHT_SLIDER_PROPS: ISliderProps = { - maxValue: 255, + maxValue: 320, minValue: 0, minLabel: "Dark", maxLabel: "Bright", type: "light", axisLabel: "L", + step: 1, }; export const LIGHT_SENSOR_PROPERTIES: ISensorProps = { @@ -23,6 +24,7 @@ const TEMPERATURE_SLIDER_PROPS: ISliderProps = { minLabel: "Cold", minValue: -55, type: SENSOR_LIST.TEMPERATURE, + step: 0.1, }; export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = { LABEL: "Temperature sensor", @@ -37,6 +39,7 @@ const MOTION_SLIDER_PROPS_X: ISliderProps = { minLabel: "Left", minValue: -78, type: SENSOR_LIST.MOTION_X, + step: 1, }; const MOTION_SLIDER_PROPS_Y: ISliderProps = { axisLabel: "Y", @@ -45,6 +48,7 @@ const MOTION_SLIDER_PROPS_Y: ISliderProps = { minLabel: "Back", minValue: -78, type: SENSOR_LIST.MOTION_Y, + step: 1, }; const MOTION_SLIDER_PROPS_Z: ISliderProps = { axisLabel: "Z", @@ -53,6 +57,7 @@ const MOTION_SLIDER_PROPS_Z: ISliderProps = { minLabel: "Up", minValue: -78, type: SENSOR_LIST.MOTION_Z, + step: 1, }; export const MOTION_SENSOR_PROPERTIES: ISensorProps = { diff --git a/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx b/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx index 42470ce44..c32b00477 100644 --- a/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx +++ b/src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx @@ -8,6 +8,7 @@ const LIGHT_SLIDER_PROPS: ISliderProps = { maxLabel: "Bright", type: "light", axisLabel: "L", + step: 1, }; export const LIGHT_SENSOR_PROPERTIES: ISensorProps = { @@ -23,6 +24,7 @@ const MOTION_SLIDER_PROPS_X: ISliderProps = { minLabel: "Left", minValue: -1023, type: SENSOR_LIST.MOTION_X, + step: 1, }; const MOTION_SLIDER_PROPS_Y: ISliderProps = { @@ -32,6 +34,7 @@ const MOTION_SLIDER_PROPS_Y: ISliderProps = { minLabel: "Back", minValue: -1023, type: SENSOR_LIST.MOTION_Y, + step: 1, }; const MOTION_SLIDER_PROPS_Z: ISliderProps = { @@ -41,6 +44,7 @@ const MOTION_SLIDER_PROPS_Z: ISliderProps = { minLabel: "Up", minValue: -1023, type: SENSOR_LIST.MOTION_Z, + step: 1, }; export const MOTION_SENSOR_PROPERTIES: ISensorProps = { @@ -60,6 +64,7 @@ const TEMPERATURE_SLIDER_PROPS: ISliderProps = { minLabel: "Cold", minValue: -55, type: SENSOR_LIST.TEMPERATURE, + step: 1, }; export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = { diff --git a/src/view/viewUtils.tsx b/src/view/viewUtils.tsx index cc12abd59..1335d039f 100644 --- a/src/view/viewUtils.tsx +++ b/src/view/viewUtils.tsx @@ -11,6 +11,7 @@ export interface ISliderProps { axisLabel: string; value?: number; onUpdateValue?: (sensor: SENSOR_LIST, value: number) => void; + step: number; } export interface ISensorButtonProps { From 32ec778bfebfed9b8f113a1a2aaf06cb171975ec Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 20 Apr 2020 09:25:09 -0700 Subject: [PATCH 2/3] Refactor --- src/view/components/cpx/Cpx.tsx | 2 +- src/view/components/toolbar/InputSlider.tsx | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/view/components/cpx/Cpx.tsx b/src/view/components/cpx/Cpx.tsx index a28343b28..d91728fba 100644 --- a/src/view/components/cpx/Cpx.tsx +++ b/src/view/components/cpx/Cpx.tsx @@ -11,7 +11,7 @@ import Simulator from "./CpxSimulator"; // Component grouping the functionality for circuit playground express const DEFAULT_STATE = { sensors: { - [SENSOR_LIST.TEMPERATURE]: 0.0, + [SENSOR_LIST.TEMPERATURE]: 0, [SENSOR_LIST.LIGHT]: 0, [SENSOR_LIST.MOTION_X]: 0, [SENSOR_LIST.MOTION_Y]: 0, diff --git a/src/view/components/toolbar/InputSlider.tsx b/src/view/components/toolbar/InputSlider.tsx index b4c0a167a..c88479a78 100644 --- a/src/view/components/toolbar/InputSlider.tsx +++ b/src/view/components/toolbar/InputSlider.tsx @@ -104,7 +104,6 @@ class InputSlider extends React.Component { private validateRange = (valueString: string) => { let valueInt = parseFloat(valueString); - console.log(`original value ${valueString}`); if (valueInt < this.props.minValue) { valueInt = this.props.minValue; this.setState({ value: valueInt }); @@ -112,8 +111,6 @@ class InputSlider extends React.Component { valueInt = this.props.maxValue; this.setState({ value: valueInt }); } - console.log(`updated value ${valueInt}`); - return valueInt; }; } From 08b35cf379ab7cbace3441af9fc94f5ddbeb78b5 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 20 Apr 2020 15:43:25 -0700 Subject: [PATCH 3/3] Modify precision value for cpx and clue --- src/view/components/toolbar/InputSlider.tsx | 4 ++- .../toolbar/clue/ClueSensorProperties.tsx | 30 +++++++++---------- 2 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/view/components/toolbar/InputSlider.tsx b/src/view/components/toolbar/InputSlider.tsx index c88479a78..9d163aca3 100644 --- a/src/view/components/toolbar/InputSlider.tsx +++ b/src/view/components/toolbar/InputSlider.tsx @@ -21,7 +21,9 @@ class InputSlider extends React.Component { render() { const isInputDisabled = this.context === VIEW_STATE.PAUSE; - const nbDecimals = this.props.step.toString().split(".")[1].length || 0; + + const nbDecimals = + this.props.step.toString().split(".")[1]?.length || 0; return (
{this.props.axisLabel} diff --git a/src/view/components/toolbar/clue/ClueSensorProperties.tsx b/src/view/components/toolbar/clue/ClueSensorProperties.tsx index e3293a493..e1f124557 100644 --- a/src/view/components/toolbar/clue/ClueSensorProperties.tsx +++ b/src/view/components/toolbar/clue/ClueSensorProperties.tsx @@ -4,7 +4,7 @@ import { ISensorProps, ISliderProps } from "../../../viewUtils"; const CLUE_SLIDER_R: ISliderProps = { axisLabel: "R", maxLabel: "Max", - maxValue: 255, + maxValue: 65535, minLabel: "Min", minValue: 0, type: SENSOR_LIST.LIGHT_R, @@ -14,7 +14,7 @@ const CLUE_SLIDER_R: ISliderProps = { const CLUE_SLIDER_G: ISliderProps = { axisLabel: "G", maxLabel: "Max", - maxValue: 255, + maxValue: 65535, minLabel: "Min", minValue: 0, type: SENSOR_LIST.LIGHT_G, @@ -24,7 +24,7 @@ const CLUE_SLIDER_G: ISliderProps = { const CLUE_SLIDER_B: ISliderProps = { axisLabel: "B", maxLabel: "Max", - maxValue: 255, + maxValue: 65535, minLabel: "Min", minValue: 0, type: SENSOR_LIST.LIGHT_B, @@ -54,7 +54,7 @@ const CLUE_MAGNET_X: ISliderProps = { maxValue: 1000, minValue: -1000, type: SENSOR_LIST.MAGNET_X, - step: 1, + step: 0.1, }; const CLUE_MAGNET_Y: ISliderProps = { axisLabel: "Y", @@ -63,7 +63,7 @@ const CLUE_MAGNET_Y: ISliderProps = { maxValue: 1000, minValue: -1000, type: SENSOR_LIST.MAGNET_Y, - step: 1, + step: 0.1, }; const CLUE_MAGNET_Z: ISliderProps = { axisLabel: "Z", @@ -72,7 +72,7 @@ const CLUE_MAGNET_Z: ISliderProps = { maxValue: 1000, minValue: -1000, type: SENSOR_LIST.MAGNET_Z, - step: 1, + step: 0.1, }; export const CLUE_MAGNET_PROPERTIES: ISensorProps = { @@ -87,7 +87,7 @@ const CLUE_GYRO_X: ISliderProps = { maxValue: 1000, minValue: -1000, type: SENSOR_LIST.GYRO_X, - step: 1, + step: 0.1, }; const CLUE_GYRO_Y: ISliderProps = { axisLabel: "Y", @@ -96,7 +96,7 @@ const CLUE_GYRO_Y: ISliderProps = { maxValue: 1000, minValue: -1000, type: SENSOR_LIST.GYRO_Y, - step: 1, + step: 0.1, }; const CLUE_GYRO_Z: ISliderProps = { axisLabel: "Z", @@ -105,7 +105,7 @@ const CLUE_GYRO_Z: ISliderProps = { maxValue: 1000, minValue: -1000, type: SENSOR_LIST.GYRO_Z, - step: 1, + step: 0.1, }; export const CLUE_GYRO_PROPERTIES: ISensorProps = { @@ -124,7 +124,7 @@ export const CLUE_HUMIDITY_PROPERTIES: ISensorProps = { minLabel: "Min", minValue: 0, type: SENSOR_LIST.HUMIDITY, - step: 1, + step: 0.1, }, ], unitLabel: "%", @@ -154,7 +154,7 @@ export const CLUE_PRESSURE_PROPERTIES: ISensorProps = { minLabel: "Min", minValue: 800, type: SENSOR_LIST.PRESSURE, - step: 1, + step: 0.1, }, ], unitLabel: "hPa", @@ -166,7 +166,7 @@ const MOTION_SLIDER_PROPS_X: ISliderProps = { minLabel: "Left", minValue: -1023, type: SENSOR_LIST.MOTION_X, - step: 1, + step: 0.1, }; const MOTION_SLIDER_PROPS_Y: ISliderProps = { @@ -176,7 +176,7 @@ const MOTION_SLIDER_PROPS_Y: ISliderProps = { minLabel: "Back", minValue: -1023, type: SENSOR_LIST.MOTION_Y, - step: 1, + step: 0.1, }; const MOTION_SLIDER_PROPS_Z: ISliderProps = { @@ -186,7 +186,7 @@ const MOTION_SLIDER_PROPS_Z: ISliderProps = { minLabel: "Up", minValue: -1023, type: SENSOR_LIST.MOTION_Z, - step: 1, + step: 0.1, }; export const MOTION_SENSOR_PROPERTIES: ISensorProps = { @@ -206,7 +206,7 @@ const TEMPERATURE_SLIDER_PROPS: ISliderProps = { minLabel: "Cold", minValue: -55, type: SENSOR_LIST.TEMPERATURE, - step: 1, + step: 0.1, }; export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = {