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);