major changes to the backend for controlling the ESP8266 ColorChord.
A new challenger has arrived. It looks like basically... any network traffic causes glitches in the ADC in. Not sure how to attack that yet.
This commit is contained in:
cnlohr
parent
666d8077ab
commit
c4669ce825
12 changed files with 693 additions and 56 deletions
|
|
@ -8,6 +8,7 @@
|
|||
table { width: 100%; }
|
||||
td { vertical-align: top; }
|
||||
.collapsible { display:none; }
|
||||
.inbutton { background-color:blue; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -20,18 +21,18 @@ td { vertical-align: top; }
|
|||
<input type=submit onclick="ShowHideEvent( 'SystemStatus' );" value="System Status" id=SystemStatusClicker></td><td>
|
||||
<div id=SystemStatus class="collapsible">
|
||||
<table width=100% border=1><tr><td>
|
||||
<div id=output></div>
|
||||
</td></tr></table></td></tr>
|
||||
<div id=output>
|
||||
</td></tr></table></div></td></tr>
|
||||
|
||||
<tr><td width=1>
|
||||
<input type=submit onclick="ShowHideEvent( 'Introduction' );" value="Introduction"></td><td>
|
||||
<div id=Introduction class="collapsible">
|
||||
<table border=1><tr><td>
|
||||
System Info...<br>line2<br>line3
|
||||
</td></tr></table></td></tr>
|
||||
</div></td></tr></table></td></tr>
|
||||
|
||||
<tr><td width=1>
|
||||
<input type=submit onclick="ShowHideEvent( 'WifiSettings' );" value="Wifi Settings"></td><td>
|
||||
<input type=submit onclick="ShowHideEvent( 'WifiSettings' ); KickWifiTicker();" value="Wifi Settings"></td><td>
|
||||
<div id=WifiSettings class="collapsible">
|
||||
<table width=100% border=1><tr><td>
|
||||
Current Configuration:<form name="wifisection" action="javascript:ChangeWifiConfig();">
|
||||
|
|
@ -43,11 +44,10 @@ Current Configuration:<form name="wifisection" action="javascript:ChangeWifiConf
|
|||
<tr><td>Chan:</td><td><input type="text" id="wificurchannel"> (Ignored in Station mode)</td></tr></tr>
|
||||
<tr><td></td><td><input type=submit value="Change Settings"></td></tr>
|
||||
</form></table>
|
||||
|
||||
Scanned Stations:
|
||||
<div id=WifiStations></div>
|
||||
<input type=submit onclick="QueueOperation('ws', null);" value="Scan For Stations (Will disconnect!)">
|
||||
</td></tr></table></td></tr>
|
||||
</td></tr></table></div></td></tr>
|
||||
|
||||
<tr><td width=1>
|
||||
<input type=submit onclick="ShowHideEvent( 'CustomCommand' );" value="Custom Command"></td><td>
|
||||
|
|
@ -58,6 +58,41 @@ Command: <input type=text id=custom_command>
|
|||
<textarea id=custom_command_response readonly rows=15 cols=80></textarea>
|
||||
</td></tr></table></td></tr>
|
||||
|
||||
<tr><td width=1>
|
||||
<input type=submit onclick="ShowHideEvent( 'GPIOs' ); GPIODataTicker();" value="GPIOs"></td><td>
|
||||
<div id=GPIOs class="collapsible">
|
||||
<table width=100% border=1><tr>
|
||||
<td align=center>0<input type=button id=ButtonGPIO0 value=0 onclick="TwiddleGPIO(0);"><input type=button id=BGPIOIn0 value=In onclick="GPIOInput(0);" class="inbutton"></td>
|
||||
<td align=center>1<input type=button id=ButtonGPIO1 value=0 onclick="TwiddleGPIO(1);"><input type=button id=BGPIOIn1 value=In onclick="GPIOInput(1);" class="inbutton"></td>
|
||||
<td align=center>2<input type=button id=ButtonGPIO2 value=0 onclick="TwiddleGPIO(2);"><input type=button id=BGPIOIn2 value=In onclick="GPIOInput(2);" class="inbutton"></td>
|
||||
<td align=center>3<input type=button id=ButtonGPIO3 value=0 onclick="TwiddleGPIO(3);"><input type=button id=BGPIOIn3 value=In onclick="GPIOInput(3);" class="inbutton"></td>
|
||||
<td align=center>4<input type=button id=ButtonGPIO4 value=0 onclick="TwiddleGPIO(4);"><input type=button id=BGPIOIn4 value=In onclick="GPIOInput(4);" class="inbutton"></td>
|
||||
<td align=center>5<input type=button id=ButtonGPIO5 value=0 onclick="TwiddleGPIO(5);"><input type=button id=BGPIOIn5 value=In onclick="GPIOInput(5);" class="inbutton"></td>
|
||||
<td>...</td>
|
||||
<td align=center>12<input type=button id=ButtonGPIO12 value=0 onclick="TwiddleGPIO(12);"><input type=button id=BGPIOIn12 value=In onclick="GPIOInput(12);" class="inbutton"></td>
|
||||
<td align=center>13<input type=button id=ButtonGPIO13 value=0 onclick="TwiddleGPIO(13);"><input type=button id=BGPIOIn13 value=In onclick="GPIOInput(13);" class="inbutton"></td>
|
||||
<td align=center>14<input type=button id=ButtonGPIO14 value=0 onclick="TwiddleGPIO(14);"><input type=button id=BGPIOIn14 value=In onclick="GPIOInput(14);" class="inbutton"></td>
|
||||
<td align=center>15<input type=button id=ButtonGPIO15 value=0 onclick="TwiddleGPIO(15);"><input type=button id=BGPIOIn15 value=In onclick="GPIOInput(15);" class="inbutton"></td>
|
||||
</tr></table></div></td></tr>
|
||||
|
||||
|
||||
|
||||
<tr><td width=1>
|
||||
<input type=submit onclick="ShowHideEvent( 'OScope' ); KickOscilloscope();" value="Oscilloscope"></td><td>
|
||||
<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>
|
||||
|
||||
|
||||
<tr><td width=1>
|
||||
<input type=submit onclick="ShowHideEvent( 'DFT' ); KickDFT();" value="DFT"></td><td>
|
||||
<div id=DFT class="collapsible">
|
||||
<table width=100% border=1><tr><td width=100%>
|
||||
<CANVAS id=DFTCanvas width=512></CANVAS>
|
||||
</td></tr></table></div></td></tr>
|
||||
|
||||
|
||||
|
||||
</table>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,10 +8,17 @@ var commsup = 0;
|
|||
// .callback = function( ref (this object), data );
|
||||
|
||||
var workqueue = [];
|
||||
var workarray = {};
|
||||
var lastitem;
|
||||
|
||||
function QueueOperation( command, callback )
|
||||
{
|
||||
if( workarray[command] == 1 )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
workarray[command] = 1;
|
||||
var vp = new Object();
|
||||
vp.callback = callback;
|
||||
vp.request = command;
|
||||
|
|
@ -25,16 +32,20 @@ function init()
|
|||
if( localStorage["sh" + this.id] > 0.5 )
|
||||
{
|
||||
$( this ).show().toggleClass( 'opened' );
|
||||
// console.log( "OPEN: " + this.id );
|
||||
}
|
||||
});
|
||||
|
||||
$("#custom_command_response").val( "" );
|
||||
|
||||
|
||||
output = document.getElementById("output");
|
||||
Ticker();
|
||||
|
||||
|
||||
WifiDataTicker();
|
||||
KickWifiTicker();
|
||||
GPIODataTickerStart();
|
||||
KickOscilloscope();
|
||||
KickDFT();
|
||||
}
|
||||
|
||||
function StartWebSocket()
|
||||
|
|
@ -98,6 +109,7 @@ function onMessage(evt)
|
|||
if( workqueue.length )
|
||||
{
|
||||
var elem = workqueue.shift();
|
||||
delete workarray[elem.request];
|
||||
if( elem.request )
|
||||
{
|
||||
doSend( elem.request );
|
||||
|
|
@ -121,7 +133,12 @@ function doSend(message)
|
|||
websocket.send(message);
|
||||
}
|
||||
|
||||
|
||||
function IsTabOpen( objname )
|
||||
{
|
||||
var obj = $( "#" + objname );
|
||||
var opened = obj.is( '.opened' );
|
||||
return opened != 0;
|
||||
}
|
||||
|
||||
function ShowHideEvent( objname )
|
||||
{
|
||||
|
|
@ -129,6 +146,7 @@ function ShowHideEvent( objname )
|
|||
obj.slideToggle( 'fast' ).toggleClass( 'opened' );
|
||||
var opened = obj.is( '.opened' );
|
||||
localStorage["sh" + objname] = opened?1:0;
|
||||
return opened!=0;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -149,49 +167,218 @@ window.addEventListener("load", init, false);
|
|||
|
||||
///////// Various functions that are not core appear down here.
|
||||
|
||||
is_oscilloscope_running = false;
|
||||
pause_oscilloscope = false;
|
||||
|
||||
function KickOscilloscope()
|
||||
{
|
||||
$( "#OScopePauseButton" ).css( "background-color", (is_oscilloscope_running&&pause_oscilloscope)?"green":"red" );
|
||||
if( !is_oscilloscope_running && !pause_oscilloscope)
|
||||
OScopeDataTicker();
|
||||
}
|
||||
|
||||
function ToggleOScopePause()
|
||||
{
|
||||
pause_oscilloscope = !pause_oscilloscope;
|
||||
KickOscilloscope();
|
||||
}
|
||||
|
||||
function GotOScope(req,data)
|
||||
{
|
||||
var canvas = document.getElementById('OScopeCanvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
var h = canvas.height;
|
||||
var w = canvas.width;
|
||||
if( ctx.canvas.width != canvas.clientWidth ) ctx.canvas.width = canvas.clientWidth;
|
||||
if( ctx.canvas.height != canvas.clientHeight ) ctx.canvas.height = canvas.clientHeight;
|
||||
|
||||
$( "#OScopePauseButton" ).css( "background-color", "green" );
|
||||
|
||||
var secs = data.split( ":" );
|
||||
|
||||
var samps = Number( secs[1] );
|
||||
var data = secs[2];
|
||||
var lastsamp = parseInt( data.substr(0,2),16 );
|
||||
ctx.clearRect( 0, 0, canvas.width, canvas.height );
|
||||
ctx.beginPath();
|
||||
for( var i = 0; i < samps; i++ )
|
||||
{
|
||||
var x2 = (i+1) * canvas.clientWidth / samps;
|
||||
var samp = parseInt( data.substr(i*2+2,2),16 );
|
||||
var y2 = ( 1.-samp / 255 ) * canvas.clientHeight;
|
||||
|
||||
if( i == 0 )
|
||||
{
|
||||
var x1 = i * canvas.clientWidth / samps;
|
||||
var y1 = ( 1.-lastsamp / 255 ) * canvas.clientHeight;
|
||||
ctx.moveTo( x1, y1 );
|
||||
}
|
||||
|
||||
ctx.lineTo( x2, y2 );
|
||||
|
||||
lastsamp = samp;
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
var samp = parseInt( data.substr(i*2,2),16 );
|
||||
|
||||
OScopeDataTicker();
|
||||
}
|
||||
|
||||
function OScopeDataTicker()
|
||||
{
|
||||
if( IsTabOpen('OScope') && !pause_oscilloscope )
|
||||
{
|
||||
is_oscilloscope_running = true;
|
||||
QueueOperation( "CM", GotOScope );
|
||||
}
|
||||
else
|
||||
{
|
||||
is_oscilloscope_running = 0;
|
||||
}
|
||||
$( "#OScopePauseButton" ).css( "background-color", (is_oscilloscope_running&&!pause_oscilloscope)?"green":"red" );
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
is_dft_running = false;
|
||||
|
||||
function KickDFT()
|
||||
{
|
||||
if( !is_dft_running )
|
||||
DFTDataTicker();
|
||||
|
||||
}
|
||||
|
||||
function GotDFT(req,data)
|
||||
{
|
||||
var canvas = document.getElementById('DFTCanvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
var h = canvas.height;
|
||||
var w = canvas.width;
|
||||
if( ctx.canvas.width != canvas.clientWidth ) ctx.canvas.width = canvas.clientWidth;
|
||||
if( ctx.canvas.height != canvas.clientHeight ) ctx.canvas.height = canvas.clientHeight;
|
||||
|
||||
var secs = data.split( ":" );
|
||||
|
||||
var samps = Number( secs[1] );
|
||||
var data = secs[2];
|
||||
var lastsamp = parseInt( data.substr(0,4),16 );
|
||||
ctx.clearRect( 0, 0, canvas.width, canvas.height );
|
||||
ctx.beginPath();
|
||||
for( var i = 0; i < samps; i++ )
|
||||
{
|
||||
var x2 = (i+1) * canvas.clientWidth / samps;
|
||||
var samp = parseInt( data.substr(i*4+4,4),16 );
|
||||
var y2 = ( 1.-samp / 2047 ) * canvas.clientHeight;
|
||||
|
||||
if( i == 0 )
|
||||
{
|
||||
var x1 = i * canvas.clientWidth / samps;
|
||||
var y1 = ( 1.-lastsamp / 2047 ) * canvas.clientHeight;
|
||||
ctx.moveTo( x1, y1 );
|
||||
}
|
||||
|
||||
ctx.lineTo( x2, y2 );
|
||||
|
||||
lastsamp = samp;
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
var samp = parseInt( data.substr(i*2,2),16 );
|
||||
|
||||
DFTDataTicker();
|
||||
}
|
||||
|
||||
function DFTDataTicker()
|
||||
{
|
||||
if( IsTabOpen('DFT') )
|
||||
{
|
||||
is_dft_running = true;
|
||||
QueueOperation( "CB", GotDFT );
|
||||
}
|
||||
else
|
||||
{
|
||||
is_dft_running = 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
did_wifi_get_config = false;
|
||||
is_data_ticker_running = false;
|
||||
|
||||
function KickWifiTicker()
|
||||
{
|
||||
if( !is_data_ticker_running )
|
||||
WifiDataTicker();
|
||||
}
|
||||
|
||||
function WifiDataTicker()
|
||||
{
|
||||
if( !did_wifi_get_config )
|
||||
if( IsTabOpen('WifiSettings') )
|
||||
{
|
||||
QueueOperation( "WI", function(req,data)
|
||||
{
|
||||
var params = data.split( "\t" );
|
||||
|
||||
document.wifisection.wifitype.value = Number( params[0].substr(2) );
|
||||
document.wifisection.wificurname.value = params[1];
|
||||
document.wifisection.wificurpassword.value = params[2];
|
||||
document.wifisection.wificurenctype.value = params[3];
|
||||
document.wifisection.wificurchannel.value = Number( params[4] );
|
||||
is_data_ticker_running = true;
|
||||
|
||||
did_wifi_get_config = true;
|
||||
} );
|
||||
}
|
||||
|
||||
|
||||
QueueOperation( "WR", function(req,data) {
|
||||
var lines = data.split( "\n" );
|
||||
var innerhtml;
|
||||
if( lines.length < 3 )
|
||||
if( !did_wifi_get_config )
|
||||
{
|
||||
innerhtml = "No APs found. Did you scan?";
|
||||
}
|
||||
else
|
||||
{
|
||||
innerhtml = "<TABLE border=1><TR><TH>SSID</TH><TH>MAC</TH><TH>RS</TH><TH>Ch</TH><TH>Enc</TH></TR>"
|
||||
for( i = 1; i < lines.length-1; i++ )
|
||||
QueueOperation( "WI", function(req,data)
|
||||
{
|
||||
var dats = lines[i].split( "\t" );
|
||||
innerhtml += "<TR><TD>" + dats[0] + "</TD><TD>" + dats[1] + "</TD><TD>" + dats[2] + "</TD><TD>" + dats[3] + "</TD><TD>" + dats[4] + "</TD></TR>";
|
||||
}
|
||||
}
|
||||
innerhtml += "</HTML>";
|
||||
document.getElementById("WifiStations").innerHTML = innerhtml;
|
||||
} );
|
||||
var params = data.split( "\t" );
|
||||
|
||||
document.wifisection.wifitype.value = Number( params[0].substr(2) );
|
||||
document.wifisection.wificurname.value = params[1];
|
||||
document.wifisection.wificurpassword.value = params[2];
|
||||
document.wifisection.wificurenctype.value = params[3];
|
||||
document.wifisection.wificurchannel.value = Number( params[4] );
|
||||
|
||||
setTimeout( WifiDataTicker, 1000 );
|
||||
did_wifi_get_config = true;
|
||||
} );
|
||||
}
|
||||
|
||||
|
||||
QueueOperation( "WR", function(req,data) {
|
||||
var lines = data.split( "\n" );
|
||||
var innerhtml;
|
||||
if( lines.length < 3 )
|
||||
{
|
||||
innerhtml = "No APs found. Did you scan?";
|
||||
}
|
||||
else
|
||||
{
|
||||
innerhtml = "<TABLE border=1><TR><TH>SSID</TH><TH>MAC</TH><TH>RS</TH><TH>Ch</TH><TH>Enc</TH></TR>"
|
||||
for( i = 1; i < lines.length-1; i++ )
|
||||
{
|
||||
var dats = lines[i].split( "\t" );
|
||||
innerhtml += "<TR><TD>" + dats[0] + "</TD><TD>" + dats[1] + "</TD><TD>" + dats[2] + "</TD><TD>" + dats[3] + "</TD><TD>" + dats[4] + "</TD></TR>";
|
||||
}
|
||||
}
|
||||
innerhtml += "</TABLE>";
|
||||
document.getElementById("WifiStations").innerHTML = innerhtml;
|
||||
} );
|
||||
setTimeout( WifiDataTicker, 500 );
|
||||
}
|
||||
else
|
||||
{
|
||||
is_data_ticker_running = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function ChangeWifiConfig()
|
||||
|
|
@ -206,3 +393,85 @@ function ChangeWifiConfig()
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function TwiddleGPIO( gp )
|
||||
{
|
||||
var st = "GF";
|
||||
st += gp;
|
||||
QueueOperation( st );
|
||||
}
|
||||
|
||||
function GPIOInput( gp )
|
||||
{
|
||||
var st = "GI";
|
||||
st += gp;
|
||||
QueueOperation( st );
|
||||
}
|
||||
|
||||
function GPIOUpdate(req,data) {
|
||||
var secs = data.split( ":" );
|
||||
var op = 0;
|
||||
var n = Number(secs[2]);
|
||||
var m = Number(secs[1]);
|
||||
|
||||
for( op = 0; op < 16; op++ )
|
||||
{
|
||||
var b = $( "#ButtonGPIO" + op );
|
||||
if( b )
|
||||
{
|
||||
if( 1<<op & n )
|
||||
{
|
||||
b.css("background-color","red" );
|
||||
b.css("color","black" );
|
||||
b.prop( "value", "1" );
|
||||
}
|
||||
else
|
||||
{
|
||||
b.css("background-color","black" );
|
||||
b.css("color","white" );
|
||||
b.prop( "value", "0" );
|
||||
}
|
||||
}
|
||||
|
||||
b = $( "#BGPIOIn" + op );
|
||||
if( b )
|
||||
{
|
||||
if( 1<<op & m )
|
||||
{
|
||||
b.css("background-color","blue" );
|
||||
b.css("color","white" );
|
||||
b.attr( "value", "out" );
|
||||
}
|
||||
else
|
||||
{
|
||||
b.css("background-color","green" );
|
||||
b.css("color","white" );
|
||||
b.attr( "value", "in" );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
if( IsTabOpen('GPIOs') )
|
||||
QueueOperation( "GS", GPIOUpdate );
|
||||
}
|
||||
|
||||
function GPIODataTicker()
|
||||
{
|
||||
if( !IsTabOpen('GPIOs') ) return;
|
||||
QueueOperation( "GS", GPIOUpdate );
|
||||
setTimeout( GPIODataTicker, 500 );
|
||||
}
|
||||
|
||||
|
||||
function GPIODataTickerStart()
|
||||
{
|
||||
if( IsTabOpen('GPIOs') )
|
||||
GPIODataTicker();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue