Previous 199869 Revisions Next

r25437 Thursday 26th September, 2013 at 14:01:40 UTC by R. Belmont
web: more UI improvements [Firehawke]
[src/emu]webengine.c
[web]index.html loadstate.html savestate.html

trunk/src/emu/webengine.c
r25436r25437
121121   data["parent"] = m_machine->system().parent;
122122   data["source_file"] = m_machine->system().source_file;
123123   data["flags"] = m_machine->system().flags;
124
124    data["ispaused"] = m_machine->paused();
125   
125126   Json::FastWriter writer;
126127   const char *json = writer.write(data).c_str();
127128   // Send HTTP reply to the client
trunk/web/savestate.html
r25436r25437
1Select position to save to
2<!-- Yes, it's a little ugly. I could redo this more cleanly with a little javascript, but not right now. -->
3<div data-role="controlgroup" data-type="horizontal">
4<a href="javascript:loadContent('commands');" data-role="button">Cancel</a>
5<a href="javascript:executeCommands('savestate&val=auto');" data-role="button">Autosave Slot</a>
6<a href="javascript:executeCommands('savestate&val=0');" data-role="button">0</a>
7<a href="javascript:executeCommands('savestate&val=1');" data-role="button">1</a>
8<a href="javascript:executeCommands('savestate&val=2');" data-role="button">2</a>
9<a href="javascript:executeCommands('savestate&val=3');" data-role="button">3</a>
10<a href="javascript:executeCommands('savestate&val=4');" data-role="button">4</a>
11<a href="javascript:executeCommands('savestate&val=5');" data-role="button">5</a>
12<a href="javascript:executeCommands('savestate&val=6');" data-role="button">6</a>
13<a href="javascript:executeCommands('savestate&val=7');" data-role="button">7</a>
14<a href="javascript:executeCommands('savestate&val=8');" data-role="button">8</a>
15<a href="javascript:executeCommands('savestate&val=9');" data-role="button">9</a>
16<a href="javascript:executeCommands('savestate&val=a');" data-role="button">A</a>
17<a href="javascript:executeCommands('savestate&val=b');" data-role="button">B</a>
18<a href="javascript:executeCommands('savestate&val=c');" data-role="button">C</a>
19<a href="javascript:executeCommands('savestate&val=d');" data-role="button">D</a>
20<a href="javascript:executeCommands('savestate&val=e');" data-role="button">E</a>
21<a href="javascript:executeCommands('savestate&val=f');" data-role="button">F</a>
22<a href="javascript:executeCommands('savestate&val=g');" data-role="button">G</a>
23<a href="javascript:executeCommands('savestate&val=h');" data-role="button">H</a>
24<a href="javascript:executeCommands('savestate&val=i');" data-role="button">I</a>
25<a href="javascript:executeCommands('savestate&val=j');" data-role="button">J</a>
26<a href="javascript:executeCommands('savestate&val=k');" data-role="button">K</a>
27<a href="javascript:executeCommands('savestate&val=l');" data-role="button">L</a>
28<a href="javascript:executeCommands('savestate&val=m');" data-role="button">M</a>
29<a href="javascript:executeCommands('savestate&val=n');" data-role="button">N</a>
30<a href="javascript:executeCommands('savestate&val=o');" data-role="button">O</a>
31<a href="javascript:executeCommands('savestate&val=p');" data-role="button">P</a>
32<a href="javascript:executeCommands('savestate&val=q');" data-role="button">Q</a>
33<a href="javascript:executeCommands('savestate&val=r');" data-role="button">R</a>
34<a href="javascript:executeCommands('savestate&val=s');" data-role="button">S</a>
35<a href="javascript:executeCommands('savestate&val=t');" data-role="button">T</a>
36<a href="javascript:executeCommands('savestate&val=u');" data-role="button">U</a>
37<a href="javascript:executeCommands('savestate&val=v');" data-role="button">V</a>
38<a href="javascript:executeCommands('savestate&val=w');" data-role="button">W</a>
39<a href="javascript:executeCommands('savestate&val=x');" data-role="button">X</a>
40<a href="javascript:executeCommands('savestate&val=y');" data-role="button">Y</a>
41<a href="javascript:executeCommands('savestate&val=z');" data-role="button">Z</a>
42
43</div>
44
trunk/web/loadstate.html
r25436r25437
1Select position to load from
2<!-- Yes, it's a little ugly. I could redo this more cleanly with a little javascript, but not right now. -->
3<div data-role="controlgroup" data-type="horizontal">
4<a href="javascript:loadContent('commands');" data-role="button">Cancel</a>
5<a href="javascript:executeCommands('loadstate&val=auto');" data-role="button">Autosave Slot</a>
6<a href="javascript:executeCommands('loadstate&val=0');" data-role="button">0</a>
7<a href="javascript:executeCommands('loadstate&val=1');" data-role="button">1</a>
8<a href="javascript:executeCommands('loadstate&val=2');" data-role="button">2</a>
9<a href="javascript:executeCommands('loadstate&val=3');" data-role="button">3</a>
10<a href="javascript:executeCommands('loadstate&val=4');" data-role="button">4</a>
11<a href="javascript:executeCommands('loadstate&val=5');" data-role="button">5</a>
12<a href="javascript:executeCommands('loadstate&val=6');" data-role="button">6</a>
13<a href="javascript:executeCommands('loadstate&val=7');" data-role="button">7</a>
14<a href="javascript:executeCommands('loadstate&val=8');" data-role="button">8</a>
15<a href="javascript:executeCommands('loadstate&val=9');" data-role="button">9</a>
16<a href="javascript:executeCommands('loadstate&val=a');" data-role="button">A</a>
17<a href="javascript:executeCommands('loadstate&val=b');" data-role="button">B</a>
18<a href="javascript:executeCommands('loadstate&val=c');" data-role="button">C</a>
19<a href="javascript:executeCommands('loadstate&val=d');" data-role="button">D</a>
20<a href="javascript:executeCommands('loadstate&val=e');" data-role="button">E</a>
21<a href="javascript:executeCommands('loadstate&val=f');" data-role="button">F</a>
22<a href="javascript:executeCommands('loadstate&val=g');" data-role="button">G</a>
23<a href="javascript:executeCommands('loadstate&val=h');" data-role="button">H</a>
24<a href="javascript:executeCommands('loadstate&val=i');" data-role="button">I</a>
25<a href="javascript:executeCommands('loadstate&val=j');" data-role="button">J</a>
26<a href="javascript:executeCommands('loadstate&val=k');" data-role="button">K</a>
27<a href="javascript:executeCommands('loadstate&val=l');" data-role="button">L</a>
28<a href="javascript:executeCommands('loadstate&val=m');" data-role="button">M</a>
29<a href="javascript:executeCommands('loadstate&val=n');" data-role="button">N</a>
30<a href="javascript:executeCommands('loadstate&val=o');" data-role="button">O</a>
31<a href="javascript:executeCommands('loadstate&val=p');" data-role="button">P</a>
32<a href="javascript:executeCommands('loadstate&val=q');" data-role="button">Q</a>
33<a href="javascript:executeCommands('loadstate&val=r');" data-role="button">R</a>
34<a href="javascript:executeCommands('loadstate&val=s');" data-role="button">S</a>
35<a href="javascript:executeCommands('loadstate&val=t');" data-role="button">T</a>
36<a href="javascript:executeCommands('loadstate&val=u');" data-role="button">U</a>
37<a href="javascript:executeCommands('loadstate&val=v');" data-role="button">V</a>
38<a href="javascript:executeCommands('loadstate&val=w');" data-role="button">W</a>
39<a href="javascript:executeCommands('loadstate&val=x');" data-role="button">X</a>
40<a href="javascript:executeCommands('loadstate&val=y');" data-role="button">Y</a>
41<a href="javascript:executeCommands('loadstate&val=z');" data-role="button">Z</a>
42
43</div>
44
trunk/web/index.html
r25436r25437
1717<body>
1818<script language="javascript" type="text/javascript">
1919
20  var writeToScreen = function(message) {
21    document.getElementById('current').innerHTML = message;
20  var writeConnectionStatus = function(message) {
21    document.getElementById('main_statusbar_connectionstatus').innerHTML = message;
22   document.getElementById('command_statusbar_connectionstatus').innerHTML = message;
23   document.getElementById('option_statusbar_connectionstatus').innerHTML = message;
24   document.getElementById('slider_statusbar_connectionstatus').innerHTML = message;
2225  };
2326 
2427  function takeScreenshot()
2528  {
26   document.getElementById('main').innerHTML = '<center><img src="/screenshot.png"/></center>';
29    // First, we need to generate a random number to make absolutely sure we bypass browser caching.
30   var random=Math.floor(Math.random()*999999999)
31   document.getElementById('screenshot').innerHTML = '<img height="240" width="320" src="/screenshot.png?cachebreaker='+random.toString()+'"/>';
2732  }
2833 
2934  function loadContent(htmlName)
r25436r25437
4247     success: function(data) {
4348     },
4449     error: function (request, status, error) { alert(status + ", " + error); }
45   });   
50   });
51   startWebSocket();
4652  }
4753
4854  function executeHardReset()
4955  {
5056    executeCommands("hardreset");
57   startWebSocket();
5158   $('.ui-dialog').dialog('close');
5259  }
5360
5461  function executeSoftReset()
5562  {
5663    executeCommands("softreset");
64   startWebSocket();
5765   $('.ui-dialog').dialog('close');
5866  }
5967
r25436r25437
6270    executeCommands("exit");
6371   $('.ui-dialog').dialog('close');
6472  }
65
73
6674  function executeSlider()
6775  {
6876   $.ajax({
r25436r25437
7583            items.push('<label for="slider-mini-'+i+'">'+data[i].description +':</label>');
7684            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" />');
7785            }
78         $('#main').html('');
79         $('#main').append(items.join('')).trigger('create');
86         $('#sliders').html('');
87         $('#sliders').append(items.join('')).trigger('create');
8088         for (var i in data) {
8189            $('#slider-mini-' + i).bind( "slidestop", function(event, ui) { setSliderValue($(this).attr('id').replace('slider-mini-',''),$(this).slider().val()); });
8290         }
r25436r25437
8492        },
8593        error: function (request, status, error) { alert(status + ", " + error); }
8694      });   
95  window.location.hash='#slidermenu';
8796  }
8897
8998  function setSliderValue(id,val)
r25436r25437
99108  }
100109 
101110  function startWebSocket() {
102   var docbase = window.location.href.toString();
111   var docbase = window.location.href.toString().split('#')[0]; // We strip the fragment from the URL using split.
103112   var url = docbase.replace("http://","ws://");
104113    websocket = new WebSocket(url);
105114    websocket.onopen = function(ev) {
106     writeToScreen('<b style="color: green;">Connected</b>');
115     writeConnectionStatus('<b style="color: green;">Connected</b>');
107116    };
108117    websocket.onclose = function(ev) {     
109      writeToScreen('<b style="color: red;">Disconnected</b>');
118      writeConnectionStatus('<b style="color: red;">Disconnected</b>');
110119    };
111120    websocket.onmessage = function(ev) {
112121   if (ev.data=='update_machine')
r25436r25437
116125        cache: false,
117126        dataType: "json",
118127        success: function(data) {
119         var items = [];
128         var maindesc_name = [];
129         var maindesc_description = [];
130         var maindesc_year = [];
131         var maindesc_manufacturer = [];
132         var maindesc_parent = [];
133         var maindesc_sourcefile = [];
134         var statusbar_ispaused = [];
135         var statusbar_runningdriver = [];
136         if(data.ispaused) {
137            statusbar_ispaused.push('<b style="color: red; ">Paused</b>');
138         } else {
139            statusbar_ispaused.push('<b style="color: green; ">Running</b>');
140         }
120141         if(data.name =='__empty') {
121            items.push('No driver running');
142            statusbar_runningdriver.push('No driver');
122143         } else {
123            items.push('Currently running : ' + data.description + ' [' + data.manufacturer+']');
124
144            statusbar_runningdriver.push(data.description + ' [' + data.manufacturer+']');
125145         }
126         document.getElementById('current').innerHTML = items.join('');
146         maindesc_name.push(data.name);
147         maindesc_description.push(data.description);
148         maindesc_year.push(data.year);
149         maindesc_manufacturer.push(data.manufacturer);
150         maindesc_parent.push(data.parent);
151         maindesc_sourcefile.push(data.source_file);
152         
153         document.getElementById('main_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join('');
154         document.getElementById('main_statusbar_ispaused').innerHTML = statusbar_ispaused.join('');
155         document.getElementById('command_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join('');
156         document.getElementById('command_statusbar_ispaused').innerHTML = statusbar_ispaused.join('');
157         document.getElementById('option_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join('');
158         document.getElementById('option_statusbar_ispaused').innerHTML = statusbar_ispaused.join('');
159         document.getElementById('slider_statusbar_runningdriver').innerHTML = statusbar_runningdriver.join('');
160         document.getElementById('slider_statusbar_ispaused').innerHTML = statusbar_ispaused.join('');
161         document.getElementById('maindesc_name').innerHTML = maindesc_name.join('');
162         document.getElementById('maindesc_description').innerHTML = maindesc_description.join('');
163         document.getElementById('maindesc_year').innerHTML = maindesc_year.join('');
164         document.getElementById('maindesc_manufacturer').innerHTML = maindesc_manufacturer.join('');
165         document.getElementById('maindesc_parent').innerHTML = maindesc_parent.join('');
166         document.getElementById('maindesc_sourcefile').innerHTML = maindesc_sourcefile.join('');
127167        },
128168        error: function (request, status, error) { alert(status + ", " + error); }
129169      });   
r25436r25437
131171
132172    };
133173    websocket.onerror = function(ev) {
134      writeToScreen('<b style="color: red; ">Error</b>');
174      writeConnectionStatus('<b style="color: red; ">Error</b>');
135175    };
136176  }
137177
r25436r25437
140180  };
141181</script>
142182<!-- Home -->
143<div data-role="page" id="page1">
183<div data-role="page" id="mainmenu">
144184    <div data-theme="a" data-role="header">
145185        <div style="width: 100%; height: 120px; position: relative;">
146186         <img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
147187        </div>
148        <a data-role="button" href="#page1" data-icon="home" data-iconpos="left" class="ui-btn-right">Home </a>
188        <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
149189        <div data-role="navbar" data-iconpos="top">
150190            <ul>
151191                <li>
152192                    <a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a>
153193                </li>
154194                <li>
155                    <a href="javascript:loadContent('options');" data-transition="fade" data-icon="gear">Options</a>
195                    <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
156196                </li>
157197                <li>
158198                    <a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a>
159199                </li>
160200                <li>
161                    <a href="javascript:loadContent('commands');" data-transition="fade" data-icon="star">Commands</a>
201                    <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
162202                </li>
163203            </ul>
164204        </div>
165205    </div>
166    <div data-role="content" id ="main">     
206    <div data-role="content" id ="main">   
207      <table style="tablelayout: auto; width: 100%" border="0" id="maindisplay">
208            <tr>
209               <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               <td style="padding: 0px; vertical-align:top">
211                  <table border="0"><div id="drivertext"></div>
212                     <tr>
213                        <th style="text-align:left;">Name</th>
214                        <td><div id="maindesc_name"></div></td>
215                     </tr>
216                     <tr>
217                        <th style="text-align:left;">Description</th>
218                        <td><div id="maindesc_description"></div></td>
219                     </tr>
220                     <tr>
221                        <th style="text-align:left;">Year</th>
222                        <td><div id="maindesc_year"></div></td>
223                     </tr>
224                     <tr>
225                        <th style="text-align:left;">Manufacturer</th>
226                        <td><div id="maindesc_manufacturer"></div></td>
227                     </tr>
228                     <tr>
229                        <th style="text-align:left;">Parent</th>
230                        <td><div id="maindesc_parent"></div></td>
231                     </tr>
232                     <tr>
233                        <th style="text-align:left;">Source File</th>
234                        <td><div id="maindesc_sourcefile"></div></td>
235                     </tr>                 
236                  </table>
237               </td>
238            </tr>
239      </table>
167240    </div>
168241    <div data-theme="a" data-role="footer" data-position="fixed">
169242      <div  data-role="navbar" data-iconpos="top">
r25436r25437
183256         </ul>
184257      </div>
185258      <h3>
186         <div id="current"></div>
259         <table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse; " border="0" id="maindisplay">
260            <tr>
261               <td style="padding: 0px;"<div id="main_statusbar_connectionstatus"></div></td>
262               <td style="padding: 0px;"<div id="main_statusbar_ispaused"></div></td>
263               <td style="width: 80%; padding: 0px;"<div id="main_statusbar_runningdriver"></div></td>
264            </tr>
265         </table>
187266      </h3>
267   </div>
268</div>
269
270<div data-role="page" id="commandmenu">
271    <div data-theme="a" data-role="header">
272        <div style="width: 100%; height: 120px; position: relative;">
273         <img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
274        </div>
275        <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
276        <div data-role="navbar" data-iconpos="top">
277            <ul>
278                <li>
279                    <a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a>
280                </li>
281                <li>
282                    <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
283                </li>
284                <li>
285                    <a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a>
286                </li>
287                <li>
288                    <a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a>
289                </li>
290            </ul>
291        </div>
188292    </div>
293    <div data-role="content" id ="menu_commandmenu">   
294      <h2>Reset Control</h2>
295      <div class="ui-grid-a">
296         <div class="ui-block-a"><a href="confirmsoftreset.html" data-rel="dialog" data-role="button">Soft reset</a></div>
297         <div class="ui-block-b"><a href="confirmhardreset.html" data-rel="dialog" data-role="button">Hard reset</a></div>
298      </div>
299      <h2>Savestate Control</h2>
300      <div class="ui-grid-a">
301         <div class="ui-block-a"><a href="#savestatepanel" data-transition="fade" data-role="button">Save State</a></div>
302         <div class="ui-block-b"><a href="#loadstatepanel" data-transition="fade" data-role="button">Load State</a></div>
303      </div>
304      <h2>Execution Control</h2>
305      <a href="javascript:executeCommands('togglepause');" data-role="button">Toggle Pause</a>
306      <a href="confirmexit.html" data-rel="dialog" data-role="button">Exit</a>
307      <div data-role="panel" id="savestatepanel" data-position="left" data-display="overlay" data-theme="a">
308         <h3>Select position to save to</h3>
309
310         <!-- Yes, it's a little ugly. I could redo this more cleanly with a little javascript, but not right now. -->
311         <div data-role="controlgroup" data-type="horizontal">
312            <a href="" data-rel="close" data-role="button">Cancel</a>
313            <a href="javascript:executeCommands('savestate&val=auto');" data-role="button">Autosave Slot</a>
314         </div>
315         <div data-role="controlgroup" data-type="horizontal">
316            <a href="javascript:executeCommands('savestate&val=0');" data-role="button">0</a>
317            <a href="javascript:executeCommands('savestate&val=1');" data-role="button">1</a>
318            <a href="javascript:executeCommands('savestate&val=2');" data-role="button">2</a>
319            <a href="javascript:executeCommands('savestate&val=3');" data-role="button">3</a>
320         </div>
321         <div data-role="controlgroup" data-type="horizontal">
322            <a href="javascript:executeCommands('savestate&val=4');" data-role="button">4</a>   
323            <a href="javascript:executeCommands('savestate&val=5');" data-role="button">5</a>
324            <a href="javascript:executeCommands('savestate&val=6');" data-role="button">6</a>
325            <a href="javascript:executeCommands('savestate&val=7');" data-role="button">7</a>
326         </div>
327         <div data-role="controlgroup" data-type="horizontal">
328            <a href="javascript:executeCommands('savestate&val=8');" data-role="button">8</a>
329            <a href="javascript:executeCommands('savestate&val=9');" data-role="button">9</a>
330            <a href="javascript:executeCommands('savestate&val=a');" data-role="button">A</a>
331            <a href="javascript:executeCommands('savestate&val=b');" data-role="button">B</a>
332         </div>
333         <div data-role="controlgroup" data-type="horizontal">
334            <a href="javascript:executeCommands('savestate&val=c');" data-role="button">C</a>
335            <a href="javascript:executeCommands('savestate&val=d');" data-role="button">D</a>
336            <a href="javascript:executeCommands('savestate&val=e');" data-role="button">E</a>
337            <a href="javascript:executeCommands('savestate&val=f');" data-role="button">F</a>
338         </div>
339         <div data-role="controlgroup" data-type="horizontal">
340            <a href="javascript:executeCommands('savestate&val=g');" data-role="button">G</a>
341            <a href="javascript:executeCommands('savestate&val=h');" data-role="button">H</a>
342            <a href="javascript:executeCommands('savestate&val=i');" data-role="button">I</a>
343            <a href="javascript:executeCommands('savestate&val=j');" data-role="button">J</a>
344         </div>
345         <div data-role="controlgroup" data-type="horizontal">
346            <a href="javascript:executeCommands('savestate&val=k');" data-role="button">K</a>
347            <a href="javascript:executeCommands('savestate&val=l');" data-role="button">L</a>
348            <a href="javascript:executeCommands('savestate&val=m');" data-role="button">M</a>
349            <a href="javascript:executeCommands('savestate&val=n');" data-role="button">N</a>
350         </div>
351         <div data-role="controlgroup" data-type="horizontal">
352            <a href="javascript:executeCommands('savestate&val=o');" data-role="button">O</a>
353            <a href="javascript:executeCommands('savestate&val=p');" data-role="button">P</a>
354            <a href="javascript:executeCommands('savestate&val=q');" data-role="button">Q</a>
355            <a href="javascript:executeCommands('savestate&val=r');" data-role="button">R</a>
356         </div>
357         <div data-role="controlgroup" data-type="horizontal">
358            <a href="javascript:executeCommands('savestate&val=s');" data-role="button">S</a>
359            <a href="javascript:executeCommands('savestate&val=t');" data-role="button">T</a>
360            <a href="javascript:executeCommands('savestate&val=u');" data-role="button">U</a>
361            <a href="javascript:executeCommands('savestate&val=v');" data-role="button">V</a>
362         </div>
363         <div data-role="controlgroup" data-type="horizontal">
364            <a href="javascript:executeCommands('savestate&val=w');" data-role="button">W</a>
365            <a href="javascript:executeCommands('savestate&val=x');" data-role="button">X</a>
366            <a href="javascript:executeCommands('savestate&val=y');" data-role="button">Y</a>
367            <a href="javascript:executeCommands('savestate&val=z');" data-role="button">Z</a>
368         </div>
369         <!-- This is here to prevent webkit from trying to put the last row of states under the bottom menu on small screens like phone-->
370         <br><br><br><br><br>
371      </div>
372
373      <div data-role="panel" id="loadstatepanel" data-position="left" data-display="overlay" data-theme="a">
374         <h3>Select position to load from</h3>
375
376         <!-- Yes, it's a little ugly. I could redo this more cleanly with a little javascript, but not right now. -->
377         <div data-role="controlgroup" data-type="horizontal">
378            <a href="" data-rel="close" data-role="button">Cancel</a>
379            <a href="javascript:executeCommands('loadstate&val=auto');" data-role="button">Autoload Slot</a>
380         </div>
381         <div data-role="controlgroup" data-type="horizontal">
382            <a href="javascript:executeCommands('loadstate&val=0');" data-role="button">0</a>
383            <a href="javascript:executeCommands('loadstate&val=1');" data-role="button">1</a>
384            <a href="javascript:executeCommands('loadstate&val=2');" data-role="button">2</a>
385            <a href="javascript:executeCommands('loadstate&val=3');" data-role="button">3</a>
386         </div>
387         <div data-role="controlgroup" data-type="horizontal">
388            <a href="javascript:executeCommands('loadstate&val=4');" data-role="button">4</a>   
389            <a href="javascript:executeCommands('loadstate&val=5');" data-role="button">5</a>
390            <a href="javascript:executeCommands('loadstate&val=6');" data-role="button">6</a>
391            <a href="javascript:executeCommands('loadstate&val=7');" data-role="button">7</a>
392         </div>
393         <div data-role="controlgroup" data-type="horizontal">
394            <a href="javascript:executeCommands('loadstate&val=8');" data-role="button">8</a>
395            <a href="javascript:executeCommands('loadstate&val=9');" data-role="button">9</a>
396            <a href="javascript:executeCommands('loadstate&val=a');" data-role="button">A</a>
397            <a href="javascript:executeCommands('loadstate&val=b');" data-role="button">B</a>
398         </div>
399         <div data-role="controlgroup" data-type="horizontal">
400            <a href="javascript:executeCommands('loadstate&val=c');" data-role="button">C</a>
401            <a href="javascript:executeCommands('loadstate&val=d');" data-role="button">D</a>
402            <a href="javascript:executeCommands('loadstate&val=e');" data-role="button">E</a>
403            <a href="javascript:executeCommands('loadstate&val=f');" data-role="button">F</a>
404         </div>
405         <div data-role="controlgroup" data-type="horizontal">
406            <a href="javascript:executeCommands('loadstate&val=g');" data-role="button">G</a>
407            <a href="javascript:executeCommands('loadstate&val=h');" data-role="button">H</a>
408            <a href="javascript:executeCommands('loadstate&val=i');" data-role="button">I</a>
409            <a href="javascript:executeCommands('loadstate&val=j');" data-role="button">J</a>
410         </div>
411         <div data-role="controlgroup" data-type="horizontal">
412            <a href="javascript:executeCommands('loadstate&val=k');" data-role="button">K</a>
413            <a href="javascript:executeCommands('loadstate&val=l');" data-role="button">L</a>
414            <a href="javascript:executeCommands('loadstate&val=m');" data-role="button">M</a>
415            <a href="javascript:executeCommands('loadstate&val=n');" data-role="button">N</a>
416         </div>
417         <div data-role="controlgroup" data-type="horizontal">
418            <a href="javascript:executeCommands('loadstate&val=o');" data-role="button">O</a>
419            <a href="javascript:executeCommands('loadstate&val=p');" data-role="button">P</a>
420            <a href="javascript:executeCommands('loadstate&val=q');" data-role="button">Q</a>
421            <a href="javascript:executeCommands('loadstate&val=r');" data-role="button">R</a>
422         </div>
423         <div data-role="controlgroup" data-type="horizontal">
424            <a href="javascript:executeCommands('loadstate&val=s');" data-role="button">S</a>
425            <a href="javascript:executeCommands('loadstate&val=t');" data-role="button">T</a>
426            <a href="javascript:executeCommands('loadstate&val=u');" data-role="button">U</a>
427            <a href="javascript:executeCommands('loadstate&val=v');" data-role="button">V</a>
428         </div>
429         <div data-role="controlgroup" data-type="horizontal">
430            <a href="javascript:executeCommands('loadstate&val=w');" data-role="button">W</a>
431            <a href="javascript:executeCommands('loadstate&val=x');" data-role="button">X</a>
432            <a href="javascript:executeCommands('loadstate&val=y');" data-role="button">Y</a>
433            <a href="javascript:executeCommands('loadstate&val=z');" data-role="button">Z</a>
434         </div>
435         <!-- 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         <br><br><br><br><br>
437      </div>
438    </div>
439    <div data-theme="a" data-role="footer" data-position="fixed">
440      <div  data-role="navbar" data-iconpos="top">
441         <ul>
442            <li>
443               <a href="javascript:loadContent('info');" data-transition="fade" data-icon="info">Info</a>
444            </li>
445            <li>
446               <a href="javascript:loadContent('logs');" data-transition="fade" data-icon="check">Logs</a>
447            </li>
448            <li>
449               <a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
450            </li>
451            <li>
452               <a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
453            </li>
454         </ul>
455      </div>
456      <h3>
457         <table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse; " border="0" id="maindisplay">
458            <tr>
459               <td style="padding: 0px;"<div id="command_statusbar_connectionstatus"></div></td>
460               <td style="padding: 0px;"<div id="command_statusbar_ispaused"></div></td>
461               <td style="width: 80%; padding: 0px;"<div id="command_statusbar_runningdriver"></div></td>
462            </tr>
463         </table>
464      </h3>
465    </div>
189466</div>
467
468<div data-role="page" id="slidermenu">
469    <div data-theme="a" data-role="header">
470        <div style="width: 100%; height: 120px; position: relative;">
471         <img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
472        </div>
473        <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
474        <div data-role="navbar" data-iconpos="top">
475            <ul>
476                <li>
477                    <a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a>
478                </li>
479                <li>
480                    <a href="#optionmenu" data-transition="fade" data-icon="gear">Options</a>
481                </li>
482                <li>
483                    <a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a>
484                </li>
485                <li>
486                    <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
487                </li>
488            </ul>
489        </div>
490    </div>
491    <div data-role="content" id ="sliders">   
492    </div>
493    <div data-theme="a" data-role="footer" data-position="fixed">
494      <div  data-role="navbar" data-iconpos="top">
495         <ul>
496            <li>
497               <a href="javascript:loadContent('info');" data-transition="fade" data-icon="info">Info</a>
498            </li>
499            <li>
500               <a href="javascript:loadContent('logs');" data-transition="fade" data-icon="check">Logs</a>
501            </li>
502            <li>
503               <a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
504            </li>
505            <li>
506               <a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
507            </li>
508         </ul>
509      </div>
510      <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>
521      </h3>
522    </div>
523</div>
524
525<div data-role="page" id="optionmenu">
526    <div data-theme="a" data-role="header">
527        <div style="width: 100%; height: 120px; position: relative;">
528         <img src="images/logo-mame-small.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -158px; margin-top: -50px">
529        </div>
530        <a data-role="button" href="#mainmenu" data-icon="home" data-iconpos="left" class="ui-btn-right">Home</a>
531        <div data-role="navbar" data-iconpos="top">
532            <ul>
533                <li>
534                    <a href="javascript:loadContent('driver');" data-transition="fade" data-icon="bars">Driver</a>
535                </li>
536                <li>
537                    <a href="#mainmenu" data-transition="fade" data-icon="home">Main Menu</a>
538                </li>
539                <li>
540                    <a href="javascript:loadContent('image');" data-transition="fade" data-icon="grid">Image</a>
541                </li>
542                <li>
543                    <a href="#commandmenu" data-transition="fade" data-icon="star">Commands</a>
544                </li>
545            </ul>
546        </div>
547    </div>
548    <div data-role="content" id ="menu_optionmenu">   
549      <a href="javascript:executeSlider();" data-role="button">Sliders</a>
550    </div>
551    <div data-theme="a" data-role="footer" data-position="fixed">
552      <div  data-role="navbar" data-iconpos="top">
553         <ul>
554            <li>
555               <a href="javascript:loadContent('info');" data-transition="fade" data-icon="info">Info</a>
556            </li>
557            <li>
558               <a href="javascript:loadContent('logs');" data-transition="fade" data-icon="check">Logs</a>
559            </li>
560            <li>
561               <a href="javascript:takeScreenshot();" data-transition="fade" data-icon="search">Screenshot</a>
562            </li>
563            <li>
564               <a href="javascript:startWebSocket();" data-transition="fade" data-icon="refresh">Reconnect</a>
565            </li>
566         </ul>
567      </div>
568      <h3>
569         <table style="tablelayout: fixed; width: 100%; height: 10px; border-collapse:collapse; " border="0" id="maindisplay">
570            <tr>
571               <td style="padding:0px;"><div id="slider_statusbar_connectionstatus"></div></td>
572               <td style="padding:0px;"><div id="slider_statusbar_ispaused"></div></td>
573               <td style="width: 80%; padding:0px;"><div id="slider_statusbar_runningdriver"></div></td>
574            </tr>
575         </table>
576      </h3>
577    </div>
578</div>
579
190580</body>
191581</html>
192582

Previous 199869 Revisions Next

© 1997-2024 The MAME Team