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

support for high contrast in simulator (#386)

Browse Source 
* support for high contrast in simulator

* updated logic to find afterProgramPage.
This commit is contained in:
Peli de Halleux 2017-04-19 23:44:47 -07:00 committed by GitHub
parent 89848beb61
commit 1cf38d92ef
4 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pxtarget.json
View File

@ -339,6 +339,7 @@
"colour": "rgba(189, 195, 199, 0.30)", "colour": "rgba(189, 195, 199, 0.30)",
"snap": false "snap": false
} }
} },
"highContrast": true
} }
} }

4
sim/dalboard.ts
View File

@ -120,9 +120,11 @@ namespace pxsim {
fnArgs: fnArgs, fnArgs: fnArgs,
maxWidth: "100%", maxWidth: "100%",
maxHeight: "100%", maxHeight: "100%",
highContrast: msg.highContrast
}; };
const viewHost = new visuals.BoardHost(pxsim.visuals.mkBoardView({ const viewHost = new visuals.BoardHost(pxsim.visuals.mkBoardView({
visual: boardDef.visual visual: boardDef.visual,
highContrast: msg.highContrast
}), opts); }), opts);
document.body.innerHTML = ""; // clear children document.body.innerHTML = ""; // clear children

4
sim/visuals/boardview.ts
View File

@ -2,9 +2,9 @@ namespace pxsim.visuals {
mkBoardView = (opts: BoardViewOptions): BoardView => { mkBoardView = (opts: BoardViewOptions): BoardView => {
return new visuals.MicrobitBoardSvg({ return new visuals.MicrobitBoardSvg({
runtime: runtime, runtime: runtime,
theme: visuals.randomTheme(), theme: visuals.randomTheme(opts.highContrast),
disableTilt: false, disableTilt: false,
wireframe: opts.wireframe, wireframe: opts.wireframe
}); });
} }
} }

22
sim/visuals/microbit.ts
View File

@ -136,6 +136,11 @@ namespace pxsim.visuals {
stroke-width: 2px; stroke-width: 2px;
} }
`; `;
const MB_HIGHCONTRAST = `
.sim-led {
stroke: red;
}
`
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 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 pins4onMids = pins4onXs.map(x => x + 5);
const littlePinDist = pins4onMids[1] - pins4onMids[0]; const littlePinDist = pins4onMids[1] - pins4onMids[0];
@ -179,6 +184,7 @@ namespace pxsim.visuals {
const MB_WIDTH = 500; const MB_WIDTH = 500;
const MB_HEIGHT = 408; const MB_HEIGHT = 408;
export interface IBoardTheme { export interface IBoardTheme {
highContrast?: boolean;
accent?: string; accent?: string;
display?: string; display?: string;
pin?: string; pin?: string;
@ -215,8 +221,18 @@ namespace pxsim.visuals {
} }
}); });
export function randomTheme(): IBoardTheme { export function randomTheme(highContrast?: boolean): IBoardTheme {
return themes[Math.floor(Math.random() * themes.length)]; let theme = themes[Math.floor(Math.random() * themes.length)];
if (highContrast) {
theme = JSON.parse(JSON.stringify(theme)) as IBoardTheme;
theme.highContrast = true;
theme.ledOff = "#888";
theme.ledOn = "#0000bb";
theme.display = "#ffffff";
theme.pin = "#D4AF37";
theme.accent = "#273EE2";
}
return theme;
} }
export interface IBoardProps { export interface IBoardProps {
@ -581,7 +597,7 @@ namespace pxsim.visuals {
"height": MB_HEIGHT + "px", "height": MB_HEIGHT + "px",
}); });
this.style = <SVGStyleElement>svg.child(this.element, "style", {}); this.style = <SVGStyleElement>svg.child(this.element, "style", {});
this.style.textContent = MB_STYLE; this.style.textContent = MB_STYLE + (this.props.theme.highContrast ? MB_HIGHCONTRAST : "");
this.defs = <SVGDefsElement>svg.child(this.element, "defs", {}); this.defs = <SVGDefsElement>svg.child(this.element, "defs", {});
this.g = <SVGGElement>svg.elt("g"); this.g = <SVGGElement>svg.elt("g");