kopia lustrzana https://github.com/jameshball/osci-render
Clean up unused oscilloscope js and html
rodzic
9017586b39
commit
0939e4f786
|
@ -1,3 +1,5 @@
|
|||
<!-- THIS CODE HAS BEEN HEAVILY ADAPTED FROM https://dood.al/oscilloscope/ AS PERMITTED BY THE AUTHOR -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<style>
|
||||
|
@ -103,22 +105,6 @@
|
|||
disableFilter : false,
|
||||
}
|
||||
|
||||
Number.prototype.toFixedMinus = function(k)
|
||||
{
|
||||
if (this<0) return this.toFixed(k);
|
||||
//else return '\xa0'+this.toFixed(k);
|
||||
else return '+'+this.toFixed(k);
|
||||
}
|
||||
|
||||
console.log()
|
||||
var toggleVisible = function(string)
|
||||
{
|
||||
var element = document.getElementById(string);
|
||||
console.log(element.style.display);
|
||||
if (element.style.display == "none") element.style.display="block";
|
||||
else element.style.display = "none";
|
||||
}
|
||||
|
||||
let timeout;
|
||||
document.addEventListener("mousemove", function() {
|
||||
const buttons = document.getElementById('buttonRow');
|
||||
|
@ -207,240 +193,6 @@
|
|||
<canvas id="crtCanvas" width="800" height="800"></canvas>
|
||||
</div>
|
||||
|
||||
<!--<tr>-->
|
||||
<!--<td> <!--TOP LEFT CONTROL-->
|
||||
<!--<table>-->
|
||||
<!--<tr><td align="center">Gain</td></tr>-->
|
||||
<!--<tr><td><input id="mainGain" type="range" width="200" min="-1" max="4" value=0.0 step=0.05-->
|
||||
<!--oninput="controls.mainGain=mainGain.value; mainGainOutput.value=parseFloat(mainGain.value).toFixedMinus(2)+' '"></td>-->
|
||||
<!-- <td> <output id="mainGainOutput">+0.00</td>-->
|
||||
<!--</tr></table>-->
|
||||
<!--</td>-->
|
||||
<!---->
|
||||
<!--<td> <!--TOP RIGHT CONTROL-->
|
||||
<!--<table>-->
|
||||
<!--<tr><td align="center">Intensity</td></tr>-->
|
||||
<!--<tr><td><input id="exposure" type="range" width="200" min="-2" max="2" value=0.0 step=0.1-->
|
||||
<!--oninput="controls.exposureStops=this.value; exposureOutput.value=parseFloat(this.value).toFixedMinus(1)"></td>-->
|
||||
<!-- <td> <output id="exposureOutput">+0.0</td>-->
|
||||
<!--</tr></table>-->
|
||||
<!--</td>-->
|
||||
<!---->
|
||||
<!--<tr>-->
|
||||
<!--<td> <!--BOTTOM LEFT CONTROL-->
|
||||
<!--<table>-->
|
||||
<!--<tr><td align="center">Audio volume</td></tr>-->
|
||||
<!--<tr><td><input id="audioVolume" type="range" width="200" min="0" max="1" value=1.0 step=0.01-->
|
||||
<!--oninput="controls.audioVolume=this.value; audioVolumeOutput.value=parseFloat(this.value).toFixed(2)"></td>-->
|
||||
<!-- <td> <output id="audioVolumeOutput">1.00</td>-->
|
||||
<!--</tr></table>-->
|
||||
<!--</td>-->
|
||||
<!---->
|
||||
<!---->
|
||||
<!---->
|
||||
<!--<td> <!--BOTTOM RIGHT CONTROL-->
|
||||
<!--<table>-->
|
||||
<!--<tr><td>  -->
|
||||
<!--<input id="swapXY" type="checkbox" onchange="controls.swapXY=this.checked"> Swap x / y-->
|
||||
<!--</td></tr>-->
|
||||
<!--<tr><td>  -->
|
||||
<!--<input id="invertXY" type="checkbox" onchange="controls.invertXY=this.checked"> Invert x and y-->
|
||||
<!--</td></tr>-->
|
||||
<!--</table><div align="right">-->
|
||||
<!--<a href="javascript:toggleVisible('displayNotes'); toggleVisible('generatorNotes'); toggleVisible('micNotes');">(notes)</a>-->
|
||||
<!--</div>-->
|
||||
<!--</td>-->
|
||||
<!---->
|
||||
<!--</tr>-->
|
||||
<!--</table>-->
|
||||
<!---->
|
||||
<!--<hr noshade>-->
|
||||
<!---->
|
||||
<!--<p><b style="font-size:18px">-->
|
||||
<!--<input id="sweepCheckbox" type="checkbox" onchange="controls.sweepOn=this.checked"> SWEEP</b>-->
|
||||
<!---->
|
||||
<!--<table>-->
|
||||
<!--<tr>-->
|
||||
<!--<td>-->
|
||||
<!--<table>-->
|
||||
<!--<tr><td align="center">Trigger value</td></tr>-->
|
||||
<!--<tr><td><input id="trigger" type="range" width="200" min="-1" max="1" value=0.0 step=0.001-->
|
||||
<!--oninput="controls.sweepTriggerValue=0.5*this.value*Math.abs(this.value); triggerOutput.value=parseFloat(controls.sweepTriggerValue).toFixedMinus(2)+' '"></td>-->
|
||||
<!-- <td> <output id="triggerOutput">+0.00</td>-->
|
||||
<!--</tr></table>-->
|
||||
<!--</td>-->
|
||||
<!---->
|
||||
<!--<td>-->
|
||||
<!--<table>-->
|
||||
<!--<tr><td align="center">Milliseconds/div</td></tr>-->
|
||||
<!--<tr><td><input id="msDiv" type="range" width="200" min="0" max="7" value=2 step=1-->
|
||||
<!--oninput="controls.sweepMsDiv=Math.pow(2, this.value-2); msDivOutput.value = controls.sweepMsDiv"></td>-->
|
||||
<!-- <td> <output id="msDivOutput">1</td>-->
|
||||
<!--</tr></table>-->
|
||||
<!--</td>-->
|
||||
<!--</tr>-->
|
||||
<!--</table>-->
|
||||
<!---->
|
||||
<!--<hr noshade>-->
|
||||
<!---->
|
||||
<!---->
|
||||
<!--<table><tr>-->
|
||||
<!---->
|
||||
<!--<td>-->
|
||||
<!--<table>-->
|
||||
<!--<tr><td align="center">Hue</td></tr>-->
|
||||
<!--<tr><td><input id="hue" type="range" width="200" min="0" max="359" value=125 step=1-->
|
||||
<!--oninput="controls.hue=this.value; hueOutput.value=this.value"></td>-->
|
||||
<!-- <td width=35> <output id="hueOutput">125</td>-->
|
||||
<!--</tr>-->
|
||||
<!--<tr><td align="center">Persistence</td></tr>-->
|
||||
<!--<tr><td><input id="persistence" type="range" width="200" min="-1" max="1" value=0 step=0.01-->
|
||||
<!--oninput="controls.persistence=this.value; persistenceOutput.value=parseFloat(this.value).toFixedMinus(1)"></td>-->
|
||||
<!-- <td width=35> <output id="persistenceOutput">0.00</td>-->
|
||||
<!--</tr>-->
|
||||
<!--</table>-->
|
||||
<!--</td>-->
|
||||
<!---->
|
||||
<!--<td>-->
|
||||
<!--<table>-->
|
||||
<!--<tr><td>-->
|
||||
<!--  <input id="freeze" type="checkbox" onchange="controls.freezeImage=this.checked"> Freeze image-->
|
||||
<!--</td></tr>-->
|
||||
<!--<tr><td>-->
|
||||
<!--  <input id="disableFilter" type="checkbox" onchange="controls.disableFilter=this.checked"> Disable upsampling-->
|
||||
<!--</td></tr>-->
|
||||
<!--<tr><td>-->
|
||||
<!--  <input id="hideGrid" type="checkbox"-->
|
||||
<!--onchange="controls.grid=!controls.grid"> Hide graticule-->
|
||||
<!--</td></tr>-->
|
||||
<!--</table>-->
|
||||
<!--</td>-->
|
||||
<!---->
|
||||
<!--</tr></table>-->
|
||||
|
||||
<script>
|
||||
|
||||
var Controls = {
|
||||
generateUrl : function()
|
||||
{
|
||||
var locationString = location.toString();
|
||||
var site = locationString.split('#')[0];
|
||||
//var jsonText = JSON.stringify(getControlsArray());
|
||||
//jsonText = jsonText.replace(/"/g, 'Q');
|
||||
//var hm = encodeURI(jsonText);
|
||||
var text = this.getControlsArray().toString();
|
||||
var hm = encodeURI(text);
|
||||
urlText.value = site+'#'+hm;
|
||||
urlText.select();
|
||||
},
|
||||
|
||||
getControlsArray : function()
|
||||
{
|
||||
var a = [];
|
||||
a.push(mainGain.value);
|
||||
a.push(exposure.value);
|
||||
//a.push(audioVolume.value);
|
||||
a.push(0+swapXY.checked);
|
||||
a.push(0+invertXY.checked);
|
||||
a.push(0+sweepCheckbox.checked);
|
||||
a.push(trigger.value);
|
||||
a.push(msDiv.value);
|
||||
a.push(0+generatorCheckbox.checked);
|
||||
a.push(this.encodeString(xInput.value));
|
||||
a.push(this.encodeString(yInput.value));
|
||||
a.push(aExponent.value);
|
||||
a.push(aValue.value);
|
||||
a.push(bExponent.value);
|
||||
a.push(bValue.value);
|
||||
// don't try to record microphone status
|
||||
a.push(hue.value);
|
||||
a.push(persistence.value);
|
||||
a.push(0+disableFilter.checked);
|
||||
a.push(0+hideGrid.checked);
|
||||
return a;
|
||||
},
|
||||
|
||||
setupControls : function()
|
||||
{
|
||||
var locationString = location.toString();
|
||||
if (!(locationString.includes('#'))) return;
|
||||
var hash = locationString.split('#')[1];
|
||||
var arrayString = decodeURI(hash);
|
||||
var a = arrayString.split(',');
|
||||
this.setupSlider(mainGain, a.shift());
|
||||
this.setupSlider(exposure, a.shift());
|
||||
//this.setupSlider(audioVolume, a.shift());
|
||||
this.setupSlider(audioVolume, "0");
|
||||
this.setupCheckbox(swapXY, a.shift());
|
||||
this.setupCheckbox(invertXY, a.shift());
|
||||
this.setupCheckbox(sweepCheckbox, a.shift());
|
||||
this.setupSlider(trigger, a.shift());
|
||||
this.setupSlider(msDiv, a.shift());
|
||||
this.setupCheckbox(generatorCheckbox, a.shift());
|
||||
this.setupString(xInput, a.shift());
|
||||
this.setupString(yInput, a.shift());
|
||||
this.setupSlider(aExponent, a.shift());
|
||||
this.setupSlider(aValue, a.shift());
|
||||
this.setupSlider(bExponent, a.shift());
|
||||
this.setupSlider(bValue, a.shift());
|
||||
this.setupSlider(hue, a.shift());
|
||||
this.setupSlider(persistence, a.shift());
|
||||
this.setupCheckbox(disableFilter, a.shift());
|
||||
this.setupCheckbox(hideGrid, a.shift());
|
||||
UI.compile();
|
||||
},
|
||||
|
||||
encodeString : function(s)
|
||||
{
|
||||
s=s.replace(/ /g,"");
|
||||
s=s.replace(/,/g,";");
|
||||
return s;
|
||||
},
|
||||
|
||||
decodeString : function(s)
|
||||
{
|
||||
s=s.replace(/;/,",");
|
||||
return s;
|
||||
},
|
||||
|
||||
setupSlider : function(slider, s)
|
||||
{
|
||||
slider.value = parseFloat(s);
|
||||
slider.oninput();
|
||||
},
|
||||
|
||||
setupCheckbox : function(checkbox, s)
|
||||
{
|
||||
checkbox.checked = parseInt(s);
|
||||
checkbox.onchange();
|
||||
},
|
||||
|
||||
setupString : function(inp, s)
|
||||
{
|
||||
inp.value = this.decodeString(s);
|
||||
},
|
||||
|
||||
restoreDefaults : function()
|
||||
{
|
||||
var locationString = location.toString();
|
||||
var site = locationString.split('#')[0];
|
||||
location = site;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -->
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<script id="vertex" type="x-shader">
|
||||
attribute vec2 vertexPosition;
|
||||
void main()
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
// THIS CODE HAS BEEN HEAVILY ADAPTED FROM https://dood.al/oscilloscope/ AS PERMITTED BY THE AUTHOR
|
||||
|
||||
import * as Juce from "./index.js";
|
||||
|
||||
var AudioSystem =
|
||||
|
@ -112,15 +114,8 @@ var Filter =
|
|||
}
|
||||
}
|
||||
|
||||
var UI =
|
||||
{
|
||||
sidebarWidth : 360,
|
||||
}
|
||||
|
||||
var Render =
|
||||
{
|
||||
debug : 0,
|
||||
|
||||
init : function()
|
||||
{
|
||||
this.canvas = document.getElementById("crtCanvas");
|
||||
|
@ -759,7 +754,6 @@ Juce.getNativeFunction("bufferSize")().then(bufferSize => {
|
|||
Render.setupArrays(Filter.nSmoothedSamples);
|
||||
AudioSystem.startSound();
|
||||
requestAnimationFrame(drawCRTFrame);
|
||||
Controls.setupControls();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue