Skip to content

Commit 43d0727

Browse files
glastonbridgemicrobit-matt-hillsdonriknoll
authored
Simulator buttons visual feedback for keypresses (#6246)
Co-authored-by: Matt Hillsdon <[email protected]> Co-authored-by: Richard Knoll <[email protected]>
1 parent f609a6b commit 43d0727

File tree

1 file changed

+69
-38
lines changed

1 file changed

+69
-38
lines changed

‎sim/visuals/microbit.ts

Lines changed: 69 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ namespace pxsim.visuals {
3939
stroke-width:2px;
4040
}
4141
42-
.sim-pin-touch.touched:hover {
43-
stroke:darkorange;
42+
.sim-pin-touch.touched {
43+
stroke:darkorange !important;
4444
}
4545
4646
.sim-led-back:hover {
@@ -475,12 +475,12 @@ path.sim-board {
475475

476476
private updateButtonPairs() {
477477
const state = this.board;
478-
const theme = this.props.theme;
479-
const bpState = state.buttonPairState;
480-
const buttons = [bpState.aBtn, bpState.bBtn, bpState.abBtn];
481-
buttons.forEach((btn, index) => {
482-
svg.fill(this.buttons[index], btn.pressed ? theme.buttonDown : theme.buttonUp);
483-
});
478+
const { buttonDown, buttonUp, virtualButtonUp } = this.props.theme;
479+
const { aBtn, bBtn, abBtn } = state.buttonPairState;
480+
svg.fill(this.buttons[0], aBtn.pressed ? buttonDown : buttonUp);
481+
svg.fill(this.buttons[1], bBtn.pressed ? buttonDown : buttonUp);
482+
svg.fill(this.buttons[2], abBtn.pressed ? buttonDown : virtualButtonUp);
483+
svg.fill(this.headParts, state.logoTouch.pressed ? buttonDown : buttonUp);
484484
}
485485

486486
private updateLEDMatrix() {
@@ -530,9 +530,15 @@ path.sim-board {
530530
svg.fill(this.shakeButton, this.props.theme.virtualButtonUp);
531531
this.board.accelerometerState.shake();
532532
})
533-
accessibility.enableKeyboardInteraction(this.shakeButton, undefined, () => {
534-
this.board.accelerometerState.shake();
535-
});
533+
accessibility.enableKeyboardInteraction(this.shakeButton,
534+
() => { // keydown
535+
svg.fill(this.shakeButton, this.props.theme.buttonDown);
536+
},
537+
() => { // keyup
538+
svg.fill(this.shakeButton, this.props.theme.virtualButtonUp);
539+
this.board.accelerometerState.shake();
540+
}
541+
);
536542
accessibility.setAria(this.shakeButton, "button", "Shake the board");
537543
this.shakeText = svg.child(this.g, "text", { x: 420, y: 122, class: "sim-text-small" }) as SVGTextElement;
538544
this.shakeText.textContent = "SHAKE";
@@ -1507,12 +1513,25 @@ path.sim-board {
15071513
this.board.bus.queue(state.edgeConnectorState.pins[index].id, DAL.MICROBIT_BUTTON_EVT_CLICK);
15081514
pressedTime = undefined;
15091515
})
1510-
accessibility.enableKeyboardInteraction(btn, undefined, () => {
1511-
let state = this.board;
1512-
this.board.bus.queue(state.edgeConnectorState.pins[index].id, DAL.MICROBIT_BUTTON_EVT_DOWN);
1513-
this.board.bus.queue(state.edgeConnectorState.pins[index].id, DAL.MICROBIT_BUTTON_EVT_UP);
1514-
this.board.bus.queue(state.edgeConnectorState.pins[index].id, DAL.MICROBIT_BUTTON_EVT_CLICK);
1515-
});
1516+
accessibility.enableKeyboardInteraction(btn,
1517+
() => { // keydown
1518+
let state = this.board;
1519+
state.edgeConnectorState.pins[index].touched = true;
1520+
let svgpin = this.pins[index];
1521+
U.addClass(svgpin, "touched");
1522+
this.updatePin(state.edgeConnectorState.pins[index], index);
1523+
this.board.bus.queue(state.edgeConnectorState.pins[index].id, DAL.MICROBIT_BUTTON_EVT_DOWN);
1524+
},
1525+
() => { // keyup
1526+
let state = this.board;
1527+
state.edgeConnectorState.pins[index].touched = false;
1528+
let svgpin = this.pins[index];
1529+
U.removeClass(svgpin, "touched");
1530+
this.updatePin(state.edgeConnectorState.pins[index], index);
1531+
this.board.bus.queue(state.edgeConnectorState.pins[index].id, DAL.MICROBIT_BUTTON_EVT_UP);
1532+
this.board.bus.queue(state.edgeConnectorState.pins[index].id, DAL.MICROBIT_BUTTON_EVT_CLICK);
1533+
}
1534+
);
15161535
})
15171536
}
15181537

@@ -1530,19 +1549,19 @@ path.sim-board {
15301549
attachButtonEvents(stateButton: Button, buttonOuter: SVGElement, elButton: SVGElement) {
15311550
let pressedTime: number;
15321551
pointerEvents.down.forEach(evid => buttonOuter.addEventListener(evid, ev => {
1533-
// console.log(`down ${stateButton.id}`)
15341552
stateButton.pressed = true;
1535-
svg.fill(elButton, this.props.theme.buttonDown);
1553+
this.updateButtonPairs();
15361554
this.board.bus.queue(stateButton.id, DAL.MICROBIT_BUTTON_EVT_DOWN);
15371555
pressedTime = runtime.runningTime()
15381556
}));
15391557
buttonOuter.addEventListener(pointerEvents.leave, ev => {
15401558
stateButton.pressed = false;
1559+
this.updateButtonPairs();
15411560
svg.fill(elButton, this.props.theme.buttonUp);
15421561
})
15431562
buttonOuter.addEventListener(pointerEvents.up, ev => {
15441563
stateButton.pressed = false;
1545-
svg.fill(elButton, this.props.theme.buttonUp);
1564+
this.updateButtonPairs();
15461565
this.board.bus.queue(stateButton.id, DAL.MICROBIT_BUTTON_EVT_UP);
15471566
const currentTime = runtime.runningTime()
15481567
if (currentTime - pressedTime > DAL.DEVICE_BUTTON_LONG_CLICK_TIME)
@@ -1551,10 +1570,16 @@ path.sim-board {
15511570
this.board.bus.queue(stateButton.id, DAL.MICROBIT_BUTTON_EVT_CLICK);
15521571
pressedTime = undefined;
15531572
})
1554-
accessibility.enableKeyboardInteraction(buttonOuter, undefined, () => {
1555-
this.board.bus.queue(stateButton.id, DAL.MICROBIT_BUTTON_EVT_DOWN);
1556-
this.board.bus.queue(stateButton.id, DAL.MICROBIT_BUTTON_EVT_UP);
1557-
this.board.bus.queue(stateButton.id, DAL.MICROBIT_BUTTON_EVT_CLICK);
1573+
accessibility.enableKeyboardInteraction(buttonOuter,
1574+
() => { // keydown
1575+
stateButton.pressed = true;
1576+
this.updateButtonPairs();
1577+
this.board.bus.queue(stateButton.id, DAL.MICROBIT_BUTTON_EVT_DOWN);
1578+
}, () => { // keyup
1579+
stateButton.pressed = false;
1580+
this.updateButtonPairs();
1581+
this.board.bus.queue(stateButton.id, DAL.MICROBIT_BUTTON_EVT_UP);
1582+
this.board.bus.queue(stateButton.id, DAL.MICROBIT_BUTTON_EVT_CLICK);
15581583
});
15591584
}
15601585

@@ -1567,27 +1592,21 @@ path.sim-board {
15671592
bpState.aBtn.pressed = true;
15681593
bpState.bBtn.pressed = true;
15691594
bpState.abBtn.pressed = true;
1570-
svg.fill(this.buttons[0], this.props.theme.buttonDown);
1571-
svg.fill(this.buttons[1], this.props.theme.buttonDown);
1572-
svg.fill(this.buttons[2], this.props.theme.buttonDown);
1595+
this.updateButtonPairs();
15731596
this.board.bus.queue(bpState.abBtn.id, DAL.MICROBIT_BUTTON_EVT_DOWN);
15741597
pressedTime = runtime.runningTime()
15751598
}));
15761599
this.buttonsOuter[2].addEventListener(pointerEvents.leave, ev => {
15771600
bpState.aBtn.pressed = false;
15781601
bpState.bBtn.pressed = false;
15791602
bpState.abBtn.pressed = false;
1580-
svg.fill(this.buttons[0], this.props.theme.buttonUp);
1581-
svg.fill(this.buttons[1], this.props.theme.buttonUp);
1582-
svg.fill(this.buttons[2], this.props.theme.virtualButtonUp);
1603+
this.updateButtonPairs();
15831604
})
15841605
this.buttonsOuter[2].addEventListener(pointerEvents.up, ev => {
15851606
bpState.aBtn.pressed = false;
15861607
bpState.bBtn.pressed = false;
15871608
bpState.abBtn.pressed = false;
1588-
svg.fill(this.buttons[0], this.props.theme.buttonUp);
1589-
svg.fill(this.buttons[1], this.props.theme.buttonUp);
1590-
svg.fill(this.buttons[2], this.props.theme.virtualButtonUp);
1609+
this.updateButtonPairs();
15911610

15921611
this.board.bus.queue(bpState.abBtn.id, DAL.MICROBIT_BUTTON_EVT_UP);
15931612
const currentTime = runtime.runningTime()
@@ -1596,12 +1615,24 @@ path.sim-board {
15961615
else
15971616
this.board.bus.queue(bpState.abBtn.id, DAL.MICROBIT_BUTTON_EVT_CLICK);
15981617
pressedTime = undefined;
1599-
})
1600-
accessibility.enableKeyboardInteraction(this.buttonsOuter[2], undefined, () => {
1601-
this.board.bus.queue(bpState.abBtn.id, DAL.MICROBIT_BUTTON_EVT_DOWN);
1602-
this.board.bus.queue(bpState.abBtn.id, DAL.MICROBIT_BUTTON_EVT_UP);
1603-
this.board.bus.queue(bpState.abBtn.id, DAL.MICROBIT_BUTTON_EVT_CLICK);
16041618
});
1619+
1620+
accessibility.enableKeyboardInteraction(this.buttonsOuter[2],
1621+
() => { // keydown
1622+
bpState.aBtn.pressed = true;
1623+
bpState.bBtn.pressed = true;
1624+
bpState.abBtn.pressed = true;
1625+
this.updateButtonPairs();
1626+
this.board.bus.queue(bpState.abBtn.id, DAL.MICROBIT_BUTTON_EVT_DOWN);
1627+
}, () => { // keyup
1628+
bpState.aBtn.pressed = false;
1629+
bpState.bBtn.pressed = false;
1630+
bpState.abBtn.pressed = false;
1631+
this.updateButtonPairs();
1632+
this.board.bus.queue(bpState.abBtn.id, DAL.MICROBIT_BUTTON_EVT_UP);
1633+
this.board.bus.queue(bpState.abBtn.id, DAL.MICROBIT_BUTTON_EVT_CLICK);
1634+
}
1635+
);
16051636
}
16061637

16071638
private attachKeyboardEvents() {

0 commit comments

Comments
 (0)