in sim/visuals/microbit.ts [538:608]
private updateTemperature() {
let state = this.board;
if (!state || !state.thermometerState.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 no-drag",
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: 58, y: 130 }) as SVGTextElement;
if (this.props.runtime)
this.props.runtime.environmentGlobals[pxsim.localization.lf("temperature")] = state.thermometerState.temperature;
this.updateTheme();
let pt = this.element.createSVGPoint();
svg.buttonEvents(this.thermometer,
// move
(ev) => {
let cur = svg.cursorPoint(pt, this.element, ev);
let t = Math.max(0, Math.min(1, (260 - cur.y) / 140))
state.thermometerState.temperature = Math.floor(tmin + t * (tmax - tmin));
this.updateTemperature();
},
// start
ev => { },
// stop
ev => { },
// keydown
(ev) => {
let charCode = (typeof ev.which == "number") ? ev.which : ev.keyCode
if (charCode === 40 || charCode === 37) { // Down/Left arrow
state.thermometerState.temperature--;
if (state.thermometerState.temperature < -5) {
state.thermometerState.temperature = 50;
}
this.updateTemperature();
} else if (charCode === 38 || charCode === 39) { // Up/Right arrow
state.thermometerState.temperature++;
if (state.thermometerState.temperature > 50) {
state.thermometerState.temperature = -5;
}
this.updateTemperature();
}
})
accessibility.makeFocusable(this.thermometer);
accessibility.setAria(this.thermometer, "slider", pxsim.localization.lf("Thermometer"));
this.thermometer.setAttribute("aria-valuemin", "-5");
this.thermometer.setAttribute("aria-valuemax", "50");
this.thermometer.setAttribute("aria-orientation", "vertical");
this.thermometer.setAttribute("aria-valuenow", "21");
this.thermometer.setAttribute("aria-valuetext", "21°C");
}
let t = Math.max(tmin, Math.min(tmax, state.thermometerState.temperature))
let per = Math.floor((state.thermometerState.temperature - tmin) / (tmax - tmin) * 100)
svg.setGradientValue(this.thermometerGradient, 100 - per + "%");
this.thermometerText.textContent = t + "°C";
this.thermometer.setAttribute("aria-valuenow", t.toString());
this.thermometer.setAttribute("aria-valuetext", t + "°C");
accessibility.setLiveContent(t + "°C");
}