much further progress :)
Able to have sustained and queued websockets connections at ~500 Hz. Commands pass over said connection.
This commit is contained in:
cnlohr
parent
bba28c688f
commit
666d8077ab
11 changed files with 535 additions and 114 deletions
68
embedded8266/web/page/colorchord.html
Normal file
68
embedded8266/web/page/colorchord.html
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>ColorChord Control Panel</title>
|
||||
<script language="javascript" type="text/javascript" src=jquery-2.1.4.min.js.gz></script>
|
||||
<script language="javascript" type="text/javascript" src=colorchord.js></script>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
table { width: 100%; }
|
||||
td { vertical-align: top; }
|
||||
.collapsible { display:none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>ColorChord: Embedded</h2>
|
||||
<hr>
|
||||
|
||||
<table>
|
||||
|
||||
<tr><td width=1>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<tr><td width=1>
|
||||
<input type=submit onclick="ShowHideEvent( 'WifiSettings' );" 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();">
|
||||
<table border=1 width=1%>
|
||||
<tr><td width=1>Type:</td><td><input type="radio" name="wifitype" value=1>Station (Connect to infrastructure)<br><input type="radio" name="wifitype" value=2>AP (Broadcast a new AP)</td></tr>
|
||||
<tr><td>SSID:</td><td><input type="text" id="wificurname"></td></tr>
|
||||
<tr><td>PASS:</td><td><input type="text" id="wificurpassword"></td></tr>
|
||||
<tr><td>Enc:</td><td><input type="radio" name="wificurenctype" value="open">Open<br><input type="radio" name="wificurenctype" value="wpa-wpa2">WPA2-PSK (Ignored in Station mode)</td></tr>
|
||||
<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>
|
||||
|
||||
<tr><td width=1>
|
||||
<input type=submit onclick="ShowHideEvent( 'CustomCommand' );" value="Custom Command"></td><td>
|
||||
<div id=CustomCommand class="collapsible">
|
||||
<table width=100% border=1><tr><td>
|
||||
Command: <input type=text id=custom_command>
|
||||
<input type=submit value="Submit" onclick="IssueCustomCommand()"><br>
|
||||
<textarea id=custom_command_response readonly rows=15 cols=80></textarea>
|
||||
</td></tr></table></td></tr>
|
||||
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
208
embedded8266/web/page/colorchord.js
Normal file
208
embedded8266/web/page/colorchord.js
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
var wsUri = "ws://" + location.host + "/d/ws/issue";
|
||||
var output;
|
||||
var websocket;
|
||||
var commsup = 0;
|
||||
|
||||
//Push objects that have:
|
||||
// .request
|
||||
// .callback = function( ref (this object), data );
|
||||
|
||||
var workqueue = [];
|
||||
var lastitem;
|
||||
|
||||
function QueueOperation( command, callback )
|
||||
{
|
||||
var vp = new Object();
|
||||
vp.callback = callback;
|
||||
vp.request = command;
|
||||
workqueue.push( vp );
|
||||
}
|
||||
|
||||
|
||||
function init()
|
||||
{
|
||||
$( ".collapsible" ).each(function( index ) {
|
||||
if( localStorage["sh" + this.id] > 0.5 )
|
||||
{
|
||||
$( this ).show().toggleClass( 'opened' );
|
||||
}
|
||||
});
|
||||
|
||||
$("#custom_command_response").val( "" );
|
||||
|
||||
output = document.getElementById("output");
|
||||
Ticker();
|
||||
|
||||
|
||||
WifiDataTicker();
|
||||
}
|
||||
|
||||
function StartWebSocket()
|
||||
{
|
||||
output.innerHTML = "Connecting...";
|
||||
if( websocket ) websocket.close();
|
||||
workqueue = [];
|
||||
lastitem = null;
|
||||
websocket = new WebSocket(wsUri);
|
||||
websocket.onopen = function(evt) { onOpen(evt) };
|
||||
websocket.onclose = function(evt) { onClose(evt) };
|
||||
websocket.onmessage = function(evt) { onMessage(evt) };
|
||||
websocket.onerror = function(evt) { onError(evt) };
|
||||
}
|
||||
|
||||
function onOpen(evt)
|
||||
{
|
||||
doSend('e' );
|
||||
}
|
||||
|
||||
function onClose(evt)
|
||||
{
|
||||
$('#SystemStatusClicker').css("color", "red" );
|
||||
commsup = 0;
|
||||
}
|
||||
|
||||
var msg = 0;
|
||||
var tickmessage = 0;
|
||||
var lasthz = 0;
|
||||
|
||||
function Ticker()
|
||||
{
|
||||
lasthz = (msg - tickmessage);
|
||||
tickmessage = msg;
|
||||
if( lasthz == 0 )
|
||||
{
|
||||
$('#SystemStatusClicker').css("color", "red" );
|
||||
commsup = 0;
|
||||
StartWebSocket();
|
||||
}
|
||||
|
||||
setTimeout( Ticker, 1000 );
|
||||
}
|
||||
|
||||
function onMessage(evt)
|
||||
{
|
||||
msg++;
|
||||
output.innerHTML = "<p>Messages: " + msg + "</p><p>Hz:" + lasthz + "</p>";
|
||||
if( commsup != 1 )
|
||||
{
|
||||
commsup = 1;
|
||||
$('#SystemStatusClicker').css("color", "green" );
|
||||
}
|
||||
|
||||
if( lastitem && lastitem.callback )
|
||||
{
|
||||
lastitem.callback( lastitem, evt.data );
|
||||
lastitem = null;
|
||||
}
|
||||
|
||||
if( workqueue.length )
|
||||
{
|
||||
var elem = workqueue.shift();
|
||||
if( elem.request )
|
||||
{
|
||||
doSend( elem.request );
|
||||
lastitem = elem;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
doSend('e');
|
||||
}
|
||||
|
||||
function onError(evt)
|
||||
{
|
||||
$('#SystemStatusClicker').css("color", "red" );
|
||||
commsup = 0;
|
||||
}
|
||||
|
||||
function doSend(message)
|
||||
{
|
||||
websocket.send(message);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function ShowHideEvent( objname )
|
||||
{
|
||||
var obj = $( "#" + objname );
|
||||
obj.slideToggle( 'fast' ).toggleClass( 'opened' );
|
||||
var opened = obj.is( '.opened' );
|
||||
localStorage["sh" + objname] = opened?1:0;
|
||||
}
|
||||
|
||||
|
||||
function IssueCustomCommand()
|
||||
{
|
||||
QueueOperation( $("#custom_command").val(), function( req,data) { $("#custom_command_response").val( data ); } );
|
||||
}
|
||||
|
||||
|
||||
|
||||
window.addEventListener("load", init, false);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////// Various functions that are not core appear down here.
|
||||
|
||||
|
||||
did_wifi_get_config = false;
|
||||
|
||||
function WifiDataTicker()
|
||||
{
|
||||
if( !did_wifi_get_config )
|
||||
{
|
||||
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] );
|
||||
|
||||
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 += "</HTML>";
|
||||
document.getElementById("WifiStations").innerHTML = innerhtml;
|
||||
} );
|
||||
|
||||
setTimeout( WifiDataTicker, 1000 );
|
||||
}
|
||||
|
||||
function ChangeWifiConfig()
|
||||
{
|
||||
|
||||
var st = "W";
|
||||
st += document.wifisection.wifitype.value;
|
||||
st += ":" + document.wifisection.wificurname.value;
|
||||
st += ":" + document.wifisection.wificurpassword.value;
|
||||
QueueOperation( st );
|
||||
did_wifi_get_config = false;
|
||||
}
|
||||
|
||||
|
||||
BIN
embedded8266/web/page/jquery-2.1.4.min.js.gz
Normal file
BIN
embedded8266/web/page/jquery-2.1.4.min.js.gz
Normal file
Binary file not shown.
|
|
@ -1,7 +1,7 @@
|
|||
<HTML>
|
||||
<HEAD>
|
||||
<title>WebSocket Test</title>
|
||||
<script language="javascript" type="text/javascript" src=websocket.js></script>
|
||||
<script language="javascript" type="text/javascript" src=wstest.js></script>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<h2>WebSocket Test</h2>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
var wsUri = "ws://" + location.host + "/d/ws";
|
||||
var wsUri = "ws://" + location.host + "/d/ws/echo";
|
||||
|
||||
var output;
|
||||
|
||||
|
|
@ -37,9 +37,24 @@ function onClose(evt)
|
|||
writeToScreen("DISCONNECTED");
|
||||
}
|
||||
|
||||
var msg = 0;
|
||||
var tickmessage = 0;
|
||||
var lasthz = 0;
|
||||
|
||||
function Ticker()
|
||||
{
|
||||
lasthz = msg - tickmessage;
|
||||
tickmessage = msg;
|
||||
setTimeout( Ticker, 1000 );
|
||||
}
|
||||
|
||||
function onMessage(evt)
|
||||
{
|
||||
eval( evt.data );
|
||||
// eval( evt.data );
|
||||
|
||||
output.innerHTML = msg++ + " " + lasthz;
|
||||
doSend('x' );
|
||||
|
||||
// obj = JSON.parse(evt.data);
|
||||
// console.log( obj );
|
||||
// writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
|
||||
|
|
@ -67,3 +82,5 @@ function writeToScreen(message)
|
|||
|
||||
window.addEventListener("load", init, false);
|
||||
|
||||
Ticker();
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue