diff options
author | 2013-09-26 14:01:40 +0000 | |
---|---|---|
committer | 2013-09-26 14:01:40 +0000 | |
commit | 100931c193287d5965d70c28e08670c027e3158c (patch) | |
tree | 2fe2bd28930c6a462dc1bb914532a38abb5e390e | |
parent | 63cc4e4de3b3e0462154c833a7c34db388577f5b (diff) |
web: more UI improvements [Firehawke]
-rw-r--r-- | .gitattributes | 2 | ||||
-rw-r--r-- | src/emu/webengine.c | 3 | ||||
-rw-r--r-- | web/index.html | 434 | ||||
-rw-r--r-- | web/loadstate.html | 44 | ||||
-rw-r--r-- | web/savestate.html | 44 |
5 files changed, 414 insertions, 113 deletions
diff --git a/.gitattributes b/.gitattributes index 27a5f73c8a8..9f353e245d9 100644 --- a/.gitattributes +++ b/.gitattributes @@ -8972,7 +8972,5 @@ web/index.html svneol=native#text/html web/info.html svneol=native#text/html web/js/jquery.js svneol=native#text/javascript web/js/jquery.mobile.js svneol=native#text/javascript -web/loadstate.html svneol=native#text/plain web/logs.html svneol=native#text/html web/options.html svneol=native#text/html -web/savestate.html svneol=native#text/plain diff --git a/src/emu/webengine.c b/src/emu/webengine.c index 2c3ac85eea7..64cd080a7fc 100644 --- a/src/emu/webengine.c +++ b/src/emu/webengine.c @@ -121,7 +121,8 @@ int web_engine::json_game_handler(struct mg_connection *conn) data["parent"] = m_machine->system().parent; data["source_file"] = m_machine->system().source_file; data["flags"] = m_machine->system().flags; - + data["ispaused"] = m_machine->paused(); + Json::FastWriter writer; const char *json = writer.write(data).c_str(); // Send HTTP reply to the client diff --git a/web/index.html b/web/index.html index 4591f77e16d..daa948c6405 100644 --- a/web/index.html +++ b/web/index.html @@ -17,13 +17,18 @@ <body> <script language="javascript" type="text/javascript"> - var writeToScreen = function(message) { - document.getElementById('current').innerHTML = message; + var writeConnectionStatus = function(message) { + document.getElementById('main_statusbar_connectionstatus').innerHTML = message; + document.getElementById('command_statusbar_connectionstatus').innerHTML = message; + document.getElementById('option_statusbar_connectionstatus').innerHTML = message; + document.getElementById('slider_statusbar_connectionstatus').innerHTML = message; }; function takeScreenshot() { - document.getElementById('main').innerHTML = '<center><img src="/screenshot.png"/></center>'; + // First, we need to generate a random number to make absolutely sure we bypass browser caching. + var random=Math.floor(Math.random()*999999999) + document.getElementById('screenshot').innerHTML = '<img height="240" width="320" src="/screenshot.png?cachebreaker='+random.toString()+'"/>'; } function loadContent(htmlName) @@ -42,18 +47,21 @@ success: function(data) { }, error: function (request, status, error) { alert(status + ", " + error); } - }); + }); + startWebSocket(); } function executeHardReset() { executeCommands("hardreset"); + startWebSocket(); $('.ui-dialog').dialog('close'); } function executeSoftReset() { executeCommands("softreset"); + startWebSocket(); $('.ui-dialog').dialog('close'); } @@ -62,7 +70,7 @@ executeCommands("exit"); $('.ui-dialog').dialog('close'); } - + function executeSlider() { $.ajax({ @@ -75,8 +83,8 @@ items.push('<label for="slider-mini-'+i+'">'+data[i].description +':</label>'); items.push('<input type="range" name="slider-mini-'+i+'" id="slider-mini-'+i+'" value="'+data[i].curval+'" min="'+data[i].minval+'" max="'+data[i].maxval+'" step=="'+data[i].incval+'" data-highlight="true" data-mini="true" />'); } - $('#main').html(''); - $('#main').append(items.join('')).trigger('create'); + $('#sliders').html(''); + $('#sliders').append(items.join('')).trigger('create'); for (var i in data) { $('#slider-mini-' + i).bind( "slidestop", function(event, ui) { setSliderValue($(this).attr('id').replace('slider-mini-',''),$(this).slider().val()); }); } @@ -84,6 +92,7 @@ }, error: function (request, status, error) { alert(status + ", " + error); } }); + window.location.hash='#slidermenu'; } function setSliderValue(id,val) @@ -99,14 +108,14 @@ } function startWebSocket() { - var docbase = window.location.href.toString(); + var docbase = window.location.href.toString().split('#')[0]; // We strip the fragment from the URL using split. var url = docbase.replace("http://","ws://"); websocket = new WebSocket(url); websocket.onopen = function(ev) { - writeToScreen('<b style="color: green;">Connected</b>'); + writeConnectionStatus('<b style="color: green;">Connected</b>'); }; websocket.onclose = function(ev) { - writeToScreen('<b style="color: red;">Disconnected</b>'); + writeConnectionStatus('<b style="color: red;">Disconnected</b>'); }; websocket.onmessage = function(ev) { if (ev.data=='update_machine') @@ -116,14 +125,45 @@ cache: false, dataType: "json", success: function(data) { - var items = []; + var maindesc_name = []; + var maindesc_description = []; + var maindesc_year = []; + var maindesc_manufacturer = []; + var maindesc_parent = []; + var maindesc_sourcefile = []; + var statusbar_ispaused = []; + var statusbar_runningdriver = []; + if(data.ispaused) { + statusbar_ispaused.push('<b style="color: red; ">Paused</b>'); + } else { + statusbar_ispaused.push('<b style="color: green; ">Running</b>'); + } if(data.name =='__empty') { - items.push('No driver running'); + statusbar_runningdriver.push('No driver'); } else { - items.push('Currently running : ' + data.description + ' [' + data.manufacturer+']'); - + statusbar_runningdriver.push(data.description + ' [' + data.manufacturer+']'); } - document.getElementById('current').innerHTML = items.join(''); + maindesc_name.push(data.name); + maindesc_description.push(data.description); + maindesc_year.push(data.year); + maindesc_manufacturer.push(data.manufacturer); + maindesc_parent.push(data.parent); + maindesc_sourcefile.push(data.source_file); + + document.getElementById('main_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join(''); + document.getElementById('main_statusbar_ispaused').innerHTML = statusbar_ispaused.join(''); + document.getElementById('command_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join(''); + document.getElementById('command_statusbar_ispaused').innerHTML = statusbar_ispaused.join(''); + document.getElementById('option_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join(''); + document.getElementById('option_statusbar_ispaused').innerHTML = statusbar_ispaused.join(''); + document.getElementById('slider_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join(''); + document.getElementById('slider_statusbar_ispaused').innerHTML = statusbar_ispaused.join(''); + document.getElementById('maindesc_name').innerHTML = maindesc_name.join(''); + document.getElementById('maindesc_description').innerHTML = maindesc_description.join(''); + document.getElementById('maindesc_year').innerHTML = maindesc_year.join(''); + document.getElementById('maindesc_manufacturer').innerHTML = maindesc_manufacturer.join(''); + document.getElementById('maindesc_parent').innerHTML = maindesc_parent.join(''); + document.getElementById('maindesc_sourcefile').innerHTML = maindesc_sourcefile.join(''); }, error: function (request, status, error) { alert(status + ", " + error); } }); @@ -131,7 +171,7 @@ }; websocket.onerror = function(ev) { - writeToScreen('<b style="color: red; ">Error</b>'); + writeConnectionStatus('<b style="color: red; ">Error</b>'); }; } @@ -140,30 +180,315 @@ }; </script> <!-- Home --> -<div data-role="page" id="page1"> +<div data-role="page" id="mainmenu"> + <div data-theme="a" data-role="header"> + <div style="width: 100%; height: 120px; position: relative;"> + <img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px"> + </div> + <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a> + <div data-role="navbar" data-iconpos="top"> + <ul> + <li> + <a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a> + </li> + <li> + <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a> + </li> + <li> + <a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a> + </li> + <li> + <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a> + </li> + </ul> + </div> + </div> + <div data-role="content" id ="main"> + <table style="tablelayout: auto; width: 100%" border="0" id="maindisplay"> + <tr> + <td style="padding: 0px; vertical-align:top; width: 1px"><div id="screenshot"><a href="#screenshotpopup" data-rel="popup"><img height="240" width="320" src="/screenshot.png"></a></div></td> + <td style="padding: 0px; vertical-align:top"> + <table border="0"><div id="drivertext"></div> + <tr> + <th style="text-align:left;">Name</th> + <td><div id="maindesc_name"></div></td> + </tr> + <tr> + <th style="text-align:left;">Description</th> + <td><div id="maindesc_description"></div></td> + </tr> + <tr> + <th style="text-align:left;">Year</th> + <td><div id="maindesc_year"></div></td> + </tr> + <tr> + <th style="text-align:left;">Manufacturer</th> + <td><div id="maindesc_manufacturer"></div></td> + </tr> + <tr> + <th style="text-align:left;">Parent</th> + <td><div id="maindesc_parent"></div></td> + </tr> + <tr> + <th style="text-align:left;">Source File</th> + <td><div id="maindesc_sourcefile"></div></td> + </tr> + </table> + </td> + </tr> + </table> + </div> + <div data-theme="a" data-role="footer" data-position="fixed"> + <div data-role="navbar" data-iconpos="top"> + <ul> + <li> + <a href="javascript:loadContent('info');" data-transition="fade" data-icon="info">Info</a> + </li> + <li> + <a href="javascript:loadContent('logs');" data-transition="fade" data-icon="check">Logs</a> + </li> + <li> + <a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a> + </li> + <li> + <a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a> + </li> + </ul> + </div> + <h3> + <table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse; " border="0" id="maindisplay"> + <tr> + <td style="padding: 0px;"<div id="main_statusbar_connectionstatus"></div></td> + <td style="padding: 0px;"<div id="main_statusbar_ispaused"></div></td> + <td style="width: 80%; padding: 0px;"<div id="main_statusbar_runningdriver"></div></td> + </tr> + </table> + </h3> + </div> +</div> + +<div data-role="page" id="commandmenu"> + <div data-theme="a" data-role="header"> + <div style="width: 100%; height: 120px; position: relative;"> + <img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px"> + </div> + <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a> + <div data-role="navbar" data-iconpos="top"> + <ul> + <li> + <a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a> + </li> + <li> + <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a> + </li> + <li> + <a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a> + </li> + <li> + <a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a> + </li> + </ul> + </div> + </div> + <div data-role="content" id ="menu_commandmenu"> + <h2>Reset Control</h2> + <div class="ui-grid-a"> + <div class="ui-block-a"><a href="confirmsoftreset.html" data-rel="dialog" data-role="button">Soft reset</a></div> + <div class="ui-block-b"><a href="confirmhardreset.html" data-rel="dialog" data-role="button">Hard reset</a></div> + </div> + <h2>Savestate Control</h2> + <div class="ui-grid-a"> + <div class="ui-block-a"><a href="#savestatepanel" data-transition="fade" data-role="button">Save State</a></div> + <div class="ui-block-b"><a href="#loadstatepanel" data-transition="fade" data-role="button">Load State</a></div> + </div> + <h2>Execution Control</h2> + <a href="javascript:executeCommands('togglepause');" data-role="button">Toggle Pause</a> + <a href="confirmexit.html" data-rel="dialog" data-role="button">Exit</a> + <div data-role="panel" id="savestatepanel" data-position="left" data-display="overlay" data-theme="a"> + <h3>Select position to save to</h3> + + <!-- Yes, it's a little ugly. I could redo this more cleanly with a little javascript, but not right now. --> + <div data-role="controlgroup" data-type="horizontal"> + <a href="" data-rel="close" data-role="button">Cancel</a> + <a href="javascript:executeCommands('savestate&val=auto');" data-role="button">Autosave Slot</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('savestate&val=0');" data-role="button">0</a> + <a href="javascript:executeCommands('savestate&val=1');" data-role="button">1</a> + <a href="javascript:executeCommands('savestate&val=2');" data-role="button">2</a> + <a href="javascript:executeCommands('savestate&val=3');" data-role="button">3</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('savestate&val=4');" data-role="button">4</a> + <a href="javascript:executeCommands('savestate&val=5');" data-role="button">5</a> + <a href="javascript:executeCommands('savestate&val=6');" data-role="button">6</a> + <a href="javascript:executeCommands('savestate&val=7');" data-role="button">7</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('savestate&val=8');" data-role="button">8</a> + <a href="javascript:executeCommands('savestate&val=9');" data-role="button">9</a> + <a href="javascript:executeCommands('savestate&val=a');" data-role="button">A</a> + <a href="javascript:executeCommands('savestate&val=b');" data-role="button">B</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('savestate&val=c');" data-role="button">C</a> + <a href="javascript:executeCommands('savestate&val=d');" data-role="button">D</a> + <a href="javascript:executeCommands('savestate&val=e');" data-role="button">E</a> + <a href="javascript:executeCommands('savestate&val=f');" data-role="button">F</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('savestate&val=g');" data-role="button">G</a> + <a href="javascript:executeCommands('savestate&val=h');" data-role="button">H</a> + <a href="javascript:executeCommands('savestate&val=i');" data-role="button">I</a> + <a href="javascript:executeCommands('savestate&val=j');" data-role="button">J</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('savestate&val=k');" data-role="button">K</a> + <a href="javascript:executeCommands('savestate&val=l');" data-role="button">L</a> + <a href="javascript:executeCommands('savestate&val=m');" data-role="button">M</a> + <a href="javascript:executeCommands('savestate&val=n');" data-role="button">N</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('savestate&val=o');" data-role="button">O</a> + <a href="javascript:executeCommands('savestate&val=p');" data-role="button">P</a> + <a href="javascript:executeCommands('savestate&val=q');" data-role="button">Q</a> + <a href="javascript:executeCommands('savestate&val=r');" data-role="button">R</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('savestate&val=s');" data-role="button">S</a> + <a href="javascript:executeCommands('savestate&val=t');" data-role="button">T</a> + <a href="javascript:executeCommands('savestate&val=u');" data-role="button">U</a> + <a href="javascript:executeCommands('savestate&val=v');" data-role="button">V</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('savestate&val=w');" data-role="button">W</a> + <a href="javascript:executeCommands('savestate&val=x');" data-role="button">X</a> + <a href="javascript:executeCommands('savestate&val=y');" data-role="button">Y</a> + <a href="javascript:executeCommands('savestate&val=z');" data-role="button">Z</a> + </div> + <!-- This is here to prevent webkit from trying to put the last row of states under the bottom menu on small screens like phone--> + <br><br><br><br><br> + </div> + + <div data-role="panel" id="loadstatepanel" data-position="left" data-display="overlay" data-theme="a"> + <h3>Select position to load from</h3> + + <!-- Yes, it's a little ugly. I could redo this more cleanly with a little javascript, but not right now. --> + <div data-role="controlgroup" data-type="horizontal"> + <a href="" data-rel="close" data-role="button">Cancel</a> + <a href="javascript:executeCommands('loadstate&val=auto');" data-role="button">Autoload Slot</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('loadstate&val=0');" data-role="button">0</a> + <a href="javascript:executeCommands('loadstate&val=1');" data-role="button">1</a> + <a href="javascript:executeCommands('loadstate&val=2');" data-role="button">2</a> + <a href="javascript:executeCommands('loadstate&val=3');" data-role="button">3</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('loadstate&val=4');" data-role="button">4</a> + <a href="javascript:executeCommands('loadstate&val=5');" data-role="button">5</a> + <a href="javascript:executeCommands('loadstate&val=6');" data-role="button">6</a> + <a href="javascript:executeCommands('loadstate&val=7');" data-role="button">7</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('loadstate&val=8');" data-role="button">8</a> + <a href="javascript:executeCommands('loadstate&val=9');" data-role="button">9</a> + <a href="javascript:executeCommands('loadstate&val=a');" data-role="button">A</a> + <a href="javascript:executeCommands('loadstate&val=b');" data-role="button">B</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('loadstate&val=c');" data-role="button">C</a> + <a href="javascript:executeCommands('loadstate&val=d');" data-role="button">D</a> + <a href="javascript:executeCommands('loadstate&val=e');" data-role="button">E</a> + <a href="javascript:executeCommands('loadstate&val=f');" data-role="button">F</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('loadstate&val=g');" data-role="button">G</a> + <a href="javascript:executeCommands('loadstate&val=h');" data-role="button">H</a> + <a href="javascript:executeCommands('loadstate&val=i');" data-role="button">I</a> + <a href="javascript:executeCommands('loadstate&val=j');" data-role="button">J</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('loadstate&val=k');" data-role="button">K</a> + <a href="javascript:executeCommands('loadstate&val=l');" data-role="button">L</a> + <a href="javascript:executeCommands('loadstate&val=m');" data-role="button">M</a> + <a href="javascript:executeCommands('loadstate&val=n');" data-role="button">N</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('loadstate&val=o');" data-role="button">O</a> + <a href="javascript:executeCommands('loadstate&val=p');" data-role="button">P</a> + <a href="javascript:executeCommands('loadstate&val=q');" data-role="button">Q</a> + <a href="javascript:executeCommands('loadstate&val=r');" data-role="button">R</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('loadstate&val=s');" data-role="button">S</a> + <a href="javascript:executeCommands('loadstate&val=t');" data-role="button">T</a> + <a href="javascript:executeCommands('loadstate&val=u');" data-role="button">U</a> + <a href="javascript:executeCommands('loadstate&val=v');" data-role="button">V</a> + </div> + <div data-role="controlgroup" data-type="horizontal"> + <a href="javascript:executeCommands('loadstate&val=w');" data-role="button">W</a> + <a href="javascript:executeCommands('loadstate&val=x');" data-role="button">X</a> + <a href="javascript:executeCommands('loadstate&val=y');" data-role="button">Y</a> + <a href="javascript:executeCommands('loadstate&val=z');" data-role="button">Z</a> + </div> + <!-- This is here to prevent webkit from trying to put the last row of states under the bottom menu on small screens like phone--> + <br><br><br><br><br> + </div> + </div> + <div data-theme="a" data-role="footer" data-position="fixed"> + <div data-role="navbar" data-iconpos="top"> + <ul> + <li> + <a href="javascript:loadContent('info');" data-transition="fade" data-icon="info">Info</a> + </li> + <li> + <a href="javascript:loadContent('logs');" data-transition="fade" data-icon="check">Logs</a> + </li> + <li> + <a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a> + </li> + <li> + <a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a> + </li> + </ul> + </div> + <h3> + <table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse; " border="0" id="maindisplay"> + <tr> + <td style="padding: 0px;"<div id="command_statusbar_connectionstatus"></div></td> + <td style="padding: 0px;"<div id="command_statusbar_ispaused"></div></td> + <td style="width: 80%; padding: 0px;"<div id="command_statusbar_runningdriver"></div></td> + </tr> + </table> + </h3> + </div> +</div> + +<div data-role="page" id="slidermenu"> <div data-theme="a" data-role="header"> <div style="width: 100%; height: 120px; position: relative;"> <img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px"> </div> - <a data-role="button" href="#page1" data-icon="home" data-iconpos="left" class="ui-btn-right">Home </a> + <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a> <div data-role="navbar" data-iconpos="top"> <ul> <li> <a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a> </li> <li> - <a href="javascript:loadContent('options');" data-transition="fade" data-icon="gear">Options</a> + <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a> </li> <li> <a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a> </li> <li> - <a href="javascript:loadContent('commands');" data-transition="fade" data-icon="star">Commands</a> + <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a> </li> </ul> </div> </div> - <div data-role="content" id ="main"> + <div data-role="content" id ="sliders"> </div> <div data-theme="a" data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="top"> @@ -183,10 +508,75 @@ </ul> </div> <h3> - <div id="current"></div> + + <table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse; " border="0" id="maindisplay"> + <tr> + <td style="padding: 0px;"<div id="option_statusbar_connectionstatus"></div></td> + <td style="padding: 0px;"<div id="option_statusbar_ispaused"></div></td> + <td style="width: 80%; padding: 0px;"<div id="option_statusbar_runningdriver"></div></td> + </tr> + </table> + + </div> </h3> </div> </div> + +<div data-role="page" id="optionmenu"> + <div data-theme="a" data-role="header"> + <div style="width: 100%; height: 120px; position: relative;"> + <img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px"> + </div> + <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a> + <div data-role="navbar" data-iconpos="top"> + <ul> + <li> + <a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a> + </li> + <li> + <a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a> + </li> + <li> + <a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a> + </li> + <li> + <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a> + </li> + </ul> + </div> + </div> + <div data-role="content" id ="menu_optionmenu"> + <a href="javascript:executeSlider();" data-role="button">Sliders</a> + </div> + <div data-theme="a" data-role="footer" data-position="fixed"> + <div data-role="navbar" data-iconpos="top"> + <ul> + <li> + <a href="javascript:loadContent('info');" data-transition="fade" data-icon="info">Info</a> + </li> + <li> + <a href="javascript:loadContent('logs');" data-transition="fade" data-icon="check">Logs</a> + </li> + <li> + <a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a> + </li> + <li> + <a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a> + </li> + </ul> + </div> + <h3> + <table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse; " border="0" id="maindisplay"> + <tr> + <td style="padding:0px;"><div id="slider_statusbar_connectionstatus"></div></td> + <td style="padding:0px;"><div id="slider_statusbar_ispaused"></div></td> + <td style="width: 80%; padding:0px;"><div id="slider_statusbar_runningdriver"></div></td> + </tr> + </table> + </h3> + </div> +</div> + </body> </html> diff --git a/web/loadstate.html b/web/loadstate.html deleted file mode 100644 index 954b2bb33f6..00000000000 --- a/web/loadstate.html +++ /dev/null @@ -1,44 +0,0 @@ -Select position to load from -<!-- Yes, it's a little ugly. I could redo this more cleanly with a little javascript, but not right now. --> -<div data-role="controlgroup" data-type="horizontal"> -<a href="javascript:loadContent('commands');" data-role="button">Cancel</a> -<a href="javascript:executeCommands('loadstate&val=auto');" data-role="button">Autosave Slot</a> -<a href="javascript:executeCommands('loadstate&val=0');" data-role="button">0</a> -<a href="javascript:executeCommands('loadstate&val=1');" data-role="button">1</a> -<a href="javascript:executeCommands('loadstate&val=2');" data-role="button">2</a> -<a href="javascript:executeCommands('loadstate&val=3');" data-role="button">3</a> -<a href="javascript:executeCommands('loadstate&val=4');" data-role="button">4</a> -<a href="javascript:executeCommands('loadstate&val=5');" data-role="button">5</a> -<a href="javascript:executeCommands('loadstate&val=6');" data-role="button">6</a> -<a href="javascript:executeCommands('loadstate&val=7');" data-role="button">7</a> -<a href="javascript:executeCommands('loadstate&val=8');" data-role="button">8</a> -<a href="javascript:executeCommands('loadstate&val=9');" data-role="button">9</a> -<a href="javascript:executeCommands('loadstate&val=a');" data-role="button">A</a> -<a href="javascript:executeCommands('loadstate&val=b');" data-role="button">B</a> -<a href="javascript:executeCommands('loadstate&val=c');" data-role="button">C</a> -<a href="javascript:executeCommands('loadstate&val=d');" data-role="button">D</a> -<a href="javascript:executeCommands('loadstate&val=e');" data-role="button">E</a> -<a href="javascript:executeCommands('loadstate&val=f');" data-role="button">F</a> -<a href="javascript:executeCommands('loadstate&val=g');" data-role="button">G</a> -<a href="javascript:executeCommands('loadstate&val=h');" data-role="button">H</a> -<a href="javascript:executeCommands('loadstate&val=i');" data-role="button">I</a> -<a href="javascript:executeCommands('loadstate&val=j');" data-role="button">J</a> -<a href="javascript:executeCommands('loadstate&val=k');" data-role="button">K</a> -<a href="javascript:executeCommands('loadstate&val=l');" data-role="button">L</a> -<a href="javascript:executeCommands('loadstate&val=m');" data-role="button">M</a> -<a href="javascript:executeCommands('loadstate&val=n');" data-role="button">N</a> -<a href="javascript:executeCommands('loadstate&val=o');" data-role="button">O</a> -<a href="javascript:executeCommands('loadstate&val=p');" data-role="button">P</a> -<a href="javascript:executeCommands('loadstate&val=q');" data-role="button">Q</a> -<a href="javascript:executeCommands('loadstate&val=r');" data-role="button">R</a> -<a href="javascript:executeCommands('loadstate&val=s');" data-role="button">S</a> -<a href="javascript:executeCommands('loadstate&val=t');" data-role="button">T</a> -<a href="javascript:executeCommands('loadstate&val=u');" data-role="button">U</a> -<a href="javascript:executeCommands('loadstate&val=v');" data-role="button">V</a> -<a href="javascript:executeCommands('loadstate&val=w');" data-role="button">W</a> -<a href="javascript:executeCommands('loadstate&val=x');" data-role="button">X</a> -<a href="javascript:executeCommands('loadstate&val=y');" data-role="button">Y</a> -<a href="javascript:executeCommands('loadstate&val=z');" data-role="button">Z</a> - -</div> - diff --git a/web/savestate.html b/web/savestate.html deleted file mode 100644 index cfdf7fe40aa..00000000000 --- a/web/savestate.html +++ /dev/null @@ -1,44 +0,0 @@ -Select position to save to -<!-- Yes, it's a little ugly. I could redo this more cleanly with a little javascript, but not right now. --> -<div data-role="controlgroup" data-type="horizontal"> -<a href="javascript:loadContent('commands');" data-role="button">Cancel</a> -<a href="javascript:executeCommands('savestate&val=auto');" data-role="button">Autosave Slot</a> -<a href="javascript:executeCommands('savestate&val=0');" data-role="button">0</a> -<a href="javascript:executeCommands('savestate&val=1');" data-role="button">1</a> -<a href="javascript:executeCommands('savestate&val=2');" data-role="button">2</a> -<a href="javascript:executeCommands('savestate&val=3');" data-role="button">3</a> -<a href="javascript:executeCommands('savestate&val=4');" data-role="button">4</a> -<a href="javascript:executeCommands('savestate&val=5');" data-role="button">5</a> -<a href="javascript:executeCommands('savestate&val=6');" data-role="button">6</a> -<a href="javascript:executeCommands('savestate&val=7');" data-role="button">7</a> -<a href="javascript:executeCommands('savestate&val=8');" data-role="button">8</a> -<a href="javascript:executeCommands('savestate&val=9');" data-role="button">9</a> -<a href="javascript:executeCommands('savestate&val=a');" data-role="button">A</a> -<a href="javascript:executeCommands('savestate&val=b');" data-role="button">B</a> -<a href="javascript:executeCommands('savestate&val=c');" data-role="button">C</a> -<a href="javascript:executeCommands('savestate&val=d');" data-role="button">D</a> -<a href="javascript:executeCommands('savestate&val=e');" data-role="button">E</a> -<a href="javascript:executeCommands('savestate&val=f');" data-role="button">F</a> -<a href="javascript:executeCommands('savestate&val=g');" data-role="button">G</a> -<a href="javascript:executeCommands('savestate&val=h');" data-role="button">H</a> -<a href="javascript:executeCommands('savestate&val=i');" data-role="button">I</a> -<a href="javascript:executeCommands('savestate&val=j');" data-role="button">J</a> -<a href="javascript:executeCommands('savestate&val=k');" data-role="button">K</a> -<a href="javascript:executeCommands('savestate&val=l');" data-role="button">L</a> -<a href="javascript:executeCommands('savestate&val=m');" data-role="button">M</a> -<a href="javascript:executeCommands('savestate&val=n');" data-role="button">N</a> -<a href="javascript:executeCommands('savestate&val=o');" data-role="button">O</a> -<a href="javascript:executeCommands('savestate&val=p');" data-role="button">P</a> -<a href="javascript:executeCommands('savestate&val=q');" data-role="button">Q</a> -<a href="javascript:executeCommands('savestate&val=r');" data-role="button">R</a> -<a href="javascript:executeCommands('savestate&val=s');" data-role="button">S</a> -<a href="javascript:executeCommands('savestate&val=t');" data-role="button">T</a> -<a href="javascript:executeCommands('savestate&val=u');" data-role="button">U</a> -<a href="javascript:executeCommands('savestate&val=v');" data-role="button">V</a> -<a href="javascript:executeCommands('savestate&val=w');" data-role="button">W</a> -<a href="javascript:executeCommands('savestate&val=x');" data-role="button">X</a> -<a href="javascript:executeCommands('savestate&val=y');" data-role="button">Y</a> -<a href="javascript:executeCommands('savestate&val=z');" data-role="button">Z</a> - -</div> - |