From cd15823b621628b2ee39bb93bc2eec03f0ca281b Mon Sep 17 00:00:00 2001 From: Peli de Halleux Date: Fri, 11 Mar 2016 13:17:49 -0800 Subject: [PATCH] emulation of lightlevel --- sim/libmbit.ts | 12 +++++--- sim/public/sim.css | 5 ++++ sim/simsvg.ts | 73 +++++++++++++++++++++++++++++++++++++--------- sim/state.ts | 2 ++ 4 files changed, 74 insertions(+), 18 deletions(-) diff --git a/sim/libmbit.ts b/sim/libmbit.ts index 8ea4fec4..db0e0ae1 100644 --- a/sim/libmbit.ts +++ b/sim/libmbit.ts @@ -265,12 +265,12 @@ namespace ks.rt.micro_bit { } export function getAcceleration(dimension: number): number { - var b = board(); + let b = board(); if (!b.usesAcceleration) { b.usesAcceleration = true; runtime.queueDisplayUpdate(); } - var acc = b.acceleration; + let acc = b.acceleration; switch (dimension) { case 0: return acc[0]; case 1: return acc[1]; @@ -280,8 +280,12 @@ namespace ks.rt.micro_bit { } export function lightLevel(): number { - // TODO - return 0; + let b = board(); + if (!b.usesLightLevel) { + b.usesLightLevel = true; + runtime.queueDisplayUpdate(); + } + return b.lightLevel; } export function getMagneticForce(): number { diff --git a/sim/public/sim.css b/sim/public/sim.css index 7603416e..a5dfa6d9 100644 --- a/sim/public/sim.css +++ b/sim/public/sim.css @@ -34,6 +34,11 @@ svg.sim { stroke-width: 1px; } +.sim-light-level-button { + stroke:#fff; + stroke-width: 3px; +} + .sim-antenna { stroke:#555; stroke-width: 2px; diff --git a/sim/simsvg.ts b/sim/simsvg.ts index c2391a4d..e5f47f9f 100644 --- a/sim/simsvg.ts +++ b/sim/simsvg.ts @@ -11,6 +11,8 @@ namespace ks.rt.micro_bit { buttonOuter?: string; buttonUp?: string; buttonDown?: string; + lightLevelOn?:string; + lightLevelOff?: string; } export var themes: IBoardTheme[] = ["#3ADCFE", "#FFD43A", "#3AFFB3", "#FF3A54"].map(accent => { @@ -25,6 +27,8 @@ namespace ks.rt.micro_bit { buttonOuter: "#979797", buttonUp: "#000", buttonDown: "#FFA500", + lightLevelOn: "yellow", + lightLevelOff: "#555" }}); export function randomTheme() : IBoardTheme { @@ -117,6 +121,20 @@ namespace ks.rt.micro_bit { return gradient; } + static setGradientColors(lg : SVGLinearGradientElement, start:string, end:string) { + if (!lg) return; + + (lg.childNodes[0]).style.stopColor = start; + (lg.childNodes[1]).style.stopColor = start; + (lg.childNodes[2]).style.stopColor = end; + (lg.childNodes[3]).style.stopColor = end; + } + + static setGradientValue(lg : SVGLinearGradientElement, percent: string) { + (lg.childNodes[1]).setAttribute("offset", percent); + (lg.childNodes[2]).setAttribute("offset", percent); + } + static animate(el: SVGElement, cls: string) { el.classList.add(cls); let p = el.parentElement; @@ -144,7 +162,9 @@ namespace ks.rt.micro_bit { private leds: SVGElement[]; private systemLed: SVGCircleElement; private antenna: SVGPolylineElement; - public board: rt.micro_bit.Board; + private lightLevelButton: SVGCircleElement; + private lightLevelGradient : SVGLinearGradientElement; + public board: rt.micro_bit.Board; constructor(public props: IBoardProps) { this.board = this.props.runtime.board as rt.micro_bit.Board; @@ -165,12 +185,8 @@ namespace ks.rt.micro_bit { Svg.fills(this.buttons, theme.buttonUp); Svg.fills(this.logos, theme.accent); - this.pinGradients.forEach(lg => { - (lg.childNodes[0]).style.stopColor = theme.pin; - (lg.childNodes[1]).style.stopColor = theme.pin; - (lg.childNodes[2]).style.stopColor = theme.pinActive; - (lg.childNodes[3]).style.stopColor = theme.pinActive; - }) + this.pinGradients.forEach(lg => Svg.setGradientColors(lg, theme.pin, theme.pinActive)); + Svg.setGradientColors(this.lightLevelGradient, theme.lightLevelOn, theme.lightLevelOff); } public updateState() { @@ -190,7 +206,8 @@ namespace ks.rt.micro_bit { }) this.updatePins(); this.updateTilt(); - this.updateHeading(); + this.updateHeading(); + this.updateLightLevel(); (this.buttonsOuter[2]).style.visibility = state.usesButtonAB ? 'visible' : 'hidden'; (this.buttons[2]).style.visibility = state.usesButtonAB ? 'visible' : 'hidden'; } @@ -211,11 +228,7 @@ namespace ks.rt.micro_bit { v = pin.touched ? '0%' : '100%'; if (text) text.textContent = ""; } - if (v) { - let lg = this.pinGradients[index]; - (lg.childNodes[1]).setAttribute("offset", v); - (lg.childNodes[2]).setAttribute("offset", v); - } + if (v) Svg.setGradientValue(this.pinGradients[index], v); } private updateHeading() { @@ -278,7 +291,39 @@ namespace ks.rt.micro_bit { if (!state) return; 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() { if (this.props.disableTilt) return; diff --git a/sim/state.ts b/sim/state.ts index 539dca67..98d1c141 100644 --- a/sim/state.ts +++ b/sim/state.ts @@ -162,6 +162,8 @@ namespace ks.rt.micro_bit { heading = 90; temperature = 21; + + usesLightLevel = false; lightLevel = 128; animationQ: AnimationQueue;