c_meyer/pxt-calliope
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updates for v4 (#187)

Browse Source 
* decrease default gatt table size

* update simulator size

* update simulator buttons

* Add shake animation & gradients for edge pins
This commit is contained in:
Juri Wolf 2022-05-25 18:49:55 +02:00 committed by GitHub
parent 3fd2c31481
commit 5188a57927
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 121 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
libs/core/pxt.json
View File

@ -125,7 +125,7 @@
"device_info_service": 0 "device_info_service": 0
}, },
"stack_size": 1280, "stack_size": 1280,
"gatt_table_size": "0x600", "gatt_table_size": "0xD8",
"panic_on_heap_full": 0, "panic_on_heap_full": 0,
"debug": 0, "debug": 0,
"heap_debug": 0, "heap_debug": 0,
@ -139,6 +139,7 @@
"config": { "config": {
"microbit-dal": { "microbit-dal": {
"stack_size": 2048, "stack_size": 2048,
"gatt_table_size": "0x600",
"sram_end": "0x20008000", "sram_end": "0x20008000",
"RAM_SIZE": "\"32K\"" "RAM_SIZE": "\"32K\""
} }
@ -149,6 +150,7 @@
"config": { "config": {
"microbit-dal": { "microbit-dal": {
"stack_size": 1280, "stack_size": 1280,
"gatt_table_size": "0xD8",
"sram_end": "0x20004000", "sram_end": "0x20004000",
"RAM_SIZE": "\"16K\"" "RAM_SIZE": "\"16K\""
} }

4
pxtarget.json
View File

@ -165,9 +165,9 @@
"simulator": { "simulator": {
"autoRun": true, "autoRun": true,
"streams": false, "streams": false,
"aspectRatio": 1.13, "aspectRatio": 0.94,
"parts": false, "parts": false,
"partsAspectRatio": 0.69, "partsAspectRatio": 0.7,
"boardDefinition": { "boardDefinition": {
"visual": "calliope", "visual": "calliope",
"gpioPinBlocks": [ "gpioPinBlocks": [

162
sim/visuals/microbit.ts
View File

@ -1,5 +1,25 @@
namespace pxsim.visuals { namespace pxsim.visuals {
const MB_STYLE = ` const MB_STYLE = `
.simEventBtn {
font-size: 1.4rem;
font-weight: 900;
padding: 1.25rem 1.75rem;
border-radius: 3.5rem / 100%;
border: 0;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.07em;
color: white;
background: #42c9c9;
font-family: 'Roboto Mono', monospace;
}
button:hover {
opacity: .7;
}
button:active {
background: #e6007d;
}
svg.sim { svg.sim {
margin-bottom:1em; margin-bottom:1em;
} }
@ -28,15 +48,16 @@ namespace pxsim.visuals {
.sim-button-nut:hover { .sim-button-nut:hover {
stroke:1px solid #704A4A; stroke:1px solid #704A4A;
} }
.sim-pin {
cursor: pointer;
}
.sim-pin:hover { .sim-pin:hover {
stroke:#D4AF37; stroke:#D4AF37;
stroke-width:2px; stroke-width:2px;
} }
.sim-pin-touch.touched:hover { .sim-pin-touch.touched:hover {
stroke:darkorange; stroke:darkorange;
} }
.sim-led-back:hover { .sim-led-back:hover {
stroke:#fff; stroke:#fff;
stroke-width:3px; stroke-width:3px;
@ -64,16 +85,16 @@ namespace pxsim.visuals {
} }
.sim-text { .sim-text {
font-family:"Lucida Console", Monaco, monospace; font-family: 'Roboto Mono', monospace;
font-size:14px; font-size:14px;
fill:#fff; fill:#fff;
pointer-events: none; user-select: none; pointer-events: none; user-select: none;
} }
.sim-text-pin { .sim-text-pin {
font-family:"Lucida Console", Monaco, monospace; font-family: 'Roboto Mono', monospace;
pointer-events: none; user-select: none; pointer-events: none; user-select: none;
fill:#3cb5b5; fill:#000;
font-size:24px; font-size:24px;
stroke:#fff; stroke:#fff;
stroke-alignment: outside; stroke-alignment: outside;
@ -187,10 +208,34 @@ namespace pxsim.visuals {
-webkit-user-select: none; -webkit-user-select: none;
-ms-user-select: none; -ms-user-select: none;
} }
.shake_animation {
animation: shake 0.42s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
`; `;
const BOARD_SVG = `<?xml version="1.0" encoding="utf-8"?> const BOARD_SVG = `<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 530 530" style="enable-background:new 0 0 530 530;" xml:space="preserve"> y="0px" viewBox="0 0 530 630" style="enable-background:new 0 0 530 630;" xml:space="preserve">
<style type="text/css"> <style type="text/css">
.st0{fill:#044854;} .st0{fill:#044854;}
.st1{fill:none;stroke:#989899;stroke-width:0.5;stroke-linecap:square;stroke-miterlimit:10;} .st1{fill:none;stroke:#989899;stroke-width:0.5;stroke-linecap:square;stroke-miterlimit:10;}
@ -211,6 +256,7 @@ namespace pxsim.visuals {
.st16{fill:#E6007D;} .st16{fill:#E6007D;}
.st17{fill:#000000;} .st17{fill:#000000;}
</style> </style>
<g id="calliope_mini">
<path id="mini_Board" class="st0" d="M552.7,263.2c-0.8-12-8.7-22.4-20.1-26.3c-4.4-1.5-8.8-3.3-13-5.4c-4.6-2.3-9.1-4.9-13.4-7.7 <path id="mini_Board" class="st0" d="M552.7,263.2c-0.8-12-8.7-22.4-20.1-26.3c-4.4-1.5-8.8-3.3-13-5.4c-4.6-2.3-9.1-4.9-13.4-7.7
l0,0c-16.3-10.7-35.1-27.7-55.4-54.2c-29.5-38.6-28.6-86.6-25.7-117c0.8-2.9,1.3-6,1.3-9c0-18.5-15-33.5-33.5-33.5 l0,0c-16.3-10.7-35.1-27.7-55.4-54.2c-29.5-38.6-28.6-86.6-25.7-117c0.8-2.9,1.3-6,1.3-9c0-18.5-15-33.5-33.5-33.5
c-10.3,0-20.1,4.8-26.4,12.9c-0.2,0.3-0.5,0.6-0.7,0.9C343.1,39.3,319.6,50,295,54.8c-1.9,0.4-3.7,0.8-5.6,1.2l0,0 c-10.3,0-20.1,4.8-26.4,12.9c-0.2,0.3-0.5,0.6-0.7,0.9C343.1,39.3,319.6,50,295,54.8c-1.9,0.4-3.7,0.8-5.6,1.2l0,0
@ -647,18 +693,18 @@ namespace pxsim.visuals {
</g> </g>
</g> </g>
<g id="EDGE_PINS"> <g id="EDGE_PINS">
<path id="EDGE_P3" class="st11" d="M520.9,231.4c-18.5,0-33.5,15-33.5,33.5c0,18.5,15,33.5,33.5,33.5 <path id="EDGE_P3" class="" d="M520.9,231.4c-18.5,0-33.5,15-33.5,33.5c0,18.5,15,33.5,33.5,33.5
c18.5,0,33.5-14.9,33.5-33.4c0.1-18.5-14.9-33.5-33.3-33.6C521,231.4,521,231.4,520.9,231.4z M520.9,280.6c-8.7,0-15.7-7-15.7-15.7 c18.5,0,33.5-14.9,33.5-33.4c0.1-18.5-14.9-33.5-33.3-33.6C521,231.4,521,231.4,520.9,231.4z M520.9,280.6c-8.7,0-15.7-7-15.7-15.7
c0-8.7,7-15.7,15.7-15.7c8.7,0,15.7,7,15.7,15.7c0,0,0,0,0,0C536.6,273.5,529.6,280.6,520.9,280.6 c0-8.7,7-15.7,15.7-15.7c8.7,0,15.7,7,15.7,15.7c0,0,0,0,0,0C536.6,273.5,529.6,280.6,520.9,280.6
C520.9,280.6,520.9,280.6,520.9,280.6L520.9,280.6z"/> C520.9,280.6,520.9,280.6,520.9,280.6L520.9,280.6z"/>
<path id="EDGE_P2" class="st11" d="M392.7,452c-18.5,0-33.5,15-33.5,33.5c0,18.5,15,33.5,33.5,33.5c18.5,0,33.5-15,33.5-33.5 <path id="EDGE_P2" class="" d="M392.7,452c-18.5,0-33.5,15-33.5,33.5c0,18.5,15,33.5,33.5,33.5c18.5,0,33.5-15,33.5-33.5
c0,0,0,0,0,0C426.2,467,411.2,452,392.7,452C392.7,452,392.7,452,392.7,452z M392.7,501.1c-8.7,0-15.7-7-15.7-15.7 c0,0,0,0,0,0C426.2,467,411.2,452,392.7,452C392.7,452,392.7,452,392.7,452z M392.7,501.1c-8.7,0-15.7-7-15.7-15.7
c0-8.7,7-15.7,15.7-15.7c8.7,0,15.7,7,15.7,15.7c0,0,0,0,0,0c0.1,8.7-6.9,15.7-15.6,15.8C392.8,501.2,392.7,501.2,392.7,501.1 c0-8.7,7-15.7,15.7-15.7c8.7,0,15.7,7,15.7,15.7c0,0,0,0,0,0c0.1,8.7-6.9,15.7-15.6,15.8C392.8,501.2,392.7,501.2,392.7,501.1
L392.7,501.1z"/> L392.7,501.1z"/>
<path id="EDGE_P1" class="st11" d="M137.1,452c-18.5,0-33.5,15-33.5,33.5c0,18.5,15,33.5,33.5,33.5c18.5,0,33.5-15,33.5-33.5 <path id="EDGE_P1" class="" d="M137.1,452c-18.5,0-33.5,15-33.5,33.5c0,18.5,15,33.5,33.5,33.5c18.5,0,33.5-15,33.5-33.5
c0,0,0,0,0,0C170.6,467,155.6,452,137.1,452L137.1,452z M137.1,501.1c-8.7,0-15.7-7-15.7-15.7c0-8.7,7-15.7,15.7-15.7 c0,0,0,0,0,0C170.6,467,155.6,452,137.1,452L137.1,452z M137.1,501.1c-8.7,0-15.7-7-15.7-15.7c0-8.7,7-15.7,15.7-15.7
c8.7,0,15.7,7,15.7,15.7c0,0,0,0,0,0c0.1,8.7-6.9,15.7-15.6,15.8C137.2,501.2,137.1,501.2,137.1,501.1L137.1,501.1z"/> c8.7,0,15.7,7,15.7,15.7c0,0,0,0,0,0c0.1,8.7-6.9,15.7-15.6,15.8C137.2,501.2,137.1,501.2,137.1,501.1L137.1,501.1z"/>
<path id="EDGE_P0" class="st11" d="M8.1,231.4c-18.5,0-33.5,15-33.5,33.5c0,18.5,15,33.5,33.5,33.5c18.4,0,33.4-14.9,33.5-33.4 <path id="EDGE_P0" class="" d="M8.1,231.4c-18.5,0-33.5,15-33.5,33.5c0,18.5,15,33.5,33.5,33.5c18.4,0,33.4-14.9,33.5-33.4
c0.1-18.5-14.9-33.5-33.3-33.6C8.2,231.4,8.1,231.4,8.1,231.4z M8.1,280.6c-8.7,0-15.7-7-15.7-15.7c0-8.7,7-15.7,15.7-15.7 c0.1-18.5-14.9-33.5-33.3-33.6C8.2,231.4,8.1,231.4,8.1,231.4z M8.1,280.6c-8.7,0-15.7-7-15.7-15.7c0-8.7,7-15.7,15.7-15.7
c8.7,0,15.7,7,15.7,15.7c0,0,0,0,0,0C23.8,273.5,16.8,280.6,8.1,280.6C8.1,280.6,8.1,280.6,8.1,280.6L8.1,280.6z"/> c8.7,0,15.7,7,15.7,15.7c0,0,0,0,0,0C23.8,273.5,16.8,280.6,8.1,280.6C8.1,280.6,8.1,280.6,8.1,280.6L8.1,280.6z"/>
<path id="EDGE_VCC" class="st11" d="M392.7,10c-18.5,0-33.5,15-33.5,33.5c0,18.5,15,33.5,33.5,33.5c18.5,0,33.5-15,33.5-33.5 <path id="EDGE_VCC" class="st11" d="M392.7,10c-18.5,0-33.5,15-33.5,33.5c0,18.5,15,33.5,33.5,33.5c18.5,0,33.5-15,33.5-33.5
@ -668,11 +714,14 @@ namespace pxsim.visuals {
c0,0,0,0,0,0C170.6,25,155.6,10,137.1,10L137.1,10z M137.1,59.2c-8.7,0-15.7-7-15.7-15.7c0-8.7,7-15.7,15.7-15.7 c0,0,0,0,0,0C170.6,25,155.6,10,137.1,10L137.1,10z M137.1,59.2c-8.7,0-15.7-7-15.7-15.7c0-8.7,7-15.7,15.7-15.7
c8.7,0,15.7,7,15.7,15.7c0,0,0,0,0,0C152.8,52.1,145.8,59.2,137.1,59.2C137.1,59.2,137.1,59.2,137.1,59.2z"/> c8.7,0,15.7,7,15.7,15.7c0,0,0,0,0,0C152.8,52.1,145.8,59.2,137.1,59.2C137.1,59.2,137.1,59.2,137.1,59.2z"/>
</g> </g>
</g>
</svg>`; </svg>`;
const pinNames = [ const pinNames = [
"BTN_A", "BTN_B",
"EDGE_P0", "EDGE_P1", "EDGE_P2", "EDGE_P3", "EDGE_GND", "EDGE_VCC", "EDGE_P0", "EDGE_P1", "EDGE_P2", "EDGE_P3", "EDGE_GND", "EDGE_VCC",
"BTN_A", "BTN_B",
"C_GND1", "C_GND2", "C_GND3", "C_GND4", "C_VCC1", "C_VCC2", "C_GND1", "C_GND2", "C_GND3", "C_GND4", "C_VCC1", "C_VCC2",
"C_P0", "C_P2", "C_P4", "C_P6", "C_P8", "C_P10", "C_P12", "C_P14", "C_P16", "C_P18", "C_P0", "C_P2", "C_P4", "C_P6", "C_P8", "C_P10", "C_P12", "C_P14", "C_P16", "C_P18",
"C_P1", "C_P3", "C_P5", "C_P7", "C_P9", "C_P11", "C_P13", "C_P15", "C_P17", "C_P19", "C_P1", "C_P3", "C_P5", "C_P7", "C_P9", "C_P11", "C_P13", "C_P15", "C_P17", "C_P19",
@ -681,8 +730,9 @@ namespace pxsim.visuals {
"G_A1_RX", "G_A1_TX", "G_A1_VCC", "G_A1_GND" "G_A1_RX", "G_A1_TX", "G_A1_VCC", "G_A1_GND"
]; ];
const pinTitles = [ const pinTitles = [
"Button A", "Button B",
"P0", "P1, ANALOG IN", "P2, ANALOG IN", "P3", "GND", "+3v3", "P0", "P1, ANALOG IN", "P2, ANALOG IN", "P3", "GND", "+3v3",
"Button A", "Button B",
"GND", "GND", "GND", "GND", "+3v3", "+3v3", "GND", "GND", "GND", "GND", "+3v3", "+3v3",
"C0", "C2", "C4", "C6", "C8", "C10", "C12", "C14", "C16", "C18", "C0", "C2", "C4", "C6", "C8", "C10", "C12", "C14", "C16", "C18",
"C1", "C3", "C5", "C7", "C9", "C11", "C13", "C15", "C17", "C19", "C1", "C3", "C5", "C7", "C9", "C11", "C13", "C15", "C17", "C19",
@ -691,7 +741,7 @@ namespace pxsim.visuals {
"C16, Serial - RX", "C17, Serial - TX", "+3v3", "GND" "C16, Serial - RX", "C17, Serial - TX", "+3v3", "GND"
]; ];
const MB_WIDTH = 530; const MB_WIDTH = 530;
const MB_HEIGHT = 530; const MB_HEIGHT = 630;
export interface IBoardTheme { export interface IBoardTheme {
accent?: string; accent?: string;
display?: string; display?: string;
@ -715,9 +765,9 @@ namespace pxsim.visuals {
export var themes: IBoardTheme[] = ["#3ADCFE"].map(accent => { export var themes: IBoardTheme[] = ["#3ADCFE"].map(accent => {
return { return {
accent: accent, accent: accent,
pin: "#EFDA48", pin: "#F6C426",
pinTouched: "#FFA500", pinTouched: "#FFA500",
pinActive: "#FF5500", pinActive: "#E6007D",
ledOn: "#ff5555", ledOn: "#ff5555",
ledOff: "#e0e1e2", ledOff: "#e0e1e2",
buttonOuter: "#979797", buttonOuter: "#979797",
@ -760,7 +810,7 @@ namespace pxsim.visuals {
private display: SVGElement; private display: SVGElement;
private buttons: SVGElement[]; private buttons: SVGElement[];
private buttonsOuter: SVGElement[]; private buttonsOuter: SVGElement[];
private buttonABText: SVGTextElement; // private buttonABText: SVGTextElement;
private pins: SVGElement[]; private pins: SVGElement[];
private pinGradients: SVGLinearGradientElement[]; private pinGradients: SVGLinearGradientElement[];
private pinTexts:{ [key: number]: SVGTextElement }; private pinTexts:{ [key: number]: SVGTextElement };
@ -781,7 +831,7 @@ namespace pxsim.visuals {
private soundLevelText: SVGTextElement; private soundLevelText: SVGTextElement;
private soundLevelIcon: SVGTextElement; private soundLevelIcon: SVGTextElement;
private shakeButton: SVGElement; private shakeButton: SVGElement;
private shakeText: SVGTextElement; // private shakeText: SVGTextElement;
public board: pxsim.DalBoard; public board: pxsim.DalBoard;
private domHardwareVersion = 1; private domHardwareVersion = 1;
private rgbLed: SVGElement; private rgbLed: SVGElement;
@ -1041,7 +1091,7 @@ namespace pxsim.visuals {
svg.fills(this.leds, theme.ledOn); svg.fills(this.leds, theme.ledOn);
svg.fills(this.ledsOuter, theme.ledOff); svg.fills(this.ledsOuter, theme.ledOff);
svg.fills(this.buttonsOuter.slice(0, 2), theme.buttonOuter); svg.fills(this.buttonsOuter.slice(6, 8), theme.buttonOuter);
svg.fill(this.buttons[0], theme.buttonUps[0]); svg.fill(this.buttons[0], theme.buttonUps[0]);
svg.fill(this.buttons[1], theme.buttonUps[1]); svg.fill(this.buttons[1], theme.buttonUps[1]);
svg.fill(this.buttonsOuter[2], theme.virtualButtonOuter); svg.fill(this.buttonsOuter[2], theme.virtualButtonOuter);
@ -1135,21 +1185,28 @@ namespace pxsim.visuals {
private updateGestures() { private updateGestures() {
let state = this.board; let state = this.board;
if (state.accelerometerState.useShake && !this.shakeButton) { if (state.accelerometerState.useShake && !this.shakeButton) {
let shake = this.mkBtn(280, MB_HEIGHT - 45); let shake = this.mkBtn(240, MB_HEIGHT - 75, 'Schütteln');
this.shakeButton = shake.inner; this.shakeButton = shake.inner;
svg.fill(this.shakeButton, this.props.theme.virtualButtonUp) let board = this.element.getElementById("calliope_mini")
console.log(board)
// svg.fill(this.shakeButton, this.props.theme.virtualButtonUp)
svg.buttonEvents(shake.outer, svg.buttonEvents(shake.outer,
ev => { }, ev => { },
(ev) => { (ev) => {
svg.fill(this.shakeButton, this.props.theme.virtualButtonDown) svg.fill(this.shakeButton, this.props.theme.virtualButtonDown);
board.classList.remove("shake_animation");
setTimeout(()=>{
board.classList.add("shake_animation");
}, 1)
}, },
(ev) => { (ev) => {
svg.fill(this.shakeButton, this.props.theme.virtualButtonUp); svg.fill(this.shakeButton, this.props.theme.virtualButtonUp);
this.board.bus.queue(DAL.MICROBIT_ID_GESTURE, 11); // GESTURE_SHAKE this.board.bus.queue(DAL.MICROBIT_ID_GESTURE, 11); // GESTURE_SHAKE
} }
) )
let shakeText = svg.child(shake.outer, "text", { x: 280, y: MB_HEIGHT - 5, class: "sim-text big inverted centered" }) as SVGTextElement; // let shakeText = svg.child(shake.outer, "text", { x: 280, y: MB_HEIGHT - 5, class: "sim-text big inverted centered" }) as SVGTextElement;
shakeText.textContent = "SHAKE" // shakeText.textContent = "SHAKE"
} }
} }
@ -1236,7 +1293,7 @@ namespace pxsim.visuals {
if (!this.thermometer) { if (!this.thermometer) {
let gid = "gradient-thermometer"; let gid = "gradient-thermometer";
this.thermometerGradient = svg.linearGradient(this.defs, gid); this.thermometerGradient = svg.linearGradient(this.defs, gid);
const ty = MB_HEIGHT - 200; const ty = MB_HEIGHT - 270;
this.thermometer = <SVGRectElement>svg.child(this.g, "rect", { this.thermometer = <SVGRectElement>svg.child(this.g, "rect", {
class: "sim-thermometer", class: "sim-thermometer",
x: 0, x: 0,
@ -1309,7 +1366,7 @@ namespace pxsim.visuals {
const level = state.microphoneState.getLevel(); const level = state.microphoneState.getLevel();
let gid = "gradient-soundlevel"; let gid = "gradient-soundlevel";
this.soundLevelGradient = svg.linearGradient(this.defs, gid); this.soundLevelGradient = svg.linearGradient(this.defs, gid);
const ty = MB_HEIGHT - 200; const ty = MB_HEIGHT - 270;
this.soundLevel = <SVGRectElement>svg.child(this.g, "rect", { this.soundLevel = <SVGRectElement>svg.child(this.g, "rect", {
class: "sim-thermometer", class: "sim-thermometer",
x: 490, x: 490,
@ -1669,10 +1726,10 @@ namespace pxsim.visuals {
// ].map(p => <SVGTextElement>svg.child(this.g, "text", { class: "sim-text-pin", x: p[0], y: p[1] })); // ].map(p => <SVGTextElement>svg.child(this.g, "text", { class: "sim-text-pin", x: p[0], y: p[1] }));
this.pinTexts = { this.pinTexts = {
[DigitalPin.P0]: <SVGTextElement>svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 20, y: 315 }), [DigitalPin.P0]: <SVGTextElement>svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 20, y: 325 }),
[DigitalPin.P1]: <SVGTextElement>svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 135, y: 530 }), [DigitalPin.P1]: <SVGTextElement>svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 135, y: 540 }),
[DigitalPin.P2]: <SVGTextElement>svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 395, y: 530 }), [DigitalPin.P2]: <SVGTextElement>svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 395, y: 540 }),
[DigitalPin.P3]: <SVGTextElement>svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 535, y: 315 }) [DigitalPin.P3]: <SVGTextElement>svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 540, y: 325 })
} }
// BTN A, B // BTN A, B
@ -1684,39 +1741,52 @@ namespace pxsim.visuals {
// BTN A+B // BTN A+B
const outerBtn = (left: number, top: number) => { const outerBtn = (left: number, top: number) => {
const button = this.mkBtn(left, top); const button = this.mkBtn(left, top, 'A + B');
this.buttonsOuter.push(button.outer); this.buttonsOuter.push(button.outer);
this.buttons.push(button.inner); this.buttons.push(button.inner);
return button; return button;
} }
let ab = outerBtn(210, MB_HEIGHT - 45); let ab = outerBtn(100, MB_HEIGHT - 75);
let abtext = svg.child(ab.outer, "text", { x: 210, y: MB_HEIGHT - 5, class: "sim-text big inverted centered" }) as SVGTextElement; // let abtext = svg.child(ab.outer, "text", { x: 210, y: MB_HEIGHT - 5, class: "sim-text big inverted centered" }) as SVGTextElement;
abtext.textContent = "A+B"; // abtext.textContent = "A+B";
(<any>this.buttonsOuter[2]).style.visibility = "hidden"; (<any>this.buttonsOuter[2]).style.visibility = "hidden";
(<any>this.buttons[2]).style.visibility = "hidden"; (<any>this.buttons[2]).style.visibility = "hidden";
} }
private mkBtn(left: number, top: number): { outer: SVGElement, inner: SVGElement } { private mkBtn(left: number, top: number, text: string): { outer: SVGElement, inner: SVGElement } {
const btnr = 2; const btnr = 2;
const btnw = 20; const btnw = 20;
const btnn = 1.6; const btnn = 1.6;
const btnnm = 2; const btnnm = 2;
const btnb = 5; const btnb = 5;
let btng = svg.child(this.g, "g", { class: "sim-button-group" }); let btng = svg.child(this.g, "g", { class: "sim-button-group" });
svg.child(btng, "rect", { class: "sim-button-outer", x: left, y: top, rx: btnr, ry: btnr, width: btnw, height: btnw }); // var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
svg.child(btng, "circle", { class: "sim-button-nut", cx: left + btnnm, cy: top + btnnm, r: btnn }); var fo = svg.child(btng, "foreignObject");
svg.child(btng, "circle", { class: "sim-button-nut", cx: left + btnnm, cy: top + btnw - btnnm, r: btnn }); fo.setAttribute("id", "y");
svg.child(btng, "circle", { class: "sim-button-nut", cx: left + btnw - btnnm, cy: top + btnw - btnnm, r: btnn }); fo.setAttribute("x", left+'');
svg.child(btng, "circle", { class: "sim-button-nut", cx: left + btnw - btnnm, cy: top + btnnm, r: btnn }); fo.setAttribute("y", top+'');
fo.setAttribute("width", "300");
fo.setAttribute("height", "100");
fo.innerHTML = `<body xmlns="http://www.w3.org/1999/xhtml">
<button class="simEventBtn">${text}</button>
</body>`;
// var ta = document.createElement("button");
// ta.innerText = text;
// fo.appendChild(ta);
// svg.child(btng, "rect", { class: "sim-button-outer", x: left, y: top, rx: btnr, ry: btnr, width: btnw, height: btnw });
// svg.child(btng, "circle", { class: "sim-button-nut", cx: left + btnnm, cy: top + btnnm, r: btnn });
// svg.child(btng, "circle", { class: "sim-button-nut", cx: left + btnnm, cy: top + btnw - btnnm, r: btnn });
// svg.child(btng, "circle", { class: "sim-button-nut", cx: left + btnw - btnnm, cy: top + btnw - btnnm, r: btnn });
// svg.child(btng, "circle", { class: "sim-button-nut", cx: left + btnw - btnnm, cy: top + btnnm, r: btnn });
const outer = btng; const outer = btng;
const inner = svg.child(btng, "circle", { const inner = svg.child(btng, "circle", {
class: "sim-button", class: "sim-button",
cx: left + btnw / 2, cx: left + btnw / 2,
cy: top + btnw / 2, cy: top + btnw / 2,
r: btnb r: 0
}); });
return { outer, inner }; return { outer, inner };
@ -1798,7 +1868,7 @@ namespace pxsim.visuals {
} }
private attachPinsIOEvents() { private attachPinsIOEvents() {
this.pins.slice(2, 6).forEach((pin, index) => { this.pins.slice(0, 4).forEach((pin, index) => {
// var index = i + 2; // var index = i + 2;
if (!this.board.edgeConnectorState.pins[index]) return; if (!this.board.edgeConnectorState.pins[index]) return;
let pt = this.element.createSVGPoint(); let pt = this.element.createSVGPoint();
@ -1863,8 +1933,8 @@ namespace pxsim.visuals {
} }
private attachPinsTouchEvents() { private attachPinsTouchEvents() {
this.pins.slice(2, 6).forEach((btn, i) => { this.pins.slice(0, 4).forEach((btn, i) => {
var index = i + 2; var index = i;
let state = this.board; let state = this.board;
let pressedTime: number; let pressedTime: number;
pointerEvents.down.forEach(evid => btn.addEventListener(evid, ev => { pointerEvents.down.forEach(evid => btn.addEventListener(evid, ev => {
@ -1908,8 +1978,8 @@ namespace pxsim.visuals {
private attachABEvents() { private attachABEvents() {
const bpState = this.board.buttonPairState; const bpState = this.board.buttonPairState;
const stateButtons: Button[] = [bpState.aBtn, bpState.bBtn]; const stateButtons: Button[] = [bpState.aBtn, bpState.bBtn];
const elButtonOuters = this.buttonsOuter.slice(0, 2); const elButtonOuters = this.buttonsOuter.slice(6, 8);
const elButtons = this.buttons.slice(0, 2); const elButtons = this.buttons.slice(6, 8);
elButtonOuters.forEach((btn, index) => { elButtonOuters.forEach((btn, index) => {
let pressedTime: number; let pressedTime: number;