Add a volume slider in the simulator

watch-library/simulator/shell.html

@@ -882,10 +882,22 @@
       </g>
     </g>
   </svg>
-  <table cellpadding="5"><tr><td id="skinselect">
+  <table cellpadding="5">
-          <input type="radio" id="f91w" name="skin" value="f91w" onclick="toggleSkin()" checked><label for="f91w">F-91W</label>
+    <tr>
-      <input type="radio" name="skin" id="a158wea" value="a158wea" onclick="toggleSkin()"><label id="a158wea-label" for="a158wea">A158WEA-9</label>
+      <td id="skinselect">
-  </td><td><a href="https://github.com/alexisphilip/Casio-F-91W">Original F-91W SVG</a> is &copy; 2020 Alexis Philip,<br>used here under the terms of the MIT license.</td></tr></table>
+        <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 &copy; 2020 Alexis Philip,<br>used here under the terms of the MIT license.
+      </td>
+      <td>
+        <label>Volume
+          <input id="volume" name="volume" type="range" min="0" max="100" step="1" oninput="setVolume(this.value)"/>
+        </label>
+      </td>
+    </tr>
+  </table>
 </div>
 
 <button onclick="getLocation()">Set location register (will prompt for access)</button>
@@ -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>
 {{{ SCRIPT }}}
 

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);
 }