Skip to content

Commit 9f9169e

Browse files
xnkevinnguyenxnkevinnguyen
committed
Update sensors with gesture
1 parent 89a3e18 commit 9f9169e

7 files changed

Lines changed: 50 additions & 34 deletions

File tree

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

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,23 @@
22
// Licensed under the MIT license.
33

44
import * as React from "react";
5-
import { SENSOR_LIST, VSCODE_MESSAGES_TO_WEBVIEW } from "../../constants";
5+
import {
6+
SENSOR_LIST,
7+
VSCODE_MESSAGES_TO_WEBVIEW,
8+
GESTURES_CLUE,
9+
WEBVIEW_MESSAGES,
10+
} from "../../constants";
611
import "../../styles/Simulator.css";
712
import ToolBar from "../toolbar/ToolBar";
813
import { ClueSimulator } from "./ClueSimulator";
914
import { CLUE_TOOLBAR_ICON_ID } from "../toolbar/SensorModalUtils";
1015
import * as TOOLBAR_SVG from "../../svgs/toolbar_svg";
16+
import { sendMessage } from "../../utils/MessageUtils";
1117

1218
// Component grouping the functionality for micro:bit functionalities
1319
interface IState {
1420
sensors: { [key: string]: number };
21+
currentSelectedGesture: string;
1522
}
1623
const DEFAULT_STATE = {
1724
sensors: {
@@ -27,6 +34,7 @@ const DEFAULT_STATE = {
2734
[SENSOR_LIST.PRESSURE]: 0,
2835
[SENSOR_LIST.PROXIMITY]: 0,
2936
},
37+
currentSelectedGesture: GESTURES_CLUE[0],
3038
};
3139

3240
export class Clue extends React.Component<{}, IState> {
@@ -57,13 +65,31 @@ export class Clue extends React.Component<{}, IState> {
5765
buttonList={CLUE_TOOLBAR_BUTTONS}
5866
onUpdateSensor={this.updateSensor}
5967
sensorValues={this.state.sensors}
68+
onSelectGesture={this.updateGesture}
69+
sendGesture={this.sendGesture}
6070
/>
6171
</React.Fragment>
6272
);
6373
}
6474
updateSensor = (sensor: SENSOR_LIST, value: number) => {
6575
this.setState({ sensors: { ...this.state.sensors, [sensor]: value } });
6676
};
77+
updateGesture = (event: React.ChangeEvent<HTMLSelectElement>) => {
78+
this.setState({ currentSelectedGesture: event.target.value });
79+
};
80+
sendGesture = (isActive: boolean) => {
81+
if (this.state.currentSelectedGesture) {
82+
if (isActive) {
83+
sendMessage(WEBVIEW_MESSAGES.GESTURE, {
84+
gesture: this.state.currentSelectedGesture,
85+
});
86+
} else {
87+
sendMessage(WEBVIEW_MESSAGES.GESTURE, {
88+
gesture: "",
89+
});
90+
}
91+
}
92+
};
6793
}
6894

6995
const CLUE_TOOLBAR_BUTTONS: Array<{ label: string; image: JSX.Element }> = [

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import * as React from "react";
55
import { MICROBIT_TOOLBAR_ICON_ID } from "../../components/toolbar/SensorModalUtils";
66
import {
7-
GESTURES,
7+
GESTURES_MICROBIT,
88
SENSOR_LIST,
99
VSCODE_MESSAGES_TO_WEBVIEW,
1010
WEBVIEW_MESSAGES,
@@ -28,7 +28,7 @@ const DEFAULT_STATE = {
2828
[SENSOR_LIST.MOTION_Y]: 0,
2929
[SENSOR_LIST.MOTION_Z]: 0,
3030
},
31-
currentSelectedGesture: GESTURES[0],
31+
currentSelectedGesture: GESTURES_MICROBIT[0],
3232
};
3333

3434
export class Microbit extends React.Component<{}, IState> {

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

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const CLUE_TOOLBAR_ICON_ID = {
8787
PRESSURE: "toolbar-clue-pressure-sensor",
8888
HUMIDITY: "toolbar-clue-humidity-sensor",
8989
GESTURE: "toolbar-clue-gesture-sensor",
90-
PROXIMITY: "toolbar--clue-proximity-sensor",
90+
PROXIMITY: "toolbar-clue-proximity-sensor",
9191
BLUETOOTH: "toolbar-clue-bluetooth",
9292
};
9393

@@ -291,9 +291,7 @@ export const TEMPERATURE_MODAL_CONTENT = (
291291

292292
export const ACCELEROMETER_MODAL_CONTENT = (
293293
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
294-
sensorValues: { [key: string]: number },
295-
onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
296-
sendGesture?: (isActive: boolean) => void
294+
sensorValues: { [key: string]: number }
297295
): IModalContent => {
298296
// this object will be accessed with the axis label
299297
const accelerometerSensorValues = {
@@ -306,8 +304,6 @@ export const ACCELEROMETER_MODAL_CONTENT = (
306304
<Accelerometer
307305
onUpdateValue={onUpdateValue}
308306
axisValues={accelerometerSensorValues}
309-
onSelectGestures={onSelectGestures}
310-
onSendGesture={sendGesture}
311307
/>
312308
),
313309
descriptionText: "toolbar-accelerometer-sensor.description",
@@ -423,7 +419,6 @@ export const LABEL_TO_MODAL_CONTENT_CONSTRUCTOR = new Map([
423419
[CLUE_TOOLBAR_ICON_ID.SOUND, CLUE_MODAL.CLUE_SOUND_MODAL_CONTENT],
424420
[CLUE_TOOLBAR_ICON_ID.PRESSURE, CLUE_MODAL.CLUE_PRESSURE_MODAL_CONTENT],
425421
[CLUE_TOOLBAR_ICON_ID.HUMIDITY, CLUE_MODAL.CLUE_HUMIDITY_MODAL_CONTENT],
426-
[CLUE_TOOLBAR_ICON_ID.GESTURE, CLUE_MODAL.CLUE_GESTURE_MODAL_CONTENT],
427422
[CLUE_TOOLBAR_ICON_ID.PROXIMITY, CLUE_MODAL.CLUE_PROXIMITY_MODAL_CONTENT],
428423
[CLUE_TOOLBAR_ICON_ID.BLUETOOTH, CLUE_MODAL.CLUE_BLUETOOTH_CONTENT],
429424
[
@@ -439,18 +434,17 @@ export const getModalContent = (
439434
onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
440435
sendGesture?: (isActive: boolean) => void
441436
) => {
437+
if (label === CLUE_TOOLBAR_ICON_ID.GESTURE) {
438+
console.log("gestures");
439+
return CLUE_MODAL.CLUE_GESTURE_MODAL_CONTENT(
440+
onSelectGestures,
441+
sendGesture
442+
);
443+
}
442444
const modalContentConstructor = LABEL_TO_MODAL_CONTENT_CONSTRUCTOR.get(
443445
label
444446
);
445447
if (modalContentConstructor) {
446-
if (label === MICROBIT_TOOLBAR_ICON_ID.ACCELEROMETER) {
447-
return ACCELEROMETER_MODAL_CONTENT(
448-
onUpdateValue,
449-
sensorValues,
450-
onSelectGestures,
451-
sendGesture
452-
);
453-
}
454448
return modalContentConstructor(onUpdateValue, sensorValues);
455449
} else {
456450
return;

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

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import * as React from "react";
22
import { IModalContent, FEATURE_REQUEST_ON_GITHUB } from "../SensorModalUtils";
3-
import { SENSOR_LIST } from "../../../constants";
3+
import { SENSOR_LIST, GESTURES_CLUE } from "../../../constants";
44
import { TAG_INPUT_SVG } from "../../../svgs/tag_input_svg";
55
import TemperatureSensorBar from "../TemperatureSensorBar";
66
import { TAG_OUTPUT_SVG } from "../../../svgs/tag_output_svg";
77
import { Accelerometer } from "../motion/Accelerometer";
8-
import LightSensorBar from "../LightSensorBar";
8+
import { Gesture } from "../motion/Gesture";
99
import { ThreeDimensionSlider } from "../motion/threeDimensionSlider/ThreeDimensionSlider";
1010
import * as SENSOR_PROPERTIES from "./ClueSensorProperties";
1111
export const CLUE_TEMPERATURE_MODAL_CONTENT = (
@@ -44,9 +44,7 @@ export const CLUE_GPIO_MODAL_CONTENT = (
4444
};
4545
export const CLUE_ACCELEROMETER_MODAL_CONTENT = (
4646
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
47-
sensorValues: { [key: string]: number },
48-
onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
49-
sendGesture?: (isActive: boolean) => void
47+
sensorValues: { [key: string]: number }
5048
): IModalContent => {
5149
const accelerometerSensorValues = {
5250
X: sensorValues[SENSOR_LIST.MOTION_X],
@@ -58,8 +56,6 @@ export const CLUE_ACCELEROMETER_MODAL_CONTENT = (
5856
<Accelerometer
5957
onUpdateValue={onUpdateValue}
6058
axisValues={accelerometerSensorValues}
61-
onSelectGestures={onSelectGestures}
62-
onSendGesture={sendGesture}
6359
/>
6460
),
6561
descriptionText: "toolbar-accelerometer-sensor.description",
@@ -121,8 +117,8 @@ export const CLUE_HUMIDITY_MODAL_CONTENT = (
121117
};
122118
};
123119
export const CLUE_GESTURE_MODAL_CONTENT = (
124-
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void,
125-
sensorValues: { [key: string]: number }
120+
onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void,
121+
sendGesture?: (isActive: boolean) => void
126122
): IModalContent => {
127123
return {
128124
descriptionTitle: "toolbar-light-sensor.title",
@@ -131,9 +127,10 @@ export const CLUE_GESTURE_MODAL_CONTENT = (
131127
descriptionText: "toolbar-light-sensor.description",
132128
tryItDescription: "toolbar-light-sensor.tryItDescription",
133129
components: [
134-
<LightSensorBar
135-
onUpdateValue={onUpdateValue}
136-
value={sensorValues[SENSOR_LIST.LIGHT]}
130+
<Gesture
131+
gestures={GESTURES_CLUE}
132+
onSelectGestures={onSelectGestures}
133+
onSendGesture={sendGesture}
137134
/>,
138135
],
139136
id: "light_sensor",

‎src/view/components/toolbar/motion/Accelerometer.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,6 @@ interface IProps {
4848
Z: number;
4949
};
5050
onUpdateValue: (sensor: SENSOR_LIST, value: number) => void;
51-
onSelectGestures?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
52-
onSendGesture?: (isActive: boolean) => void;
5351
}
5452

5553
export class Accelerometer extends React.Component<IProps> {

‎src/view/components/toolbar/motion/Gesture.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from "react";
22
import SensorButton from "../SensorButton";
33
import { Dropdown } from "../../Dropdown";
4-
import CONSTANTS, { GESTURES } from "../../../constants";
4+
import { CONSTANTS } from "../../../constants";
55

66
const GESTURE_BUTTON_MESSAGE = "Send Gesture";
77
interface IProps {

‎src/view/constants.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export enum SENSOR_LIST {
109109
PROXIMITY = "proximity",
110110
}
111111

112-
export const GESTURES = [
112+
export const GESTURES_MICROBIT = [
113113
"shake",
114114
"up",
115115
"down",
@@ -122,6 +122,7 @@ export const GESTURES = [
122122
"6g",
123123
"8g",
124124
];
125+
export const GESTURES_CLUE = ["up", "down", "left", "right"];
125126

126127
export enum WEBVIEW_ATTRIBUTES_KEY {
127128
INITIAL_DEVICE = "initial_device",

0 commit comments

Comments
 (0)