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

Major changes to enable much more wifi information

Browse source
This commit is contained in:
cnlohr 2015-08-06 23:55:53 -04:00
parent 8e67b46173
commit 577a0e2d36
19 changed files with 1337 additions and 726 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,132 @@
<HTML>
<BODY>
Hello! This is a test page.<BR>
<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=main.js></script>
<meta charset="UTF-8">
<style>
table { width: 100%; }
td { vertical-align: top; }
.collapsible { display:none; }
.inbutton { background-color:blue; }
</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>
</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>
<p>Welcome to the ColorChord: Embedded ESP8266 Web-based GUI.</p>
<p>This GUI uses WebSockets, and has only been tested under the newest (as of August, 2015) Chrome and Firefox browsers.</p>
<p>For more information about ColorChord, visit it on github, here: <a href=https://github.com/cnlohr/colorchord>https://github.com/cnlohr/colorchord</a></p>
</div></td></tr></table></td></tr>
<tr><td width=1>
<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: (May deviate from default configuration, reset here if in doubt)<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 onclick="document.wifisection.wificurname.value = 'ESP'">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>MAC:</td><td><input type="text" id="wifimac"> (Ignored in softAP 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"> (Automatically saves to flash)</td></tr>
</table></form>
Scanned Stations:
<div id=WifiStations></div>
<input type=submit onclick="QueueOperation('WS', null);" value="Scan For Stations (Will disconnect!)">
</td></tr></table></div></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>
<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=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>
<tr><td width=1>
<input type=submit onclick="ShowHideEvent( 'LEDs' ); KickLEDs();" value="LEDs"></td><td>
<div id=LEDs class="collapsible">
<table width=100% border=1><tr><td id=LEDCanvasHolder><CANVAS id=LEDCanvas width=512 height=100></CANVAS></td>
<td><input type=button onclick="ToggleLEDPause();" id=LEDPauseButton value="|| / >"></td></tr></table>
</div></td></tr>
<tr><td width=1>
<input type=submit onclick="ShowHideEvent( 'Notes' ); KickNotes();" value="Notes"></td><td>
<div id=Notes class="collapsible">
<table width=1 border=1><tr><td><CANVAS id=NotesCanvas width=512 height=100></CANVAS></td>
<td width=100%><input type=button onclick="ToggleNotesPause();" id=NotesPauseButton value="|| / >"></td></tr></table>
</div></td></tr>
<tr><td width=1>
<input type=submit onclick="ShowHideEvent( 'Parameters' );" value="Parameters"></td><td>
<div id=Parameters class="collapsible">
<div id=InnerParameters></div>
<input type=button value="Save" onclick='QueueOperation( "CSS" )'> <input type=button value="Revert" onclick='QueueOperation( "CSR" )'> <input type=button value="Restore" onclick='QueueOperation( "CSD" )'>
</div>
</td></tr>
</table>
</body>
</html>
<IMG SRC=dsc.jpg>
</BODY>
</HTML>