diff options
| -rw-r--r-- | watch-library/simulator/shell.html | 110 | ||||
| -rw-r--r-- | watch-library/simulator/watch/watch_buzzer.c | 2 |
2 files changed, 85 insertions, 27 deletions
diff --git a/watch-library/simulator/shell.html b/watch-library/simulator/shell.html index 335b9534..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; } </style> </head> <body> -<div style="max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; align-items: center;"> +<div style="max-width: 800px; min-width: 400px; margin: 0 auto; padding: 0 1em; display: flex; flex-direction: column; align-items: center;"> <h1 style="text-align: center;">Sensor Watch Emulator</h1> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1271 1311" width="320"> <defs> @@ -882,18 +886,40 @@ </g> </g> </svg> - <table cellpadding="5"><tr><td id="skinselect"> - <input type="radio" id="f91w" name="skin" value="f91w" onclick="toggleSkin()" checked><label for="f91w">F-91W</label> - <input type="radio" name="skin" id="a158wea" value="a158wea" onclick="toggleSkin()"><label id="a158wea-label" for="a158wea">A158WEA-9</label> - </td><td><a href="https://github.com/alexisphilip/Casio-F-91W">Original F-91W SVG</a> is © 2020 Alexis Philip,<br>used here under the terms of the MIT license.</td></tr></table> -</div> -<button onclick="getLocation()">Set location register (will prompt for access)</button> -<br> -<input id="input" style="width: 500px"></input> -<button id="submit" onclick="sendText()">Send</button> -<br> -<textarea id="output" rows="8" style="width: 100%"></textarea> + <div style="display: grid; grid-template-columns: 80px 1fr; align-items: center; margin: 8px 0"> + <h2>Skin</h2> + <div id="skinselect"> + <input type="radio" name="skin" id="f91w" value="f91w" onclick="setSkin(this.value)" checked><label + for="f91w">F-91W</label> + <input type="radio" name="skin" id="a158wea9" value="a158wea9" onclick="setSkin(this.value)"><label + id="a158wea-label" for="a158wea9">A158WEA-9</label> + </div> + + <h2>Volume</h2> + <div> + <input id="volume" name="volume" type="range" min="0" max="100" step="1" oninput="setVolume(this.value)" /> + </div> + + <h2>Location</h2> + <div> + <button onclick="getLocation()">Set register (will prompt for access)</button> + </div> + </div> + + <div style="display: flex; flex-direction: column; width: 100%"> + <textarea id="output" rows="8" style="width: 100%"></textarea> + <div style="display: flex"> + <input id="input" placeholder="Filesystem command (see filesystem.c)" style="flex-grow: 1"></input> + <button id="submit" onclick="sendText()">Send</button> + </div> + </div> + + <p> + <a href="https://github.com/alexisphilip/Casio-F-91W">Original F-91W SVG</a> is © 2020 Alexis Philip, used here + under the terms of the MIT license. + </p> +</div> <script type='text/javascript'> var outputElement = document.getElementById('output'); @@ -967,20 +993,52 @@ } } - 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') + ';'); - } - ); + ); + }); + } + + // 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); + + let skin = getLocalPref("skin", "f91w"); + if (!validSkins.includes(skin)) { + skin = "f91w"; + } + document.getElementById(skin).checked = true; + setSkin(skin); } - toggleSkin(); + loadPrefs(); </script> {{{ 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); } |