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

Commit abda1e3

Browse files
xnkevinnguyenxnkevinnguyen
committed
Update feedback from buttons for gestures
1 parent 554f03f commit abda1e3

File tree

5 files changed

+102
-70
lines changed

5 files changed

+102
-70
lines changed

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,8 +199,6 @@ export class MicrobitSimulator extends React.Component<any, IState> {
199199
protected onKeyEvent(event: KeyboardEvent, active: boolean, key: string) {
200200
event.stopPropagation();
201201
if ([event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER)) {
202-
console.log(`buttonKey ${key}`);
203-
204202
this.handleButtonClick(key, active);
205203
if (this.imageRef.current) {
206204
if (key === BUTTONS_KEYS.BTN_A) {

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

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,35 @@ import * as React from "react";
55
import "../../styles/SensorButton.css";
66
import { ISensorButtonProps } from "../../viewUtils";
77

8-
const SensorButton: React.FC<ISensorButtonProps> = props => {
9-
return (
10-
<button
11-
id={`${props.label}-button`}
12-
onMouseUp={props.onMouseUp}
13-
onMouseDown={props.onMouseDown}
14-
onKeyUp={props.onKeyUp}
15-
onKeyDown={props.onKeyDown}
16-
aria-label={`${props.type} sensor button`}
17-
className="sensor-button"
18-
>
19-
{props.label}
20-
</button>
21-
);
22-
};
8+
class SensorButton extends React.Component<ISensorButtonProps> {
9+
private buttonRef: React.RefObject<HTMLButtonElement> = React.createRef();
10+
11+
public setButtonClass = (isActive: boolean) => {
12+
if (isActive) {
13+
this.buttonRef!.current!.setAttribute(
14+
"class",
15+
"sensor-button active-button"
16+
);
17+
} else {
18+
this.buttonRef!.current!.setAttribute("class", "sensor-button");
19+
}
20+
};
21+
render() {
22+
return (
23+
<button
24+
id={`${this.props.label}-button`}
25+
ref={this.buttonRef}
26+
onMouseUp={this.props.onMouseUp}
27+
onMouseDown={this.props.onMouseDown}
28+
onKeyUp={this.props.onKeyUp}
29+
onKeyDown={this.props.onKeyDown}
30+
aria-label={`${this.props.type} sensor button`}
31+
className="sensor-button"
32+
>
33+
{this.props.label}
34+
</button>
35+
);
36+
}
37+
}
2338

2439
export default SensorButton;

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

Lines changed: 67 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from "react";
2-
import CONSTANTS, { SENSOR_LIST, GESTURES } from "../../../constants";
2+
import { SENSOR_LIST, GESTURES, CONSTANTS } from "../../../constants";
33
import { ISensorProps, ISliderProps } from "../../../viewUtils";
44
import { ThreeDimensionSlider } from "./threeDimensionSlider/ThreeDimensionSlider";
55
import { Dropdown } from "../../Dropdown";
@@ -13,6 +13,7 @@ const MOTION_SLIDER_PROPS_X: ISliderProps = {
1313
minValue: -1023,
1414
type: SENSOR_LIST.MOTION_X,
1515
};
16+
1617
const MOTION_SLIDER_PROPS_Y: ISliderProps = {
1718
axisLabel: "Y",
1819
maxLabel: "Front",
@@ -21,6 +22,7 @@ const MOTION_SLIDER_PROPS_Y: ISliderProps = {
2122
minValue: -1023,
2223
type: SENSOR_LIST.MOTION_Y,
2324
};
25+
2426
const MOTION_SLIDER_PROPS_Z: ISliderProps = {
2527
axisLabel: "Z",
2628
maxLabel: "Down",
@@ -39,6 +41,7 @@ const MOTION_SENSOR_PROPERTIES: ISensorProps = {
3941
],
4042
unitLabel: "Lux",
4143
};
44+
4245
interface IProps {
4346
axisValues: {
4447
X_AXIS: number;
@@ -51,56 +54,68 @@ interface IProps {
5154
}
5255

5356
const GESTURE_BUTTON_MESSAGE = "Send Gesture";
57+
const MANUAL_ACCELERATION_MESSAGE = "Set the acceleration manually here";
5458

55-
export const Accelerometer: React.FC<IProps> = (props: IProps) => {
56-
return (
57-
<div className="AccelerometerBar">
58-
<br />
59-
{/* Implement Gestures Here */}
60-
<Dropdown options={GESTURES} onSelect={props.onSelectGestures} />
61-
<SensorButton
62-
label={GESTURE_BUTTON_MESSAGE}
63-
onMouseDown={() => {
64-
if (props.onSendGesture) {
65-
props.onSendGesture(true);
66-
}
67-
}}
68-
onMouseUp={() => {
69-
if (props.onSendGesture) {
70-
props.onSendGesture(false);
71-
}
72-
}}
73-
onKeyDown={(e: React.KeyboardEvent) => {
74-
handleOnKeyDown(e, props.onSendGesture);
75-
}}
76-
onKeyUp={(e: React.KeyboardEvent) => {
77-
handleOnKeyUp(e, props.onSendGesture);
78-
}}
79-
type="gesture"
80-
/>
81-
<ThreeDimensionSlider
82-
axisProperties={MOTION_SENSOR_PROPERTIES}
83-
onUpdateValue={props.onUpdateValue}
84-
axisValues={props.axisValues}
85-
/>
86-
</div>
87-
);
88-
};
89-
const handleOnKeyDown = (
90-
e: React.KeyboardEvent,
91-
onSendGesture?: (isActive: boolean) => void
92-
) => {
93-
if (e.key === CONSTANTS.KEYBOARD_KEYS.ENTER) {
94-
console.log("gestures");
95-
if (onSendGesture) onSendGesture(true);
96-
}
97-
};
98-
const handleOnKeyUp = (
99-
e: React.KeyboardEvent,
100-
onSendGesture?: (isActive: boolean) => void
101-
) => {
102-
if (e.key === CONSTANTS.KEYBOARD_KEYS.ENTER) {
103-
console.log("gesturesUp");
104-
if (onSendGesture) onSendGesture(false);
59+
export class Accelerometer extends React.Component<IProps> {
60+
private sensorButtonRef: React.RefObject<SensorButton> = React.createRef();
61+
render() {
62+
return (
63+
<div className="AccelerometerBar">
64+
<br />
65+
<Dropdown
66+
options={GESTURES}
67+
onSelect={this.props.onSelectGestures}
68+
/>
69+
<SensorButton
70+
ref={this.sensorButtonRef}
71+
label={GESTURE_BUTTON_MESSAGE}
72+
onMouseDown={() => {
73+
if (this.props.onSendGesture) {
74+
this.props.onSendGesture(true);
75+
}
76+
}}
77+
onMouseUp={() => {
78+
if (this.props.onSendGesture) {
79+
this.props.onSendGesture(false);
80+
}
81+
}}
82+
onKeyDown={(e: React.KeyboardEvent) => {
83+
this.handleOnKeyDown(e, this.props.onSendGesture);
84+
}}
85+
onKeyUp={(e: React.KeyboardEvent) => {
86+
this.handleOnKeyUp(e, this.props.onSendGesture);
87+
}}
88+
type="gesture"
89+
/>
90+
<br />
91+
<p>{MANUAL_ACCELERATION_MESSAGE}</p>
92+
93+
<ThreeDimensionSlider
94+
axisProperties={MOTION_SENSOR_PROPERTIES}
95+
onUpdateValue={this.props.onUpdateValue}
96+
axisValues={this.props.axisValues}
97+
/>
98+
</div>
99+
);
105100
}
106-
};
101+
private handleOnKeyDown = (
102+
e: React.KeyboardEvent,
103+
onSendGesture?: (isActive: boolean) => void
104+
) => {
105+
if (e.key === CONSTANTS.KEYBOARD_KEYS.ENTER) {
106+
this.sensorButtonRef!.current!.setButtonClass(true);
107+
if (onSendGesture) onSendGesture(true);
108+
}
109+
};
110+
111+
private handleOnKeyUp = (
112+
e: React.KeyboardEvent,
113+
onSendGesture?: (isActive: boolean) => void
114+
) => {
115+
if (e.key === CONSTANTS.KEYBOARD_KEYS.ENTER) {
116+
this.sensorButtonRef!.current!.setButtonClass(false);
117+
118+
if (onSendGesture) onSendGesture(false);
119+
}
120+
};
121+
}

‎src/view/styles/SensorButton.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
outline: 2px solid var(--vscode-focusBorder);
2323
background-color: var(--vscode-button-hoverBackground);
2424
}
25+
.sensor-button:active,
26+
.active-button {
27+
opacity: 0.5;
28+
}
2529
.sensor-button:hover {
2630
background-color: var(--vscode-button-hoverBackground);
2731
}

‎src/view/translations/en.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"toolbar-temperature-sensor.tryItDescription": "You can set the temperature range from your code!",
3535
"toolbar-accelerometer-sensor.title": "Accelerometer",
3636
"toolbar-accelerometer-sensor.description": "An accelerometer measures the acceleration of your micro:bit; this component senses when the micro:bit is moved.",
37-
"toolbar-accelerometer-sensor.tryItDescription": "Send a gesture or change the acceleration here.",
37+
"toolbar-accelerometer-sensor.tryItDescription": "Select a gesture and send it by clicking the button.",
3838
"toolbar-microbit-led.title": "LEDs",
3939
"toolbar-microbit-led.description": "The microbit has 25 LEDs for you to play with. The LEDs have 9 levels of brightness.",
4040
"toolbar-microbit-led.tryItDescription": "Run your code and see the LEDs light up!",

0 commit comments

Comments
 (0)