Sprinter/mame
2
0
Fork 0
mirror of https://github.com/holub/mame synced 2025-07-04 17:38:08 +03:00
Code Issues Actions 36 Packages Projects Releases Wiki Activity

web: more UI improvements [Firehawke]

Browse Source
This commit is contained in:
R. Belmont 2013-09-26 14:01:40 +00:00
parent 63cc4e4de3
commit 100931c193
5 changed files with 415 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitattributes vendored
View File

@ -8972,7 +8972,5 @@ web/index.html svneol=native#text/html
web/info.html svneol=native#text/html web/info.html svneol=native#text/html
web/js/jquery.js svneol=native#text/javascript web/js/jquery.js svneol=native#text/javascript
web/js/jquery.mobile.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/logs.html svneol=native#text/html
web/options.html svneol=native#text/html web/options.html svneol=native#text/html
web/savestate.html svneol=native#text/plain

1
src/emu/webengine.c
View File

@ -121,6 +121,7 @@ int web_engine::json_game_handler(struct mg_connection *conn)
data["parent"] = m_machine->system().parent; data["parent"] = m_machine->system().parent;
data["source_file"] = m_machine->system().source_file; data["source_file"] = m_machine->system().source_file;
data["flags"] = m_machine->system().flags; data["flags"] = m_machine->system().flags;
data["ispaused"] = m_machine->paused();
Json::FastWriter writer; Json::FastWriter writer;
const char *json = writer.write(data).c_str(); const char *json = writer.write(data).c_str();

430
web/index.html
View File

@ -17,13 +17,18 @@
<body> <body>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
var writeToScreen = function(message) { var writeConnectionStatus = function(message) {
document.getElementById('current').innerHTML = 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() 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) function loadContent(htmlName)
@ -43,17 +48,20 @@
}, },
error: function (request, status, error) { alert(status + ", " + error); } error: function (request, status, error) { alert(status + ", " + error); }
}); });
startWebSocket();
} }
function executeHardReset() function executeHardReset()
{ {
executeCommands("hardreset"); executeCommands("hardreset");
startWebSocket();
$('.ui-dialog').dialog('close'); $('.ui-dialog').dialog('close');
} }
function executeSoftReset() function executeSoftReset()
{ {
executeCommands("softreset"); executeCommands("softreset");
startWebSocket();
$('.ui-dialog').dialog('close'); $('.ui-dialog').dialog('close');
} }
@ -75,8 +83,8 @@
items.push('<label for="slider-mini-'+i+'">'+data[i].description +':</label>'); 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" />'); 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(''); $('#sliders').html('');
$('#main').append(items.join('')).trigger('create'); $('#sliders').append(items.join('')).trigger('create');
for (var i in data) { for (var i in data) {
$('#slider-mini-' + i).bind( "slidestop", function(event, ui) { setSliderValue($(this).attr('id').replace('slider-mini-',''),$(this).slider().val()); }); $('#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); } error: function (request, status, error) { alert(status + ", " + error); }
}); });
window.location.hash='#slidermenu';
} }
function setSliderValue(id,val) function setSliderValue(id,val)
@ -99,14 +108,14 @@
} }
function startWebSocket() { 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://"); var url = docbase.replace("http://","ws://");
websocket = new WebSocket(url); websocket = new WebSocket(url);
websocket.onopen = function(ev) { websocket.onopen = function(ev) {
writeToScreen('<b style="color: green;">Connected</b>'); writeConnectionStatus('<b style="color: green;">Connected</b>');
}; };
websocket.onclose = function(ev) { websocket.onclose = function(ev) {
writeToScreen('<b style="color: red;">Disconnected</b>'); writeConnectionStatus('<b style="color: red;">Disconnected</b>');
}; };
websocket.onmessage = function(ev) { websocket.onmessage = function(ev) {
if (ev.data=='update_machine') if (ev.data=='update_machine')
@ -116,14 +125,45 @@
cache: false, cache: false,
dataType: "json", dataType: "json",
success: function(data) { success: function(data) {
var items = []; var maindesc_name = [];
if(data.name =='__empty') { var maindesc_description = [];
items.push('No driver running'); 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 { } else {
items.push('Currently running : ' + data.description + ' [' + data.manufacturer+']'); statusbar_ispaused.push('<b style="color: green; ">Running</b>');
} }
document.getElementById('current').innerHTML = items.join(''); if(data.name =='__empty') {
statusbar_runningdriver.push('No driver');
} else {
statusbar_runningdriver.push(data.description + ' [' + data.manufacturer+']');
}
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); } error: function (request, status, error) { alert(status + ", " + error); }
}); });
@ -131,7 +171,7 @@
}; };
websocket.onerror = function(ev) { websocket.onerror = function(ev) {
writeToScreen('<b style="color: red; ">Error</b>'); writeConnectionStatus('<b style="color: red; ">Error</b>');
}; };
} }
@ -140,30 +180,63 @@
}; };
</script> </script>
<!-- Home --> <!-- Home -->
<div data-role="page" id="page1"> <div data-role="page" id="mainmenu">
<div data-theme="a" data-role="header"> <div data-theme="a" data-role="header">
<div style="width: 100%; height: 120px; position: relative;"> <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"> <img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
</div> </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"> <div data-role="navbar" data-iconpos="top">
<ul> <ul>
<li> <li>
<a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a> <a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a>
</li> </li>
<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>
<li> <li>
<a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a> <a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a>
</li> </li>
<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> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div data-role="content" id ="main"> <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>
<div data-theme="a" data-role="footer" data-position="fixed"> <div data-theme="a" data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top"> <div data-role="navbar" data-iconpos="top">
@ -183,10 +256,327 @@
</ul> </ul>
</div> </div>
<h3> <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="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> </h3>
</div> </div>
</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="#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 ="sliders">
</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="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> </body>
</html> </html>

44
web/loadstate.html
View File

@ -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>

44
web/savestate.html
View File

@ -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>