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

micro:bit wireframe

This commit is contained in:
darzu 2016-08-31 13:39:47 -07:00
parent f19a110953
commit e27c4de108
3 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
sim/instructions/instructions.ts
View File

@ -44,6 +44,10 @@ namespace pxsim.instructions {
const NUM_FONT = 40;
const NUM_MARGIN = 5;
const FRONT_PAGE_BOARD_WIDTH = 200;
const PARTS_BOARD_SCALE = 0.17;
const PARTS_BB_SCALE = 0.25;
const PARTS_CMP_SCALE = 0.3;
const PARTS_WIRE_SCALE = 0.23;
const STYLE = `
.instr-panel {
margin: ${PANEL_MARGIN}px;
@ -427,17 +431,12 @@ namespace pxsim.instructions {
function mkPartsPanel(props: BoardProps) {
let panel = mkPanel();
const BOARD_SCALE = 0.1;
const BB_SCALE = 0.25;
const CMP_SCALE = 0.3;
const WIRE_SCALE = 0.23;
// board and breadboard
let boardImg = mkBoardImgSvg(<BoardImageDefinition>props.boardDef.visual);
let board = wrapSvg(boardImg, {left: QUANT_LBL(1), leftSize: QUANT_LBL_SIZE, cmpScale: BOARD_SCALE});
let board = wrapSvg(boardImg, {left: QUANT_LBL(1), leftSize: QUANT_LBL_SIZE, cmpScale: PARTS_BOARD_SCALE});
panel.appendChild(board);
let bbRaw = mkBBSvg();
let bb = wrapSvg(bbRaw, {left: QUANT_LBL(1), leftSize: QUANT_LBL_SIZE, cmpScale: BB_SCALE});
let bb = wrapSvg(bbRaw, {left: QUANT_LBL(1), leftSize: QUANT_LBL_SIZE, cmpScale: PARTS_BB_SCALE});
panel.appendChild(bb);
// components
@ -453,7 +452,7 @@ namespace pxsim.instructions {
let cmp = mkCmpDiv(builtinVisual, {
left: QUANT_LBL(quant),
leftSize: QUANT_LBL_SIZE,
cmpScale: CMP_SCALE,
cmpScale: PARTS_CMP_SCALE,
});
addClass(cmp, "partslist-cmp");
panel.appendChild(cmp);
@ -469,7 +468,7 @@ namespace pxsim.instructions {
left: QUANT_LBL(quant),
leftSize: WIRE_QUANT_LBL_SIZE,
wireClr: clr,
cmpScale: WIRE_SCALE
cmpScale: PARTS_WIRE_SCALE
})
addClass(cmp, "partslist-wire");
panel.appendChild(cmp);
@ -655,7 +654,7 @@ namespace pxsim.instructions {
}
//final
// let finalPanel = mkFinalPanel(props);
// document.body.appendChild(finalPanel);
let finalPanel = mkFinalPanel(props);
document.body.appendChild(finalPanel);
}
}

23
sim/microbit.ts
View File

@ -115,6 +115,21 @@ namespace pxsim.visuals {
fill: none;
stroke: black;
}
.sim-wireframe .sim-display,
.sim-wireframe .sim-led,
.sim-wireframe .sim-led-back,
.sim-wireframe .sim-head,
.sim-wireframe .sim-theme,
.sim-wireframe .sim-button-group,
.sim-wireframe .sim-button-label,
.sim-wireframe .sim-button,
.sim-wireframe .sim-text-pin
{
visibility: hidden;
}
.sim-wireframe .sim-board {
stroke-width: 2px;
}
`;
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);
@ -156,8 +171,8 @@ namespace pxsim.visuals {
"P20, I2C - SDA",
"GND", "GND", "+3v3", "GND"
];
const MB_WIDTH = 498;
const MB_HEIGHT = 406;
const MB_WIDTH = 500;
const MB_HEIGHT = 408;
export interface IBoardTheme {
accent?: string;
display?: string;
@ -605,7 +620,7 @@ namespace pxsim.visuals {
}
// head
this.head = <SVGGElement>svg.child(this.g, "g", {});
this.head = <SVGGElement>svg.child(this.g, "g", {class: "sim-head"});
svg.child(this.head, "circle", { cx: 258, cy: 75, r: 100, fill: "transparent" })
this.logos.push(svg.path(this.head, "sim-theme sim-theme-glow", "M269.9,50.2L269.9,50.2l-39.5,0v0c-14.1,0.1-24.6,10.7-24.6,24.8c0,13.9,10.4,24.4,24.3,24.7v0h39.6c14.2,0,24.8-10.6,24.8-24.7C294.5,61,284,50.3,269.9,50.2 M269.7,89.2L269.7,89.2l-39.3,0c-7.7-0.1-14-6.4-14-14.2c0-7.8,6.4-14.2,14.2-14.2h39.1c7.8,0,14.2,6.4,14.2,14.2C283.9,82.9,277.5,89.2,269.7,89.2"));
this.logos.push(svg.path(this.head, "sim-theme sim-theme-glow", "M230.6,69.7c-2.9,0-5.3,2.4-5.3,5.3c0,2.9,2.4,5.3,5.3,5.3c2.9,0,5.3-2.4,5.3-5.3C235.9,72.1,233.5,69.7,230.6,69.7"));
@ -648,7 +663,7 @@ namespace pxsim.visuals {
const btnw = 56.2;
const btnn = 6;
const btnnm = 10
let btng = svg.child(this.g, "g");
let btng = svg.child(this.g, "g", {class: "sim-button-group"});
this.buttonsOuter.push(btng);
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 });

1
sim/visuals/wiring.ts
View File

@ -26,6 +26,7 @@ namespace pxsim.visuals {
}
.grayed .sim-bb-wire-end:not(.highlight) {
stroke: #777;
fill: #777;
}
.grayed .sim-bb-wire:not(.highlight) {
stroke: #CCC;