From 2e364f4ef9c27424d909480a2150c24f6e649a02 Mon Sep 17 00:00:00 2001 From: Hugo Chargois Date: Sat, 16 Sep 2023 01:39:52 +0200 Subject: [PATCH 1/3] Add a volume slider in the simulator --- watch-library/simulator/shell.html | 48 ++++++++++++++++++-- watch-library/simulator/watch/watch_buzzer.c | 2 +- 2 files changed, 45 insertions(+), 5 deletions(-) diff --git a/watch-library/simulator/shell.html b/watch-library/simulator/shell.html index 335b9534..c1162f7d 100644 --- a/watch-library/simulator/shell.html +++ b/watch-library/simulator/shell.html @@ -882,10 +882,22 @@ -
- - - Original F-91W SVG is © 2020 Alexis Philip,
used here under the terms of the MIT license.
+ + + + + + +
+ + + + Original F-91W SVG is © 2020 Alexis Philip,
used here under the terms of the MIT license. + 		+ +
@@ -981,6 +993,34 @@ ); } toggleSkin(); + + // emulator runs on localhost:8000 which could very well be used by other + // things, so we'll scope our localStorage keys with a prefix + const localStoragePrefix = "sensorwatch_"; + function setLocalPref(key, val) { + localStorage.setItem(localStoragePrefix+key, val); + } + function getLocalPref(key, dfault) { + let pref = localStorage.getItem(localStoragePrefix+key); + if (pref === null) return dfault; + return pref; + } + + volumeGain = 0.1; + function setVolume(vol) { + setLocalPref("volume", vol); + volumeGain = Math.pow(100, (vol / 100) - 1) - 0.01; + } + + function loadPrefs() { + let vol = +getLocalPref("volume", "50"); + if (isNaN(vol) || vol < 0 || vol > 100) { + vol = 50; + } + document.getElementById("volume").value = vol; + setVolume(vol); + } + loadPrefs(); {{{ SCRIPT }}} diff --git a/watch-library/simulator/watch/watch_buzzer.c b/watch-library/simulator/watch/watch_buzzer.c index 68d9a139..211235df 100644 --- a/watch-library/simulator/watch/watch_buzzer.c +++ b/watch-library/simulator/watch/watch_buzzer.c @@ -152,7 +152,7 @@ void watch_set_buzzer_on(void) { } audioContext._oscillator.frequency.value = 1e6/$0; - audioContext._gain.gain.value = 1; + audioContext._gain.gain.value = volumeGain; }, buzzer_period); } From baadb0b43f0fcd5df09c511142f8a320df34f643 Mon Sep 17 00:00:00 2001 From: Hugo Chargois Date: Sat, 16 Sep 2023 02:39:00 +0200 Subject: [PATCH 2/3] Save the selected skin of the simulator in local storage --- watch-library/simulator/shell.html | 32 +++++++++++++++++------------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/watch-library/simulator/shell.html b/watch-library/simulator/shell.html index c1162f7d..583829cc 100644 --- a/watch-library/simulator/shell.html +++ b/watch-library/simulator/shell.html @@ -885,8 +885,8 @@
- - + + Original F-91W SVG is © 2020 Alexis Philip,
used here under the terms of the MIT license. @@ -979,20 +979,17 @@ } } - function toggleSkin() { - var isBlack = document.getElementById('f91w').checked; - Array.from(document.getElementsByClassName("f91w")).forEach( - function(element, index, array) { - element.setAttribute('style', 'display:' + (isBlack ? 'inline':'none') + ';'); + const validSkins = ["f91w", "a158wea9"]; + function setSkin(chosenSkin) { + setLocalPref("skin", chosenSkin); + validSkins.forEach(function(skin) { + Array.from(document.getElementsByClassName(skin)).forEach( + function(element) { + element.setAttribute('style', 'display:' + (skin == chosenSkin ? 'inline':'none') + ';'); } - ); - Array.from(document.getElementsByClassName("a158wea9")).forEach( - function(element, index, array) { - element.setAttribute('style', 'display:' + (isBlack ? 'none':'inline') + ';'); - } - ); + ); + }); } - toggleSkin(); // emulator runs on localhost:8000 which could very well be used by other // things, so we'll scope our localStorage keys with a prefix @@ -1019,6 +1016,13 @@ } document.getElementById("volume").value = vol; setVolume(vol); + + let skin = getLocalPref("skin", "f91w"); + if (!validSkins.includes(skin)) { + skin = "f91w"; + } + document.getElementById(skin).checked = true; + setSkin(skin); } loadPrefs(); From 2e9ea8c36f1af70dfaa8a428a31afe961c48bbef Mon Sep 17 00:00:00 2001 From: Hugo Chargois Date: Sat, 18 Nov 2023 00:28:54 +0100 Subject: [PATCH 3/3] Improve simulator page design --- watch-library/simulator/shell.html | 66 ++++++++++++++++++------------ 1 file changed, 40 insertions(+), 26 deletions(-) diff --git a/watch-library/simulator/shell.html b/watch-library/simulator/shell.html index 583829cc..c8da063e 100644 --- a/watch-library/simulator/shell.html +++ b/watch-library/simulator/shell.html @@ -37,12 +37,13 @@ .highlight { fill: #fff !important; } #skinselect label { display: inline-block; - padding: 8px; + padding: 4px; background-color: black; color: white; border-radius: 8px; border: 2px solid #0e57a9; outline: 4px solid black; + margin: 4px; cursor: pointer; } #skinselect #a158wea-label { @@ -50,13 +51,16 @@ color: black; border-color: black; outline-color: #b68855ff; - + } + h2 { + margin: 8px 0; + font-size: 1em; } -
+

Sensor Watch Emulator

@@ -882,30 +886,40 @@ - - - - - - -
- - - - Original F-91W SVG is © 2020 Alexis Philip,
used here under the terms of the MIT license. - 		- -
-
- -
- - -
- +
+

Skin

+
+ + +
+ +

Volume

+
+ +
+ +

Location

+
+ +
+
+ +
+ +
+ + +
+
+ +

+ Original F-91W SVG is © 2020 Alexis Philip, used here + under the terms of the MIT license. +

+