<html>
<!-- Copyright (C) 2015 <>< Charles Lohr, see LICENSE file for more info. -->
<head>
<title>{{PAGE_TITLE}}</title>
<script language="javascript" type="text/javascript" src={{PAGE_JQUERYFL}}></script>
<script language="javascript" type="text/javascript" src=menuinterface.js></script>
<script language="javascript" type="text/javascript" src=main.js></script>
{{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 &lt&gt&lt 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>


