From 8af383ec5647dacad6dbd4b8bb2192033171ccfe Mon Sep 17 00:00:00 2001 From: Peli de Halleux Date: Wed, 12 Oct 2016 22:44:05 -0700 Subject: [PATCH] updated svg layout --- pxtarget.json | 2 +- sim/visuals/microbit.ts | 1030 ++++++++++++++++++++++++++++++++------- 2 files changed, 866 insertions(+), 166 deletions(-) diff --git a/pxtarget.json b/pxtarget.json index ac842625..03186947 100644 --- a/pxtarget.json +++ b/pxtarget.json @@ -92,7 +92,7 @@ "simulator": { "autoRun": true, "streams": true, - "aspectRatio": 1.08, + "aspectRatio": 1.13, "parts": true, "partsAspectRatio": 0.69, "boardDefinition": { diff --git a/sim/visuals/microbit.ts b/sim/visuals/microbit.ts index 0b091be6..d9087a46 100644 --- a/sim/visuals/microbit.ts +++ b/sim/visuals/microbit.ts @@ -59,9 +59,9 @@ namespace pxsim.visuals { .sim-text { font-family:"Lucida Console", Monaco, monospace; - font-size:16px; + font-size:10px; fill:#fff; - pointer-events: none; + pointer-events: none; user-select: none; } .sim-text.inverted { fill:#000; @@ -79,6 +79,10 @@ namespace pxsim.visuals { stroke-width: 3px; } + #rgbledcircle:hover { + r:8px; + } + /* animations */ .sim-theme-glow { animation-name: sim-theme-glow-animation; @@ -139,6 +143,830 @@ namespace pxsim.visuals { stroke-width: 2px; } `; + const BOARD_SVG = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ` + const pins4onXs = [66.7, 79.1, 91.4, 103.7, 164.3, 176.6, 188.9, 201.3, 213.6, 275.2, 287.5, 299.8, 312.1, 324.5, 385.1, 397.4, 409.7, 422]; const pins4onMids = pins4onXs.map(x => x + 5); const littlePinDist = pins4onMids[1] - pins4onMids[0]; @@ -179,8 +1007,8 @@ namespace pxsim.visuals { "P20, I2C - SDA", "GND", "GND", "+3v3", "GND" ]; - const MB_WIDTH = 340; - const MB_HEIGHT = 312; + const MB_WIDTH = 251.8; + const MB_HEIGHT = 222.2; export interface IBoardTheme { accent?: string; display?: string; @@ -190,7 +1018,7 @@ namespace pxsim.visuals { ledOn?: string; ledOff?: string; buttonOuter?: string; - buttonUp?: string; + buttonUps: string[]; buttonDown?: string; virtualButtonOuter?: string; virtualButtonUp?: string; @@ -208,7 +1036,7 @@ namespace pxsim.visuals { ledOn: "#ff7777", ledOff: "#666", buttonOuter: "#979797", - buttonUp: "#000", + buttonUps: ["#186A8C", "#D82E50"], buttonDown: "#FFA500", virtualButtonDown: "#FFA500", virtualButtonOuter: "#333", @@ -308,7 +1136,8 @@ namespace pxsim.visuals { svg.fills(this.leds, theme.ledOn); svg.fills(this.ledsOuter, theme.ledOff); svg.fills(this.buttonsOuter.slice(0, 2), theme.buttonOuter); - svg.fills(this.buttons.slice(0, 2), theme.buttonUp); + svg.fill(this.buttons[0], theme.buttonUps[0]); + svg.fill(this.buttons[1], theme.buttonUps[1]); svg.fill(this.buttonsOuter[2], theme.virtualButtonOuter); svg.fill(this.buttons[2], theme.virtualButtonUp); @@ -326,7 +1155,7 @@ namespace pxsim.visuals { let bpState = state.buttonPairState; let buttons = [bpState.aBtn, bpState.bBtn, bpState.abBtn]; buttons.forEach((btn, index) => { - svg.fill(this.buttons[index], btn.pressed ? (btn.virtual ? theme.virtualButtonDown : theme.buttonDown) : (btn.virtual ? theme.virtualButtonUp : theme.buttonUp)); + svg.fill(this.buttons[index], btn.pressed ? (btn.virtual ? theme.virtualButtonDown : theme.buttonDown) : (btn.virtual ? theme.virtualButtonUp : theme.buttonUps[index])); }); let bw = state.ledMatrixState.displayMode == pxsim.DisplayMode.bw @@ -352,7 +1181,7 @@ namespace pxsim.visuals { let state = this.board; if (state.rgbLedState) { if (!this.rgbLed) - this.rgbLed = svg.child(this.g, "circle", { cx: 170, cy: 190, r:5 }); + this.rgbLed = this.element.getElementById("rgbledcircle") as SVGCircleElement; const c = state.rgbLedState; const b = c & 0xFF; const g = (c >> 8) & 0xFF; @@ -368,7 +1197,7 @@ namespace pxsim.visuals { private updateGestures() { let state = this.board; if (state.accelerometerState.useShake && !this.shakeButton) { - let shake = this.mkBtn(40, 210); + let shake = this.mkBtn(26, MB_HEIGHT - 67); this.shakeButton = shake.inner; svg.fill(this.shakeButton, this.props.theme.virtualButtonUp) svg.buttonEvents(shake.outer, @@ -381,7 +1210,7 @@ namespace pxsim.visuals { this.board.bus.queue(DAL.MICROBIT_ID_GESTURE, 11); // GESTURE_SHAKE } ) - let shakeText = svg.child(shake.outer, "text", { x: 25, y: 245, class: "sim-text inverted" }) as SVGTextElement; + let shakeText = svg.child(shake.outer, "text", { x: 20, y: MB_HEIGHT - 40, class: "sim-text inverted" }) as SVGTextElement; shakeText.textContent = "SHAKE" } } @@ -486,7 +1315,7 @@ namespace pxsim.visuals { private lastFlashTime: number = 0; public flashSystemLed() { if (!this.systemLed) - this.systemLed = svg.child(this.g, "circle", { class: "sim-systemled", cx: 95, cy: 73, r: 5 }) + this.systemLed = svg.child(this.g, "circle", { class: "sim-systemled", cx: 75, cy: MB_HEIGHT - 171, r: 2 }) let now = Date.now(); if (now - this.lastFlashTime > 150) { this.lastFlashTime = now; @@ -573,141 +1402,7 @@ namespace pxsim.visuals { private buildDom() { this.element = svg.elt("svg") - this.element.innerHTML = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `; + this.element.innerHTML = BOARD_SVG; svg.hydrate(this.element, { "version": "1.0", "viewBox": `0 0 ${MB_WIDTH} ${MB_HEIGHT}`, @@ -733,9 +1428,10 @@ namespace pxsim.visuals { // leds this.leds = []; this.ledsOuter = []; - const left = 138, top = 89, ledoffw = 15, ledoffh = 14.5; - const ledw = 5; - const ledh = 10; + const left = 103.04, top = MB_HEIGHT - 158.59; + const ledoffw = 10.91, ledoffh = 10.68; + const ledw = 2.7; + const ledh = 5.47; for (let i = 0; i < 5; ++i) { let ledtop = i * ledoffh + top; for (let j = 0; j < 5; ++j) { @@ -775,8 +1471,14 @@ namespace pxsim.visuals { this.pinTexts = [67, 165, 275].map(x => svg.child(this.g, "text", { class: "sim-text-pin", x: x, y: 345 })); - this.buttonsOuter = []; this.buttons = []; + // BTN A, B + const btnids = ["BTN_A", "BTN_B"]; + this.buttonsOuter = btnids.map(n => this.element.getElementById(n + "_BOX") as SVGElement); + this.buttonsOuter.forEach(b => svg.addClass(b, "sim-button-outer")); + this.buttons = btnids.map(n => this.element.getElementById(n) as SVGElement); + this.buttons.forEach(b => svg.addClass(b, "sim-button")); + // BTN A+B const outerBtn = (left: number, top: number) => { const button = this.mkBtn(left, top); this.buttonsOuter.push(button.outer); @@ -785,20 +1487,18 @@ namespace pxsim.visuals { return button; } - outerBtn(83.61, 96.8); - outerBtn(236.66, 96.8); - let ab = outerBtn(275, 69); - let abtext = svg.child(ab.outer, "text", { x: 275, y: 65, class: "sim-text inverted" }) as SVGTextElement; + let ab = outerBtn(210, MB_HEIGHT - 168); + let abtext = svg.child(ab.outer, "text", { x: 208, y: MB_HEIGHT - 173, class: "sim-text inverted" }) as SVGTextElement; abtext.textContent = "A+B"; (this.buttonsOuter[2]).style.visibility = "hidden"; (this.buttons[2]).style.visibility = "hidden"; } private mkBtn(left: number, top: number): { outer: SVGElement, inner: SVGElement } { - const btnr = 3; - const btnw = 21.71; - const btnn = 1; - const btnnm = 1; + const btnr = 2; + const btnw = 16; + const btnn = 1.6; + const btnnm = 2; const btnb = 5; 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 }); @@ -940,12 +1640,12 @@ namespace pxsim.visuals { btn.addEventListener(pointerEvents.leave, ev => { let state = this.board; stateButtons[index].pressed = false; - svg.fill(this.buttons[index], this.props.theme.buttonUp); + svg.fill(this.buttons[index], this.props.theme.buttonUps[index]); }) btn.addEventListener(pointerEvents.up, ev => { let state = this.board; stateButtons[index].pressed = false; - svg.fill(this.buttons[index], this.props.theme.buttonUp); + svg.fill(this.buttons[index], this.props.theme.buttonUps[index]); this.board.bus.queue(stateButtons[index].id, DAL.MICROBIT_BUTTON_EVT_UP); this.board.bus.queue(stateButtons[index].id, DAL.MICROBIT_BUTTON_EVT_CLICK); }) @@ -964,8 +1664,8 @@ namespace pxsim.visuals { stateButtons[0].pressed = false; stateButtons[1].pressed = false; stateButtons[2].pressed = false; - svg.fill(this.buttons[0], this.props.theme.buttonUp); - svg.fill(this.buttons[1], this.props.theme.buttonUp); + svg.fill(this.buttons[0], this.props.theme.buttonUps[0]); + svg.fill(this.buttons[1], this.props.theme.buttonUps[1]); svg.fill(this.buttons[2], this.props.theme.virtualButtonUp); }) this.buttonsOuter[2].addEventListener(pointerEvents.up, ev => { @@ -973,8 +1673,8 @@ namespace pxsim.visuals { stateButtons[0].pressed = false; stateButtons[1].pressed = false; stateButtons[2].pressed = false; - svg.fill(this.buttons[0], this.props.theme.buttonUp); - svg.fill(this.buttons[1], this.props.theme.buttonUp); + svg.fill(this.buttons[0], this.props.theme.buttonUps[0]); + svg.fill(this.buttons[1], this.props.theme.buttonUps[1]); svg.fill(this.buttons[2], this.props.theme.virtualButtonUp); this.board.bus.queue(stateButtons[2].id, DAL.MICROBIT_BUTTON_EVT_UP);