mirror/RetroArch
1
0
Fork 0
mirror of https://github.com/libretro/RetroArch synced 2025-03-26 02:37:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

allow loading persistent content in webplayer

Browse Source
This commit is contained in:
radius 2016-08-03 01:20:35 -05:00
parent 6c96adc843
commit 0cf79af646
2 changed files with 136 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
emscripten/template.html
View File

@ -7,26 +7,25 @@
<script type="text/javascript" src="browserfs.js"></script> <script type="text/javascript" src="browserfs.js"></script>
<style> <style>
.webplayer { padding-right: 0; margin-left: auto; margin-right: auto; display: block; } .emscripten { 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; } textarea.emscripten { border: 0px; font-family: 'Share Tech Mono'; font-size: 12px; width: 100%; overflow:hide; resize:none; color:black; }
div.webplayer, h1 { text-align: left; } div.emscripten, h1 { text-align: left; }
div.canvas_border { background-color:gray; width:800px; height:600px; margin-left: auto; margin-right: auto; } 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> </style>
</head> </head>
<body> <body>
<hr/> <hr/>
<div class="webplayer_border" id="canvas_div" style="display: none"> <div class="emscripten_border" id="canvas_div" style="display: none">
<canvas class="webplayer" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas> <canvas class="emscripten" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()"></canvas>
</div> </div>
<hr/> <div class="emscripten emscripten_border" id="openrom">
<div class="webplayer webplayer_border" id="openrom">
<button id="btnLoad" onclick="document.getElementById('rom').click()">Upload Content</button> <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> <button id="btnStart" onclick="startRetroArch()">Start RetroArch</button>
</div> </div>
<hr/> <hr/>
<div class="webplayer"> <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>
<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>
@ -36,12 +35,44 @@
</div> </div>
<hr/> <hr/>
<textarea class="webplayer" id="output" rows="15"></textarea> <textarea class="emscripten" id="output" rows="8"></textarea>
<hr> <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> </body>
</html> </html>
<script type='text/javascript'> <script type='text/javascript'>
var count = 0; var count = 0;
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() function startRetroArch()
{ {
Module.FS_createFolder('/', 'etc', true, true); Module.FS_createFolder('/', 'etc', true, true);

97
emscripten/webplayer.html
View File

@ -22,7 +22,7 @@
<hr/> <hr/>
<div class="webplayer webplayer_border" id="openrom"> <div class="webplayer webplayer_border" id="openrom">
<button id="btnLoad" onclick="document.getElementById('rom').click()">Upload Content</button> <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> <button id="btnStart" onclick="startRetroArch()">Start RetroArch</button>
</div> </div>
<hr/> <hr/>
@ -42,9 +42,65 @@
</html> </html>
<script type='text/javascript'> <script type='text/javascript'>
var count = 0; 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() function startRetroArch()
{ {
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(); 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 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;
@ -53,19 +109,42 @@
config += 'video_vsync = true\n'; config += 'video_vsync = true\n';
else else
config += 'video_vsync = false\n'; config += 'video_vsync = false\n';
Module.FS_createDataFile('/etc', 'retroarch.cfg', config, true, true); config += 'system_directory = /home/web_user/system/\n';
document.getElementById('canvas_div').style.display = 'block'; config += 'savefile_directory = /home/web_user/saves/\n';
document.getElementById('vsync').disabled = true; config += 'savestate_directory = /home/web_user/saves/\n';
document.getElementById('vsync-label').style.color = 'gray'; config += 'rgui_browser_directory = /home/web_user/content/\n';
document.getElementById('latency').disabled = true;
document.getElementById('latency-label').style.color = 'gray'; FS.writeFile(cfgFile, config);
}
else
{
console.log ("WEBPLAYER: loading config from " + cfgFile);
}
Module['callMain'](Module['arguments']); Module['callMain'](Module['arguments']);
} }
function uploadData(data, name) function selectFiles(files)
{
count = files.length;
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); 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 = var Module =