in sim/visuals/board.ts [663:726]
private updateSoundLevel() {
let state = this.board;
if (!state || !state.microphoneState.sensorUsed) return;
if (!this.soundLevelButton) {
let gid = "gradient-sound-level";
this.soundLevelGradient = svg.linearGradient(this.defs, gid)
let cy = 165;
let r = 10;
this.soundLevelButton = svg.child(this.g, "circle", {
cx: `12px`, cy: `${cy}px`, r: `${r}px`,
class: 'sim-sound-level-button no-drag',
fill: `url(#${gid})`
}) as SVGCircleElement;
let pt = this.element.createSVGPoint();
svg.buttonEvents(this.soundLevelButton,
// move
(ev) => {
let pos = svg.cursorPoint(pt, this.element, ev);
let rs = r / 2;
let level = Math.max(0, Math.min(255, Math.floor((pos.y - (cy - rs)) / (2 * rs) * 255)));
if (level != this.board.microphoneState.getLevel()) {
this.board.microphoneState.setLevel(255 - level);
this.applySoundLevel();
}
},
// start
ev => { },
// stop
ev => { },
// keydown
(ev) => {
let charCode = (typeof ev.which == "number") ? ev.which : ev.keyCode
if (charCode === 40 || charCode === 37) { // Down/Left arrow
if (this.board.microphoneState.getLevel() === 0) {
this.board.microphoneState.setLevel(255);
} else {
this.board.microphoneState.setLevel(this.board.microphoneState.getLevel() - 1);
}
this.applySoundLevel();
} else if (charCode === 38 || charCode === 39) { // Up/Right arrow
if (this.board.microphoneState.getLevel() === 255) {
this.board.microphoneState.setLevel(0);
} else {
this.board.microphoneState.setLevel(this.board.microphoneState.getLevel() + 1);
}
this.applySoundLevel();
}
});
this.soundLevelText = svg.child(this.g, "text", { x: 23, y: cy + r - 3, text: '', class: 'sim-text' }) as SVGTextElement;
this.updateTheme();
accessibility.makeFocusable(this.soundLevelButton);
accessibility.setAria(this.soundLevelButton, "slider", "Noise level");
this.soundLevelButton.setAttribute("aria-valuemin", "0");
this.soundLevelButton.setAttribute("aria-valuemax", "255");
this.soundLevelButton.setAttribute("aria-orientation", "vertical");
this.soundLevelButton.setAttribute("aria-valuenow", "128");
}
svg.setGradientValue(this.soundLevelGradient, Math.min(100, Math.max(0, Math.floor((255 - state.microphoneState.getLevel()) * 100 / 255))) + '%')
this.soundLevelText.textContent = state.microphoneState.getLevel().toString();
}