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

Commit 75a7607

Browse files
xnkevinnguyenxnkevinnguyen
committed
Add modal for compass, gyro and magnet
1 parent 1e41705 commit 75a7607

File tree

7 files changed

+166
-11
lines changed

7 files changed

+166
-11
lines changed

‎src/view/components/clue/Clue.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,12 @@ const DEFAULT_STATE = {
3333
[SENSOR_LIST.HUMIDITY]: 0,
3434
[SENSOR_LIST.PRESSURE]: 0,
3535
[SENSOR_LIST.PROXIMITY]: 0,
36+
[SENSOR_LIST.GYRO_X]: 0,
37+
[SENSOR_LIST.GYRO_Y]: 0,
38+
[SENSOR_LIST.GYRO_Z]: 0,
39+
[SENSOR_LIST.MAGNET_X]: 0,
40+
[SENSOR_LIST.MAGNET_Y]: 0,
41+
[SENSOR_LIST.MAGNET_Z]: 0,
3642
},
3743
currentSelectedGesture: GESTURES_CLUE[0],
3844
};
@@ -129,6 +135,14 @@ const CLUE_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [
129135
label: CLUE_TOOLBAR_ICON_ID.GESTURE,
130136
image: TOOLBAR_SVG.GESTURE_SVG,
131137
},
138+
{
139+
label: CLUE_TOOLBAR_ICON_ID.GYROSCOPE,
140+
image: TOOLBAR_SVG.GYROSCOPE_SVG,
141+
},
142+
{
143+
label: CLUE_TOOLBAR_ICON_ID.MAGNETOSCOPE,
144+
image: TOOLBAR_SVG.MAGNET_SVG,
145+
},
132146
{
133147
label: CLUE_TOOLBAR_ICON_ID.GPIO,
134148
image: TOOLBAR_SVG.GPIO_SVG,

‎src/view/components/microbit/Microbit.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,10 @@ const MICROBIT_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [
115115
image: TOOLBAR_SVG.GPIO_SVG,
116116
label: MICROBIT_TOOLBAR_ICON_ID.GPIO,
117117
},
118+
{
119+
image: TOOLBAR_SVG.GYROSCOPE_SVG,
120+
label: MICROBIT_TOOLBAR_ICON_ID.COMPASS,
121+
},
118122
{
119123
image: TOOLBAR_SVG.SPEAKER_SVG,
120124
label: MICROBIT_TOOLBAR_ICON_ID.SOUND,

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export const MICROBIT_TOOLBAR_ICON_ID = {
7474
SOUND: "toolbar-microbit-sound",
7575
WIRELESS: "toolbar-microbit-wireless",
7676
GESTURE: "toolbar-microbit-gesture-sensor",
77+
COMPASS: "toolbar-microbit-compass-sensor",
7778
};
7879

7980
export const CLUE_TOOLBAR_ICON_ID = {
@@ -90,6 +91,8 @@ export const CLUE_TOOLBAR_ICON_ID = {
9091
GESTURE: "toolbar-clue-gesture-sensor",
9192
PROXIMITY: "toolbar-clue-proximity-sensor",
9293
BLUETOOTH: "toolbar-clue-bluetooth",
94+
MAGNETOSCOPE: "toolbar-clue-magnet-sensor",
95+
GYROSCOPE: "toolbar-clue-gyroscope-sensor",
9396
};
9497

9598
export interface IModalContent {
@@ -304,13 +307,15 @@ export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
304307
[CPX_TOOLBAR_ICON_ID.TEMPERATURE, TEMPERATURE_MODAL_CONTENT],
305308
[
306309
MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER,
307-
MICROBIT_MODAL.ACCELEROMETER_MODAL_CONTENT,
310+
MICROBIT_MODAL.ACCELEROMETER_CONTENT,
308311
],
312+
[MICROBIT_TOOLBAR_ICON_ID.COMPASS, MICROBIT_MODAL.COMPASS_CONTENT],
309313
[MICROBIT_TOOLBAR_ICON_ID.LEDS, MICROBIT_MODAL.LED_CONTENT],
310314
[MICROBIT_TOOLBAR_ICON_ID.PUSH_BUTTON, MICROBIT_MODAL.BUTTON_CONTENT],
311-
[MICROBIT_TOOLBAR_ICON_ID.GPIO, MICROBIT_MODAL.GPIO_MODAL_CONTENT],
312-
[MICROBIT_TOOLBAR_ICON_ID.SOUND, MICROBIT_MODAL.SOUND_MODAL_CONTENT],
315+
[MICROBIT_TOOLBAR_ICON_ID.GPIO, MICROBIT_MODAL.GPIO_CONTENT],
316+
[MICROBIT_TOOLBAR_ICON_ID.SOUND, MICROBIT_MODAL.SOUND_CONTENT],
313317
[MICROBIT_TOOLBAR_ICON_ID.WIRELESS, MICROBIT_MODAL.WIRELESS_CONTENT],
318+
[MICROBIT_TOOLBAR_ICON_ID.COMPASS, MICROBIT_MODAL.COMPASS_CONTENT],
314319
[CLUE_TOOLBAR_ICON_ID.TEMPERATURE, CLUE_MODAL.TEMPERATURE_CONTENT],
315320
[CLUE_TOOLBAR_ICON_ID.ACCELEROMETER, CLUE_MODAL.ACCELEROMETER_CONTENT],
316321
[CLUE_TOOLBAR_ICON_ID.PUSH_BUTTON, CLUE_MODAL.BUTTON_CONTENT],
@@ -324,6 +329,8 @@ export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
324329
[CLUE_TOOLBAR_ICON_ID.BLUETOOTH, CLUE_MODAL.BLUETOOTH_CONTENT],
325330
[CLUE_TOOLBAR_ICON_ID.ACCELEROMETER, CLUE_MODAL.ACCELEROMETER_CONTENT],
326331
[CLUE_TOOLBAR_ICON_ID.SPEAKER, CLUE_MODAL.SPEAKER_CONTENT],
332+
[CLUE_TOOLBAR_ICON_ID.GYROSCOPE, CLUE_MODAL.GYROSCOPE_CONTENT],
333+
[CLUE_TOOLBAR_ICON_ID.MAGNETOSCOPE, CLUE_MODAL.MAGNETOSCOPE_CONTENT],
327334
]);
328335

329336
export const getModalContent = (
@@ -336,10 +343,7 @@ export const getModalContent = (
336343
if (label === CLUE_TOOLBAR_ICON_ID.GESTURE) {
337344
return CLUE_MODAL.GESTURE_CONTENT(onSelectGestures, sendGesture);
338345
} else if (label === MICROBIT_TOOLBAR_ICON_ID.GESTURE) {
339-
return MICROBIT_MODAL.GESTURE_MODAL_CONTENT(
340-
onSelectGestures,
341-
sendGesture
342-
);
346+
return MICROBIT_MODAL.GESTURE_CONTENT(onSelectGestures, sendGesture);
343347
}
344348
const modalContentConstructor = LABEL_TO_MODAL_CONTENT_CONSTRUCTOR.get(
345349
label

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,56 @@ export const ACCELEROMETER_CONTENT = (
6868
tryItDescription: "toolbar-clue-accelerometer-sensor.tryItDescription",
6969
};
7070
};
71+
export const GYROSCOPE_CONTENT = (
72+
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
73+
sensorValues: { [key: string]: number }
74+
): IModalContent => {
75+
const gyroSensorValues = {
76+
X: sensorValues[SENSOR_LIST.GYRO_X],
77+
Y: sensorValues[SENSOR_LIST.GYRO_Y],
78+
Z: sensorValues[SENSOR_LIST.GYRO_Z],
79+
};
80+
return {
81+
components: (
82+
<GenericSliderComponent
83+
onUpdateValue={onUpdateValue}
84+
axisValues={gyroSensorValues}
85+
axisProperties={SENSOR_PROPERTIES.CLUE_GYRO_PROPERTIES}
86+
/>
87+
),
88+
descriptionText: "toolbar-clue-gyroscope-sensor.description",
89+
descriptionTitle: "toolbar-clue-gyroscope-sensor.title",
90+
id: "gyroscope",
91+
tagInput: TAG_INPUT_SVG,
92+
tagOutput: undefined,
93+
tryItDescription: "toolbar-clue-gyroscope-sensor.tryItDescription",
94+
};
95+
};
96+
export const MAGNETOSCOPE_CONTENT = (
97+
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
98+
sensorValues: { [key: string]: number }
99+
): IModalContent => {
100+
const magnetSensorValues = {
101+
X: sensorValues[SENSOR_LIST.MAGNET_X],
102+
Y: sensorValues[SENSOR_LIST.MAGNET_Y],
103+
Z: sensorValues[SENSOR_LIST.MAGNET_Z],
104+
};
105+
return {
106+
components: (
107+
<GenericSliderComponent
108+
onUpdateValue={onUpdateValue}
109+
axisValues={magnetSensorValues}
110+
axisProperties={SENSOR_PROPERTIES.CLUE_MAGNET_PROPERTIES}
111+
/>
112+
),
113+
descriptionText: "toolbar-clue-magnet-sensor.description",
114+
descriptionTitle: "toolbar-clue-magnet-sensor.title",
115+
id: "magnetoscope",
116+
tagInput: TAG_INPUT_SVG,
117+
tagOutput: undefined,
118+
tryItDescription: "toolbar-clue-magnet-sensor.tryItDescription",
119+
};
120+
};
71121

72122
export const LIGHT_CONTENT = (
73123
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,69 @@ export const CLUE_LIGHT_PROPERTIES: ISensorProps = {
4141
sliderProps: [CLUE_SLIDER_R, CLUE_SLIDER_G, CLUE_SLIDER_B, CLUE_SLIDER_C],
4242
unitLabel: "Lux",
4343
};
44+
45+
// Range for magnet found here https://www.adafruit.com/product/4479
46+
const CLUE_MAGNET_X: ISliderProps = {
47+
axisLabel: "X",
48+
maxLabel: "Max",
49+
minLabel: "Min",
50+
maxValue: 1600,
51+
minValue: 400,
52+
type: SENSOR_LIST.MAGNET_X,
53+
};
54+
const CLUE_MAGNET_Y: ISliderProps = {
55+
axisLabel: "Y",
56+
maxLabel: "Max",
57+
minLabel: "Min",
58+
maxValue: 1600,
59+
minValue: 400,
60+
type: SENSOR_LIST.MAGNET_Y,
61+
};
62+
const CLUE_MAGNET_Z: ISliderProps = {
63+
axisLabel: "Z",
64+
maxLabel: "Max",
65+
minLabel: "Min",
66+
maxValue: 1600,
67+
minValue: 400,
68+
type: SENSOR_LIST.MAGNET_Z,
69+
};
70+
71+
export const CLUE_MAGNET_PROPERTIES: ISensorProps = {
72+
LABEL: "Magnetoscope",
73+
sliderProps: [CLUE_MAGNET_X, CLUE_MAGNET_Y, CLUE_MAGNET_Z],
74+
unitLabel: "μT",
75+
};
76+
const CLUE_GYRO_X: ISliderProps = {
77+
axisLabel: "X",
78+
maxLabel: "Max",
79+
minLabel: "Min",
80+
maxValue: 1000,
81+
minValue: -1000,
82+
type: SENSOR_LIST.GYRO_X,
83+
};
84+
const CLUE_GYRO_Y: ISliderProps = {
85+
axisLabel: "Y",
86+
maxLabel: "Max",
87+
minLabel: "Min",
88+
maxValue: 1000,
89+
minValue: -1000,
90+
type: SENSOR_LIST.GYRO_Y,
91+
};
92+
const CLUE_GYRO_Z: ISliderProps = {
93+
axisLabel: "Z",
94+
maxLabel: "Max",
95+
minLabel: "Min",
96+
maxValue: 1000,
97+
minValue: -1000,
98+
type: SENSOR_LIST.GYRO_Z,
99+
};
100+
101+
export const CLUE_GYRO_PROPERTIES: ISensorProps = {
102+
LABEL: "Gyroscope",
103+
sliderProps: [CLUE_GYRO_X, CLUE_GYRO_Y, CLUE_GYRO_Z],
104+
unitLabel: "deg/s",
105+
};
106+
44107
export const CLUE_HUMIDITY_PROPERTIES: ISensorProps = {
45108
LABEL: "Humidity Sensor",
46109
sliderProps: [

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Accelerometer } from "../motion/Accelerometer";
66
import { Gesture } from "../motion/Gesture";
77
import { FEATURE_REQUEST_ON_GITHUB, IModalContent } from "../SensorModalUtils";
88

9-
export const ACCELEROMETER_MODAL_CONTENT = (
9+
export const ACCELEROMETER_CONTENT = (
1010
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
1111
sensorValues: { [key: string]: number }
1212
): IModalContent => {
@@ -60,7 +60,7 @@ export const BUTTON_CONTENT = (
6060
id: "microbit_button",
6161
};
6262
};
63-
export const SOUND_MODAL_CONTENT = (
63+
export const SOUND_CONTENT = (
6464
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
6565
sensorValues: { [key: string]: number }
6666
): IModalContent => {
@@ -74,7 +74,7 @@ export const SOUND_MODAL_CONTENT = (
7474
id: "microbit_sound",
7575
};
7676
};
77-
export const GPIO_MODAL_CONTENT = (
77+
export const GPIO_CONTENT = (
7878
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
7979
sensorValues: { [key: string]: number }
8080
): IModalContent => {
@@ -88,6 +88,20 @@ export const GPIO_MODAL_CONTENT = (
8888
id: "microbit_gpio",
8989
};
9090
};
91+
export const COMPASS_CONTENT = (
92+
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
93+
sensorValues: { [key: string]: number }
94+
): IModalContent => {
95+
return {
96+
descriptionTitle: "toolbar-microbit-compass-sensor.title",
97+
tagInput: TAG_INPUT_SVG,
98+
tagOutput: TAG_OUTPUT_SVG,
99+
descriptionText: "toolbar-microbit-compass-sensor.description",
100+
tryItDescription: "toolbar-microbit-compass-sensor.tryItDescription",
101+
components: [FEATURE_REQUEST_ON_GITHUB],
102+
id: "microbit_compass",
103+
};
104+
};
91105
export const WIRELESS_CONTENT = (
92106
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
93107
sensorValues: { [key: string]: number }
@@ -102,7 +116,7 @@ export const WIRELESS_CONTENT = (
102116
id: "microbit_wireless",
103117
};
104118
};
105-
export const GESTURE_MODAL_CONTENT = (
119+
export const GESTURE_CONTENT = (
106120
onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
107121
sendGesture?: (isActive: boolean) => void
108122
): IModalContent => {

‎src/view/constants.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,12 @@ export enum SENSOR_LIST {
107107
HUMIDITY = "humidity",
108108
PRESSURE = "pressure",
109109
PROXIMITY = "proximity",
110+
MAGNET_X = "magnet_x",
111+
MAGNET_Y = "magnet_y",
112+
MAGNET_Z = "magnet_z",
113+
GYRO_X = "gyro_x",
114+
GYRO_Y = "gyro_y",
115+
GYRO_Z = "gyro_z",
110116
}
111117

112118
export const GESTURES_MICROBIT = [

0 commit comments

Comments
 (0)