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

Commit

Permalink
Add modal for compass, gyro and magnet
Browse files Browse the repository at this point in the history
  • Loading branch information
@xnkevinnguyen
xnkevinnguyen committed Apr 6, 2020
1 parent 1e41705 commit 75a7607
Show file tree
Hide file tree
Showing 7 changed files with 166 additions and 11 deletions.
14 changes: 14 additions & 0 deletions src/view/components/clue/Clue.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@ const DEFAULT_STATE = {
[SENSOR_LIST.HUMIDITY]: 0,
[SENSOR_LIST.PRESSURE]: 0,
[SENSOR_LIST.PROXIMITY]: 0,
[SENSOR_LIST.GYRO_X]: 0,
[SENSOR_LIST.GYRO_Y]: 0,
[SENSOR_LIST.GYRO_Z]: 0,
[SENSOR_LIST.MAGNET_X]: 0,
[SENSOR_LIST.MAGNET_Y]: 0,
[SENSOR_LIST.MAGNET_Z]: 0,
},
currentSelectedGesture: GESTURES_CLUE[0],
};
Expand Down Expand Up @@ -129,6 +135,14 @@ const CLUE_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [
label: CLUE_TOOLBAR_ICON_ID.GESTURE,
image: TOOLBAR_SVG.GESTURE_SVG,
},
{
label: CLUE_TOOLBAR_ICON_ID.GYROSCOPE,
image: TOOLBAR_SVG.GYROSCOPE_SVG,
},
{
label: CLUE_TOOLBAR_ICON_ID.MAGNETOSCOPE,
image: TOOLBAR_SVG.MAGNET_SVG,
},
{
label: CLUE_TOOLBAR_ICON_ID.GPIO,
image: TOOLBAR_SVG.GPIO_SVG,
Expand Down
4 changes: 4 additions & 0 deletions src/view/components/microbit/Microbit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,10 @@ const MICROBIT_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [
image: TOOLBAR_SVG.GPIO_SVG,
label: MICROBIT_TOOLBAR_ICON_ID.GPIO,
},
{
image: TOOLBAR_SVG.GYROSCOPE_SVG,
label: MICROBIT_TOOLBAR_ICON_ID.COMPASS,
},
{
image: TOOLBAR_SVG.SPEAKER_SVG,
label: MICROBIT_TOOLBAR_ICON_ID.SOUND,
Expand Down
18 changes: 11 additions & 7 deletions src/view/components/toolbar/SensorModalUtils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export const MICROBIT_TOOLBAR_ICON_ID = {
SOUND: "toolbar-microbit-sound",
WIRELESS: "toolbar-microbit-wireless",
GESTURE: "toolbar-microbit-gesture-sensor",
COMPASS: "toolbar-microbit-compass-sensor",
};

export const CLUE_TOOLBAR_ICON_ID = {
Expand All @@ -90,6 +91,8 @@ export const CLUE_TOOLBAR_ICON_ID = {
GESTURE: "toolbar-clue-gesture-sensor",
PROXIMITY: "toolbar-clue-proximity-sensor",
BLUETOOTH: "toolbar-clue-bluetooth",
MAGNETOSCOPE: "toolbar-clue-magnet-sensor",
GYROSCOPE: "toolbar-clue-gyroscope-sensor",
};

export interface IModalContent {
Expand Down Expand Up @@ -304,13 +307,15 @@ export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
[CPX_TOOLBAR_ICON_ID.TEMPERATURE, TEMPERATURE_MODAL_CONTENT],
[
MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER,
MICROBIT_MODAL.ACCELEROMETER_MODAL_CONTENT,
MICROBIT_MODAL.ACCELEROMETER_CONTENT,
],
[MICROBIT_TOOLBAR_ICON_ID.COMPASS, MICROBIT_MODAL.COMPASS_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.LEDS, MICROBIT_MODAL.LED_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.PUSH_BUTTON, MICROBIT_MODAL.BUTTON_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.GPIO, MICROBIT_MODAL.GPIO_MODAL_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.SOUND, MICROBIT_MODAL.SOUND_MODAL_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.GPIO, MICROBIT_MODAL.GPIO_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.SOUND, MICROBIT_MODAL.SOUND_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.WIRELESS, MICROBIT_MODAL.WIRELESS_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.COMPASS, MICROBIT_MODAL.COMPASS_CONTENT],
[CLUE_TOOLBAR_ICON_ID.TEMPERATURE, CLUE_MODAL.TEMPERATURE_CONTENT],
[CLUE_TOOLBAR_ICON_ID.ACCELEROMETER, CLUE_MODAL.ACCELEROMETER_CONTENT],
[CLUE_TOOLBAR_ICON_ID.PUSH_BUTTON, CLUE_MODAL.BUTTON_CONTENT],
Expand All @@ -324,6 +329,8 @@ export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
[CLUE_TOOLBAR_ICON_ID.BLUETOOTH, CLUE_MODAL.BLUETOOTH_CONTENT],
[CLUE_TOOLBAR_ICON_ID.ACCELEROMETER, CLUE_MODAL.ACCELEROMETER_CONTENT],
[CLUE_TOOLBAR_ICON_ID.SPEAKER, CLUE_MODAL.SPEAKER_CONTENT],
[CLUE_TOOLBAR_ICON_ID.GYROSCOPE, CLUE_MODAL.GYROSCOPE_CONTENT],
[CLUE_TOOLBAR_ICON_ID.MAGNETOSCOPE, CLUE_MODAL.MAGNETOSCOPE_CONTENT],
]);

export const getModalContent = (
Expand All @@ -336,10 +343,7 @@ export const getModalContent = (
if (label === CLUE_TOOLBAR_ICON_ID.GESTURE) {
return CLUE_MODAL.GESTURE_CONTENT(onSelectGestures, sendGesture);
} else if (label === MICROBIT_TOOLBAR_ICON_ID.GESTURE) {
return MICROBIT_MODAL.GESTURE_MODAL_CONTENT(
onSelectGestures,
sendGesture
);
return MICROBIT_MODAL.GESTURE_CONTENT(onSelectGestures, sendGesture);
}
const modalContentConstructor = LABEL_TO_MODAL_CONTENT_CONSTRUCTOR.get(
label
Expand Down
50 changes: 50 additions & 0 deletions src/view/components/toolbar/clue/ClueModalContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,56 @@ export const ACCELEROMETER_CONTENT = (
tryItDescription: "toolbar-clue-accelerometer-sensor.tryItDescription",
};
};
export const GYROSCOPE_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
const gyroSensorValues = {
X: sensorValues[SENSOR_LIST.GYRO_X],
Y: sensorValues[SENSOR_LIST.GYRO_Y],
Z: sensorValues[SENSOR_LIST.GYRO_Z],
};
return {
components: (
<GenericSliderComponent
onUpdateValue={onUpdateValue}
axisValues={gyroSensorValues}
axisProperties={SENSOR_PROPERTIES.CLUE_GYRO_PROPERTIES}
/>
),
descriptionText: "toolbar-clue-gyroscope-sensor.description",
descriptionTitle: "toolbar-clue-gyroscope-sensor.title",
id: "gyroscope",
tagInput: TAG_INPUT_SVG,
tagOutput: undefined,
tryItDescription: "toolbar-clue-gyroscope-sensor.tryItDescription",
};
};
export const MAGNETOSCOPE_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
const magnetSensorValues = {
X: sensorValues[SENSOR_LIST.MAGNET_X],
Y: sensorValues[SENSOR_LIST.MAGNET_Y],
Z: sensorValues[SENSOR_LIST.MAGNET_Z],
};
return {
components: (
<GenericSliderComponent
onUpdateValue={onUpdateValue}
axisValues={magnetSensorValues}
axisProperties={SENSOR_PROPERTIES.CLUE_MAGNET_PROPERTIES}
/>
),
descriptionText: "toolbar-clue-magnet-sensor.description",
descriptionTitle: "toolbar-clue-magnet-sensor.title",
id: "magnetoscope",
tagInput: TAG_INPUT_SVG,
tagOutput: undefined,
tryItDescription: "toolbar-clue-magnet-sensor.tryItDescription",
};
};

export const LIGHT_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
Expand Down
63 changes: 63 additions & 0 deletions src/view/components/toolbar/clue/ClueSensorProperties.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,69 @@ export const CLUE_LIGHT_PROPERTIES: ISensorProps = {
sliderProps: [CLUE_SLIDER_R, CLUE_SLIDER_G, CLUE_SLIDER_B, CLUE_SLIDER_C],
unitLabel: "Lux",
};

// Range for magnet found here https://www.adafruit.com/product/4479
const CLUE_MAGNET_X: ISliderProps = {
axisLabel: "X",
maxLabel: "Max",
minLabel: "Min",
maxValue: 1600,
minValue: 400,
type: SENSOR_LIST.MAGNET_X,
};
const CLUE_MAGNET_Y: ISliderProps = {
axisLabel: "Y",
maxLabel: "Max",
minLabel: "Min",
maxValue: 1600,
minValue: 400,
type: SENSOR_LIST.MAGNET_Y,
};
const CLUE_MAGNET_Z: ISliderProps = {
axisLabel: "Z",
maxLabel: "Max",
minLabel: "Min",
maxValue: 1600,
minValue: 400,
type: SENSOR_LIST.MAGNET_Z,
};

export const CLUE_MAGNET_PROPERTIES: ISensorProps = {
LABEL: "Magnetoscope",
sliderProps: [CLUE_MAGNET_X, CLUE_MAGNET_Y, CLUE_MAGNET_Z],
unitLabel: "μT",
};
const CLUE_GYRO_X: ISliderProps = {
axisLabel: "X",
maxLabel: "Max",
minLabel: "Min",
maxValue: 1000,
minValue: -1000,
type: SENSOR_LIST.GYRO_X,
};
const CLUE_GYRO_Y: ISliderProps = {
axisLabel: "Y",
maxLabel: "Max",
minLabel: "Min",
maxValue: 1000,
minValue: -1000,
type: SENSOR_LIST.GYRO_Y,
};
const CLUE_GYRO_Z: ISliderProps = {
axisLabel: "Z",
maxLabel: "Max",
minLabel: "Min",
maxValue: 1000,
minValue: -1000,
type: SENSOR_LIST.GYRO_Z,
};

export const CLUE_GYRO_PROPERTIES: ISensorProps = {
LABEL: "Gyroscope",
sliderProps: [CLUE_GYRO_X, CLUE_GYRO_Y, CLUE_GYRO_Z],
unitLabel: "deg/s",
};

export const CLUE_HUMIDITY_PROPERTIES: ISensorProps = {
LABEL: "Humidity Sensor",
sliderProps: [
Expand Down
22 changes: 18 additions & 4 deletions src/view/components/toolbar/microbit/MicrobitModalContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Accelerometer } from "../motion/Accelerometer";
import { Gesture } from "../motion/Gesture";
import { FEATURE_REQUEST_ON_GITHUB, IModalContent } from "../SensorModalUtils";

export const ACCELEROMETER_MODAL_CONTENT = (
export const ACCELEROMETER_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand Down Expand Up @@ -60,7 +60,7 @@ export const BUTTON_CONTENT = (
id: "microbit_button",
};
};
export const SOUND_MODAL_CONTENT = (
export const SOUND_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -74,7 +74,7 @@ export const SOUND_MODAL_CONTENT = (
id: "microbit_sound",
};
};
export const GPIO_MODAL_CONTENT = (
export const GPIO_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -88,6 +88,20 @@ export const GPIO_MODAL_CONTENT = (
id: "microbit_gpio",
};
};
export const COMPASS_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-microbit-compass-sensor.title",
tagInput: TAG_INPUT_SVG,
tagOutput: TAG_OUTPUT_SVG,
descriptionText: "toolbar-microbit-compass-sensor.description",
tryItDescription: "toolbar-microbit-compass-sensor.tryItDescription",
components: [FEATURE_REQUEST_ON_GITHUB],
id: "microbit_compass",
};
};
export const WIRELESS_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
Expand All @@ -102,7 +116,7 @@ export const WIRELESS_CONTENT = (
id: "microbit_wireless",
};
};
export const GESTURE_MODAL_CONTENT = (
export const GESTURE_CONTENT = (
onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
sendGesture?: (isActive: boolean) => void
): IModalContent => {
Expand Down
6 changes: 6 additions & 0 deletions src/view/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,12 @@ export enum SENSOR_LIST {
HUMIDITY = "humidity",
PRESSURE = "pressure",
PROXIMITY = "proximity",
MAGNET_X = "magnet_x",
MAGNET_Y = "magnet_y",
MAGNET_Z = "magnet_z",
GYRO_X = "gyro_x",
GYRO_Y = "gyro_y",
GYRO_Z = "gyro_z",
}

export const GESTURES_MICROBIT = [
Expand Down

0 comments on commit 75a7607

Please sign in to comment.