mirror/RetroArch
1
0
Fork 0
mirror of https://github.com/libretro/RetroArch synced 2025-03-30 16:20:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

simplify template

Browse Source
This commit is contained in:
radius 2016-08-02 19:37:01 -05:00
parent cef5c828e8
commit ce7ba91411
1 changed files with 113 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
emscripten/template.html
View File

@ -1,41 +1,34 @@
<!doctype html> <!doctype html>
<html lang="en-us">
<html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>RetroArch Web Player</title>
<title>RetroArch - Template</title> <script type="text/javascript" src="browserfs.js"></script>
<style> <style>
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; } .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
textarea.emscripten { font-family: monospace; width: 80%; } textarea.emscripten { border: 0px; font-family: 'Share Tech Mono'; font-size: 12px; width: 100%; overflow:hide; resize:none; color:black; }
div.emscripten, h1 { text-align: center; } div.emscripten, h1 { text-align: left; }
div.emscripten_border { border: 1px solid black; } div.canvas_border { background-color:gray; width:800px; height:600px; margin-left: auto; margin-right: auto; }
#fakerom { font-size: 20pt; margin: 5pt;}
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; } canvas.emscripten { border: 0px none; }
</style> </style>
</head> </head>
<body> <body>
<h1>Template</h1>
<hr/> <hr/>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
</div>
<div class="emscripten_border" id="canvas_div" style="display: none"> <div class="emscripten_border" id="canvas_div" style="display: none">
<canvas class="emscripten" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas> <canvas class="emscripten" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas>
</div> </div>
<div class="emscripten emscripten_border" id="openrom"> <div class="emscripten emscripten_border" id="openrom">
<button id="fakerom" onclick="document.getElementById('rom').click()">Select content</button> <button id="btnLoad" onclick="document.getElementById('rom').click()">Select content</button>
<input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('fakerom').click();" onchange="runEmulator(event.target.files);" multiple /> <input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" onchange="runEmulator(event.target.files);" multiple />
<button id="btnStart" onclick="startRetroArch()">Select content</button>
</div> </div>
<hr/> <hr/>
<div class="emscripten"> <div class="emscripten">
<input type="checkbox" id="resize"><label for="resize">Resize canvas</label> <input type="checkbox" id="resize"><label for="resize">Resize canvas</label>
<input type="checkbox" id="pointerLock" checked><label for="pointerLock">Lock/hide mouse pointer</label> <input type="checkbox" id="pointerLock" checked><label for="pointerLock">Lock/hide mouse pointer</label>
&nbsp;&nbsp;&nbsp; <input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, document.getElementById('resize').checked)"><br>
<input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked,
document.getElementById('resize').checked)"><br>
<input type="checkbox" id="vsync"><label for="vsync" id="vsync-label">Enable V-sync (can only be done before loading game)</label><br> <input type="checkbox" id="vsync"><label for="vsync" id="vsync-label">Enable V-sync (can only be done before loading game)</label><br>
<input type="checkbox" id="sdl2"><label for="sdl2" id="sdl2-label">Enable SDL2</label><br> <input type="checkbox" id="sdl2"><label for="sdl2" id="sdl2-label">Enable SDL2</label><br>
<input type="textbox" id="latency" size="3" maxlength="3" value="96"> <label for="latency" id="latency-label">Audio latency (ms) (increase if you hear pops at fullspeed, can only be done before loading game)</label> <input type="textbox" id="latency" size="3" maxlength="3" value="96"> <label for="latency" id="latency-label">Audio latency (ms) (increase if you hear pops at fullspeed, can only be done before loading game)</label>
@ -62,26 +55,31 @@
Save state: F2<br> Save state: F2<br>
Load state: F4 Load state: F4
</div> </div>
</body>
</html>
<script type='text/javascript'> <script type='text/javascript'>
var count = 0; var count = 0;
function runEmulator(files){ function runEmulator(files)
{
count = files.length; count = files.length;
document.getElementById("openrom").innerHTML = ''; document.getElementById("openrom").innerHTML = '';
document.getElementById("openrom").style.display = 'none'; document.getElementById("openrom").style.display = 'none';
for (var i = 0; i < files.length; i++) { for (var i = 0; i < files.length; i++)
{
filereader = new FileReader(); filereader = new FileReader();
filereader.file_name = files[i].name; filereader.file_name = files[i].name;
filereader.onload = function(){initFromData(this.result, this.file_name)}; filereader.onload = function(){uploadData(this.result, this.file_name)};
filereader.readAsArrayBuffer(files[i]); filereader.readAsArrayBuffer(files[i]);
} }
} }
function startRetroArch()
function initFromData(data, name){ {
var dataView = new Uint8Array(data);
Module.FS_createDataFile('/', name, dataView, true, false);
count--;
if (count === 0) {
Module.FS_createFolder('/', 'etc', true, true); Module.FS_createFolder('/', 'etc', true, true);
Module.FS_createFolder('/', 'config', true, true);
Module.FS_createFolder('/', 'content', true, true);
Module.FS_createFolder('/', 'savefiles', true, true);
Module.FS_createFolder('/', 'savestates', true, true);
var config = 'input_player1_select = shift\n'; var config = 'input_player1_select = shift\n';
var latency = parseInt(document.getElementById('latency').value, 10); var latency = parseInt(document.getElementById('latency').value, 10);
if (isNaN(latency)) latency = 96; if (isNaN(latency)) latency = 96;
@ -98,59 +96,47 @@
document.getElementById('latency-label').style.color = 'gray'; document.getElementById('latency-label').style.color = 'gray';
Module['callMain'](Module['arguments']); Module['callMain'](Module['arguments']);
} }
function uploadData(data, name)
{
var dataView = new Uint8Array(data);
Module.FS_createDataFile('/', name, dataView, true, false);
} }
</script>
<script type='text/javascript'> var Module =
// connect to canvas {
var Module = {
noInitialRun: true, noInitialRun: true,
arguments: ["-v", "--menu"], arguments: ["-v", "--menu"],
preRun: [], preRun: [],
postRun: [], postRun: [],
print: (function() { print: (function()
{
var element = document.getElementById('output'); var element = document.getElementById('output');
element.value = ''; // clear browser cache element.value = ''; // clear browser cache
return function(text) { return function(text)
{
text = Array.prototype.slice.call(arguments).join(' '); text = Array.prototype.slice.call(arguments).join(' ');
// These replacements are necessary if you render to raw HTML
//text = text.replace(/&/g, "&amp;");
//text = text.replace(/</g, "&lt;");
//text = text.replace(/>/g, "&gt;");
//text = text.replace('\n', '<br>', 'g');
element.value += text + "\n"; element.value += text + "\n";
element.scrollTop = 99999; // focus on bottom element.scrollTop = 99999; // focus on bottom
}; };
})(), })(),
printErr: function(text) {
printErr: function(text)
{
var text = Array.prototype.slice.call(arguments).join(' '); var text = Array.prototype.slice.call(arguments).join(' ');
var element = document.getElementById('output'); var element = document.getElementById('output');
element.value += text + "\n"; element.value += text + "\n";
element.scrollTop = 99999; // focus on bottom element.scrollTop = 99999; // focus on bottom
}, },
canvas: document.getElementById('canvas'), canvas: document.getElementById('canvas'),
setStatus: function(text) {
if (Module.setStatus.interval) clearInterval(Module.setStatus.interval);
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
var statusElement = document.getElementById('status');
var progressElement = document.getElementById('progress');
if (m) {
text = m[1];
progressElement.value = parseInt(m[2])*100;
progressElement.max = parseInt(m[4])*100;
progressElement.hidden = false;
} else {
progressElement.value = null;
progressElement.max = null;
progressElement.hidden = true;
}
statusElement.innerHTML = text;
},
totalDependencies: 0, totalDependencies: 0,
monitorRunDependencies: function(left) { monitorRunDependencies: function(left)
{
this.totalDependencies = Math.max(this.totalDependencies, left); this.totalDependencies = Math.max(this.totalDependencies, left);
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
} }
}; };
Module.setStatus('Downloading...');
</script> </script>
<script type="text/javascript" src="browserfs.js"></script>
<script type="text/javascript" src="retroarch.js"></script> <script type="text/javascript" src="retroarch.js"></script>