fruchti/colorchord
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Adds range bars to scale OSC and DFT

Browse source 
Signed-off-by: cronzon <cronzon@switchfly.com>
This commit is contained in:
cronzon 2016-07-27 21:16:33 +00:00
parent f8deeef7e6
commit af6c184dca
2 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
embedded8266/web/page/index.html
View file

@ -14,6 +14,9 @@ td { vertical-align: top; }
.inbutton { background-color:blue; }
#SystemMessage { position: fixed; top: 5px; background-color: DarkSlateBlue; color: #ffffff; left: 5px; display:none; }
.dragandrophandler { border:2px dotted #0B85A1; color:#92AAB0;vertical-align:middle;padding:10px 10px 10 10px;margin-bottom:10px;font-size:200%;}
input[type="range"] {position: relative;margin-left: 1em;}
input[type="range"]:after, input[type="range"]:before {position: absolute;top: 1em;color: #aaa;}
input[type="range"]:before {left:0em; content: attr(min);}input[type="range"]:after {right: 0em;content: attr(max);}
</style>
</head>
<body>
@ -38,7 +41,7 @@ td { vertical-align: top; }
<div id=OScope class="collapsible">
<table width=100% border=1><tr><td width=10%>
<CANVAS id=OScopeCanvas width=512></CANVAS>
</td><td><input type=button onclick="ToggleOScopePause();" id=OScopePauseButton value="|| / >"></td></tr></table></div></td></tr>
</td><td><input type=button onclick="ToggleOScopePause();" id=OScopePauseButton value="|| / >"><input id="OSCMultIn" type="range" value="1" max="5" min="0" step="0.1"><output id="OSCMultOut"></output></td></tr></table></div></td></tr>
<tr><td width=1>
@ -47,7 +50,7 @@ td { vertical-align: top; }
<table width=100% border=1><tr><td width=10%>
<CANVAS id=DFTCanvas width=512></CANVAS>
</td><td><select id=WhichCanvas><option value=0>DFT</option><option value=1>Fuzzed</option><option value=2>Folded</option></select>
<br><input type=button onclick="ToggleDFTPause();" id=DFTPauseButton value="|| / >"></td></tr></table></div></td></tr>
<br><input type=button onclick="ToggleDFTPause();" id=DFTPauseButton value="|| / >"><input id="DFTMultIn" type="range" value="1" max="20" min="0" step="0.1"><output id="DFTMultOut"></output></td></tr></table></div></td></tr>
<tr><td width=1>

10
embedded8266/web/page/main.js
View file

@ -102,6 +102,8 @@ function ToggleOScopePause()
function GotOScope(req,data)
{
var mult = Number(document.getElementById('OSCMultIn').value);
document.getElementById('OSCMultOut').innerHTML = mult;
var canvas = document.getElementById('OScopeCanvas');
var ctx = canvas.getContext('2d');
var h = canvas.height;
@ -122,12 +124,12 @@ function GotOScope(req,data)
{
var x2 = (i+1) * canvas.clientWidth / samps;
var samp = parseInt( data.substr(i*2+2,2),16 );
var y2 = ( 1.-samp / 255 ) * canvas.clientHeight;
var y2 = ( 1.-mult*samp / 255 ) * canvas.clientHeight;
if( i == 0 )
{
var x1 = i * canvas.clientWidth / samps;
var y1 = ( 1.-lastsamp / 255 ) * canvas.clientHeight;
var y1 = ( 1.-mult*lastsamp / 255 ) * canvas.clientHeight;
ctx.moveTo( x1, y1 );
}
@ -184,6 +186,8 @@ function ToggleDFTPause()
function GotDFT(req,data)
{
var mult = Number(document.getElementById('DFTMultIn').value);
document.getElementById('DFTMultOut').innerHTML = mult;
var canvas = document.getElementById('DFTCanvas');
var ctx = canvas.getContext('2d');
var h = canvas.height;
@ -205,7 +209,7 @@ function GotDFT(req,data)
{
var x2 = i * canvas.clientWidth / samps;
var samp = parseInt( data.substr(i*4,4),16 );
var y2 = ( 1.-samp / 2047 ) * canvas.clientHeight;
var y2 = ( 1.-mult*samp / 2047 ) * canvas.clientHeight;
ctx.fillStyle = CCColor( i % globalParams["rFIXBPERO"] );
ctx.fillRect( x2, y2, canvas.clientWidth / samps, canvas.clientHeight-y2 );