From 1de4e5f98669e558fafc730d9a5a88d2a2c88594 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Thu, 20 Feb 2020 10:44:57 -0800 Subject: [PATCH 01/52] updated cpx telemtry --- src/adafruit_circuitplayground/constants.py | 28 ++++++++++++++------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/src/adafruit_circuitplayground/constants.py b/src/adafruit_circuitplayground/constants.py index 505fd5d57..61cccbd7f 100644 --- a/src/adafruit_circuitplayground/constants.py +++ b/src/adafruit_circuitplayground/constants.py @@ -28,16 +28,26 @@ VALID_PIXEL_ASSIGN_ERROR = "The pixel color value should be a tuple with three values between 0 and 255 or a hexadecimal color between 0x000000 and 0xFFFFFF." TELEMETRY_EVENT_NAMES = { - "TAPPED": "API.TAPPED", - "PLAY_FILE": "API.PLAY.FILE", - "PLAY_TONE": "API.PLAY.TONE", - "START_TONE": "API.START.TONE", - "STOP_TONE": "API.STOP.TONE", - "DETECT_TAPS": "API.DETECT.TAPS", - "ADJUST_THRESHOLD": "API.ADJUST.THRESHOLD", - "RED_LED": "API.RED.LED", - "PIXELS": "API.PIXELS", + "CPX_API_ACCELERATION": "CPX.API.ACCELERATION", + "CPX_API_BUTTON_A": "CPX.API.BUTTON.A", + "CPX_API_BUTTON_B": "CPX.API.BUTTON.B", + "CPX_API_SWITCH": "CPX.API.SWITCH", + "CPX_API_TEMPERATURE": "CPX.API.TEMPERATURE", + "CPX_API_BRIGHTNESS": "CPX.API.BRIGHTNESS", + "CPX_API_LIGHT": "CPX.API.LIGHT", + "CPX_API_TOUCH": "CPX.API.TOUCH", + "CPX_API_SHAKE": "CPX.API.SHAKE", + "CPX_API_TAPPED": "CPX.API.TAPPED", + "CPX_API_PLAY_FILE": "CPX.API.PLAY.FILE", + "CPX_API_PLAY_TONE": "CPX.API.PLAY.TONE", + "CPX_API_START_TONE": "CPX.API.START.TONE", + "CPX_API_STOP_TONE": "CPX.API.STOP.TONE", + "CPX_API_DETECT_TAPS": "CPX.API.DETECT.TAPS", + "CPX_API_ADJUST_THRESHOLD": "CPX.API.ADJUST.THRESHOLD", + "CPX_API_RED_LED": "CPX.API.RED.LED", + "CPX_API_PIXELS": "CPX.API.PIXELS", } + ERROR_SENDING_EVENT = "Error trying to send event to the process : " TIME_DELAY = 0.03 From 38440848269b1fc5890932e2b5e220e5f5a40ec8 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Thu, 20 Feb 2020 10:50:13 -0800 Subject: [PATCH 02/52] Added used and total telemetry --- src/adafruit_circuitplayground/constants.py | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/adafruit_circuitplayground/constants.py b/src/adafruit_circuitplayground/constants.py index 61cccbd7f..fc59d380d 100644 --- a/src/adafruit_circuitplayground/constants.py +++ b/src/adafruit_circuitplayground/constants.py @@ -28,7 +28,8 @@ VALID_PIXEL_ASSIGN_ERROR = "The pixel color value should be a tuple with three values between 0 and 255 or a hexadecimal color between 0x000000 and 0xFFFFFF." TELEMETRY_EVENT_NAMES = { - "CPX_API_ACCELERATION": "CPX.API.ACCELERATION", + "CPX_API_ACCELERATION_USED": "CPX.API.ACCELERATION.USED", + "CPX_API_ACCELERATION_TOTAL": "CPX.API.ACCELERATION.TOTAL", "CPX_API_BUTTON_A": "CPX.API.BUTTON.A", "CPX_API_BUTTON_B": "CPX.API.BUTTON.B", "CPX_API_SWITCH": "CPX.API.SWITCH", From cfec57483c9d882e0fa24552df34876ad1a43f4a Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Thu, 20 Feb 2020 12:09:36 -0800 Subject: [PATCH 03/52] Added Python telemetry --- src/adafruit_circuitplayground/constants.py | 22 --------------------- 1 file changed, 22 deletions(-) diff --git a/src/adafruit_circuitplayground/constants.py b/src/adafruit_circuitplayground/constants.py index fc59d380d..a96083795 100644 --- a/src/adafruit_circuitplayground/constants.py +++ b/src/adafruit_circuitplayground/constants.py @@ -27,28 +27,6 @@ VALID_PIXEL_ASSIGN_ERROR = "The pixel color value should be a tuple with three values between 0 and 255 or a hexadecimal color between 0x000000 and 0xFFFFFF." -TELEMETRY_EVENT_NAMES = { - "CPX_API_ACCELERATION_USED": "CPX.API.ACCELERATION.USED", - "CPX_API_ACCELERATION_TOTAL": "CPX.API.ACCELERATION.TOTAL", - "CPX_API_BUTTON_A": "CPX.API.BUTTON.A", - "CPX_API_BUTTON_B": "CPX.API.BUTTON.B", - "CPX_API_SWITCH": "CPX.API.SWITCH", - "CPX_API_TEMPERATURE": "CPX.API.TEMPERATURE", - "CPX_API_BRIGHTNESS": "CPX.API.BRIGHTNESS", - "CPX_API_LIGHT": "CPX.API.LIGHT", - "CPX_API_TOUCH": "CPX.API.TOUCH", - "CPX_API_SHAKE": "CPX.API.SHAKE", - "CPX_API_TAPPED": "CPX.API.TAPPED", - "CPX_API_PLAY_FILE": "CPX.API.PLAY.FILE", - "CPX_API_PLAY_TONE": "CPX.API.PLAY.TONE", - "CPX_API_START_TONE": "CPX.API.START.TONE", - "CPX_API_STOP_TONE": "CPX.API.STOP.TONE", - "CPX_API_DETECT_TAPS": "CPX.API.DETECT.TAPS", - "CPX_API_ADJUST_THRESHOLD": "CPX.API.ADJUST.THRESHOLD", - "CPX_API_RED_LED": "CPX.API.RED.LED", - "CPX_API_PIXELS": "CPX.API.PIXELS", -} - ERROR_SENDING_EVENT = "Error trying to send event to the process : " TIME_DELAY = 0.03 From d2c6ebdbf3ae9068fee4481d966f0af827852950 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Thu, 20 Feb 2020 12:20:56 -0800 Subject: [PATCH 04/52] Fixed bug with acceleration api telemetry --- src/common/constants.py | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/common/constants.py b/src/common/constants.py index 73984933a..921799b30 100644 --- a/src/common/constants.py +++ b/src/common/constants.py @@ -8,3 +8,35 @@ CONNECTION_ATTEMPTS = 10 TIME_DELAY = 0.03 DEFAULT_PORT = "5577" + +TELEMETRY_EVENT_NAMES = { + "CPX_API_ACCELERATION": "CPX.API.ACCELERATION", + "CPX_API_BUTTON_A": "CPX.API.BUTTON.A", + "CPX_API_BUTTON_B": "CPX.API.BUTTON.B", + "CPX_API_SWITCH": "CPX.API.SWITCH", + "CPX_API_TEMPERATURE": "CPX.API.TEMPERATURE", + "CPX_API_BRIGHTNESS": "CPX.API.BRIGHTNESS", + "CPX_API_LIGHT": "CPX.API.LIGHT", + "CPX_API_TOUCH": "CPX.API.TOUCH", + "CPX_API_SHAKE": "CPX.API.SHAKE", + "CPX_API_TAPPED": "CPX.API.TAPPED", + "CPX_API_PLAY_FILE": "CPX.API.PLAY.FILE", + "CPX_API_PLAY_TONE": "CPX.API.PLAY.TONE", + "CPX_API_START_TONE": "CPX.API.START.TONE", + "CPX_API_STOP_TONE": "CPX.API.STOP.TONE", + "CPX_API_DETECT_TAPS": "CPX.API.DETECT.TAPS", + "CPX_API_ADJUST_THRESHOLD": "CPX.API.ADJUST.THRESHOLD", + "CPX_API_RED_LED": "CPX.API.RED.LED", + "CPX_API_PIXELS": "CPX.API.PIXELS", + "MICROBIT_API_TEMPERATURE": "MICROBIT.API.TEMPERATURE", + "MICROBIT_API_ACCELEROMETER": "MICROBIT.API.ACCELEROMETER", + "MICROBIT_API_GESTURE": "MICROBIT.API.GESTURE", + "MICROBIT_API_DISPLAY_SCROLL": "MICROBIT.API.DISPLAY.SCROLL", + "MICROBIT_API_DISPLAY_SHOW": "MICROBIT.API.DISPLAY.SHOW", + "MICROBIT_API_DISPLAY_OTHER": "MICROBIT.API.DISPLAY_OTHER", + "MICROBIT_API_LIGHT_LEVEL": "MICROBIT.API.LIGHT.LEVEL", + "MICROBIT_API_IMAGE_CREATION": "MICROBIT.API.IMAGE.CREATION", + "MICROBIT_API_IMAGE_OTHER": "MICROBIT.API.IMAGE.OTHER", + "MICROBIT_API_IMAGE_STATIC": "MICROBIT.API.IMAGE.STATIC", + "MICROBIT_API_BUTTON": "MICROBIT.API.BUTTON", +} From aff9a08299cd13b2af53ae4b7cff3eece8db12c7 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Thu, 20 Feb 2020 15:59:35 -0800 Subject: [PATCH 05/52] Made constants into enum --- src/common/telemetry.py | 1 + 1 file changed, 1 insertion(+) diff --git a/src/common/telemetry.py b/src/common/telemetry.py index 44a22d058..f90ab8b99 100644 --- a/src/common/telemetry.py +++ b/src/common/telemetry.py @@ -29,3 +29,4 @@ def telemetry_available(self): telemetry_py = Telemetry() +print(telemetry_py.telemetry_state) From 038b9796f8e1832d426d0b69c680fb070edb4ae2 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Fri, 21 Feb 2020 18:19:33 -0800 Subject: [PATCH 06/52] first commit --- src/common/telemetry.py | 1 - .../components/microbit/MicrobitImage.tsx | 24 +++++++++++ .../components/microbit/MicrobitSimulator.tsx | 43 +++++++++++++++++++ src/view/components/microbit/Microbit_svg.tsx | 4 +- 4 files changed, 69 insertions(+), 3 deletions(-) diff --git a/src/common/telemetry.py b/src/common/telemetry.py index f90ab8b99..44a22d058 100644 --- a/src/common/telemetry.py +++ b/src/common/telemetry.py @@ -29,4 +29,3 @@ def telemetry_available(self): telemetry_py = Telemetry() -print(telemetry_py.telemetry_state) diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index d06f4d0e4..d7cafd100 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -4,6 +4,7 @@ import * as React from "react"; import { VIEW_STATE } from "../../constants"; import { ViewStateContext } from "../../context"; +import CONSTANTS from "../../constants"; import "../../styles/Microbit.css"; import { IRefObject, MicrobitSvg } from "./Microbit_svg"; @@ -11,6 +12,7 @@ interface EventTriggers { onMouseUp: (event: Event, buttonKey: string) => void; onMouseDown: (event: Event, buttonKey: string) => void; onMouseLeave: (event: Event, buttonKey: string) => void; + onKeyEvent: (event: KeyboardEvent, active: boolean) => void; } interface IProps { eventTriggers: EventTriggers; @@ -33,6 +35,7 @@ export class MicrobitImage extends React.Component { if (svgElement) { updateAllLeds(this.props.leds, svgElement.getLeds()); setupAllButtons(this.props.eventTriggers, svgElement.getButtons()); + setupKeyPresses(this.props.eventTriggers.onKeyEvent); } } componentDidUpdate() { @@ -107,3 +110,24 @@ const updateAllLeds = ( const setupLed = (ledElement: SVGRectElement, brightness: number) => { ledElement.style.opacity = (brightness / 10).toString(); }; + +const setupKeyPresses = ( + onKeyEvent: (event: KeyboardEvent, active: boolean) => void +) => { + window.document.addEventListener("keydown", event => { + const keyEvents = [event.key, event.code]; + // Don't listen to keydown events for the switch, run button and enter key + if ( + !( + keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.S) || + keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) || + keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.ENTER) + ) + ) { + onKeyEvent(event, true); + } + }); + window.document.addEventListener("keyup", event => + onKeyEvent(event, false) + ); +}; \ No newline at end of file diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index 3e0c9e1c0..f1dfd008c 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -1,5 +1,6 @@ import * as React from "react"; import { + CONSTANTS, DEVICE_LIST_KEY, MICROBIT_BUTTONS_KEYS, WEBVIEW_MESSAGES, @@ -44,6 +45,7 @@ export class MicrobitSimulator extends React.Component { active_editors: [], running_file: "", }; + this.onKeyEvent = this.onKeyEvent.bind(this); } handleMessage = (event: any): void => { const message = event.data; @@ -112,6 +114,7 @@ export class MicrobitSimulator extends React.Component { onMouseDown: this.onMouseDown, onMouseUp: this.onMouseUp, onMouseLeave: this.onMouseLeave, + onKeyEvent: this.onKeyEvent }} leds={this.state.microbit.leds} /> @@ -175,4 +178,44 @@ export class MicrobitSimulator extends React.Component { event.preventDefault(); console.log(`To implement onMouseLeave ${key}`); }; + protected onKeyEvent(event: KeyboardEvent, active: boolean) { + let element; + const target = event.target as SVGElement; + // Guard Clause + console.log("STARTING ON KEY EVENT"); + if (target === undefined) { + console.log("Returning"); + return; + } + + if ([event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER)) { + element = window.document.getElementById(target.id); + } else if ( + [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) + ) { + console.log("btn_a"); + element = window.document.getElementById( + CONSTANTS.ID_NAME.BUTTON_A + ); + this.handleButtonClick(MICROBIT_BUTTONS_KEYS.BTN_A, active); + console.log(element) + } else if ( + [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) + ) { + console.log("btn_b"); + element = window.document.getElementById( + CONSTANTS.ID_NAME.BUTTON_B + ); + } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) { + this.togglePlayClick(); + } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R) { + this.refreshSimulatorClick(); + } + if (element) { + console.log(element); + event.preventDefault(); + this.handleButtonClick(event.key, active); + element.focus(); + } + } } diff --git a/src/view/components/microbit/Microbit_svg.tsx b/src/view/components/microbit/Microbit_svg.tsx index 3cfe352e1..2ceebeeb8 100644 --- a/src/view/components/microbit/Microbit_svg.tsx +++ b/src/view/components/microbit/Microbit_svg.tsx @@ -1677,7 +1677,7 @@ export class MicrobitSvg extends React.Component { focusable="true" tabIndex={0} role="button" - aria-label="A" + aria-label="a" style={{ fill: "rgb(151, 151, 151)" }} > Date: Mon, 24 Feb 2020 13:50:51 -0800 Subject: [PATCH 07/52] doesnt work --- src/view/components/microbit/Microbit_svg.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/view/components/microbit/Microbit_svg.tsx b/src/view/components/microbit/Microbit_svg.tsx index 2ceebeeb8..ccf433830 100644 --- a/src/view/components/microbit/Microbit_svg.tsx +++ b/src/view/components/microbit/Microbit_svg.tsx @@ -40,6 +40,16 @@ export class MicrobitSvg extends React.Component { public getLeds(): React.RefObject[][] { return this.ledRefs; } + public clickButtonA() { + if (this.buttonRefs.BTN_A.current){ + this.buttonRefs.BTN_A.current.dispatchEvent(new Event('click')) + } + } + public clickButtonB() { + if (this.buttonRefs.BTN_B.current){ + this.buttonRefs.BTN_B.current.dispatchEvent(new Event('click')) + } + } render() { return ( From 2d3943031d2013f27c9af129c166f53933b328a9 Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 24 Feb 2020 14:44:37 -0800 Subject: [PATCH 08/52] Keypresses will click button --- .../components/microbit/MicrobitImage.tsx | 30 +++++++++++++++++-- .../components/microbit/MicrobitSimulator.tsx | 27 ++++++++++------- src/view/components/microbit/Microbit_svg.tsx | 10 ------- src/view/constants.ts | 4 +++ src/view/styles/Microbit.css | 4 +++ 5 files changed, 53 insertions(+), 22 deletions(-) diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index d7cafd100..ee345c4f1 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import { VIEW_STATE } from "../../constants"; import { ViewStateContext } from "../../context"; -import CONSTANTS from "../../constants"; +import CONSTANTS, { MICROBIT_BUTTONS_CLASSES } from "../../constants"; import "../../styles/Microbit.css"; import { IRefObject, MicrobitSvg } from "./Microbit_svg"; @@ -24,6 +24,11 @@ const BUTTON_CLASSNAME = { DEACTIVATED: "sim-button-deactivated", }; +export enum BUTTONS_KEYS { + BTN_A = "BTN_A", + BTN_B = "BTN_B", + BTN_AB = "BTN_AB", +} // Displays the SVG and call necessary svg modification. export class MicrobitImage extends React.Component { private svgRef: React.RefObject = React.createRef(); @@ -54,6 +59,27 @@ export class MicrobitImage extends React.Component { render() { return ; } + public sendButtonEvent(key: BUTTONS_KEYS, isActive: boolean) { + if (this.svgRef.current) { + const button = this.svgRef.current.getButtons()[key].current; + if (button) { + if (isActive) { + button.dispatchEvent(new Event("mousedown")); + button.setAttribute( + "class", + MICROBIT_BUTTONS_CLASSES.KEYPRESSED + ); + console.log(JSON.stringify(button.className)); + } else { + button.dispatchEvent(new Event("mouseup")); + button.setAttribute( + "class", + MICROBIT_BUTTONS_CLASSES.DEFAULT + ); + } + } + } + } } MicrobitImage.contextType = ViewStateContext; @@ -130,4 +156,4 @@ const setupKeyPresses = ( window.document.addEventListener("keyup", event => onKeyEvent(event, false) ); -}; \ No newline at end of file +}; diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index f1dfd008c..765fda3f3 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -10,7 +10,7 @@ import StopLogo from "../../svgs/stop_svg"; import { sendMessage } from "../../utils/MessageUtils"; import Dropdown from "../Dropdown"; import ActionBar from "../simulator/ActionBar"; -import { MicrobitImage } from "./MicrobitImage"; +import { MicrobitImage, BUTTONS_KEYS } from "./MicrobitImage"; const DEFAULT_MICROBIT_STATE: IMicrobitState = { leds: [ @@ -36,6 +36,7 @@ interface IMicrobitState { buttons: { button_a: boolean; button_b: boolean }; } export class MicrobitSimulator extends React.Component { + private imageRef: React.RefObject = React.createRef(); constructor() { super({}); this.state = { @@ -110,11 +111,12 @@ export class MicrobitSimulator extends React.Component {
@@ -194,18 +196,23 @@ export class MicrobitSimulator extends React.Component { [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) ) { console.log("btn_a"); - element = window.document.getElementById( - CONSTANTS.ID_NAME.BUTTON_A - ); - this.handleButtonClick(MICROBIT_BUTTONS_KEYS.BTN_A, active); - console.log(element) + + if (this.imageRef.current) { + this.imageRef.current.sendButtonEvent( + BUTTONS_KEYS.BTN_A, + active + ); + } } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) ) { console.log("btn_b"); - element = window.document.getElementById( - CONSTANTS.ID_NAME.BUTTON_B - ); + if (this.imageRef.current) { + this.imageRef.current.sendButtonEvent( + BUTTONS_KEYS.BTN_B, + active + ); + } } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) { this.togglePlayClick(); } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R) { diff --git a/src/view/components/microbit/Microbit_svg.tsx b/src/view/components/microbit/Microbit_svg.tsx index ccf433830..2ceebeeb8 100644 --- a/src/view/components/microbit/Microbit_svg.tsx +++ b/src/view/components/microbit/Microbit_svg.tsx @@ -40,16 +40,6 @@ export class MicrobitSvg extends React.Component { public getLeds(): React.RefObject[][] { return this.ledRefs; } - public clickButtonA() { - if (this.buttonRefs.BTN_A.current){ - this.buttonRefs.BTN_A.current.dispatchEvent(new Event('click')) - } - } - public clickButtonB() { - if (this.buttonRefs.BTN_B.current){ - this.buttonRefs.BTN_B.current.dispatchEvent(new Event('click')) - } - } render() { return ( diff --git a/src/view/constants.ts b/src/view/constants.ts index f5d496b5b..80cc0af34 100644 --- a/src/view/constants.ts +++ b/src/view/constants.ts @@ -50,6 +50,10 @@ export const MICROBIT_BUTTONS_KEYS = { BTN_B: "BTN_B", BTN_AB: "BTN_AB", }; +export const MICROBIT_BUTTONS_CLASSES = { + DEFAULT: "sim-button-outer", + KEYPRESSED: "sim-button-key-press", +}; export enum DEVICE_LIST_KEY { CPX = "CPX", MICROBIT = "micro:bit", diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css index 251839d5e..d611afa15 100644 --- a/src/view/styles/Microbit.css +++ b/src/view/styles/Microbit.css @@ -36,6 +36,10 @@ sim-button { fill: orange; } +.sim-button-key-press { + fill: orange; +} + .sim-button-nut { fill: #704a4a; pointer-events: none; From 8d4e68188e6b48ba8d10b5c9b6718eeeab5d9100 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Tue, 25 Feb 2020 11:07:05 -0800 Subject: [PATCH 09/52] made buttons focusbale --- src/view/components/cpx/CpxSimulator.tsx | 2 ++ src/view/components/microbit/MicrobitImage.tsx | 3 +++ src/view/components/microbit/MicrobitSimulator.tsx | 7 ++----- src/view/components/microbit/Microbit_svg.tsx | 4 ++-- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/view/components/cpx/CpxSimulator.tsx b/src/view/components/cpx/CpxSimulator.tsx index 673dd6857..c6e100a10 100644 --- a/src/view/components/cpx/CpxSimulator.tsx +++ b/src/view/components/cpx/CpxSimulator.tsx @@ -272,6 +272,8 @@ class Simulator extends React.Component<{}, IState> { } } if (element) { + console.log("element"); + console.log(element); event.preventDefault(); this.handleClick(element, active); element.focus(); diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index ee345c4f1..db30a9e48 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -69,6 +69,7 @@ export class MicrobitImage extends React.Component { "class", MICROBIT_BUTTONS_CLASSES.KEYPRESSED ); + button.focus(); console.log(JSON.stringify(button.className)); } else { button.dispatchEvent(new Event("mouseup")); @@ -98,6 +99,8 @@ const setupButton = ( buttonElement.onmouseleave = e => { eventTriggers.onMouseLeave(e, key); }; + buttonElement.setAttribute("focusable", "true"); + buttonElement.setAttribute("tabindex", "0"); }; const setupAllButtons = ( eventTriggers: EventTriggers, diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index 765fda3f3..e6d16cb6c 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -189,14 +189,11 @@ export class MicrobitSimulator extends React.Component { console.log("Returning"); return; } - if ([event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER)) { element = window.document.getElementById(target.id); } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) ) { - console.log("btn_a"); - if (this.imageRef.current) { this.imageRef.current.sendButtonEvent( BUTTONS_KEYS.BTN_A, @@ -206,7 +203,6 @@ export class MicrobitSimulator extends React.Component { } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) ) { - console.log("btn_b"); if (this.imageRef.current) { this.imageRef.current.sendButtonEvent( BUTTONS_KEYS.BTN_B, @@ -219,9 +215,10 @@ export class MicrobitSimulator extends React.Component { this.refreshSimulatorClick(); } if (element) { + console.log("element"); console.log(element); event.preventDefault(); - this.handleButtonClick(event.key, active); + this.handleButtonClick(MICROBIT_BUTTONS_KEYS.BTN_A, active); element.focus(); } } diff --git a/src/view/components/microbit/Microbit_svg.tsx b/src/view/components/microbit/Microbit_svg.tsx index 2ceebeeb8..feb9eee56 100644 --- a/src/view/components/microbit/Microbit_svg.tsx +++ b/src/view/components/microbit/Microbit_svg.tsx @@ -1679,10 +1679,10 @@ export class MicrobitSvg extends React.Component { role="button" aria-label="a" style={{ fill: "rgb(151, 151, 151)" }} + ref={this.buttonRefs.BTN_A} > Date: Tue, 25 Feb 2020 12:06:44 -0800 Subject: [PATCH 10/52] Focus on click --- src/view/components/microbit/MicrobitImage.tsx | 3 +-- src/view/components/microbit/Microbit_svg.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index db30a9e48..44d4930b2 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -92,6 +92,7 @@ const setupButton = ( buttonElement.setAttribute("class", BUTTON_CLASSNAME.ACTIVE); buttonElement.onmousedown = e => { eventTriggers.onMouseDown(e, key); + buttonElement.focus(); }; buttonElement.onmouseup = e => { eventTriggers.onMouseUp(e, key); @@ -99,8 +100,6 @@ const setupButton = ( buttonElement.onmouseleave = e => { eventTriggers.onMouseLeave(e, key); }; - buttonElement.setAttribute("focusable", "true"); - buttonElement.setAttribute("tabindex", "0"); }; const setupAllButtons = ( eventTriggers: EventTriggers, diff --git a/src/view/components/microbit/Microbit_svg.tsx b/src/view/components/microbit/Microbit_svg.tsx index feb9eee56..b34162d5d 100644 --- a/src/view/components/microbit/Microbit_svg.tsx +++ b/src/view/components/microbit/Microbit_svg.tsx @@ -1780,10 +1780,10 @@ export class MicrobitSvg extends React.Component { role="button" aria-label="A+B" style={{ fill: "rgb(151, 151, 151)" }} + ref={this.buttonRefs.BTN_AB} > Date: Tue, 25 Feb 2020 20:43:00 -0800 Subject: [PATCH 11/52] FIXED Pressing A and B with mouse works but CSS is messed up --- src/view/components/microbit/MicrobitImage.tsx | 2 +- src/view/components/microbit/MicrobitSimulator.tsx | 2 -- src/view/components/microbit/Microbit_svg.tsx | 12 ++++++++++++ 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index 44d4930b2..61568dd27 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -78,6 +78,7 @@ export class MicrobitImage extends React.Component { MICROBIT_BUTTONS_CLASSES.DEFAULT ); } + button.setAttribute("pressed", `${isActive}`); } } } @@ -89,7 +90,6 @@ const setupButton = ( eventTriggers: EventTriggers, key: string ) => { - buttonElement.setAttribute("class", BUTTON_CLASSNAME.ACTIVE); buttonElement.onmousedown = e => { eventTriggers.onMouseDown(e, key); buttonElement.focus(); diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index e6d16cb6c..b47fdac00 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -175,7 +175,6 @@ export class MicrobitSimulator extends React.Component { event.preventDefault(); this.handleButtonClick(key, true); }; - protected onMouseLeave = (event: Event, key: string) => { event.preventDefault(); console.log(`To implement onMouseLeave ${key}`); @@ -184,7 +183,6 @@ export class MicrobitSimulator extends React.Component { let element; const target = event.target as SVGElement; // Guard Clause - console.log("STARTING ON KEY EVENT"); if (target === undefined) { console.log("Returning"); return; diff --git a/src/view/components/microbit/Microbit_svg.tsx b/src/view/components/microbit/Microbit_svg.tsx index b34162d5d..347ce0a0c 100644 --- a/src/view/components/microbit/Microbit_svg.tsx +++ b/src/view/components/microbit/Microbit_svg.tsx @@ -1695,24 +1695,28 @@ export class MicrobitSvg extends React.Component { cx="35.9" cy="186.4" r={6} + strokeWidth={0} /> Date: Wed, 26 Feb 2020 00:20:32 -0800 Subject: [PATCH 12/52] no real changes --- src/view/components/microbit/MicrobitSimulator.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index b47fdac00..a2fe20e13 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -180,7 +180,6 @@ export class MicrobitSimulator extends React.Component { console.log(`To implement onMouseLeave ${key}`); }; protected onKeyEvent(event: KeyboardEvent, active: boolean) { - let element; const target = event.target as SVGElement; // Guard Clause if (target === undefined) { @@ -188,7 +187,7 @@ export class MicrobitSimulator extends React.Component { return; } if ([event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER)) { - element = window.document.getElementById(target.id); + // Todo } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) ) { @@ -212,12 +211,5 @@ export class MicrobitSimulator extends React.Component { } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R) { this.refreshSimulatorClick(); } - if (element) { - console.log("element"); - console.log(element); - event.preventDefault(); - this.handleButtonClick(MICROBIT_BUTTONS_KEYS.BTN_A, active); - element.focus(); - } } } From 7a37ef3418ca3cd4767e674bdf3c36757480b229 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 10:12:42 -0800 Subject: [PATCH 13/52] css updates when a or b is pressed --- src/view/components/microbit/MicrobitImage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index 61568dd27..3a23f5684 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -65,15 +65,15 @@ export class MicrobitImage extends React.Component { if (button) { if (isActive) { button.dispatchEvent(new Event("mousedown")); - button.setAttribute( + button.focus(); + button.children[0].setAttribute( "class", MICROBIT_BUTTONS_CLASSES.KEYPRESSED ); - button.focus(); console.log(JSON.stringify(button.className)); } else { button.dispatchEvent(new Event("mouseup")); - button.setAttribute( + button.children[0].setAttribute( "class", MICROBIT_BUTTONS_CLASSES.DEFAULT ); From 3136d2a6adedd2ef8869c5452093a15aaba81f18 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 11:55:23 -0800 Subject: [PATCH 14/52] pressing enter on focused element now acts like a press --- .../components/microbit/MicrobitImage.tsx | 24 ++++++++------ .../components/microbit/MicrobitSimulator.tsx | 32 +++++++++++++------ 2 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index 3a23f5684..0934b68d0 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -12,7 +12,7 @@ interface EventTriggers { onMouseUp: (event: Event, buttonKey: string) => void; onMouseDown: (event: Event, buttonKey: string) => void; onMouseLeave: (event: Event, buttonKey: string) => void; - onKeyEvent: (event: KeyboardEvent, active: boolean) => void; + onKeyEvent: (event: KeyboardEvent, active: boolean, key: string) => void; } interface IProps { eventTriggers: EventTriggers; @@ -59,26 +59,24 @@ export class MicrobitImage extends React.Component { render() { return ; } - public sendButtonEvent(key: BUTTONS_KEYS, isActive: boolean) { + public updateButtonAttributes(key: BUTTONS_KEYS, isActive: boolean) { if (this.svgRef.current) { const button = this.svgRef.current.getButtons()[key].current; if (button) { + button.focus(); if (isActive) { - button.dispatchEvent(new Event("mousedown")); - button.focus(); button.children[0].setAttribute( "class", MICROBIT_BUTTONS_CLASSES.KEYPRESSED ); - console.log(JSON.stringify(button.className)); } else { - button.dispatchEvent(new Event("mouseup")); button.children[0].setAttribute( "class", MICROBIT_BUTTONS_CLASSES.DEFAULT ); } button.setAttribute("pressed", `${isActive}`); + button.setAttribute("aria-pressed", `${isActive}`); } } } @@ -91,8 +89,8 @@ const setupButton = ( key: string ) => { buttonElement.onmousedown = e => { - eventTriggers.onMouseDown(e, key); buttonElement.focus(); + eventTriggers.onMouseDown(e, key); }; buttonElement.onmouseup = e => { eventTriggers.onMouseUp(e, key); @@ -100,6 +98,12 @@ const setupButton = ( buttonElement.onmouseleave = e => { eventTriggers.onMouseLeave(e, key); }; + buttonElement.onkeydown = e => { + eventTriggers.onKeyEvent(e, true, key); + } + buttonElement.onkeyup = e => { + eventTriggers.onKeyEvent(e, false, key); + } }; const setupAllButtons = ( eventTriggers: EventTriggers, @@ -140,7 +144,7 @@ const setupLed = (ledElement: SVGRectElement, brightness: number) => { }; const setupKeyPresses = ( - onKeyEvent: (event: KeyboardEvent, active: boolean) => void + onKeyEvent: (event: KeyboardEvent, active: boolean, key: string) => void ) => { window.document.addEventListener("keydown", event => { const keyEvents = [event.key, event.code]; @@ -152,10 +156,10 @@ const setupKeyPresses = ( keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.ENTER) ) ) { - onKeyEvent(event, true); + onKeyEvent(event, true, event.key); } }); window.document.addEventListener("keyup", event => - onKeyEvent(event, false) + onKeyEvent(event, false, event.key) ); }; diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index a2fe20e13..c83e1cba6 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -179,20 +179,31 @@ export class MicrobitSimulator extends React.Component { event.preventDefault(); console.log(`To implement onMouseLeave ${key}`); }; - protected onKeyEvent(event: KeyboardEvent, active: boolean) { - const target = event.target as SVGElement; - // Guard Clause - if (target === undefined) { - console.log("Returning"); - return; - } + protected onKeyEvent(event: KeyboardEvent, active: boolean, key: string) { if ([event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER)) { - // Todo + this.handleButtonClick(key, active); + if (key === BUTTONS_KEYS.BTN_A && this.imageRef.current) { + this.imageRef.current.updateButtonAttributes( + BUTTONS_KEYS.BTN_A, + active + ); + } else if (key === BUTTONS_KEYS.BTN_B && this.imageRef.current) { + this.imageRef.current.updateButtonAttributes( + BUTTONS_KEYS.BTN_B, + active + ); + } else if (key === BUTTONS_KEYS.BTN_AB && this.imageRef.current) { + this.imageRef.current.updateButtonAttributes( + BUTTONS_KEYS.BTN_AB, + active + ); + } } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) ) { + this.handleButtonClick(BUTTONS_KEYS.BTN_A, active); if (this.imageRef.current) { - this.imageRef.current.sendButtonEvent( + this.imageRef.current.updateButtonAttributes( BUTTONS_KEYS.BTN_A, active ); @@ -200,8 +211,9 @@ export class MicrobitSimulator extends React.Component { } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) ) { + this.handleButtonClick(BUTTONS_KEYS.BTN_B, active); if (this.imageRef.current) { - this.imageRef.current.sendButtonEvent( + this.imageRef.current.updateButtonAttributes( BUTTONS_KEYS.BTN_B, active ); From 801077fca76b80e9b6676a25f281c359840d6400 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 12:09:32 -0800 Subject: [PATCH 15/52] added stop prop --- .../components/microbit/MicrobitSimulator.tsx | 33 ++++++++++--------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index c83e1cba6..0870c106f 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -180,23 +180,26 @@ export class MicrobitSimulator extends React.Component { console.log(`To implement onMouseLeave ${key}`); }; protected onKeyEvent(event: KeyboardEvent, active: boolean, key: string) { + event.stopPropagation(); if ([event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER)) { this.handleButtonClick(key, active); - if (key === BUTTONS_KEYS.BTN_A && this.imageRef.current) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_A, - active - ); - } else if (key === BUTTONS_KEYS.BTN_B && this.imageRef.current) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_B, - active - ); - } else if (key === BUTTONS_KEYS.BTN_AB && this.imageRef.current) { - this.imageRef.current.updateButtonAttributes( - BUTTONS_KEYS.BTN_AB, - active - ); + if (this.imageRef.current) { + if (key === BUTTONS_KEYS.BTN_A) { + this.imageRef.current.updateButtonAttributes( + BUTTONS_KEYS.BTN_A, + active + ); + } else if (key === BUTTONS_KEYS.BTN_B) { + this.imageRef.current.updateButtonAttributes( + BUTTONS_KEYS.BTN_B, + active + ); + } else if (key === BUTTONS_KEYS.BTN_AB) { + this.imageRef.current.updateButtonAttributes( + BUTTONS_KEYS.BTN_AB, + active + ); + } } } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) From 950b40c760622599dff0cbbad1095a069b266ab5 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 12:33:05 -0800 Subject: [PATCH 16/52] removed pins hover --- src/view/styles/Microbit.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css index d611afa15..1b175bc75 100644 --- a/src/view/styles/Microbit.css +++ b/src/view/styles/Microbit.css @@ -44,7 +44,7 @@ sim-button { fill: #704a4a; pointer-events: none; } -.sim-button-nut:hover { +/* .sim-button-nut:hover { stroke: 1px solid #704a4a; } .sim-pin:hover { @@ -61,7 +61,7 @@ sim-button { .sim-led:hover { stroke: #ff7f7f; stroke-width: 3px; -} +} */ .sim-systemled { fill: #333; stroke: #555; From 485d57dd70e4c71808ce79a868465cd1229974f4 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 13:39:12 -0800 Subject: [PATCH 17/52] Rebased onto dev --- .vscode/settings.json | 4 ++- src/common/constants.py | 32 ------------------------ src/view/components/cpx/CpxSimulator.tsx | 4 +-- 3 files changed, 4 insertions(+), 36 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index fa0a10487..384dfbbdf 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,5 +7,7 @@ "out": true // set this to false to include "out" folder in search results }, // Turn off tsc task auto detection since we have the necessary tasks as npm scripts - "typescript.tsc.autoDetect": "off" + "typescript.tsc.autoDetect": "off", + "python.pythonPath": "C:\\Users\\t-vali\\AppData\\Local\\Programs\\Python\\Python38-32\\python.exe", + "python.linting.enabled": false } diff --git a/src/common/constants.py b/src/common/constants.py index 921799b30..73984933a 100644 --- a/src/common/constants.py +++ b/src/common/constants.py @@ -8,35 +8,3 @@ CONNECTION_ATTEMPTS = 10 TIME_DELAY = 0.03 DEFAULT_PORT = "5577" - -TELEMETRY_EVENT_NAMES = { - "CPX_API_ACCELERATION": "CPX.API.ACCELERATION", - "CPX_API_BUTTON_A": "CPX.API.BUTTON.A", - "CPX_API_BUTTON_B": "CPX.API.BUTTON.B", - "CPX_API_SWITCH": "CPX.API.SWITCH", - "CPX_API_TEMPERATURE": "CPX.API.TEMPERATURE", - "CPX_API_BRIGHTNESS": "CPX.API.BRIGHTNESS", - "CPX_API_LIGHT": "CPX.API.LIGHT", - "CPX_API_TOUCH": "CPX.API.TOUCH", - "CPX_API_SHAKE": "CPX.API.SHAKE", - "CPX_API_TAPPED": "CPX.API.TAPPED", - "CPX_API_PLAY_FILE": "CPX.API.PLAY.FILE", - "CPX_API_PLAY_TONE": "CPX.API.PLAY.TONE", - "CPX_API_START_TONE": "CPX.API.START.TONE", - "CPX_API_STOP_TONE": "CPX.API.STOP.TONE", - "CPX_API_DETECT_TAPS": "CPX.API.DETECT.TAPS", - "CPX_API_ADJUST_THRESHOLD": "CPX.API.ADJUST.THRESHOLD", - "CPX_API_RED_LED": "CPX.API.RED.LED", - "CPX_API_PIXELS": "CPX.API.PIXELS", - "MICROBIT_API_TEMPERATURE": "MICROBIT.API.TEMPERATURE", - "MICROBIT_API_ACCELEROMETER": "MICROBIT.API.ACCELEROMETER", - "MICROBIT_API_GESTURE": "MICROBIT.API.GESTURE", - "MICROBIT_API_DISPLAY_SCROLL": "MICROBIT.API.DISPLAY.SCROLL", - "MICROBIT_API_DISPLAY_SHOW": "MICROBIT.API.DISPLAY.SHOW", - "MICROBIT_API_DISPLAY_OTHER": "MICROBIT.API.DISPLAY_OTHER", - "MICROBIT_API_LIGHT_LEVEL": "MICROBIT.API.LIGHT.LEVEL", - "MICROBIT_API_IMAGE_CREATION": "MICROBIT.API.IMAGE.CREATION", - "MICROBIT_API_IMAGE_OTHER": "MICROBIT.API.IMAGE.OTHER", - "MICROBIT_API_IMAGE_STATIC": "MICROBIT.API.IMAGE.STATIC", - "MICROBIT_API_BUTTON": "MICROBIT.API.BUTTON", -} diff --git a/src/view/components/cpx/CpxSimulator.tsx b/src/view/components/cpx/CpxSimulator.tsx index c6e100a10..f4feb3bbc 100644 --- a/src/view/components/cpx/CpxSimulator.tsx +++ b/src/view/components/cpx/CpxSimulator.tsx @@ -271,9 +271,7 @@ class Simulator extends React.Component<{}, IState> { } } } - if (element) { - console.log("element"); - console.log(element); + if (element) { event.preventDefault(); this.handleClick(element, active); element.focus(); From 7a02cd0770c013a9002c6df348ddec39d7275eed Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 13:40:08 -0800 Subject: [PATCH 18/52] formatted --- .vscode/settings.json | 3 --- src/view/components/cpx/CpxSimulator.tsx | 2 +- src/view/components/microbit/MicrobitImage.tsx | 4 ++-- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 384dfbbdf..b6ec1f828 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,7 +7,4 @@ "out": true // set this to false to include "out" folder in search results }, // Turn off tsc task auto detection since we have the necessary tasks as npm scripts - "typescript.tsc.autoDetect": "off", - "python.pythonPath": "C:\\Users\\t-vali\\AppData\\Local\\Programs\\Python\\Python38-32\\python.exe", - "python.linting.enabled": false } diff --git a/src/view/components/cpx/CpxSimulator.tsx b/src/view/components/cpx/CpxSimulator.tsx index f4feb3bbc..673dd6857 100644 --- a/src/view/components/cpx/CpxSimulator.tsx +++ b/src/view/components/cpx/CpxSimulator.tsx @@ -271,7 +271,7 @@ class Simulator extends React.Component<{}, IState> { } } } - if (element) { + if (element) { event.preventDefault(); this.handleClick(element, active); element.focus(); diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index 0934b68d0..f7b010ba0 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -100,10 +100,10 @@ const setupButton = ( }; buttonElement.onkeydown = e => { eventTriggers.onKeyEvent(e, true, key); - } + }; buttonElement.onkeyup = e => { eventTriggers.onKeyEvent(e, false, key); - } + }; }; const setupAllButtons = ( eventTriggers: EventTriggers, From aed93fc98655d2e8a5c3243c32384f4450dd2f11 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 13:41:21 -0800 Subject: [PATCH 19/52] added back removed code --- .vscode/settings.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.vscode/settings.json b/.vscode/settings.json index b6ec1f828..fa0a10487 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,4 +7,5 @@ "out": true // set this to false to include "out" folder in search results }, // Turn off tsc task auto detection since we have the necessary tasks as npm scripts + "typescript.tsc.autoDetect": "off" } From 02af167ad9b8e25997346690cc45db59b51ba311 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 14:43:32 -0800 Subject: [PATCH 20/52] fixed config bugs --- package.json | 4 ++-- src/view/styles/Microbit.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 887c1efcf..0c716c8f6 100644 --- a/package.json +++ b/package.json @@ -171,7 +171,7 @@ "type": "boolean", "default": false, "description": "%deviceSimulatorExpressExtension.configuration.properties.previewMode%", - "scope": "resource" + "scope": "resource" } } }, @@ -351,4 +351,4 @@ "extensionDependencies": [ "ms-python.python" ] -} \ No newline at end of file +} diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css index 1b175bc75..d611afa15 100644 --- a/src/view/styles/Microbit.css +++ b/src/view/styles/Microbit.css @@ -44,7 +44,7 @@ sim-button { fill: #704a4a; pointer-events: none; } -/* .sim-button-nut:hover { +.sim-button-nut:hover { stroke: 1px solid #704a4a; } .sim-pin:hover { @@ -61,7 +61,7 @@ sim-button { .sim-led:hover { stroke: #ff7f7f; stroke-width: 3px; -} */ +} .sim-systemled { fill: #333; stroke: #555; From f0048218bd9c3e7fb8b94433a9b4047c0d5ab4db Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 16:20:10 -0800 Subject: [PATCH 21/52] updated css --- src/view/styles/Microbit.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css index d611afa15..92609e54c 100644 --- a/src/view/styles/Microbit.css +++ b/src/view/styles/Microbit.css @@ -44,7 +44,7 @@ sim-button { fill: #704a4a; pointer-events: none; } -.sim-button-nut:hover { +/* .sim-button-nut:hover { stroke: 1px solid #704a4a; } .sim-pin:hover { @@ -61,7 +61,7 @@ sim-button { .sim-led:hover { stroke: #ff7f7f; stroke-width: 3px; -} +} */ .sim-systemled { fill: #333; stroke: #555; @@ -146,6 +146,11 @@ sim-button { } *:focus { outline: none; + +} +.sim-button-group:focus { + stroke: #4D90FE; + stroke-width: 4px; } *:focus .sim-button-outer, .sim-pin:focus, From fde9157b0855104dfa5b9a4bedfaf75ffce15cd6 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 16:22:46 -0800 Subject: [PATCH 22/52] added comment --- src/view/styles/Microbit.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css index 92609e54c..a990b2d5f 100644 --- a/src/view/styles/Microbit.css +++ b/src/view/styles/Microbit.css @@ -44,7 +44,10 @@ sim-button { fill: #704a4a; pointer-events: none; } -/* .sim-button-nut:hover { + +/* Will add back once pin functionality is added + +.sim-button-nut:hover { stroke: 1px solid #704a4a; } .sim-pin:hover { From a264b2dc4587b930b705cd07aa33765bb0580e6d Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 16:39:30 -0800 Subject: [PATCH 23/52] ran npm run format --- src/view/styles/Microbit.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css index a990b2d5f..1c34beb36 100644 --- a/src/view/styles/Microbit.css +++ b/src/view/styles/Microbit.css @@ -149,10 +149,9 @@ sim-button { } *:focus { outline: none; - } .sim-button-group:focus { - stroke: #4D90FE; + stroke: #4d90fe; stroke-width: 4px; } *:focus .sim-button-outer, From 1795d70c48493878c83bc71d00886d4f72125819 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 26 Feb 2020 19:44:00 -0800 Subject: [PATCH 24/52] Changed frontend tests --- src/view/components/microbit/Microbit_svg.tsx | 2 +- .../device/__snapshots__/Device.spec.tsx.snap | 18 +++++++++++++++--- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/view/components/microbit/Microbit_svg.tsx b/src/view/components/microbit/Microbit_svg.tsx index 347ce0a0c..e2e147412 100644 --- a/src/view/components/microbit/Microbit_svg.tsx +++ b/src/view/components/microbit/Microbit_svg.tsx @@ -1786,7 +1786,7 @@ export class MicrobitSvg extends React.Component { focusable="true" tabIndex={0} role="button" - aria-label="A+B" + aria-label="a+b" style={{ fill: "rgb(151, 151, 151)" }} ref={this.buttonRefs.BTN_AB} > diff --git a/src/view/container/device/__snapshots__/Device.spec.tsx.snap b/src/view/container/device/__snapshots__/Device.spec.tsx.snap index 39058db18..9dc44822d 100644 --- a/src/view/container/device/__snapshots__/Device.spec.tsx.snap +++ b/src/view/container/device/__snapshots__/Device.spec.tsx.snap @@ -2352,7 +2352,7 @@ exports[`Device component should render correctly 1`] = ` y={345} /> Date: Thu, 27 Feb 2020 12:44:09 -0800 Subject: [PATCH 25/52] Remove listeners on unmount --- src/view/components/cpx/CpxImage.tsx | 50 +++++++++++-------- .../components/microbit/MicrobitImage.tsx | 49 ++++++++++-------- .../components/microbit/MicrobitSimulator.tsx | 4 +- 3 files changed, 57 insertions(+), 46 deletions(-) diff --git a/src/view/components/cpx/CpxImage.tsx b/src/view/components/cpx/CpxImage.tsx index fd3688b12..210ae0790 100644 --- a/src/view/components/cpx/CpxImage.tsx +++ b/src/view/components/cpx/CpxImage.tsx @@ -27,14 +27,41 @@ export class CpxImage extends React.Component { initSvgStyle(svgElement, this.props.brightness); setupButtons(this.props); setupPins(this.props); - setupKeyPresses(this.props.onKeyEvent); + this.setupKeyPresses(this.props.onKeyEvent); setupSwitch(this.props); this.updateImage(); } } + componentWillUnmount() { + window.document.removeEventListener("keyup", this.handleKeyUp); + window.document.removeEventListener("keydown", this.handleKeyDown); + } componentDidUpdate() { this.updateImage(); } + setupKeyPresses = ( + onKeyEvent: (event: KeyboardEvent, active: boolean) => void + ) => { + window.document.addEventListener("keydown", this.handleKeyDown); + window.document.addEventListener("keyup", this.handleKeyUp); + }; + + handleKeyDown = (event: KeyboardEvent) => { + const keyEvents = [event.key, event.code]; + // Don't listen to keydown events for the switch, run button and enter key + if ( + !( + keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.S) || + keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) || + keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.ENTER) + ) + ) { + this.props.onKeyEvent(event, true); + } + }; + handleKeyUp = (event: KeyboardEvent) => { + this.props.onKeyEvent(event, false); + }; render() { return CPX_SVG; } @@ -314,27 +341,6 @@ const setupButton = (button: HTMLElement, className: string, props: IProps) => { svgButton.onmouseleave = e => props.onMouseLeave(button, e); }; -const setupKeyPresses = ( - onKeyEvent: (event: KeyboardEvent, active: boolean) => void -) => { - window.document.addEventListener("keydown", event => { - const keyEvents = [event.key, event.code]; - // Don't listen to keydown events for the switch, run button and enter key - if ( - !( - keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.S) || - keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) || - keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.ENTER) - ) - ) { - onKeyEvent(event, true); - } - }); - window.document.addEventListener("keyup", event => - onKeyEvent(event, false) - ); -}; - const setupSwitch = (props: IProps): void => { const switchElement = window.document.getElementById("SWITCH"); const swInnerElement = window.document.getElementById("SWITCH_INNER"); diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index f7b010ba0..0ef2c589b 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -40,7 +40,7 @@ export class MicrobitImage extends React.Component { if (svgElement) { updateAllLeds(this.props.leds, svgElement.getLeds()); setupAllButtons(this.props.eventTriggers, svgElement.getButtons()); - setupKeyPresses(this.props.eventTriggers.onKeyEvent); + this.setupKeyPresses(this.props.eventTriggers.onKeyEvent); } } componentDidUpdate() { @@ -56,6 +56,32 @@ export class MicrobitImage extends React.Component { } } } + componentWillUnmount() { + window.document.removeEventListener("keydown", this.handleKeyUp); + window.document.removeEventListener("keyup", this.handleKeyUp); + } + setupKeyPresses = ( + onKeyEvent: (event: KeyboardEvent, active: boolean, key: string) => void + ) => { + window.document.addEventListener("keydown", this.handleKeyUp); + window.document.addEventListener("keyup", this.handleKeyDown); + }; + handleKeyDown = (event: KeyboardEvent) => { + const keyEvents = [event.key, event.code]; + // Don't listen to keydown events for the switch, run button and enter key + if ( + !( + keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.S) || + keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) || + keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.ENTER) + ) + ) { + this.props.eventTriggers.onKeyEvent(event, true, event.key); + } + }; + handleKeyUp = (event: KeyboardEvent) => { + this.props.eventTriggers.onKeyEvent(event, false, event.key); + }; render() { return ; } @@ -142,24 +168,3 @@ const updateAllLeds = ( const setupLed = (ledElement: SVGRectElement, brightness: number) => { ledElement.style.opacity = (brightness / 10).toString(); }; - -const setupKeyPresses = ( - onKeyEvent: (event: KeyboardEvent, active: boolean, key: string) => void -) => { - window.document.addEventListener("keydown", event => { - const keyEvents = [event.key, event.code]; - // Don't listen to keydown events for the switch, run button and enter key - if ( - !( - keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.S) || - keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) || - keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.ENTER) - ) - ) { - onKeyEvent(event, true, event.key); - } - }); - window.document.addEventListener("keyup", event => - onKeyEvent(event, false, event.key) - ); -}; diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index 0870c106f..da939e3aa 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -221,9 +221,9 @@ export class MicrobitSimulator extends React.Component { active ); } - } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) { + } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F && !active) { this.togglePlayClick(); - } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R) { + } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R && !active) { this.refreshSimulatorClick(); } } From ece59f97c3b476f2252f9962fdb059a425e8e78e Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Thu, 20 Feb 2020 12:20:56 -0800 Subject: [PATCH 26/52] Fixed bug with acceleration api telemetry --- src/common/constants.py | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/common/constants.py b/src/common/constants.py index 73984933a..921799b30 100644 --- a/src/common/constants.py +++ b/src/common/constants.py @@ -8,3 +8,35 @@ CONNECTION_ATTEMPTS = 10 TIME_DELAY = 0.03 DEFAULT_PORT = "5577" + +TELEMETRY_EVENT_NAMES = { + "CPX_API_ACCELERATION": "CPX.API.ACCELERATION", + "CPX_API_BUTTON_A": "CPX.API.BUTTON.A", + "CPX_API_BUTTON_B": "CPX.API.BUTTON.B", + "CPX_API_SWITCH": "CPX.API.SWITCH", + "CPX_API_TEMPERATURE": "CPX.API.TEMPERATURE", + "CPX_API_BRIGHTNESS": "CPX.API.BRIGHTNESS", + "CPX_API_LIGHT": "CPX.API.LIGHT", + "CPX_API_TOUCH": "CPX.API.TOUCH", + "CPX_API_SHAKE": "CPX.API.SHAKE", + "CPX_API_TAPPED": "CPX.API.TAPPED", + "CPX_API_PLAY_FILE": "CPX.API.PLAY.FILE", + "CPX_API_PLAY_TONE": "CPX.API.PLAY.TONE", + "CPX_API_START_TONE": "CPX.API.START.TONE", + "CPX_API_STOP_TONE": "CPX.API.STOP.TONE", + "CPX_API_DETECT_TAPS": "CPX.API.DETECT.TAPS", + "CPX_API_ADJUST_THRESHOLD": "CPX.API.ADJUST.THRESHOLD", + "CPX_API_RED_LED": "CPX.API.RED.LED", + "CPX_API_PIXELS": "CPX.API.PIXELS", + "MICROBIT_API_TEMPERATURE": "MICROBIT.API.TEMPERATURE", + "MICROBIT_API_ACCELEROMETER": "MICROBIT.API.ACCELEROMETER", + "MICROBIT_API_GESTURE": "MICROBIT.API.GESTURE", + "MICROBIT_API_DISPLAY_SCROLL": "MICROBIT.API.DISPLAY.SCROLL", + "MICROBIT_API_DISPLAY_SHOW": "MICROBIT.API.DISPLAY.SHOW", + "MICROBIT_API_DISPLAY_OTHER": "MICROBIT.API.DISPLAY_OTHER", + "MICROBIT_API_LIGHT_LEVEL": "MICROBIT.API.LIGHT.LEVEL", + "MICROBIT_API_IMAGE_CREATION": "MICROBIT.API.IMAGE.CREATION", + "MICROBIT_API_IMAGE_OTHER": "MICROBIT.API.IMAGE.OTHER", + "MICROBIT_API_IMAGE_STATIC": "MICROBIT.API.IMAGE.STATIC", + "MICROBIT_API_BUTTON": "MICROBIT.API.BUTTON", +} From 08e4a251a2a2cf52b0a729e13b2ea419d1cbae9e Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Thu, 20 Feb 2020 15:59:35 -0800 Subject: [PATCH 27/52] Made constants into enum --- src/common/telemetry.py | 1 + 1 file changed, 1 insertion(+) diff --git a/src/common/telemetry.py b/src/common/telemetry.py index 44a22d058..f90ab8b99 100644 --- a/src/common/telemetry.py +++ b/src/common/telemetry.py @@ -29,3 +29,4 @@ def telemetry_available(self): telemetry_py = Telemetry() +print(telemetry_py.telemetry_state) From 80860e8459637b1832a3fa1c207cedb1441718c7 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Fri, 21 Feb 2020 18:19:33 -0800 Subject: [PATCH 28/52] first commit --- src/common/telemetry.py | 1 - .../components/microbit/MicrobitImage.tsx | 21 +++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/common/telemetry.py b/src/common/telemetry.py index f90ab8b99..44a22d058 100644 --- a/src/common/telemetry.py +++ b/src/common/telemetry.py @@ -29,4 +29,3 @@ def telemetry_available(self): telemetry_py = Telemetry() -print(telemetry_py.telemetry_state) diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index 0ef2c589b..f0b24b58f 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -168,3 +168,24 @@ const updateAllLeds = ( const setupLed = (ledElement: SVGRectElement, brightness: number) => { ledElement.style.opacity = (brightness / 10).toString(); }; + +const setupKeyPresses = ( + onKeyEvent: (event: KeyboardEvent, active: boolean) => void +) => { + window.document.addEventListener("keydown", event => { + const keyEvents = [event.key, event.code]; + // Don't listen to keydown events for the switch, run button and enter key + if ( + !( + keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.S) || + keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) || + keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.ENTER) + ) + ) { + onKeyEvent(event, true); + } + }); + window.document.addEventListener("keyup", event => + onKeyEvent(event, false) + ); +}; \ No newline at end of file From 5e0337987ea8112d34147e78b885a469502d7aab Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Mon, 24 Feb 2020 13:50:51 -0800 Subject: [PATCH 29/52] doesnt work --- src/view/components/microbit/Microbit_svg.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/view/components/microbit/Microbit_svg.tsx b/src/view/components/microbit/Microbit_svg.tsx index e2e147412..abdefcd68 100644 --- a/src/view/components/microbit/Microbit_svg.tsx +++ b/src/view/components/microbit/Microbit_svg.tsx @@ -40,6 +40,16 @@ export class MicrobitSvg extends React.Component { public getLeds(): React.RefObject[][] { return this.ledRefs; } + public clickButtonA() { + if (this.buttonRefs.BTN_A.current){ + this.buttonRefs.BTN_A.current.dispatchEvent(new Event('click')) + } + } + public clickButtonB() { + if (this.buttonRefs.BTN_B.current){ + this.buttonRefs.BTN_B.current.dispatchEvent(new Event('click')) + } + } render() { return ( From 552a939a78657d358e51f6cb1b6d207a8c8063ab Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Mon, 24 Feb 2020 14:44:37 -0800 Subject: [PATCH 30/52] Keypresses will click button --- src/view/components/microbit/MicrobitImage.tsx | 2 +- src/view/components/microbit/Microbit_svg.tsx | 10 ---------- 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index f0b24b58f..ca614cec0 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -188,4 +188,4 @@ const setupKeyPresses = ( window.document.addEventListener("keyup", event => onKeyEvent(event, false) ); -}; \ No newline at end of file +}; diff --git a/src/view/components/microbit/Microbit_svg.tsx b/src/view/components/microbit/Microbit_svg.tsx index abdefcd68..e2e147412 100644 --- a/src/view/components/microbit/Microbit_svg.tsx +++ b/src/view/components/microbit/Microbit_svg.tsx @@ -40,16 +40,6 @@ export class MicrobitSvg extends React.Component { public getLeds(): React.RefObject[][] { return this.ledRefs; } - public clickButtonA() { - if (this.buttonRefs.BTN_A.current){ - this.buttonRefs.BTN_A.current.dispatchEvent(new Event('click')) - } - } - public clickButtonB() { - if (this.buttonRefs.BTN_B.current){ - this.buttonRefs.BTN_B.current.dispatchEvent(new Event('click')) - } - } render() { return ( From 15e513ebdf4dd10ea7a3dc7463571944999a64c9 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Tue, 25 Feb 2020 11:07:05 -0800 Subject: [PATCH 31/52] made buttons focusbale --- src/view/components/cpx/CpxSimulator.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/view/components/cpx/CpxSimulator.tsx b/src/view/components/cpx/CpxSimulator.tsx index 673dd6857..c6e100a10 100644 --- a/src/view/components/cpx/CpxSimulator.tsx +++ b/src/view/components/cpx/CpxSimulator.tsx @@ -272,6 +272,8 @@ class Simulator extends React.Component<{}, IState> { } } if (element) { + console.log("element"); + console.log(element); event.preventDefault(); this.handleClick(element, active); element.focus(); From 279527b332043f28c0f16c4610948798a21533da Mon Sep 17 00:00:00 2001 From: xnkevinnguyen Date: Tue, 25 Feb 2020 12:06:44 -0800 Subject: [PATCH 32/52] Focus on click --- src/view/components/microbit/MicrobitImage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index ca614cec0..be601315a 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -117,6 +117,7 @@ const setupButton = ( buttonElement.onmousedown = e => { buttonElement.focus(); eventTriggers.onMouseDown(e, key); + buttonElement.focus(); }; buttonElement.onmouseup = e => { eventTriggers.onMouseUp(e, key); From e27abd17b86fea194f121ca4394584b305f2ef40 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 11:55:23 -0800 Subject: [PATCH 33/52] pressing enter on focused element now acts like a press --- src/view/components/microbit/MicrobitImage.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index be601315a..00db16e22 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -117,7 +117,6 @@ const setupButton = ( buttonElement.onmousedown = e => { buttonElement.focus(); eventTriggers.onMouseDown(e, key); - buttonElement.focus(); }; buttonElement.onmouseup = e => { eventTriggers.onMouseUp(e, key); @@ -171,7 +170,7 @@ const setupLed = (ledElement: SVGRectElement, brightness: number) => { }; const setupKeyPresses = ( - onKeyEvent: (event: KeyboardEvent, active: boolean) => void + onKeyEvent: (event: KeyboardEvent, active: boolean, key: string) => void ) => { window.document.addEventListener("keydown", event => { const keyEvents = [event.key, event.code]; @@ -183,10 +182,10 @@ const setupKeyPresses = ( keyEvents.includes(CONSTANTS.KEYBOARD_KEYS.ENTER) ) ) { - onKeyEvent(event, true); + onKeyEvent(event, true, event.key); } }); window.document.addEventListener("keyup", event => - onKeyEvent(event, false) + onKeyEvent(event, false, event.key) ); }; From 66241c68661fcae0788c47c05926ae2aca28975c Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 12:33:05 -0800 Subject: [PATCH 34/52] removed pins hover --- src/view/styles/Microbit.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css index 1c34beb36..c73669ec4 100644 --- a/src/view/styles/Microbit.css +++ b/src/view/styles/Microbit.css @@ -44,10 +44,7 @@ sim-button { fill: #704a4a; pointer-events: none; } - -/* Will add back once pin functionality is added - -.sim-button-nut:hover { +/* .sim-button-nut:hover { stroke: 1px solid #704a4a; } .sim-pin:hover { From 0d150eb2a1d1f1fec8db0a83e265ee68ef97d8ac Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 13:39:12 -0800 Subject: [PATCH 35/52] Rebased onto dev --- .vscode/settings.json | 4 ++- src/common/constants.py | 32 ------------------------ src/view/components/cpx/CpxSimulator.tsx | 4 +-- 3 files changed, 4 insertions(+), 36 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index fa0a10487..384dfbbdf 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,5 +7,7 @@ "out": true // set this to false to include "out" folder in search results }, // Turn off tsc task auto detection since we have the necessary tasks as npm scripts - "typescript.tsc.autoDetect": "off" + "typescript.tsc.autoDetect": "off", + "python.pythonPath": "C:\\Users\\t-vali\\AppData\\Local\\Programs\\Python\\Python38-32\\python.exe", + "python.linting.enabled": false } diff --git a/src/common/constants.py b/src/common/constants.py index 921799b30..73984933a 100644 --- a/src/common/constants.py +++ b/src/common/constants.py @@ -8,35 +8,3 @@ CONNECTION_ATTEMPTS = 10 TIME_DELAY = 0.03 DEFAULT_PORT = "5577" - -TELEMETRY_EVENT_NAMES = { - "CPX_API_ACCELERATION": "CPX.API.ACCELERATION", - "CPX_API_BUTTON_A": "CPX.API.BUTTON.A", - "CPX_API_BUTTON_B": "CPX.API.BUTTON.B", - "CPX_API_SWITCH": "CPX.API.SWITCH", - "CPX_API_TEMPERATURE": "CPX.API.TEMPERATURE", - "CPX_API_BRIGHTNESS": "CPX.API.BRIGHTNESS", - "CPX_API_LIGHT": "CPX.API.LIGHT", - "CPX_API_TOUCH": "CPX.API.TOUCH", - "CPX_API_SHAKE": "CPX.API.SHAKE", - "CPX_API_TAPPED": "CPX.API.TAPPED", - "CPX_API_PLAY_FILE": "CPX.API.PLAY.FILE", - "CPX_API_PLAY_TONE": "CPX.API.PLAY.TONE", - "CPX_API_START_TONE": "CPX.API.START.TONE", - "CPX_API_STOP_TONE": "CPX.API.STOP.TONE", - "CPX_API_DETECT_TAPS": "CPX.API.DETECT.TAPS", - "CPX_API_ADJUST_THRESHOLD": "CPX.API.ADJUST.THRESHOLD", - "CPX_API_RED_LED": "CPX.API.RED.LED", - "CPX_API_PIXELS": "CPX.API.PIXELS", - "MICROBIT_API_TEMPERATURE": "MICROBIT.API.TEMPERATURE", - "MICROBIT_API_ACCELEROMETER": "MICROBIT.API.ACCELEROMETER", - "MICROBIT_API_GESTURE": "MICROBIT.API.GESTURE", - "MICROBIT_API_DISPLAY_SCROLL": "MICROBIT.API.DISPLAY.SCROLL", - "MICROBIT_API_DISPLAY_SHOW": "MICROBIT.API.DISPLAY.SHOW", - "MICROBIT_API_DISPLAY_OTHER": "MICROBIT.API.DISPLAY_OTHER", - "MICROBIT_API_LIGHT_LEVEL": "MICROBIT.API.LIGHT.LEVEL", - "MICROBIT_API_IMAGE_CREATION": "MICROBIT.API.IMAGE.CREATION", - "MICROBIT_API_IMAGE_OTHER": "MICROBIT.API.IMAGE.OTHER", - "MICROBIT_API_IMAGE_STATIC": "MICROBIT.API.IMAGE.STATIC", - "MICROBIT_API_BUTTON": "MICROBIT.API.BUTTON", -} diff --git a/src/view/components/cpx/CpxSimulator.tsx b/src/view/components/cpx/CpxSimulator.tsx index c6e100a10..f4feb3bbc 100644 --- a/src/view/components/cpx/CpxSimulator.tsx +++ b/src/view/components/cpx/CpxSimulator.tsx @@ -271,9 +271,7 @@ class Simulator extends React.Component<{}, IState> { } } } - if (element) { - console.log("element"); - console.log(element); + if (element) { event.preventDefault(); this.handleClick(element, active); element.focus(); From 4cb7bbf537eaa720a2b315176227588b6c81af96 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 13:40:08 -0800 Subject: [PATCH 36/52] formatted --- .vscode/settings.json | 3 --- src/view/components/cpx/CpxSimulator.tsx | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 384dfbbdf..b6ec1f828 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,7 +7,4 @@ "out": true // set this to false to include "out" folder in search results }, // Turn off tsc task auto detection since we have the necessary tasks as npm scripts - "typescript.tsc.autoDetect": "off", - "python.pythonPath": "C:\\Users\\t-vali\\AppData\\Local\\Programs\\Python\\Python38-32\\python.exe", - "python.linting.enabled": false } diff --git a/src/view/components/cpx/CpxSimulator.tsx b/src/view/components/cpx/CpxSimulator.tsx index f4feb3bbc..673dd6857 100644 --- a/src/view/components/cpx/CpxSimulator.tsx +++ b/src/view/components/cpx/CpxSimulator.tsx @@ -271,7 +271,7 @@ class Simulator extends React.Component<{}, IState> { } } } - if (element) { + if (element) { event.preventDefault(); this.handleClick(element, active); element.focus(); From 0be4e8751d0e9c3af55b3d440d3cb51ea81f3b52 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 13:41:21 -0800 Subject: [PATCH 37/52] added back removed code --- .vscode/settings.json | 1 + 1 file changed, 1 insertion(+) diff --git a/.vscode/settings.json b/.vscode/settings.json index b6ec1f828..fa0a10487 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,4 +7,5 @@ "out": true // set this to false to include "out" folder in search results }, // Turn off tsc task auto detection since we have the necessary tasks as npm scripts + "typescript.tsc.autoDetect": "off" } From 334756c3f024b05eb6f4a93e6d15cb2fdd84de97 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 14:43:32 -0800 Subject: [PATCH 38/52] fixed config bugs --- src/view/styles/Microbit.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css index c73669ec4..bd8ca2d24 100644 --- a/src/view/styles/Microbit.css +++ b/src/view/styles/Microbit.css @@ -44,7 +44,7 @@ sim-button { fill: #704a4a; pointer-events: none; } -/* .sim-button-nut:hover { +.sim-button-nut:hover { stroke: 1px solid #704a4a; } .sim-pin:hover { @@ -61,7 +61,7 @@ sim-button { .sim-led:hover { stroke: #ff7f7f; stroke-width: 3px; -} */ +} .sim-systemled { fill: #333; stroke: #555; From be374fa03f7e7dea138f8050834b1092d3729c01 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 16:20:10 -0800 Subject: [PATCH 39/52] updated css --- src/view/styles/Microbit.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css index bd8ca2d24..580cde433 100644 --- a/src/view/styles/Microbit.css +++ b/src/view/styles/Microbit.css @@ -44,7 +44,7 @@ sim-button { fill: #704a4a; pointer-events: none; } -.sim-button-nut:hover { +/* .sim-button-nut:hover { stroke: 1px solid #704a4a; } .sim-pin:hover { @@ -61,7 +61,7 @@ sim-button { .sim-led:hover { stroke: #ff7f7f; stroke-width: 3px; -} +} */ .sim-systemled { fill: #333; stroke: #555; @@ -146,6 +146,11 @@ sim-button { } *:focus { outline: none; + +} +.sim-button-group:focus { + stroke: #4D90FE; + stroke-width: 4px; } .sim-button-group:focus { stroke: #4d90fe; From 786c7cfa8ba25822fffbde9a796bad3f94f39792 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 16:22:46 -0800 Subject: [PATCH 40/52] added comment --- src/view/styles/Microbit.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css index 580cde433..b6052c5b5 100644 --- a/src/view/styles/Microbit.css +++ b/src/view/styles/Microbit.css @@ -44,7 +44,10 @@ sim-button { fill: #704a4a; pointer-events: none; } -/* .sim-button-nut:hover { + +/* Will add back once pin functionality is added + +.sim-button-nut:hover { stroke: 1px solid #704a4a; } .sim-pin:hover { From 0022ae685d5e277662d8bb484b9912a7eaed9625 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Wed, 26 Feb 2020 16:39:30 -0800 Subject: [PATCH 41/52] ran npm run format --- src/view/styles/Microbit.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css index b6052c5b5..031899c69 100644 --- a/src/view/styles/Microbit.css +++ b/src/view/styles/Microbit.css @@ -149,10 +149,9 @@ sim-button { } *:focus { outline: none; - } .sim-button-group:focus { - stroke: #4D90FE; + stroke: #4d90fe; stroke-width: 4px; } .sim-button-group:focus { From 4985b88d6f822f8239b8074480db1ae78ec30687 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Thu, 27 Feb 2020 12:20:54 -0800 Subject: [PATCH 42/52] response to PR comments --- src/view/components/microbit/MicrobitSimulator.tsx | 12 +++++++++++- src/view/constants.ts | 1 + src/view/styles/Microbit.css | 3 +-- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index da939e3aa..dd2c3fe03 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -221,7 +221,17 @@ export class MicrobitSimulator extends React.Component { active ); } - } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F && !active) { + } else if ( + [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C) + ) { + this.handleButtonClick(BUTTONS_KEYS.BTN_AB, active); + if (this.imageRef.current) { + this.imageRef.current.updateButtonAttributes( + BUTTONS_KEYS.BTN_AB, + active + ); + } + } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) { this.togglePlayClick(); } else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R && !active) { this.refreshSimulatorClick(); diff --git a/src/view/constants.ts b/src/view/constants.ts index 80cc0af34..0a1b28e17 100644 --- a/src/view/constants.ts +++ b/src/view/constants.ts @@ -29,6 +29,7 @@ export const CONSTANTS = { KEYBOARD_KEYS: { A: "KeyA", B: "KeyB", + C: "KeyC", CAPITAL_R: "R", CAPITAL_F: "F", ENTER: "Enter", diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css index 031899c69..b8a741988 100644 --- a/src/view/styles/Microbit.css +++ b/src/view/styles/Microbit.css @@ -45,8 +45,7 @@ sim-button { pointer-events: none; } -/* Will add back once pin functionality is added - +/* .sim-button-nut:hover { stroke: 1px solid #704a4a; } From 2a3839dd1c72494fea071cbbb55974e81f55b236 Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Thu, 27 Feb 2020 12:25:24 -0800 Subject: [PATCH 43/52] updated C button to press A+B --- README.md | 4 ++-- src/view/components/cpx/CpxSimulator.tsx | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index dd868a68a..f52084c69 100644 --- a/README.md +++ b/README.md @@ -145,7 +145,7 @@ Device Simulator Express provides several commands in the Command Palette (F1 or In Device Simulator Express, you can use keyboard to interact with the device: -- Push Button `A & B: A B` +- Push Button `A for A, B for B, C for A & B` - Capacitive Touch Sensor `A1 – A7: SHIFT + 1~7` - Slider Switch: `SHIFT + S` - Refresh the simulator: `SHIFT + R` @@ -175,7 +175,7 @@ Using the simulator for the micro:bit is similar to using the one for the CPX. T Please review the CPX's ["How to use" guide](#How-to-use) for more info. ### Keybindings -- Push Button `A & B: A B` +- Push Button `A for A, B for B, C for A & B` - Refresh the simulator: `SHIFT + R` ## Contribute diff --git a/src/view/components/cpx/CpxSimulator.tsx b/src/view/components/cpx/CpxSimulator.tsx index 673dd6857..21510de67 100644 --- a/src/view/components/cpx/CpxSimulator.tsx +++ b/src/view/components/cpx/CpxSimulator.tsx @@ -216,6 +216,12 @@ class Simulator extends React.Component<{}, IState> { element = window.document.getElementById( CONSTANTS.ID_NAME.BUTTON_B ); + } else if ( + [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C) + ) { + element = window.document.getElementById( + CONSTANTS.ID_NAME.BUTTON_AB + ); } else if ( [event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.S) ) { From 9545a22c2470b6180757e0e4de1de50f6f8222af Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Thu, 27 Feb 2020 12:27:49 -0800 Subject: [PATCH 44/52] changed name of microbitstylingclasses to be more specific --- src/view/components/microbit/MicrobitImage.tsx | 6 +++--- src/view/constants.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx index 00db16e22..eb919e4ce 100644 --- a/src/view/components/microbit/MicrobitImage.tsx +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -4,7 +4,7 @@ import * as React from "react"; import { VIEW_STATE } from "../../constants"; import { ViewStateContext } from "../../context"; -import CONSTANTS, { MICROBIT_BUTTONS_CLASSES } from "../../constants"; +import CONSTANTS, { MICROBIT_BUTTON_STYLING_CLASSES } from "../../constants"; import "../../styles/Microbit.css"; import { IRefObject, MicrobitSvg } from "./Microbit_svg"; @@ -93,12 +93,12 @@ export class MicrobitImage extends React.Component { if (isActive) { button.children[0].setAttribute( "class", - MICROBIT_BUTTONS_CLASSES.KEYPRESSED + MICROBIT_BUTTON_STYLING_CLASSES.KEYPRESSED ); } else { button.children[0].setAttribute( "class", - MICROBIT_BUTTONS_CLASSES.DEFAULT + MICROBIT_BUTTON_STYLING_CLASSES.DEFAULT ); } button.setAttribute("pressed", `${isActive}`); diff --git a/src/view/constants.ts b/src/view/constants.ts index 0a1b28e17..35e223395 100644 --- a/src/view/constants.ts +++ b/src/view/constants.ts @@ -51,7 +51,7 @@ export const MICROBIT_BUTTONS_KEYS = { BTN_B: "BTN_B", BTN_AB: "BTN_AB", }; -export const MICROBIT_BUTTONS_CLASSES = { +export const MICROBIT_BUTTON_STYLING_CLASSES = { DEFAULT: "sim-button-outer", KEYPRESSED: "sim-button-key-press", }; From d2e02c53f1a55d6b4758ec7bec904d9a5d26dc8d Mon Sep 17 00:00:00 2001 From: Vandy Liu Date: Thu, 27 Feb 2020 12:34:29 -0800 Subject: [PATCH 45/52] added appropriate aria label for play/stop button depending on state --- src/view/components/cpx/CpxSimulator.tsx | 2 ++ src/view/components/microbit/MicrobitSimulator.tsx | 3 ++- src/view/components/simulator/ActionBar.tsx | 5 +++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/view/components/cpx/CpxSimulator.tsx b/src/view/components/cpx/CpxSimulator.tsx index 21510de67..357036586 100644 --- a/src/view/components/cpx/CpxSimulator.tsx +++ b/src/view/components/cpx/CpxSimulator.tsx @@ -132,6 +132,7 @@ class Simulator extends React.Component<{}, IState> { render() { const playStopImage = this.state.play_button ? StopLogo : PlayLogo; + const playStopLabel = this.state.play_button ? "stop" : "play"; return (
@@ -161,6 +162,7 @@ class Simulator extends React.Component<{}, IState> { onTogglePlay={this.togglePlayClick} onToggleRefresh={this.refreshSimulatorClick} playStopImage={playStopImage} + playStopLabel={playStopLabel} />
); diff --git a/src/view/components/microbit/MicrobitSimulator.tsx b/src/view/components/microbit/MicrobitSimulator.tsx index dd2c3fe03..9c1467dfc 100644 --- a/src/view/components/microbit/MicrobitSimulator.tsx +++ b/src/view/components/microbit/MicrobitSimulator.tsx @@ -96,7 +96,7 @@ export class MicrobitSimulator extends React.Component { render() { const playStopImage = this.state.play_button ? StopLogo : PlayLogo; - + const playStopLabel = this.state.play_button ? "stop" : "play"; return (
@@ -125,6 +125,7 @@ export class MicrobitSimulator extends React.Component { onTogglePlay={this.togglePlayClick} onToggleRefresh={this.refreshSimulatorClick} playStopImage={playStopImage} + playStopLabel={playStopLabel} />
); diff --git a/src/view/components/simulator/ActionBar.tsx b/src/view/components/simulator/ActionBar.tsx index 2188555b2..a9dc148b8 100644 --- a/src/view/components/simulator/ActionBar.tsx +++ b/src/view/components/simulator/ActionBar.tsx @@ -10,13 +10,14 @@ interface IProps { onTogglePlay: (event: React.MouseEvent) => void; onToggleRefresh: (event: React.MouseEvent) => void; playStopImage: JSX.Element; + playStopLabel: string; } // Component including the actions done on the Simulator (play/stop, refresh) class ActionBar extends React.Component { public render() { - const { onTogglePlay, onToggleRefresh, playStopImage } = this.props; + const { onTogglePlay, onToggleRefresh, playStopImage, playStopLabel } = this.props; return (