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

support for light level / thermometer simulation

This commit is contained in:
Peli de Halleux 2016-10-12 23:14:38 -07:00
parent 8af383ec56
commit d9eebf4a9f
1 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
sim/visuals/microbit.ts
View File

@ -48,8 +48,8 @@ namespace pxsim.visuals {
} }
.sim-light-level-button { .sim-light-level-button {
stroke:#fff; stroke:#ccc;
stroke-width: 3px; stroke-width: 2px;
} }
.sim-antenna { .sim-antenna {
@ -76,7 +76,7 @@ namespace pxsim.visuals {
.sim-thermometer { .sim-thermometer {
stroke:#aaa; stroke:#aaa;
stroke-width: 3px; stroke-width: 2px;
} }
#rgbledcircle:hover { #rgbledcircle:hover {
@ -1257,21 +1257,22 @@ namespace pxsim.visuals {
this.thermometerGradient = svg.linearGradient(this.defs, gid); this.thermometerGradient = svg.linearGradient(this.defs, gid);
this.thermometer = <SVGRectElement>svg.child(this.g, "rect", { this.thermometer = <SVGRectElement>svg.child(this.g, "rect", {
class: "sim-thermometer", class: "sim-thermometer",
x: 120, x: 85,
y: 110, y: MB_HEIGHT - 192,
width: 20, width: 10,
height: 160, height: 80,
rx: 5, ry: 5, rx: 5, ry: 5,
fill: `url(#${gid})` fill: `url(#${gid})`
}); });
this.thermometerText = svg.child(this.g, "text", { class: 'sim-text', x: 58, y: 130 }) as SVGTextElement; this.thermometerText = svg.child(this.g, "text", { class: 'sim-text',
x: 100, y: MB_HEIGHT - 168 }) as SVGTextElement;
this.updateTheme(); this.updateTheme();
let pt = this.element.createSVGPoint(); let pt = this.element.createSVGPoint();
svg.buttonEvents(this.thermometer, svg.buttonEvents(this.thermometer,
(ev) => { (ev) => {
let cur = svg.cursorPoint(pt, this.element, ev); let cur = svg.cursorPoint(pt, this.element, ev);
let t = Math.max(0, Math.min(1, (260 - cur.y) / 140)) let t = Math.max(0, Math.min(1, (80 - cur.y) / 80))
state.thermometerState.temperature = Math.floor(tmin + t * (tmax - tmin)); state.thermometerState.temperature = Math.floor(tmin + t * (tmax - tmin));
this.updateTemperature(); this.updateTemperature();
}, ev => { }, ev => { }) }, ev => { }, ev => { })
@ -1353,10 +1354,11 @@ namespace pxsim.visuals {
if (!this.lightLevelButton) { if (!this.lightLevelButton) {
let gid = "gradient-light-level"; let gid = "gradient-light-level";
this.lightLevelGradient = svg.linearGradient(this.defs, gid) this.lightLevelGradient = svg.linearGradient(this.defs, gid)
let cy = 50; const cx = 30;
let r = 35; const cy = 45;
const r = 20;
this.lightLevelButton = svg.child(this.g, "circle", { this.lightLevelButton = svg.child(this.g, "circle", {
cx: `50px`, cy: `${cy}px`, r: `${r}px`, cx: `${cx}px`, cy: `${cy}px`, r: `${r}px`,
class: 'sim-light-level-button', class: 'sim-light-level-button',
fill: `url(#${gid})` fill: `url(#${gid})`
}) as SVGCircleElement; }) as SVGCircleElement;
@ -1372,7 +1374,7 @@ namespace pxsim.visuals {
} }
}, ev => { }, }, ev => { },
ev => { }) ev => { })
this.lightLevelText = svg.child(this.g, "text", { x: 85, y: cy + r - 5, text: '', class: 'sim-text' }) as SVGTextElement; this.lightLevelText = svg.child(this.g, "text", { x: cx-r-7, y: cy + r + 8, text: '', class: 'sim-text inverted' }) as SVGTextElement;
this.updateTheme(); this.updateTheme();
} }