Previous

199869 Revisions

Next

r25438 Thursday 26th September, 2013 at 17:23:10 UTC by R. Belmont
web: Additional refactoring. [Firehawke]

[web]

driver.html image.html index.html info.html logs.html options.html

trunk/web/options.html

r25437	r25438
1		<a href="javascript:executeSlider();" data-role="button">Slider</a>

trunk/web/index.html

r25437	r25438
18	18	<script language="javascript" type="text/javascript">
19	19
20	20	var writeConnectionStatus = function(message) {
	21	// Update the statusbar on each subpage at the same time.
21	22	document.getElementById('main_statusbar_connectionstatus').innerHTML = message;
22	23	document.getElementById('command_statusbar_connectionstatus').innerHTML = message;
23	24	document.getElementById('option_statusbar_connectionstatus').innerHTML = message;
24	25	document.getElementById('slider_statusbar_connectionstatus').innerHTML = message;
	26	document.getElementById('driver_statusbar_connectionstatus').innerHTML = message;
	27	document.getElementById('image_statusbar_connectionstatus').innerHTML = message;
	28	document.getElementById('info_statusbar_connectionstatus').innerHTML = message;
	29	document.getElementById('logs_statusbar_connectionstatus').innerHTML = message;
25	30	};
26	31
27	32	function takeScreenshot()
r25437	r25438
31	36	document.getElementById('screenshot').innerHTML = '<img height="240" width="320" src="/screenshot.png?cachebreaker='+random.toString()+'"/>';
32	37	}
33	38
34		function loadContent(htmlName)
35		{
36		$("#main").load(htmlName+'.html', function () {
37		$(this).trigger('create');
38		});
39		}
40
41	39	function executeCommands(command)
42	40	{
43	41	$.ajax({
r25437	r25438
158	156	document.getElementById('option_statusbar_ispaused').innerHTML = statusbar_ispaused.join('');
159	157	document.getElementById('slider_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join('');
160	158	document.getElementById('slider_statusbar_ispaused').innerHTML = statusbar_ispaused.join('');
	159	document.getElementById('driver_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join('');
	160	document.getElementById('driver_statusbar_ispaused').innerHTML = statusbar_ispaused.join('');
	161	document.getElementById('image_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join('');
	162	document.getElementById('image_statusbar_ispaused').innerHTML = statusbar_ispaused.join('');
	163	document.getElementById('info_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join('');
	164	document.getElementById('info_statusbar_ispaused').innerHTML = statusbar_ispaused.join('');
	165	document.getElementById('logs_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join('');
	166	document.getElementById('logs_statusbar_ispaused').innerHTML = statusbar_ispaused.join('');
161	167	document.getElementById('maindesc_name').innerHTML = maindesc_name.join('');
162	168	document.getElementById('maindesc_description').innerHTML = maindesc_description.join('');
163	169	document.getElementById('maindesc_year').innerHTML = maindesc_year.join('');
r25437	r25438
179	185	startWebSocket();
180	186	};
181	187	</script>
182		<!-- Home -->
	188	<!-- This begins the MAIN MENU page ------------------------------------------------------------------->
183	189	<div data-role="page" id="mainmenu">
184	190	<div data-theme="a" data-role="header">
185	191	<div style="width: 100%; height: 120px; position: relative;">
r25437	r25438
189	195	<div data-role="navbar" data-iconpos="top">
190	196	<ul>
191	197	<li>
192		<a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a>
	198	<a href="#drivermenumenu" data-transition="fade" data-icon="bars">Driver</a>
193	199	</li>
194	200	<li>
195	201	<a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
196	202	</li>
197	203	<li>
198		<a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a>
	204	<a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
199	205	</li>
200	206	<li>
201	207	<a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
r25437	r25438
203	209	</ul>
204	210	</div>
205	211	</div>
206		<div data-role="content" id ="main">
207		<table style="tablelayout: auto; width: 100%" border="0" id="maindisplay">
	212	<div data-role="content" id ="mainmenucontent">
	213	<table style="tablelayout: auto; width: 100%" border="0">
208	214	<tr>
209	215	<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>
210	216	<td style="padding: 0px; vertical-align:top">
r25437	r25438
242	248	<div  data-role="navbar" data-iconpos="top">
243	249	<ul>
244	250	<li>
245		<a href="javascript:loadContent('info');" data-transition="fade" data-icon="info">Info</a>
	251	<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
246	252	</li>
247	253	<li>
248		<a href="javascript:loadContent('logs');" data-transition="fade" data-icon="check">Logs</a>
	254	<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
249	255	</li>
250	256	<li>
251	257	<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
r25437	r25438
256	262	</ul>
257	263	</div>
258	264	<h3>
259		<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse; " border="0" id="maindisplay">
	265	<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
260	266	<tr>
261	267	<td style="padding: 0px;"<div id="main_statusbar_connectionstatus"></div></td>
262	268	<td style="padding: 0px;"<div id="main_statusbar_ispaused"></div></td>
r25437	r25438
267	273	</div>
268	274	</div>
269	275
	276	<!-- This begins the COMMAND MENU page ------------------------------------------------------------------->
270	277	<div data-role="page" id="commandmenu">
271	278	<div data-theme="a" data-role="header">
272	279	<div style="width: 100%; height: 120px; position: relative;">
r25437	r25438
276	283	<div data-role="navbar" data-iconpos="top">
277	284	<ul>
278	285	<li>
279		<a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a>
	286	<a href="#drivermenumenu" data-transition="fade" data-icon="bars">Driver</a>
280	287	</li>
281	288	<li>
282	289	<a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
283	290	</li>
284	291	<li>
285		<a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a>
	292	<a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
286	293	</li>
287	294	<li>
288	295	<a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a>
r25437	r25438
304	311	<h2>Execution Control</h2>
305	312	<a href="javascript:executeCommands('togglepause');" data-role="button">Toggle Pause</a>
306	313	<a href="confirmexit.html" data-rel="dialog" data-role="button">Exit</a>
	314
	315	<!-- This begins the Save State panel -------------------------------------------------------->
307	316	<div data-role="panel" id="savestatepanel" data-position="left" data-display="overlay" data-theme="a">
308	317	<h3>Select position to save to</h3>
309	318
r25437	r25438
370	379	<br><br><br><br><br>
371	380	</div>
372	381
	382	<!-- This begins the Load State panel -------------------------------------------------------->
373	383	<div data-role="panel" id="loadstatepanel" data-position="left" data-display="overlay" data-theme="a">
374	384	<h3>Select position to load from</h3>
375	385
r25437	r25438
435	445	<!-- This is here to prevent webkit from trying to put the last row of states under the bottom menu on small screens like phone-->
436	446	<br><br><br><br><br>
437	447	</div>
	448
438	449	</div>
439	450	<div data-theme="a" data-role="footer" data-position="fixed">
440	451	<div  data-role="navbar" data-iconpos="top">
441	452	<ul>
442	453	<li>
443		<a href="javascript:loadContent('info');" data-transition="fade" data-icon="info">Info</a>
	454	<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
444	455	</li>
445	456	<li>
446		<a href="javascript:loadContent('logs');" data-transition="fade" data-icon="check">Logs</a>
	457	<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
447	458	</li>
448	459	<li>
449	460	<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
r25437	r25438
454	465	</ul>
455	466	</div>
456	467	<h3>
457		<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse; " border="0" id="maindisplay">
	468	<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
458	469	<tr>
459	470	<td style="padding: 0px;"<div id="command_statusbar_connectionstatus"></div></td>
460	471	<td style="padding: 0px;"<div id="command_statusbar_ispaused"></div></td>
r25437	r25438
465	476	</div>
466	477	</div>
467	478
	479	<!-- This begins the SLIDERS page ------------------------------------------------------------------->
468	480	<div data-role="page" id="slidermenu">
469	481	<div data-theme="a" data-role="header">
470	482	<div style="width: 100%; height: 120px; position: relative;">
r25437	r25438
474	486	<div data-role="navbar" data-iconpos="top">
475	487	<ul>
476	488	<li>
477		<a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a>
	489	<a href="#drivermenumenu" data-transition="fade" data-icon="bars">Driver</a>
478	490	</li>
479	491	<li>
480	492	<a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
481	493	</li>
482	494	<li>
483		<a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a>
	495	<a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
484	496	</li>
485	497	<li>
486	498	<a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
r25437	r25438
494	506	<div  data-role="navbar" data-iconpos="top">
495	507	<ul>
496	508	<li>
497		<a href="javascript:loadContent('info');" data-transition="fade" data-icon="info">Info</a>
	509	<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
498	510	</li>
499	511	<li>
500		<a href="javascript:loadContent('logs');" data-transition="fade" data-icon="check">Logs</a>
	512	<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
501	513	</li>
502	514	<li>
503	515	<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
r25437	r25438
508	520	</ul>
509	521	</div>
510	522	<h3>
511
512		<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse; " border="0" id="maindisplay">
513		<tr>
514		<td style="padding: 0px;"<div id="option_statusbar_connectionstatus"></div></td>
515		<td style="padding: 0px;"<div id="option_statusbar_ispaused"></div></td>
516		<td style="width: 80%; padding: 0px;"<div id="option_statusbar_runningdriver"></div></td>
517		</tr>
518		</table>
519
520		</div>
	523	<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
	524	<tr>
	525	<td style="padding: 0px;"<div id="option_statusbar_connectionstatus"></div></td>
	526	<td style="padding: 0px;"<div id="option_statusbar_ispaused"></div></td>
	527	<td style="width: 80%; padding: 0px;"<div id="option_statusbar_runningdriver"></div></td>
	528	</tr>
	529	</table>
521	530	</h3>
522	531	</div>
523	532	</div>
524	533
	534	<!-- This begins the OPTION MENU page ------------------------------------------------------------------->
525	535	<div data-role="page" id="optionmenu">
526	536	<div data-theme="a" data-role="header">
527	537	<div style="width: 100%; height: 120px; position: relative;">
r25437	r25438
531	541	<div data-role="navbar" data-iconpos="top">
532	542	<ul>
533	543	<li>
534		<a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a>
	544	<a href="#drivermenumenu" data-transition="fade" data-icon="bars">Driver</a>
535	545	</li>
536	546	<li>
537	547	<a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a>
538	548	</li>
539	549	<li>
540		<a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a>
	550	<a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
541	551	</li>
542	552	<li>
543	553	<a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
r25437	r25438
552	562	<div  data-role="navbar" data-iconpos="top">
553	563	<ul>
554	564	<li>
555		<a href="javascript:loadContent('info');" data-transition="fade" data-icon="info">Info</a>
	565	<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
556	566	</li>
557	567	<li>
558		<a href="javascript:loadContent('logs');" data-transition="fade" data-icon="check">Logs</a>
	568	<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
559	569	</li>
560	570	<li>
561	571	<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
r25437	r25438
566	576	</ul>
567	577	</div>
568	578	<h3>
569		<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse; " border="0" id="maindisplay">
	579	<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
570	580	<tr>
571	581	<td style="padding:0px;"><div id="slider_statusbar_connectionstatus"></div></td>
572	582	<td style="padding:0px;"><div id="slider_statusbar_ispaused"></div></td>
r25437	r25438
577	587	</div>
578	588	</div>
579	589
	590	<!-- This begins the DRIVER MENU page ------------------------------------------------------------------->
	591	<div data-role="page" id="drivermenu">
	592	<div data-theme="a" data-role="header">
	593	<div style="width: 100%; height: 120px; position: relative;">
	594	<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
	595	</div>
	596	<a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
	597	<div data-role="navbar" data-iconpos="top">
	598	<ul>
	599	<li>
	600	<a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a>
	601	</li>
	602	<li>
	603	<a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
	604	</li>
	605	<li>
	606	<a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
	607	</li>
	608	<li>
	609	<a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
	610	</li>
	611	</ul>
	612	</div>
	613	</div>
	614	<div data-role="content" id="drivermenucontent">
	615	</div>
	616	<div data-theme="a" data-role="footer" data-position="fixed">
	617	<div  data-role="navbar" data-iconpos="top">
	618	<ul>
	619	<li>
	620	<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
	621	</li>
	622	<li>
	623	<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
	624	</li>
	625	<li>
	626	<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
	627	</li>
	628	<li>
	629	<a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
	630	</li>
	631	</ul>
	632	</div>
	633	<h3>
	634	<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
	635	<tr>
	636	<td style="padding: 0px;"<div id="driver_statusbar_connectionstatus"></div></td>
	637	<td style="padding: 0px;"<div id="driver_statusbar_ispaused"></div></td>
	638	<td style="width: 80%; padding: 0px;"<div id="driver_statusbar_runningdriver"></div></td>
	639	</tr>
	640	</table>
	641	</h3>
	642	</div>
	643	</div>
	644
	645	<!-- This begins the IMAGE MENU page ------------------------------------------------------------------->
	646	<div data-role="page" id="imagemenu">
	647	<div data-theme="a" data-role="header">
	648	<div style="width: 100%; height: 120px; position: relative;">
	649	<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
	650	</div>
	651	<a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
	652	<div data-role="navbar" data-iconpos="top">
	653	<ul>
	654	<li>
	655	<a href="#drivermenu" data-transition="fade" data-icon="bars">Driver</a>
	656	</li>
	657	<li>
	658	<a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
	659	</li>
	660	<li>
	661	<a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
	662	</li>
	663	<li>
	664	<a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
	665	</li>
	666	</ul>
	667	</div>
	668	</div>
	669	<div data-role="content" id="imagemenucontent">
	670	</div>
	671	<div data-theme="a" data-role="footer" data-position="fixed">
	672	<div  data-role="navbar" data-iconpos="top">
	673	<ul>
	674	<li>
	675	<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
	676	</li>
	677	<li>
	678	<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
	679	</li>
	680	<li>
	681	<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
	682	</li>
	683	<li>
	684	<a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
	685	</li>
	686	</ul>
	687	</div>
	688	<h3>
	689	<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
	690	<tr>
	691	<td style="padding: 0px;"<div id="image_statusbar_connectionstatus"></div></td>
	692	<td style="padding: 0px;"<div id="image_statusbar_ispaused"></div></td>
	693	<td style="width: 80%; padding: 0px;"<div id="image_statusbar_runningdriver"></div></td>
	694	</tr>
	695	</table>
	696	</h3>
	697	</div>
	698	</div>
	699
	700	<!-- This begins the INFO MENU page ------------------------------------------------------------------->
	701	<div data-role="page" id="infomenu">
	702	<div data-theme="a" data-role="header">
	703	<div style="width: 100%; height: 120px; position: relative;">
	704	<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
	705	</div>
	706	<a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
	707	<div data-role="navbar" data-iconpos="top">
	708	<ul>
	709	<li>
	710	<a href="#drivermenu" data-transition="fade" data-icon="bars">Driver</a>
	711	</li>
	712	<li>
	713	<a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
	714	</li>
	715	<li>
	716	<a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
	717	</li>
	718	<li>
	719	<a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
	720	</li>
	721	</ul>
	722	</div>
	723	</div>
	724	<div data-role="content" id="infomenucontent">
	725	</div>
	726	<div data-theme="a" data-role="footer" data-position="fixed">
	727	<div  data-role="navbar" data-iconpos="top">
	728	<ul>
	729	<li>
	730	<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
	731	</li>
	732	<li>
	733	<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
	734	</li>
	735	<li>
	736	<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
	737	</li>
	738	<li>
	739	<a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
	740	</li>
	741	</ul>
	742	</div>
	743	<h3>
	744	<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
	745	<tr>
	746	<td style="padding: 0px;"<div id="info_statusbar_connectionstatus"></div></td>
	747	<td style="padding: 0px;"<div id="info_statusbar_ispaused"></div></td>
	748	<td style="width: 80%; padding: 0px;"<div id="info_statusbar_runningdriver"></div></td>
	749	</tr>
	750	</table>
	751	</h3>
	752	</div>
	753	</div>
	754
	755	<!-- This begins the LOGS MENU page ------------------------------------------------------------------->
	756	<div data-role="page" id="logsmenu">
	757	<div data-theme="a" data-role="header">
	758	<div style="width: 100%; height: 120px; position: relative;">
	759	<img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
	760	</div>
	761	<a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
	762	<div data-role="navbar" data-iconpos="top">
	763	<ul>
	764	<li>
	765	<a href="#drivermenu" data-transition="fade" data-icon="bars">Driver</a>
	766	</li>
	767	<li>
	768	<a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
	769	</li>
	770	<li>
	771	<a href="#imagemenu" data-transition="fade" data-icon="grid">Image</a>
	772	</li>
	773	<li>
	774	<a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
	775	</li>
	776	</ul>
	777	</div>
	778	</div>
	779	<div data-role="content" id="logsmenucontent">
	780	</div>
	781	<div data-theme="a" data-role="footer" data-position="fixed">
	782	<div  data-role="navbar" data-iconpos="top">
	783	<ul>
	784	<li>
	785	<a href="#infomenu" data-transition="fade" data-icon="info">Info</a>
	786	</li>
	787	<li>
	788	<a href="#logsmenu" data-transition="fade" data-icon="check">Logs</a>
	789	</li>
	790	<li>
	791	<a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
	792	</li>
	793	<li>
	794	<a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
	795	</li>
	796	</ul>
	797	</div>
	798	<h3>
	799	<table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse;" border="0">
	800	<tr>
	801	<td style="padding: 0px;"<div id="logs_statusbar_connectionstatus"></div></td>
	802	<td style="padding: 0px;"<div id="logs_statusbar_ispaused"></div></td>
	803	<td style="width: 80%; padding: 0px;"<div id="logs_statusbar_runningdriver"></div></td>
	804	</tr>
	805	</table>
	806	</h3>
	807	</div>
	808	</div>
	809
580	810	</body>
581	811	</html>
582	812

Previous

199869 Revisions

Next

---

© 1997-2024 The MAME Team