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..9d163aca3 100644 --- a/src/view/components/toolbar/InputSlider.tsx +++ b/src/view/components/toolbar/InputSlider.tsx @@ -21,6 +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; return (
{this.props.axisLabel} @@ -31,8 +34,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 +60,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 +105,7 @@ class InputSlider extends React.Component { }; private validateRange = (valueString: string) => { - let valueInt = parseInt(valueString, 10); + let valueInt = parseFloat(valueString); if (valueInt < this.props.minValue) { valueInt = this.props.minValue; this.setState({ value: valueInt }); diff --git a/src/view/components/toolbar/clue/ClueSensorProperties.tsx b/src/view/components/toolbar/clue/ClueSensorProperties.tsx index 2e2b9975a..e1f124557 100644 --- a/src/view/components/toolbar/clue/ClueSensorProperties.tsx +++ b/src/view/components/toolbar/clue/ClueSensorProperties.tsx @@ -4,28 +4,31 @@ 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, + step: 1, }; const CLUE_SLIDER_G: ISliderProps = { axisLabel: "G", maxLabel: "Max", - maxValue: 255, + maxValue: 65535, minLabel: "Min", minValue: 0, type: SENSOR_LIST.LIGHT_G, + step: 1, }; const CLUE_SLIDER_B: ISliderProps = { axisLabel: "B", maxLabel: "Max", - maxValue: 255, + maxValue: 65535, 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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.1, }, ], unitLabel: "hPa", @@ -153,6 +166,7 @@ const MOTION_SLIDER_PROPS_X: ISliderProps = { minLabel: "Left", minValue: -1023, type: SENSOR_LIST.MOTION_X, + step: 0.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: 0.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: 0.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: 0.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 {