mirror of
https://github.com/holub/mame
synced 2025-04-17 22:13:04 +03:00
web: more UI improvements [Firehawke]
This commit is contained in:
R. Belmont
parent
63cc4e4de3
commit
100931c193
2
.gitattributes
vendored
2
.gitattributes
vendored
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
436
web/index.html
436
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 = [];
|
||||
if(data.name =='__empty') {
|
||||
items.push('No driver running');
|
||||
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 {
|
||||
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); }
|
||||
});
|
||||
@ -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,63 @@
|
||||
};
|
||||
</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="#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 ="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">
|
||||
@ -183,10 +256,327 @@
|
||||
</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="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="#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>
|
||||
</html>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user