diff --git a/libs/core/pxt.json b/libs/core/pxt.json index 440b9b2d..a81255c5 100644 --- a/libs/core/pxt.json +++ b/libs/core/pxt.json @@ -125,7 +125,7 @@ "device_info_service": 0 }, "stack_size": 1280, - "gatt_table_size": "0x600", + "gatt_table_size": "0xD8", "panic_on_heap_full": 0, "debug": 0, "heap_debug": 0, @@ -139,6 +139,7 @@ "config": { "microbit-dal": { "stack_size": 2048, + "gatt_table_size": "0x600", "sram_end": "0x20008000", "RAM_SIZE": "\"32K\"" } @@ -149,6 +150,7 @@ "config": { "microbit-dal": { "stack_size": 1280, + "gatt_table_size": "0xD8", "sram_end": "0x20004000", "RAM_SIZE": "\"16K\"" } diff --git a/pxtarget.json b/pxtarget.json index f952b8c7..2bfdd815 100644 --- a/pxtarget.json +++ b/pxtarget.json @@ -165,9 +165,9 @@ "simulator": { "autoRun": true, "streams": false, - "aspectRatio": 1.13, + "aspectRatio": 0.94, "parts": false, - "partsAspectRatio": 0.69, + "partsAspectRatio": 0.7, "boardDefinition": { "visual": "calliope", "gpioPinBlocks": [ diff --git a/sim/visuals/microbit.ts b/sim/visuals/microbit.ts index 15629386..19de4b80 100644 --- a/sim/visuals/microbit.ts +++ b/sim/visuals/microbit.ts @@ -1,5 +1,25 @@ namespace pxsim.visuals { 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 { margin-bottom:1em; } @@ -28,15 +48,16 @@ namespace pxsim.visuals { .sim-button-nut:hover { stroke:1px solid #704A4A; } + .sim-pin { + cursor: pointer; + } .sim-pin:hover { stroke:#D4AF37; stroke-width:2px; } - .sim-pin-touch.touched:hover { stroke:darkorange; } - .sim-led-back:hover { stroke:#fff; stroke-width:3px; @@ -64,16 +85,16 @@ namespace pxsim.visuals { } .sim-text { - font-family:"Lucida Console", Monaco, monospace; + font-family: 'Roboto Mono', monospace; font-size:14px; fill:#fff; pointer-events: none; user-select: none; } .sim-text-pin { - font-family:"Lucida Console", Monaco, monospace; + font-family: 'Roboto Mono', monospace; pointer-events: none; user-select: none; - fill:#3cb5b5; + fill:#000; font-size:24px; stroke:#fff; stroke-alignment: outside; @@ -187,10 +208,34 @@ namespace pxsim.visuals { -webkit-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 = ` + y="0px" viewBox="0 0 530 630" style="enable-background:new 0 0 530 630;" xml:space="preserve"> + - - - - + `; + const pinNames = [ - "BTN_A", "BTN_B", + "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_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", @@ -681,8 +730,9 @@ namespace pxsim.visuals { "G_A1_RX", "G_A1_TX", "G_A1_VCC", "G_A1_GND" ]; const pinTitles = [ - "Button A", "Button B", + "P0", "P1, ANALOG IN", "P2, ANALOG IN", "P3", "GND", "+3v3", + "Button A", "Button B", "GND", "GND", "GND", "GND", "+3v3", "+3v3", "C0", "C2", "C4", "C6", "C8", "C10", "C12", "C14", "C16", "C18", "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" ]; const MB_WIDTH = 530; - const MB_HEIGHT = 530; + const MB_HEIGHT = 630; export interface IBoardTheme { accent?: string; display?: string; @@ -715,9 +765,9 @@ namespace pxsim.visuals { export var themes: IBoardTheme[] = ["#3ADCFE"].map(accent => { return { accent: accent, - pin: "#EFDA48", + pin: "#F6C426", pinTouched: "#FFA500", - pinActive: "#FF5500", + pinActive: "#E6007D", ledOn: "#ff5555", ledOff: "#e0e1e2", buttonOuter: "#979797", @@ -760,7 +810,7 @@ namespace pxsim.visuals { private display: SVGElement; private buttons: SVGElement[]; private buttonsOuter: SVGElement[]; - private buttonABText: SVGTextElement; + // private buttonABText: SVGTextElement; private pins: SVGElement[]; private pinGradients: SVGLinearGradientElement[]; private pinTexts:{ [key: number]: SVGTextElement }; @@ -781,7 +831,7 @@ namespace pxsim.visuals { private soundLevelText: SVGTextElement; private soundLevelIcon: SVGTextElement; private shakeButton: SVGElement; - private shakeText: SVGTextElement; + // private shakeText: SVGTextElement; public board: pxsim.DalBoard; private domHardwareVersion = 1; private rgbLed: SVGElement; @@ -1041,7 +1091,7 @@ 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.buttonsOuter.slice(6, 8), theme.buttonOuter); svg.fill(this.buttons[0], theme.buttonUps[0]); svg.fill(this.buttons[1], theme.buttonUps[1]); svg.fill(this.buttonsOuter[2], theme.virtualButtonOuter); @@ -1135,21 +1185,28 @@ namespace pxsim.visuals { private updateGestures() { let state = this.board; 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; - 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, 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) => { svg.fill(this.shakeButton, this.props.theme.virtualButtonUp); 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; - shakeText.textContent = "SHAKE" + // let shakeText = svg.child(shake.outer, "text", { x: 280, y: MB_HEIGHT - 5, class: "sim-text big inverted centered" }) as SVGTextElement; + // shakeText.textContent = "SHAKE" } } @@ -1236,7 +1293,7 @@ namespace pxsim.visuals { if (!this.thermometer) { let gid = "gradient-thermometer"; this.thermometerGradient = svg.linearGradient(this.defs, gid); - const ty = MB_HEIGHT - 200; + const ty = MB_HEIGHT - 270; this.thermometer = svg.child(this.g, "rect", { class: "sim-thermometer", x: 0, @@ -1309,7 +1366,7 @@ namespace pxsim.visuals { const level = state.microphoneState.getLevel(); let gid = "gradient-soundlevel"; this.soundLevelGradient = svg.linearGradient(this.defs, gid); - const ty = MB_HEIGHT - 200; + const ty = MB_HEIGHT - 270; this.soundLevel = svg.child(this.g, "rect", { class: "sim-thermometer", x: 490, @@ -1669,10 +1726,10 @@ namespace pxsim.visuals { // ].map(p => svg.child(this.g, "text", { class: "sim-text-pin", x: p[0], y: p[1] })); this.pinTexts = { - [DigitalPin.P0]: svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 20, y: 315 }), - [DigitalPin.P1]: svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 135, y: 530 }), - [DigitalPin.P2]: svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 395, y: 530 }), - [DigitalPin.P3]: svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 535, y: 315 }) + [DigitalPin.P0]: svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 20, y: 325 }), + [DigitalPin.P1]: svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 135, y: 540 }), + [DigitalPin.P2]: svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 395, y: 540 }), + [DigitalPin.P3]: svg.child(this.g, "text", { class: "sim-text-pin big centered", x: 540, y: 325 }) } // BTN A, B @@ -1684,39 +1741,52 @@ namespace pxsim.visuals { // BTN A+B 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.buttons.push(button.inner); - return button; } - let ab = outerBtn(210, MB_HEIGHT - 45); - 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"; + 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; + // 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 } { + private mkBtn(left: number, top: number, text: string): { outer: SVGElement, inner: SVGElement } { const btnr = 2; const btnw = 20; 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 }); - 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 }); + // var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject"); + var fo = svg.child(btng, "foreignObject"); + fo.setAttribute("id", "y"); + fo.setAttribute("x", left+''); + fo.setAttribute("y", top+''); + fo.setAttribute("width", "300"); + fo.setAttribute("height", "100"); + fo.innerHTML = ` + + `; + // 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 inner = svg.child(btng, "circle", { class: "sim-button", cx: left + btnw / 2, cy: top + btnw / 2, - r: btnb + r: 0 }); return { outer, inner }; @@ -1798,7 +1868,7 @@ namespace pxsim.visuals { } private attachPinsIOEvents() { - this.pins.slice(2, 6).forEach((pin, index) => { + this.pins.slice(0, 4).forEach((pin, index) => { // var index = i + 2; if (!this.board.edgeConnectorState.pins[index]) return; let pt = this.element.createSVGPoint(); @@ -1863,8 +1933,8 @@ namespace pxsim.visuals { } private attachPinsTouchEvents() { - this.pins.slice(2, 6).forEach((btn, i) => { - var index = i + 2; + this.pins.slice(0, 4).forEach((btn, i) => { + var index = i; let state = this.board; let pressedTime: number; pointerEvents.down.forEach(evid => btn.addEventListener(evid, ev => { @@ -1908,8 +1978,8 @@ namespace pxsim.visuals { private attachABEvents() { const bpState = this.board.buttonPairState; const stateButtons: Button[] = [bpState.aBtn, bpState.bBtn]; - const elButtonOuters = this.buttonsOuter.slice(0, 2); - const elButtons = this.buttons.slice(0, 2); + const elButtonOuters = this.buttonsOuter.slice(6, 8); + const elButtons = this.buttons.slice(6, 8); elButtonOuters.forEach((btn, index) => { let pressedTime: number;