mirror of
https://github.com/libretro/RetroArch.git
synced 2025-01-21 00:05:30 +00:00
add new emscripten template
This commit is contained in:
radius
parent
32873de0ce
commit
d1f96cf0e4
57
emscripten/template2.html
Normal file
57
emscripten/template2.html
Normal file
@ -0,0 +1,57 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>RetroArch Web Player</title>
|
||||
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
|
||||
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Share+Tech+Mono">
|
||||
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
|
||||
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
||||
<style>
|
||||
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
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: left; }
|
||||
div.canvas_border { background-color:gray; width:800px; height:600px; margin-left: auto; margin-right: auto; }
|
||||
canvas.emscripten { border: 0px none; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#accordion" ).accordion();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
</p>
|
||||
<div class="canvas_border" id="canvas_div" style="display: block">
|
||||
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
</p>
|
||||
<div id="accordion" class="emscripten">
|
||||
<h3>Settings</h3>
|
||||
<div class="emscripten">
|
||||
|
||||
<button id="content" onclick="document.getElementById('rom').click()">Upload content</button>
|
||||
<input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('content').click();" onchange="runEmulator(event.target.files);" multiple /></p>
|
||||
<button id="saves" onclick="document.getElementById('savefiles').click()">Upload saves</button>
|
||||
<input style="display: none" type="file" id="savefiles" name="upload" onclick="document.getElementById('saves').click();" onchange="uploadSaveFiles(event.target.files);" multiple /></p>
|
||||
<button id="states" onclick="document.getElementById('savestates').click()">Upload states</button>
|
||||
<input style="display: none" type="file" id="savestates" name="upload" onclick="document.getElementById('states').click();" onchange="uploadSaveStateFiles(event.target.files);" multiple /></p>
|
||||
<input type="checkbox" id="resize"><label for="resize">Resize canvas</label></p>
|
||||
<input type="checkbox" id="pointerLock" checked><label for="pointerLock">Lock/hide mouse pointer</label></p>
|
||||
<input type="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, document.getElementById('resize').checked)"></p>
|
||||
<input type="checkbox" id="vsync"><label for="vsync" id="vsync-label">Enable V-sync (can only be done before loading game)</label></p>
|
||||
<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></p>
|
||||
</div>
|
||||
<h3>Console</h3>
|
||||
<div class="emscripten">
|
||||
<textarea class="emscripten" id="output" rows="20"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="emscripten" id="status">Status: </div>
|
||||
<progress value="0" max="100" id="progress" hidden=0></progress>
|
||||
</div>
|
||||
<script type="text/javascript" src="web.js"></script>
|
||||
<script type="text/javascript" src="retroarch.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
122
emscripten/web.js
Normal file
122
emscripten/web.js
Normal file
@ -0,0 +1,122 @@
|
||||
var count = 0;
|
||||
var filename = "";
|
||||
var firstRun = true;
|
||||
function runEmulator(files){
|
||||
if(firstRun)
|
||||
{
|
||||
Module.FS_createFolder('/', 'etc', true, true);
|
||||
Module.FS_createFolder('/', 'retroarch', true, true);
|
||||
Module.FS_createFolder('/retroarch', 'content', true, true);
|
||||
Module.FS_createFolder('/retroarch', 'saves', true, true);
|
||||
Module.FS_createFolder('/retroarch', 'states', true, true);
|
||||
Module.FS_createFolder('/retroarch', 'system', true, true);
|
||||
firstRun = false;
|
||||
}
|
||||
|
||||
count = files.length;
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
filereader = new FileReader();
|
||||
filereader.file_name = files[i].name;
|
||||
filereader.onload = function(){initFromData(this.result, '/retroarch/content/' + this.file_name)};
|
||||
filereader.readAsArrayBuffer(files[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function uploadSaveFiles(files){
|
||||
count = files.length;
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
filereader = new FileReader();
|
||||
filereader.file_name = files[i].name;
|
||||
filereader.onload = function(){initFromData(this.result, '/retroarch/saves/' + this.file_name)};
|
||||
filereader.readAsArrayBuffer(files[i]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function uploadSaveStateFiles(files){
|
||||
count = files.length;
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
filereader = new FileReader();
|
||||
filereader.file_name = files[i].name;
|
||||
filereader.onload = function(){initFromData(this.result, '/retroarch/states/' + this.file_name)};
|
||||
filereader.readAsArrayBuffer(files[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function initFromData(data, name){
|
||||
var dataView = new Uint8Array(data);
|
||||
Module.FS_createDataFile('/', name, dataView, true, false);
|
||||
count--;
|
||||
if (count === 0) {
|
||||
var config = 'input_player1_select = shift\n';
|
||||
var latency = parseInt(document.getElementById('latency').value, 10);
|
||||
if (isNaN(latency)) latency = 96;
|
||||
config += 'audio_latency = ' + latency + '\n'
|
||||
if (document.getElementById('vsync').checked)
|
||||
config += 'video_vsync = true\n';
|
||||
else
|
||||
config += 'video_vsync = false\n';
|
||||
config += 'rgui_browser_directory = /retroarch/content/\n';
|
||||
config += 'savefile_directory = /retroarch/saves/\n';
|
||||
config += 'savestate_directory = /retroarch/states/\n';
|
||||
config += 'system_directory = /retroarch/system/\n';
|
||||
Module.FS_createDataFile('/etc', 'retroarch.cfg', config, true, true);
|
||||
document.getElementById('canvas_div').style.display = 'block';
|
||||
document.getElementById('vsync').disabled = true;
|
||||
document.getElementById('vsync-label').style.color = 'gray';
|
||||
document.getElementById('latency').disabled = true;
|
||||
document.getElementById('latency-label').style.color = 'gray';
|
||||
Module['callMain'](Module['arguments']);
|
||||
}
|
||||
}
|
||||
// connect to canvas
|
||||
var Module = {
|
||||
noInitialRun: true,
|
||||
arguments: ["--verbose", "--menu"],
|
||||
preRun: [],
|
||||
postRun: [],
|
||||
print: (function() {
|
||||
var element = document.getElementById('output');
|
||||
element.value = ''; // clear browser cache
|
||||
return function(text) {
|
||||
text = Array.prototype.slice.call(arguments).join(' ');
|
||||
// These replacements are necessary if you render to raw HTML
|
||||
//text = text.replace(/&/g, "&");
|
||||
//text = text.replace(/</g, "<");
|
||||
//text = text.replace(/>/g, ">");
|
||||
//text = text.replace('\n', '<br>', 'g');
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = 99999; // focus on bottom
|
||||
};
|
||||
})(),
|
||||
printErr: function(text) {
|
||||
var text = Array.prototype.slice.call(arguments).join(' ');
|
||||
var element = document.getElementById('output');
|
||||
element.value += text + "\n";
|
||||
element.scrollTop = 99999; // focus on bottom
|
||||
},
|
||||
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,
|
||||
monitorRunDependencies: function(left) {
|
||||
this.totalDependencies = Math.max(this.totalDependencies, left);
|
||||
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
|
||||
}
|
||||
};
|
||||
Module.setStatus('Downloading...');
|
||||
Loading…
x
Reference in New Issue
Block a user