emulation of lightlevel

This commit is contained in:
Peli de Halleux 2016-03-11 13:17:49 -08:00
parent b576066f9f
commit cd15823b62
4 changed files with 74 additions and 18 deletions

View File

@ -265,12 +265,12 @@ namespace ks.rt.micro_bit {
} }
export function getAcceleration(dimension: number): number { export function getAcceleration(dimension: number): number {
var b = board(); let b = board();
if (!b.usesAcceleration) { if (!b.usesAcceleration) {
b.usesAcceleration = true; b.usesAcceleration = true;
runtime.queueDisplayUpdate(); runtime.queueDisplayUpdate();
} }
var acc = b.acceleration; let acc = b.acceleration;
switch (dimension) { switch (dimension) {
case 0: return acc[0]; case 0: return acc[0];
case 1: return acc[1]; case 1: return acc[1];
@ -280,8 +280,12 @@ namespace ks.rt.micro_bit {
} }
export function lightLevel(): number { export function lightLevel(): number {
// TODO let b = board();
return 0; if (!b.usesLightLevel) {
b.usesLightLevel = true;
runtime.queueDisplayUpdate();
}
return b.lightLevel;
} }
export function getMagneticForce(): number { export function getMagneticForce(): number {

View File

@ -34,6 +34,11 @@ svg.sim {
stroke-width: 1px; stroke-width: 1px;
} }
.sim-light-level-button {
stroke:#fff;
stroke-width: 3px;
}
.sim-antenna { .sim-antenna {
stroke:#555; stroke:#555;
stroke-width: 2px; stroke-width: 2px;

View File

@ -11,6 +11,8 @@ namespace ks.rt.micro_bit {
buttonOuter?: string; buttonOuter?: string;
buttonUp?: string; buttonUp?: string;
buttonDown?: string; buttonDown?: string;
lightLevelOn?:string;
lightLevelOff?: string;
} }
export var themes: IBoardTheme[] = ["#3ADCFE", "#FFD43A", "#3AFFB3", "#FF3A54"].map(accent => { export var themes: IBoardTheme[] = ["#3ADCFE", "#FFD43A", "#3AFFB3", "#FF3A54"].map(accent => {
@ -25,6 +27,8 @@ namespace ks.rt.micro_bit {
buttonOuter: "#979797", buttonOuter: "#979797",
buttonUp: "#000", buttonUp: "#000",
buttonDown: "#FFA500", buttonDown: "#FFA500",
lightLevelOn: "yellow",
lightLevelOff: "#555"
}}); }});
export function randomTheme() : IBoardTheme { export function randomTheme() : IBoardTheme {
@ -117,6 +121,20 @@ namespace ks.rt.micro_bit {
return gradient; return gradient;
} }
static setGradientColors(lg : SVGLinearGradientElement, start:string, end:string) {
if (!lg) return;
(<SVGStopElement>lg.childNodes[0]).style.stopColor = start;
(<SVGStopElement>lg.childNodes[1]).style.stopColor = start;
(<SVGStopElement>lg.childNodes[2]).style.stopColor = end;
(<SVGStopElement>lg.childNodes[3]).style.stopColor = end;
}
static setGradientValue(lg : SVGLinearGradientElement, percent: string) {
(<SVGStopElement>lg.childNodes[1]).setAttribute("offset", percent);
(<SVGStopElement>lg.childNodes[2]).setAttribute("offset", percent);
}
static animate(el: SVGElement, cls: string) { static animate(el: SVGElement, cls: string) {
el.classList.add(cls); el.classList.add(cls);
let p = el.parentElement; let p = el.parentElement;
@ -144,6 +162,8 @@ namespace ks.rt.micro_bit {
private leds: SVGElement[]; private leds: SVGElement[];
private systemLed: SVGCircleElement; private systemLed: SVGCircleElement;
private antenna: SVGPolylineElement; private antenna: SVGPolylineElement;
private lightLevelButton: SVGCircleElement;
private lightLevelGradient : SVGLinearGradientElement;
public board: rt.micro_bit.Board; public board: rt.micro_bit.Board;
constructor(public props: IBoardProps) { constructor(public props: IBoardProps) {
@ -165,12 +185,8 @@ namespace ks.rt.micro_bit {
Svg.fills(this.buttons, theme.buttonUp); Svg.fills(this.buttons, theme.buttonUp);
Svg.fills(this.logos, theme.accent); Svg.fills(this.logos, theme.accent);
this.pinGradients.forEach(lg => { this.pinGradients.forEach(lg => Svg.setGradientColors(lg, theme.pin, theme.pinActive));
(<SVGStopElement>lg.childNodes[0]).style.stopColor = theme.pin; Svg.setGradientColors(this.lightLevelGradient, theme.lightLevelOn, theme.lightLevelOff);
(<SVGStopElement>lg.childNodes[1]).style.stopColor = theme.pin;
(<SVGStopElement>lg.childNodes[2]).style.stopColor = theme.pinActive;
(<SVGStopElement>lg.childNodes[3]).style.stopColor = theme.pinActive;
})
} }
public updateState() { public updateState() {
@ -191,6 +207,7 @@ namespace ks.rt.micro_bit {
this.updatePins(); this.updatePins();
this.updateTilt(); this.updateTilt();
this.updateHeading(); this.updateHeading();
this.updateLightLevel();
(<any>this.buttonsOuter[2]).style.visibility = state.usesButtonAB ? 'visible' : 'hidden'; (<any>this.buttonsOuter[2]).style.visibility = state.usesButtonAB ? 'visible' : 'hidden';
(<any>this.buttons[2]).style.visibility = state.usesButtonAB ? 'visible' : 'hidden'; (<any>this.buttons[2]).style.visibility = state.usesButtonAB ? 'visible' : 'hidden';
} }
@ -211,11 +228,7 @@ namespace ks.rt.micro_bit {
v = pin.touched ? '0%' : '100%'; v = pin.touched ? '0%' : '100%';
if (text) text.textContent = ""; if (text) text.textContent = "";
} }
if (v) { if (v) Svg.setGradientValue(this.pinGradients[index], v);
let lg = this.pinGradients[index];
(<SVGStopElement>lg.childNodes[1]).setAttribute("offset", v);
(<SVGStopElement>lg.childNodes[2]).setAttribute("offset", v);
}
} }
private updateHeading() { private updateHeading() {
@ -280,6 +293,38 @@ namespace ks.rt.micro_bit {
state.pins.forEach((pin,i) => this.updatePin(pin,i)); state.pins.forEach((pin,i) => this.updatePin(pin,i));
} }
private updateLightLevel() {
let state = this.board;
if (!state || !state.usesLightLevel) return;
if (!this.lightLevelButton) {
let gid= "gradient-light-level";
this.lightLevelGradient = Svg.linearGradient(this.defs, "gradient-light-level")
let cy = 50;
let r = 30;
this.lightLevelButton = Svg.child(this.g, "circle", {
cx: `50px`, cy: `${cy}px`, r: `${r}px`,
class:'sim-light-level-button',
fill: `url(#${gid})` }) as SVGCircleElement;
let pt = this.element.createSVGPoint();
Svg.buttonEvents(this.lightLevelButton,
(ev) => {
let pos = Svg.cursorPoint(pt, this.element, ev);
let rs = r*2/3;
let level = Math.max(0, Math.min(255, Math.floor((pos.y - (cy-rs)) / (2*rs) * 255)));
console.log(level)
if (level != this.board.lightLevel) {
this.board.lightLevel = level;
}
}, ev => {},
ev => {})
this.updateTheme();
}
Svg.setGradientValue(this.lightLevelGradient, Math.min(100, Math.max(0, Math.floor(state.lightLevel * 100 / 255))) + '%')
}
private updateTilt() { private updateTilt() {
if (this.props.disableTilt) return; if (this.props.disableTilt) return;
let state = this.board; let state = this.board;

View File

@ -162,6 +162,8 @@ namespace ks.rt.micro_bit {
heading = 90; heading = 90;
temperature = 21; temperature = 21;
usesLightLevel = false;
lightLevel = 128; lightLevel = 128;
animationQ: AnimationQueue; animationQ: AnimationQueue;