Skip to content
This repository was archived by the owner on Dec 23, 2021. It is now read-only.

Commit 609567d

Browse files
xnkevinnguyenxnkevinnguyen
committed
Add precision to input slider
1 parent f090660 commit 609567d

File tree

7 files changed

+40
-5
lines changed

7 files changed

+40
-5
lines changed

‎src/view/components/cpx/Cpx.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import Simulator from "./CpxSimulator";
1111
// Component grouping the functionality for circuit playground express
1212
const DEFAULT_STATE = {
1313
sensors: {
14-
[SENSOR_LIST.TEMPERATURE]: 0,
14+
[SENSOR_LIST.TEMPERATURE]: 0.0,
1515
[SENSOR_LIST.LIGHT]: 0,
1616
[SENSOR_LIST.MOTION_X]: 0,
1717
[SENSOR_LIST.MOTION_Y]: 0,

‎src/view/components/toolbar/GenericSliderComponent.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export const GenericSliderComponent: React.FC<IProps> = props => {
2929
value={
3030
props.axisValues[sliderProperties.axisLabel]
3131
}
32+
step={sliderProperties.step}
3233
/>
3334
<br />
3435
</React.Fragment>

‎src/view/components/toolbar/InputSlider.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
2121

2222
render() {
2323
const isInputDisabled = this.context === VIEW_STATE.PAUSE;
24+
const nbDecimals = this.props.step.toString().split(".")[1].length || 0;
2425
return (
2526
<div className="input-slider">
2627
<span>{this.props.axisLabel}</span>
@@ -31,8 +32,9 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
3132
onInput={this.handleOnChange}
3233
defaultValue={this.props.minValue.toLocaleString()}
3334
pattern={`^-?[0-9]{0,${
34-
this.props.maxValue.toString().length
35-
}}$`}
35+
(this.props.maxValue / this.props.step).toString()
36+
.length
37+
}}[.]{0,${nbDecimals > 0 ? 1 : 0}}[0-9]{0,${nbDecimals}}$`}
3638
onKeyUp={this.handleOnChange}
3739
aria-label={`${this.props.type} sensor input ${this.props.axisLabel}`}
3840
/>
@@ -56,6 +58,7 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
5658
aria-label={`${this.props.type} sensor`}
5759
defaultValue={this.props.minValue.toLocaleString()}
5860
disabled={isInputDisabled}
61+
step={this.props.step}
5962
/>
6063
<span className="downLabelArea">
6164
<span className="minLabel">{this.props.minLabel}</span>
@@ -100,14 +103,17 @@ class InputSlider extends React.Component<ISliderProps, any, any> {
100103
};
101104

102105
private validateRange = (valueString: string) => {
103-
let valueInt = parseInt(valueString, 10);
106+
let valueInt = parseFloat(valueString);
107+
console.log(`original value ${valueString}`);
104108
if (valueInt < this.props.minValue) {
105109
valueInt = this.props.minValue;
106110
this.setState({ value: valueInt });
107111
} else if (valueInt > this.props.maxValue) {
108112
valueInt = this.props.maxValue;
109113
this.setState({ value: valueInt });
110114
}
115+
console.log(`updated value ${valueInt}`);
116+
111117
return valueInt;
112118
};
113119
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const CLUE_SLIDER_R: ISliderProps = {
88
minLabel: "Min",
99
minValue: 0,
1010
type: SENSOR_LIST.LIGHT_R,
11+
step: 1,
1112
};
1213

1314
const CLUE_SLIDER_G: ISliderProps = {
@@ -17,6 +18,7 @@ const CLUE_SLIDER_G: ISliderProps = {
1718
minLabel: "Min",
1819
minValue: 0,
1920
type: SENSOR_LIST.LIGHT_G,
21+
step: 1,
2022
};
2123

2224
const CLUE_SLIDER_B: ISliderProps = {
@@ -26,6 +28,7 @@ const CLUE_SLIDER_B: ISliderProps = {
2628
minLabel: "Min",
2729
minValue: 0,
2830
type: SENSOR_LIST.LIGHT_B,
31+
step: 1,
2932
};
3033
const CLUE_SLIDER_C: ISliderProps = {
3134
axisLabel: "C",
@@ -34,6 +37,7 @@ const CLUE_SLIDER_C: ISliderProps = {
3437
minLabel: "Min",
3538
minValue: 0,
3639
type: SENSOR_LIST.LIGHT_C,
40+
step: 1,
3741
};
3842

3943
export const CLUE_LIGHT_PROPERTIES: ISensorProps = {
@@ -50,6 +54,7 @@ const CLUE_MAGNET_X: ISliderProps = {
5054
maxValue: 1000,
5155
minValue: -1000,
5256
type: SENSOR_LIST.MAGNET_X,
57+
step: 1,
5358
};
5459
const CLUE_MAGNET_Y: ISliderProps = {
5560
axisLabel: "Y",
@@ -58,6 +63,7 @@ const CLUE_MAGNET_Y: ISliderProps = {
5863
maxValue: 1000,
5964
minValue: -1000,
6065
type: SENSOR_LIST.MAGNET_Y,
66+
step: 1,
6167
};
6268
const CLUE_MAGNET_Z: ISliderProps = {
6369
axisLabel: "Z",
@@ -66,6 +72,7 @@ const CLUE_MAGNET_Z: ISliderProps = {
6672
maxValue: 1000,
6773
minValue: -1000,
6874
type: SENSOR_LIST.MAGNET_Z,
75+
step: 1,
6976
};
7077

7178
export const CLUE_MAGNET_PROPERTIES: ISensorProps = {
@@ -80,6 +87,7 @@ const CLUE_GYRO_X: ISliderProps = {
8087
maxValue: 1000,
8188
minValue: -1000,
8289
type: SENSOR_LIST.GYRO_X,
90+
step: 1,
8391
};
8492
const CLUE_GYRO_Y: ISliderProps = {
8593
axisLabel: "Y",
@@ -88,6 +96,7 @@ const CLUE_GYRO_Y: ISliderProps = {
8896
maxValue: 1000,
8997
minValue: -1000,
9098
type: SENSOR_LIST.GYRO_Y,
99+
step: 1,
91100
};
92101
const CLUE_GYRO_Z: ISliderProps = {
93102
axisLabel: "Z",
@@ -96,6 +105,7 @@ const CLUE_GYRO_Z: ISliderProps = {
96105
maxValue: 1000,
97106
minValue: -1000,
98107
type: SENSOR_LIST.GYRO_Z,
108+
step: 1,
99109
};
100110

101111
export const CLUE_GYRO_PROPERTIES: ISensorProps = {
@@ -114,6 +124,7 @@ export const CLUE_HUMIDITY_PROPERTIES: ISensorProps = {
114124
minLabel: "Min",
115125
minValue: 0,
116126
type: SENSOR_LIST.HUMIDITY,
127+
step: 1,
117128
},
118129
],
119130
unitLabel: "%",
@@ -128,6 +139,7 @@ export const CLUE__PROXIMITY_PROPERTIES: ISensorProps = {
128139
minLabel: "Min",
129140
minValue: 0,
130141
type: SENSOR_LIST.PROXIMITY,
142+
step: 1,
131143
},
132144
],
133145
unitLabel: "",
@@ -142,6 +154,7 @@ export const CLUE_PRESSURE_PROPERTIES: ISensorProps = {
142154
minLabel: "Min",
143155
minValue: 800,
144156
type: SENSOR_LIST.PRESSURE,
157+
step: 1,
145158
},
146159
],
147160
unitLabel: "hPa",
@@ -153,6 +166,7 @@ const MOTION_SLIDER_PROPS_X: ISliderProps = {
153166
minLabel: "Left",
154167
minValue: -1023,
155168
type: SENSOR_LIST.MOTION_X,
169+
step: 1,
156170
};
157171

158172
const MOTION_SLIDER_PROPS_Y: ISliderProps = {
@@ -162,6 +176,7 @@ const MOTION_SLIDER_PROPS_Y: ISliderProps = {
162176
minLabel: "Back",
163177
minValue: -1023,
164178
type: SENSOR_LIST.MOTION_Y,
179+
step: 1,
165180
};
166181

167182
const MOTION_SLIDER_PROPS_Z: ISliderProps = {
@@ -171,6 +186,7 @@ const MOTION_SLIDER_PROPS_Z: ISliderProps = {
171186
minLabel: "Up",
172187
minValue: -1023,
173188
type: SENSOR_LIST.MOTION_Z,
189+
step: 1,
174190
};
175191

176192
export const MOTION_SENSOR_PROPERTIES: ISensorProps = {
@@ -190,6 +206,7 @@ const TEMPERATURE_SLIDER_PROPS: ISliderProps = {
190206
minLabel: "Cold",
191207
minValue: -55,
192208
type: SENSOR_LIST.TEMPERATURE,
209+
step: 1,
193210
};
194211

195212
export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = {

‎src/view/components/toolbar/cpx/CpxSensorProperties.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import { SENSOR_LIST } from "../../../constants";
22
import { ISensorProps, ISliderProps } from "../../../viewUtils";
33

44
const LIGHT_SLIDER_PROPS: ISliderProps = {
5-
maxValue: 255,
5+
maxValue: 320,
66
minValue: 0,
77
minLabel: "Dark",
88
maxLabel: "Bright",
99
type: "light",
1010
axisLabel: "L",
11+
step: 1,
1112
};
1213

1314
export const LIGHT_SENSOR_PROPERTIES: ISensorProps = {
@@ -23,6 +24,7 @@ const TEMPERATURE_SLIDER_PROPS: ISliderProps = {
2324
minLabel: "Cold",
2425
minValue: -55,
2526
type: SENSOR_LIST.TEMPERATURE,
27+
step: 0.1,
2628
};
2729
export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = {
2830
LABEL: "Temperature sensor",
@@ -37,6 +39,7 @@ const MOTION_SLIDER_PROPS_X: ISliderProps = {
3739
minLabel: "Left",
3840
minValue: -78,
3941
type: SENSOR_LIST.MOTION_X,
42+
step: 1,
4043
};
4144
const MOTION_SLIDER_PROPS_Y: ISliderProps = {
4245
axisLabel: "Y",
@@ -45,6 +48,7 @@ const MOTION_SLIDER_PROPS_Y: ISliderProps = {
4548
minLabel: "Back",
4649
minValue: -78,
4750
type: SENSOR_LIST.MOTION_Y,
51+
step: 1,
4852
};
4953
const MOTION_SLIDER_PROPS_Z: ISliderProps = {
5054
axisLabel: "Z",
@@ -53,6 +57,7 @@ const MOTION_SLIDER_PROPS_Z: ISliderProps = {
5357
minLabel: "Up",
5458
minValue: -78,
5559
type: SENSOR_LIST.MOTION_Z,
60+
step: 1,
5661
};
5762

5863
export const MOTION_SENSOR_PROPERTIES: ISensorProps = {

‎src/view/components/toolbar/microbit/MicrobitSensorProperties.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const LIGHT_SLIDER_PROPS: ISliderProps = {
88
maxLabel: "Bright",
99
type: "light",
1010
axisLabel: "L",
11+
step: 1,
1112
};
1213

1314
export const LIGHT_SENSOR_PROPERTIES: ISensorProps = {
@@ -23,6 +24,7 @@ const MOTION_SLIDER_PROPS_X: ISliderProps = {
2324
minLabel: "Left",
2425
minValue: -1023,
2526
type: SENSOR_LIST.MOTION_X,
27+
step: 1,
2628
};
2729

2830
const MOTION_SLIDER_PROPS_Y: ISliderProps = {
@@ -32,6 +34,7 @@ const MOTION_SLIDER_PROPS_Y: ISliderProps = {
3234
minLabel: "Back",
3335
minValue: -1023,
3436
type: SENSOR_LIST.MOTION_Y,
37+
step: 1,
3538
};
3639

3740
const MOTION_SLIDER_PROPS_Z: ISliderProps = {
@@ -41,6 +44,7 @@ const MOTION_SLIDER_PROPS_Z: ISliderProps = {
4144
minLabel: "Up",
4245
minValue: -1023,
4346
type: SENSOR_LIST.MOTION_Z,
47+
step: 1,
4448
};
4549

4650
export const MOTION_SENSOR_PROPERTIES: ISensorProps = {
@@ -60,6 +64,7 @@ const TEMPERATURE_SLIDER_PROPS: ISliderProps = {
6064
minLabel: "Cold",
6165
minValue: -55,
6266
type: SENSOR_LIST.TEMPERATURE,
67+
step: 1,
6368
};
6469

6570
export const TEMPERATURE_SENSOR_PROPERTIES: ISensorProps = {

‎src/view/viewUtils.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export interface ISliderProps {
1111
axisLabel: string;
1212
value?: number;
1313
onUpdateValue?: (sensor: SENSOR_LIST, value: number) => void;
14+
step: number;
1415
}
1516

1617
export interface ISensorButtonProps {

0 commit comments

Comments
 (0)