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

Commit

Permalink
Update gesture for microbit
Browse files Browse the repository at this point in the history
  • Loading branch information
@xnkevinnguyen
xnkevinnguyen committed Apr 3, 2020
1 parent b844f38 commit 1fb3349
Show file tree
Hide file tree
Showing 5 changed files with 183 additions and 139 deletions.
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 @@ -107,6 +107,10 @@ const MICROBIT_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [
image: TOOLBAR_SVG.MOTION_SVG,
label: MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER,
},
{
image: TOOLBAR_SVG.GESTURE_SVG,
label: MICROBIT_TOOLBAR_ICON_ID.GESTURE,
},
{
image: TOOLBAR_SVG.GPIO_SVG,
label: MICROBIT_TOOLBAR_ICON_ID.GPIO,
Expand Down
150 changes: 25 additions & 125 deletions src/view/components/toolbar/SensorModalUtils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { Accelerometer } from "./motion/Accelerometer";
import MotionSensorBar from "./motion/MotionSensorBar";
import TemperatureSensorBar from "./TemperatureSensorBar";
import * as CLUE_MODAL from "./clue/ClueModalContent";
import * as MICROBIT_MODAL from "./microbit/MicrobitModalContent";

export const TRY_IT_MAKE_CODE = (
<div className="link-parent">
Expand Down Expand Up @@ -73,6 +74,7 @@ export const MICROBIT_TOOLBAR_ICON_ID = {
GPIO: "toolbar-gpio",
SOUND: "toolbar-microbit-sound",
WIRELESS: "toolbar-microbit-wireless",
GESTURE: "toolbar-microbit-gesture-sensor",
};

export const CLUE_TOOLBAR_ICON_ID = {
Expand Down Expand Up @@ -289,103 +291,6 @@ export const TEMPERATURE_MODAL_CONTENT = (
};
};

export const ACCELEROMETER_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
// this object will be accessed with the axis label
const accelerometerSensorValues = {
X: sensorValues[SENSOR_LIST.MOTION_X],
Y: sensorValues[SENSOR_LIST.MOTION_Y],
Z: sensorValues[SENSOR_LIST.MOTION_Z],
};
return {
components: (
<Accelerometer
onUpdateValue={onUpdateValue}
axisValues={accelerometerSensorValues}
/>
),
descriptionText: "toolbar-accelerometer-sensor.description",
descriptionTitle: "toolbar-accelerometer-sensor.title",
id: "accelerometer",
tagInput: TAG_INPUT_SVG,
tagOutput: undefined,
tryItDescription: "toolbar-accelerometer-sensor.tryItDescription",
};
};
export const MICROBIT_LED_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-microbit-led.title",
tagInput: undefined,
tagOutput: TAG_OUTPUT_SVG,
descriptionText: "toolbar-microbit-led.description",
tryItDescription: "toolbar-microbit-led.tryItDescription",
components: undefined,
id: "microbit_LED",
};
};

export const MICROBIT_BUTTON_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-microbit-a-b-push.title",
tagInput: undefined,
tagOutput: TAG_INPUT_SVG,
descriptionText: "toolbar-microbit-a-b-push.description",
tryItDescription: "toolbar-microbit-a-b-push.tryItDescription",
components: undefined,
id: "microbit_button",
};
};
export const MICROBIT_SOUND_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-microbit-sound.title",
tagInput: undefined,
tagOutput: TAG_OUTPUT_SVG,
descriptionText: "toolbar-microbit-sound.description",
tryItDescription: "toolbar-microbit-sound.tryItDescription",
components: [FEATURE_REQUEST_ON_GITHUB],
id: "microbit_sound",
};
};
export const MICROBIT_GPIO_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-microbit-gpio.title",
tagInput: TAG_INPUT_SVG,
tagOutput: TAG_OUTPUT_SVG,
descriptionText: "toolbar-microbit-gpio.description",
tryItDescription: "toolbar-microbit-gpio.tryItDescription",
components: [FEATURE_REQUEST_ON_GITHUB],
id: "microbit_gpio",
};
};
export const MICROBIT_WIRELESS_MODAL_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
return {
descriptionTitle: "toolbar-microbit-wireless.title",
tagInput: TAG_INPUT_SVG,
tagOutput: TAG_OUTPUT_SVG,
descriptionText: "toolbar-microbit-wireless.description",
tryItDescription: "toolbar-microbit-wireless.tryItDescription",
components: [FEATURE_REQUEST_ON_GITHUB],
id: "microbit_wireless",
};
};

export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
[CPX_TOOLBAR_ICON_ID.GPIO, GPIO_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.IR, IR_MODAL_CONTENT],
Expand All @@ -398,34 +303,28 @@ export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
[CPX_TOOLBAR_ICON_ID.SPEAKER, SPEAKER_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.SWITCH, SWITCH_MODAL_CONTENT],
[CPX_TOOLBAR_ICON_ID.TEMPERATURE, TEMPERATURE_MODAL_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER, ACCELEROMETER_MODAL_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.LEDS, MICROBIT_LED_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.PUSH_BUTTON, MICROBIT_BUTTON_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.GPIO, MICROBIT_GPIO_MODAL_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.SOUND, MICROBIT_SOUND_MODAL_CONTENT],
[MICROBIT_TOOLBAR_ICON_ID.WIRELESS, MICROBIT_WIRELESS_MODAL_CONTENT],
[
CLUE_TOOLBAR_ICON_ID.TEMPERATURE,
CLUE_MODAL.CLUE_TEMPERATURE_MODAL_CONTENT,
],
[
CLUE_TOOLBAR_ICON_ID.ACCELEROMETER,
CLUE_MODAL.CLUE_ACCELEROMETER_MODAL_CONTENT,
],
[CLUE_TOOLBAR_ICON_ID.PUSH_BUTTON, CLUE_MODAL.CLUE_BUTTON_CONTENT],
[CLUE_TOOLBAR_ICON_ID.GPIO, CLUE_MODAL.CLUE_GPIO_MODAL_CONTENT],
[CLUE_TOOLBAR_ICON_ID.LIGHT, CLUE_MODAL.CLUE_LIGHT_MODAL_CONTENT],
[CLUE_TOOLBAR_ICON_ID.LEDS, CLUE_MODAL.CLUE_LED_CONTENT],
[CLUE_TOOLBAR_ICON_ID.SOUND, CLUE_MODAL.CLUE_SOUND_MODAL_CONTENT],
[CLUE_TOOLBAR_ICON_ID.PRESSURE, CLUE_MODAL.CLUE_PRESSURE_MODAL_CONTENT],
[CLUE_TOOLBAR_ICON_ID.HUMIDITY, CLUE_MODAL.CLUE_HUMIDITY_MODAL_CONTENT],
[CLUE_TOOLBAR_ICON_ID.PROXIMITY, CLUE_MODAL.CLUE_PROXIMITY_MODAL_CONTENT],
[CLUE_TOOLBAR_ICON_ID.BLUETOOTH, CLUE_MODAL.CLUE_BLUETOOTH_CONTENT],
[
CLUE_TOOLBAR_ICON_ID.ACCELEROMETER,
CLUE_MODAL.CLUE_ACCELEROMETER_MODAL_CONTENT,
MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER,
MICROBIT_MODAL.ACCELEROMETER_MODAL_CONTENT,
],
[CLUE_TOOLBAR_ICON_ID.SPEAKER, CLUE_MODAL.CLUE_SPEAKER_MODAL_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.WIRELESS, MICROBIT_MODAL.WIRELESS_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],
[CLUE_TOOLBAR_ICON_ID.GPIO, CLUE_MODAL.GPIO_CONTENT],
[CLUE_TOOLBAR_ICON_ID.LIGHT, CLUE_MODAL.LIGHT_CONTENT],
[CLUE_TOOLBAR_ICON_ID.LEDS, CLUE_MODAL.LED_CONTENT],
[CLUE_TOOLBAR_ICON_ID.SOUND, CLUE_MODAL.SOUND_CONTENT],
[CLUE_TOOLBAR_ICON_ID.PRESSURE, CLUE_MODAL.PRESSURE_CONTENT],
[CLUE_TOOLBAR_ICON_ID.HUMIDITY, CLUE_MODAL.HUMIDITY_CONTENT],
[CLUE_TOOLBAR_ICON_ID.PROXIMITY, CLUE_MODAL.PROXIMITY_CONTENT],
[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],
]);

export const getModalContent = (
Expand All @@ -436,8 +335,9 @@ export const getModalContent = (
sendGesture?: (isActive: boolean) => void
) => {
if (label === CLUE_TOOLBAR_ICON_ID.GESTURE) {
console.log("gestures");
return CLUE_MODAL.CLUE_GESTURE_MODAL_CONTENT(
return CLUE_MODAL.GESTURE_CONTENT(onSelectGestures, sendGesture);
} else if (label === MICROBIT_TOOLBAR_ICON_ID.GESTURE) {
return MICROBIT_MODAL.GESTURE_MODAL_CONTENT(
onSelectGestures,
sendGesture
);
Expand Down
35 changes: 22 additions & 13 deletions src/view/components/toolbar/clue/ClueModalContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import { Accelerometer } from "../motion/Accelerometer";
import { Gesture } from "../motion/Gesture";
import { ThreeDimensionSlider } from "../motion/threeDimensionSlider/ThreeDimensionSlider";
import * as SENSOR_PROPERTIES from "./ClueSensorProperties";
export const CLUE_TEMPERATURE_MODAL_CONTENT = (

export const TEMPERATURE_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -28,7 +29,7 @@ export const CLUE_TEMPERATURE_MODAL_CONTENT = (
};
};

export const CLUE_GPIO_MODAL_CONTENT = (
export const GPIO_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -42,7 +43,8 @@ export const CLUE_GPIO_MODAL_CONTENT = (
id: "GPIO",
};
};
export const CLUE_ACCELEROMETER_MODAL_CONTENT = (

export const ACCELEROMETER_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -67,7 +69,7 @@ export const CLUE_ACCELEROMETER_MODAL_CONTENT = (
};
};

export const CLUE_LIGHT_MODAL_CONTENT = (
export const LIGHT_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -93,7 +95,8 @@ export const CLUE_LIGHT_MODAL_CONTENT = (
tryItDescription: "toolbar-clue-light-sensor.tryItDescription",
};
};
export const CLUE_HUMIDITY_MODAL_CONTENT = (

export const HUMIDITY_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -116,7 +119,8 @@ export const CLUE_HUMIDITY_MODAL_CONTENT = (
id: "humidity_sensor",
};
};
export const CLUE_GESTURE_MODAL_CONTENT = (

export const GESTURE_CONTENT = (
onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
sendGesture?: (isActive: boolean) => void
): IModalContent => {
Expand All @@ -136,7 +140,8 @@ export const CLUE_GESTURE_MODAL_CONTENT = (
id: "gesture_sensor",
};
};
export const CLUE_PROXIMITY_MODAL_CONTENT = (

export const PROXIMITY_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -159,7 +164,8 @@ export const CLUE_PROXIMITY_MODAL_CONTENT = (
id: "proximity_sensor",
};
};
export const CLUE_PRESSURE_MODAL_CONTENT = (

export const PRESSURE_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -182,7 +188,8 @@ export const CLUE_PRESSURE_MODAL_CONTENT = (
id: "pressure_sensor",
};
};
export const CLUE_BUTTON_CONTENT = (

export const BUTTON_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -197,7 +204,7 @@ export const CLUE_BUTTON_CONTENT = (
};
};

export const CLUE_BLUETOOTH_CONTENT = (
export const BLUETOOTH_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -212,7 +219,7 @@ export const CLUE_BLUETOOTH_CONTENT = (
};
};

export const CLUE_SOUND_MODAL_CONTENT = (
export const SOUND_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -226,7 +233,8 @@ export const CLUE_SOUND_MODAL_CONTENT = (
id: "sound_sensor",
};
};
export const CLUE_LED_CONTENT = (

export const LED_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand All @@ -240,7 +248,8 @@ export const CLUE_LED_CONTENT = (
id: "clue_neopixel",
};
};
export const CLUE_SPEAKER_MODAL_CONTENT = (

export const SPEAKER_CONTENT = (
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
sensorValues: { [key: string]: number }
): IModalContent => {
Expand Down
Loading

0 comments on commit 1fb3349

Please sign in to comment.