summaryrefslogtreecommitdiffstatshomepage
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/index.html434
-rw-r--r--web/loadstate.html44
-rw-r--r--web/savestate.html44
3 files changed, 412 insertions, 110 deletions
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>
-