hueso/Sensor-Watch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 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
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; } .highlight { fill: #fff !important; }
#skinselect label { #skinselect label {
display: inline-block; display: inline-block;
padding: 8px; padding: 4px;
background-color: black; background-color: black;
color: white; color: white;
border-radius: 8px; border-radius: 8px;
border: 2px solid #0e57a9; border: 2px solid #0e57a9;
outline: 4px solid black; outline: 4px solid black;
margin: 4px;
cursor: pointer; cursor: pointer;
} }
#skinselect #a158wea-label { #skinselect #a158wea-label {
@ -50,13 +51,16 @@
color: black; color: black;
border-color: black; border-color: black;
outline-color: #b68855ff; outline-color: #b68855ff;
}
h2 {
margin: 8px 0;
font-size: 1em;
} }
</style> </style>
</head> </head>
<body> <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> <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"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1271 1311" width="320">
<defs> <defs>
@ -882,18 +886,40 @@
</g> </g>
</g> </g>
</svg> </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> <div style="display: grid; grid-template-columns: 80px 1fr; align-items: center; margin: 8px 0">
<br> <h2>Skin</h2>
<input id="input" style="width: 500px"></input> <div id="skinselect">
<button id="submit" onclick="sendText()">Send</button> <input type="radio" name="skin" id="f91w" value="f91w" onclick="setSkin(this.value)" checked><label
<br> for="f91w">F-91W</label>
<textarea id="output" rows="8" style="width: 100%"></textarea> <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'> <script type='text/javascript'>
var outputElement = document.getElementById('output'); var outputElement = document.getElementById('output');
@ -967,20 +993,52 @@
} }
} }
function toggleSkin() { const validSkins = ["f91w", "a158wea9"];
var isBlack = document.getElementById('f91w').checked; function setSkin(chosenSkin) {
Array.from(document.getElementsByClassName("f91w")).forEach( setLocalPref("skin", chosenSkin);
function(element, index, array) { validSkins.forEach(function(skin) {
element.setAttribute('style', 'display:' + (isBlack ? 'inline':'none') + ';'); 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>
{{{ 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._oscillator.frequency.value = 1e6/$0;
audioContext._gain.gain.value = 1; audioContext._gain.gain.value = volumeGain;
}, buzzer_period); }, buzzer_period);
} }