emulation of temperature

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;

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;
     }

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;

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();
+               
             (<any>this.buttonsOuter[2]).style.visibility = state.usesButtonAB ? 'visible' : 'hidden';   
             (<any>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 = <SVGRectElement> 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", { 

sim/state.ts

@@ -164,6 +164,7 @@ namespace ks.rt.micro_bit {
         usesHeading = false;
         heading = 90;
 
+        usesTemperature = false;
         temperature = 21;
 
         usesLightLevel = false;