mirror of
https://github.com/libretro/RetroArch
synced 2025-03-22 16:20:58 +00:00
allow loading persistent content in webplayer
This commit is contained in:
radius
parent
6c96adc843
commit
0cf79af646
@ -7,26 +7,25 @@
|
||||
<script type="text/javascript" src="browserfs.js"></script>
|
||||
|
||||
<style>
|
||||
.webplayer { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
|
||||
textarea.webplayer { border: 0px; font-family: 'Share Tech Mono'; font-size: 12px; width: 100%; overflow:hide; resize:none; color:black; }
|
||||
div.webplayer, h1 { text-align: left; }
|
||||
.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.webplayer { border: 0px none; }
|
||||
canvas.emscripten { border: 0px none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<hr/>
|
||||
<div class="webplayer_border" id="canvas_div" style="display: none">
|
||||
<canvas class="webplayer" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas>
|
||||
<div class="emscripten_border" id="canvas_div" style="display: none">
|
||||
<canvas class="emscripten" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="webplayer webplayer_border" id="openrom">
|
||||
<div class="emscripten emscripten_border" id="openrom">
|
||||
<button id="btnLoad" onclick="document.getElementById('rom').click()">Upload Content</button>
|
||||
<input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" 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()">Start RetroArch</button>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="webplayer">
|
||||
<div class="emscripten">
|
||||
<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="button" value="Fullscreen" onclick="Module.requestFullScreen(document.getElementById('pointerLock').checked, document.getElementById('resize').checked)"><br>
|
||||
@ -36,14 +35,46 @@
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
<textarea class="webplayer" id="output" rows="15"></textarea>
|
||||
<textarea class="emscripten" id="output" rows="8"></textarea>
|
||||
<hr>
|
||||
<div class="emscripten" id="controls">
|
||||
Controls:<br>
|
||||
<br>
|
||||
A button (OK in menu): X<br>
|
||||
B button (Back in menu): Z<br>
|
||||
X Button: S<br>
|
||||
Y Button: A<br>
|
||||
L Button: Q<br>
|
||||
R Button: W<br>
|
||||
D-pad: Arrow Keys<br>
|
||||
Start Button: Enter<br>
|
||||
Select Button: Shift<br>
|
||||
Toggle Menu: F1<br>
|
||||
Fast forward: Spacebar (toggle)<br>
|
||||
Slow motion: E (hold)</br>
|
||||
Save state: F2<br>
|
||||
Load state: F4
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script type='text/javascript'>
|
||||
var count = 0;
|
||||
function startRetroArch()
|
||||
function runEmulator(files)
|
||||
{
|
||||
count = files.length;
|
||||
document.getElementById("openrom").innerHTML = '';
|
||||
document.getElementById("openrom").style.display = 'none';
|
||||
for (var i = 0; i < files.length; i++)
|
||||
{
|
||||
filereader = new FileReader();
|
||||
filereader.file_name = files[i].name;
|
||||
filereader.onload = function(){uploadData(this.result, this.file_name)};
|
||||
filereader.readAsArrayBuffer(files[i]);
|
||||
}
|
||||
}
|
||||
function startRetroArch()
|
||||
{
|
||||
Module.FS_createFolder('/', 'etc', true, true);
|
||||
Module.FS_createFolder('/', 'config', true, true);
|
||||
Module.FS_createFolder('/', 'content', true, true);
|
||||
@ -64,7 +95,7 @@
|
||||
document.getElementById('latency').disabled = true;
|
||||
document.getElementById('latency-label').style.color = 'gray';
|
||||
Module['callMain'](Module['arguments']);
|
||||
}
|
||||
}
|
||||
|
||||
function uploadData(data, name)
|
||||
{
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<hr/>
|
||||
<div class="webplayer webplayer_border" id="openrom">
|
||||
<button id="btnLoad" onclick="document.getElementById('rom').click()">Upload Content</button>
|
||||
<input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" multiple />
|
||||
<input style="display: none" type="file" id="rom" name="upload" onclick="document.getElementById('btnLoad').click();" onchange="selectFiles(event.target.files)" multiple />
|
||||
<button id="btnStart" onclick="startRetroArch()">Start RetroArch</button>
|
||||
</div>
|
||||
<hr/>
|
||||
@ -42,30 +42,109 @@
|
||||
</html>
|
||||
<script type='text/javascript'>
|
||||
var count = 0;
|
||||
|
||||
function setupFileSystem()
|
||||
{
|
||||
if(localStorage.getItem("fs_inited")!="true")
|
||||
{
|
||||
var lsfs = new BrowserFS.FileSystem.LocalStorage();
|
||||
BrowserFS.initialize(lsfs);
|
||||
var BFS = new BrowserFS.EmscriptenFS();
|
||||
|
||||
FS.mount(BFS, {root: '/'}, '/home');
|
||||
|
||||
console.log('WEBPLAYER: Filesystem initialized');
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log('WEBPLAYER: Filesystem already initialized');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function setupFolderStructure()
|
||||
{
|
||||
FS.createPath('/', '/home/web_user', true, true);
|
||||
FS.createPath('/', '/home/web_user/.config', true, true);
|
||||
FS.createPath('/', '/home/web_user/.config/retroarch', true, true);
|
||||
FS.createPath('/', '/home/web_user/content', true, true);
|
||||
FS.createPath('/', '/home/web_user/saves', true, true);
|
||||
FS.createPath('/', '/home/web_user/states', true, true);
|
||||
FS.createPath('/', '/home/web_user/system', true, true);
|
||||
}
|
||||
|
||||
function stat(path)
|
||||
{
|
||||
try{
|
||||
FS.stat(path);
|
||||
}
|
||||
catch(err)
|
||||
{
|
||||
console.log("WEBPLAYER: file " + path + " doesn't exist");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function startRetroArch()
|
||||
{
|
||||
setupFileSystem();
|
||||
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';
|
||||
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';
|
||||
|
||||
setupFileSystem();
|
||||
setupFolderStructure();
|
||||
cfgFile = '/home/web_user/.config/retroarch/retroarch.cfg'
|
||||
|
||||
if (!stat(cfgFile))
|
||||
{
|
||||
console.log ("WEBPLAYER: first run, setting defaults");
|
||||
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 += 'system_directory = /home/web_user/system/\n';
|
||||
config += 'savefile_directory = /home/web_user/saves/\n';
|
||||
config += 'savestate_directory = /home/web_user/saves/\n';
|
||||
config += 'rgui_browser_directory = /home/web_user/content/\n';
|
||||
|
||||
FS.writeFile(cfgFile, config);
|
||||
}
|
||||
else
|
||||
{
|
||||
console.log ("WEBPLAYER: loading config from " + cfgFile);
|
||||
}
|
||||
Module['callMain'](Module['arguments']);
|
||||
}
|
||||
|
||||
function selectFiles(files)
|
||||
{
|
||||
count = files.length;
|
||||
|
||||
function uploadData(data, name)
|
||||
for (var i = 0; i < files.length; i++)
|
||||
{
|
||||
filereader = new FileReader();
|
||||
filereader.file_name = files[i].name;
|
||||
filereader.readAsArrayBuffer(files[i]);
|
||||
filereader.onload = function(){uploadData(this.result, this.file_name)};
|
||||
}
|
||||
}
|
||||
|
||||
function uploadData(data,name)
|
||||
{
|
||||
var dataView = new Uint8Array(data);
|
||||
Module.FS_createDataFile('/', name, dataView, true, false);
|
||||
FS.createDataFile('/', name, dataView, true, false);
|
||||
|
||||
var data = FS.readFile(name,{ encoding: 'binary' });
|
||||
FS.writeFile('/home/web_user/content/' + name, data ,{ encoding: 'binary' });
|
||||
FS.unlink(name);
|
||||
|
||||
}
|
||||
|
||||
var Module =
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user