92 lines
4.6 KiB
HTML
92 lines
4.6 KiB
HTML
<html>
|
|
<!-- Copyright (C) 2015 <>< Charles Lohr, see LICENSE file for more info. -->
|
|
<head>
|
|
<title>{{PAGE_TITLE}}</title>
|
|
{{PAGE_SCRIPT}}
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
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; }
|
|
.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>
|
|
<h2>{{PAGE_HEADING}}</h2>
|
|
<hr>
|
|
|
|
<table id="MainMenu">
|
|
|
|
<tbody>
|
|
|
|
<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( '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="|| / >"><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>
|
|
<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="|| / >"><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>
|
|
<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", 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>
|
|
|
|
<font size=-2>
|
|
<p>Copyright (C) 2015-2016 <>< Charles Lohr, See LICENSE file for more info.</p>
|
|
<p id=version><font size=-2>{{VERSSTR}}</font></p>
|
|
<p><a href={{PROJECT_URL}}><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAEBSURBVCgVBcHdSpMBAAbgZ4M+rXuQIkRlMJnHHS22LJh4F57uRpShorsAb8DORkaLEDzVgUoQHrh+xBMhEH8+5uvzAFDX99OjW6f66gDAlF0TQ10dHV1DEzumAApDvzUBQNMfXxVA39iMVwBg2mtjfSrqjrVcGdlz6K2KCw1r3ntpoMGm71gSERER0cQPvapln9EGANDGvhYPVjASERERcYlV/6siKAAAFIinqgtzGAEAOMGcMRuO0HArIiLiwTscWaem9BHztpyL+GXXIj4pLcC2a7PgUMQpeOOvLaBw4MoH3IgIWv4ZKACmbSt9cy8ivij1vAAAajacuXPnzLoawDOHTGouVu63twAAAABJRU5ErkJggg==" style="height: 1em;" alt="github-logo">{{PROJECT_NAME}}</a></p>
|
|
</font>
|
|
<div id=SystemMessage>...</div>
|
|
</body>
|
|
</html>
|
|
|
|
|