fern/sensor-watch
1
0
Fork 0
mirror of https://github.com/firewalkwithm3/Sensor-Watch.git synced 2024-11-22 19:20:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #276 from hchargois/simulator-volume-slider

Browse source 
Simulator volume slider
This commit is contained in:
Wesley Aptekar-Cassels 2023-11-18 23:17:56 -05:00 committed by GitHub
parent 3b9fd8b0e9 2e9ea8c36f
commit c4a5cb463e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 85 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
watch-library/simulator/shell.html
View file

@ -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 &copy; 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 &copy; 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') + ';');
}
);
);
});
}
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);
let skin = getLocalPref("skin", "f91w");
if (!validSkins.includes(skin)) {
skin = "f91w";
}
document.getElementById(skin).checked = true;
setSkin(skin);
}
loadPrefs();
</script>
{{{ SCRIPT }}}

2
watch-library/simulator/watch/watch_buzzer.c
View file

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