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

Separate out code to handle web menu interface.

Browse source
This commit is contained in:
cnlohr 2015-08-08 00:20:22 -04:00
parent 6967f23349
commit 3b00d9e087
8 changed files with 597 additions and 459 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,10 @@
<html>
<!-- Copyright (C) 2015 <>< Charles Lohr, see LICENSE file for more info.
This particular file may be licensed under the MIT/x11, New BSD or ColorChord Licenses. -->
<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=menuinterface.js></script>
<script language="javascript" type="text/javascript" src=main.js></script>
<meta charset="UTF-8">
<style>
@ -9,20 +12,16 @@ table { width: 100%; }
td { vertical-align: top; }
.collapsible { display:none; }
.inbutton { background-color:blue; }
#SystemMessage { position: fixed; top: 5px; background-color: DarkSlateBlue; color: #ffffff; left: 5px; display:none; }
</style>
</head>
<body>
<h2>ColorChord: Embedded</h2>
<hr>
<table>
<table id="MainMenu">
<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>
<tbody>
<tr><td width=1>
<input type=submit onclick="ShowHideEvent( 'Introduction' );" value="Introduction"></td><td>
@ -33,52 +32,6 @@ td { vertical-align: top; }
<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 onclick="ClickOpmode(1);">Station (Connect to infrastructure)<br><input type="radio" name="wifitype" value=2 onclick="ClickOpmode(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>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">
@ -117,15 +70,16 @@ Command: <input type=text id=custom_command>
<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" )'>
<input type=button value="Save" onclick='QueueOperation( "CSS", function(){IssueSystemMessage("Settings Saved to Flash" );} )'> <input type=button value="Revert" onclick='QueueOperation( "CSR", function() { IssueSystemMessage("Settings Read from Flash" );} )'> <input type=button value="Restore" onclick='QueueOperation( "CSD", function(){IssueSystemMessage("Settings in RAM Reverted to Factory" );} )'>
</div>
</td></tr>
</tbody>
</table>
<p><font size=-2>Copyright (C) 2015 &lt&gt&lt Charles Lohr, See LICENSE file for more info.</font></p>
<div id=SystemMessage>...</div>
</body>
</html>