From 8277063e71c5a437ad7bb7e5bf99f5dbce85cc65 Mon Sep 17 00:00:00 2001 From: Peli de Halleux Date: Mon, 14 Mar 2016 14:03:31 -0700 Subject: [PATCH] emulation of temperature --- libs/microbit/input.ts | 2 +- sim/libmbit.ts | 17 +++++++++++---- sim/public/sim.css | 5 +++++ sim/simsvg.ts | 48 ++++++++++++++++++++++++++++++++++++++++-- sim/state.ts | 1 + 5 files changed, 66 insertions(+), 7 deletions(-) diff --git a/libs/microbit/input.ts b/libs/microbit/input.ts index b6b6b335..d205961c 100644 --- a/libs/microbit/input.ts +++ b/libs/microbit/input.ts @@ -108,7 +108,7 @@ namespace input { * Gets the temperature in Celsius degrees (°C). */ //% weight=55 icon="\uf06d" - //% help=functions/temperature shim=uBit.thermometer.getTemperature + //% help=functions/temperature shim=micro_bit::temperature //% blockId=device_temperature block="temperature (°C)" blockGap=8 export function temperature(): number { return 0; diff --git a/sim/libmbit.ts b/sim/libmbit.ts index cb1bffcf..1f076143 100644 --- a/sim/libmbit.ts +++ b/sim/libmbit.ts @@ -259,16 +259,25 @@ namespace ks.rt.micro_bit { var b = board(); if (!b.usesHeading) { b.usesHeading = true; - runtime.queueDisplayUpdate(); + b.updateView(); } return b.heading; } - + + export function temperature(): number { + var b = board(); + if (!b.usesTemperature) { + b.usesTemperature = true; + b.updateView(); + } + return b.temperature; + } + export function getAcceleration(dimension: number): number { let b = board(); if (!b.usesAcceleration) { b.usesAcceleration = true; - runtime.queueDisplayUpdate(); + b.updateView(); } let acc = b.acceleration; switch (dimension) { @@ -283,7 +292,7 @@ namespace ks.rt.micro_bit { let b = board(); if (!b.usesLightLevel) { b.usesLightLevel = true; - runtime.queueDisplayUpdate(); + b.updateView(); } return b.lightLevel; } diff --git a/sim/public/sim.css b/sim/public/sim.css index 4c15e071..eb2eaf3b 100644 --- a/sim/public/sim.css +++ b/sim/public/sim.css @@ -58,6 +58,11 @@ svg.sim { pointer-events: none; } +.sim-thermometer { + stroke:#aaa; + stroke-width: 3px; +} + /* animations */ .sim-flash { animation-name: sim-flash-animation; diff --git a/sim/simsvg.ts b/sim/simsvg.ts index e1efae95..a23e97e4 100644 --- a/sim/simsvg.ts +++ b/sim/simsvg.ts @@ -165,6 +165,9 @@ namespace ks.rt.micro_bit { private lightLevelButton: SVGCircleElement; private lightLevelGradient : SVGLinearGradientElement; private lightLevelText: SVGTextElement; + private thermometerGradient : SVGLinearGradientElement; + private thermometer: SVGRectElement; + private thermometerText: SVGTextElement; public board: rt.micro_bit.Board; constructor(public props: IBoardProps) { @@ -188,6 +191,8 @@ namespace ks.rt.micro_bit { this.pinGradients.forEach(lg => Svg.setGradientColors(lg, theme.pin, theme.pinActive)); Svg.setGradientColors(this.lightLevelGradient, theme.lightLevelOn, theme.lightLevelOff); + + Svg.setGradientColors(this.thermometerGradient, theme.ledOff, theme.ledOn); } public updateState() { @@ -208,7 +213,9 @@ namespace ks.rt.micro_bit { this.updatePins(); this.updateTilt(); this.updateHeading(); - this.updateLightLevel(); + this.updateLightLevel(); + this.updateTemperature(); + (this.buttonsOuter[2]).style.visibility = state.usesButtonAB ? 'visible' : 'hidden'; (this.buttons[2]).style.visibility = state.usesButtonAB ? 'visible' : 'hidden'; } @@ -235,6 +242,43 @@ namespace ks.rt.micro_bit { if (v) Svg.setGradientValue(this.pinGradients[index], v); } + private updateTemperature() { + let state = this.board; + if (!state || !state.usesTemperature) return; + + let tmin = -5; + let tmax = 50; + if (!this.thermometer) { + let gid = "gradient-thermometer"; + this.thermometerGradient = Svg.linearGradient(this.defs, gid); + this.thermometer = Svg.child(this.g, "rect", { + class: "sim-thermometer", + x:120, + y:110, + width:20, + height:160, + rx:5, ry:5, + fill:`url(#${gid})` + }); + this.thermometerText = Svg.child(this.g, "text", { class:'sim-text', x:75, y:130}) as SVGTextElement; + this.updateTheme(); + + let pt = this.element.createSVGPoint(); + Svg.buttonEvents(this.thermometer, + (ev) => { + let cur = Svg.cursorPoint(pt, this.element, ev); + let t = Math.max(0, Math.min(1, (260 - cur.y) / 140)) + state.temperature = Math.floor(tmin + t * (tmax-tmin)); + this.updateTemperature(); + }, ev => {}, ev => {}) + } + + let t = Math.max(tmin, Math.min(tmax, state.temperature)) + let per = Math.floor((state.temperature - tmin) / (tmax-tmin)*100) + Svg.setGradientValue(this.thermometerGradient, 100 - per + '%'); + this.thermometerText.textContent = t + '°'; + } + private updateHeading() { let xc = 258; let yc = 75; @@ -303,7 +347,7 @@ namespace ks.rt.micro_bit { if (!this.lightLevelButton) { let gid= "gradient-light-level"; - this.lightLevelGradient = Svg.linearGradient(this.defs, "gradient-light-level") + this.lightLevelGradient = Svg.linearGradient(this.defs, gid) let cy = 50; let r = 35; this.lightLevelButton = Svg.child(this.g, "circle", { diff --git a/sim/state.ts b/sim/state.ts index 8a8d7482..3992a8c9 100644 --- a/sim/state.ts +++ b/sim/state.ts @@ -164,6 +164,7 @@ namespace ks.rt.micro_bit { usesHeading = false; heading = 90; + usesTemperature = false; temperature = 21; usesLightLevel = false;