c_meyer/pxt-calliope
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

display light level value

Browse Source
This commit is contained in:
Peli de Halleux 2016-03-11 15:10:36 -08:00
parent cd15823b62
commit 994aee0db5
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sim/public/sim.css
View File

@ -48,12 +48,14 @@ svg.sim {
font-family:monospace; font-family:monospace;
font-size:25px; font-size:25px;
fill:#fff; fill:#fff;
pointer-events: none;
} }
.sim-text-pin { .sim-text-pin {
font-family:monospace; font-family:monospace;
font-size:20px; font-size:20px;
fill:#fff; fill:#fff;
pointer-events: none;
} }
/* animations */ /* animations */

16
sim/simsvg.ts
View File

@ -164,6 +164,7 @@ namespace ks.rt.micro_bit {
private antenna: SVGPolylineElement; private antenna: SVGPolylineElement;
private lightLevelButton: SVGCircleElement; private lightLevelButton: SVGCircleElement;
private lightLevelGradient : SVGLinearGradientElement; private lightLevelGradient : SVGLinearGradientElement;
private lightLevelText: SVGTextElement;
public board: rt.micro_bit.Board; public board: rt.micro_bit.Board;
constructor(public props: IBoardProps) { constructor(public props: IBoardProps) {
@ -301,7 +302,7 @@ namespace ks.rt.micro_bit {
let gid= "gradient-light-level"; let gid= "gradient-light-level";
this.lightLevelGradient = Svg.linearGradient(this.defs, "gradient-light-level") this.lightLevelGradient = Svg.linearGradient(this.defs, "gradient-light-level")
let cy = 50; let cy = 50;
let r = 30; let r = 35;
this.lightLevelButton = Svg.child(this.g, "circle", { this.lightLevelButton = Svg.child(this.g, "circle", {
cx: `50px`, cy: `${cy}px`, r: `${r}px`, cx: `50px`, cy: `${cy}px`, r: `${r}px`,
class:'sim-light-level-button', class:'sim-light-level-button',
@ -310,21 +311,28 @@ namespace ks.rt.micro_bit {
Svg.buttonEvents(this.lightLevelButton, Svg.buttonEvents(this.lightLevelButton,
(ev) => { (ev) => {
let pos = Svg.cursorPoint(pt, this.element, ev); let pos = Svg.cursorPoint(pt, this.element, ev);
let rs = r*2/3; let rs = r/2;
let level = Math.max(0, Math.min(255, Math.floor((pos.y - (cy-rs)) / (2*rs) * 255))); 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) { if (level != this.board.lightLevel) {
this.board.lightLevel = level; this.board.lightLevel = level;
this.applyLightLevel();
} }
}, ev => {}, }, ev => {},
ev => {}) ev => {})
this.lightLevelText = Svg.child(this.g, "text", { x:85, y:cy+r-5, text:'', class:'sim-text'}) as SVGTextElement;
this.updateTheme(); this.updateTheme();
} }
Svg.setGradientValue(this.lightLevelGradient, Math.min(100, Math.max(0, Math.floor(state.lightLevel * 100 / 255))) + '%') Svg.setGradientValue(this.lightLevelGradient, Math.min(100, Math.max(0, Math.floor(state.lightLevel * 100 / 255))) + '%')
this.lightLevelText.textContent = state.lightLevel.toString();
} }
private applyLightLevel() {
let lv = this.board.lightLevel;
Svg.setGradientValue(this.lightLevelGradient, Math.min(100, Math.max(0, Math.floor(lv * 100 / 255))) + '%')
this.lightLevelText.textContent = lv.toString();
}
private updateTilt() { private updateTilt() {
if (this.props.disableTilt) return; if (this.props.disableTilt) return;
let state = this.board; let state = this.board;