Browse Source

fullscreen

main
Hendrik Langer 4 years ago
parent
commit
72be3c2b23
  1. 4
      raspberry/roberto/views/frontend/routes.py
  2. 64
      raspberry/roberto/views/frontend/templates/index.html
  3. 15
      raspberry/roberto/views/frontend/templates/manifest.json

4
raspberry/roberto/views/frontend/routes.py

@ -37,3 +37,7 @@ def gamepad_js():
@frontend_blueprint.route('/virtualjoystick.js') @frontend_blueprint.route('/virtualjoystick.js')
def virtualjoystick_js(): def virtualjoystick_js():
return render_template('virtualjoystick.js'), {'Content-Type': 'text/javascript'} return render_template('virtualjoystick.js'), {'Content-Type': 'text/javascript'}
@frontend_blueprint.route('/manifest.json')
def manifest_json():
return render_template('manifest.json'), {'Content-Type': 'application/json'}

64
raspberry/roberto/views/frontend/templates/index.html

@ -3,6 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<link rel="manifest" href="/manifest.json">
<title>Roberto</title> <title>Roberto</title>
<!-- Bootstrap --> <!-- Bootstrap -->
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet"> <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
@ -39,7 +41,7 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
#message { #controls2 {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 20px; top: 20px;
@ -68,10 +70,13 @@
<div id="controls_l"></div> <div id="controls_l"></div>
<div id="controls_r"></div> <div id="controls_r"></div>
</div> </div>
<div id="controls2">
<button id="goFS">&#x26f6</button>
<form id="message" method="POST" action='#'> <form id="message" method="POST" action='#'>
<input type="text" name="message_data" id="message_data" placeholder="Message"> <input type="text" name="message_data" id="message_data" placeholder="Message">
<input type="submit" value="Send"> <input type="submit" value="Send">
</form> </form>
</div>
<div class="stats-box"></div> <div class="stats-box"></div>
<!--<h2 id="start">Press a button on your controller to start</h2>--> <!--<h2 id="start">Press a button on your controller to start</h2>-->
@ -170,6 +175,20 @@ socket.on('battery', (data) => {
ctx.fillText(data, 3*canvas.width/4, 30); ctx.fillText(data, 3*canvas.width/4, 30);
}); });
function displayText(text, left, top) {
var canvas = document.getElementById("textoverlay");
var ctx = canvas.getContext("2d");
ctx.font = "16px Arial";
ctx.fillStyle = "blue";
ctx.fillText(text, left, top);
}
function clearText() {
var canvas = document.getElementById("textoverlay");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function playStream(videoElement, hostname, port, path, configuration, reportErrorCB) { function playStream(videoElement, hostname, port, path, configuration, reportErrorCB) {
var l = window.location; var l = window.location;
var wsHost = (hostname != undefined) ? hostname : l.hostname; var wsHost = (hostname != undefined) ? hostname : l.hostname;
@ -203,9 +222,52 @@ socket.on('battery', (data) => {
$('#message_data').val(""); $('#message_data').val("");
return false; return false;
}); });
vidstream.addEventListener("play", function() {
clearText();
}, true);
vidstream.addEventListener("pause", function() {
displayText("PAUSED", canvas.width/3, canvas.height/2);
}, true);
displayText("PAUSED", canvas.width/3, canvas.height/2);
/*
var promise = document.getElementById('stream').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
displayText("playing", canvas.width/2, canvas.height/2);
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
displayText("PAUSED", canvas.width/3, canvas.height/2);
});
}
*/
}; };
function toggleFullScreen() {
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
requestFullScreen.call(docEl);
}
else {
cancelFullScreen.call(doc);
}
}
var goFS = document.getElementById("goFS");
goFS.addEventListener("click", function() {
toggleFullScreen();
document.getElementById("goFS").style.display = "none";
}, false);
function getConnectionStats() { function getConnectionStats() {
if (webrtcPeerConnection) { if (webrtcPeerConnection) {
webrtcPeerConnection.getStats(null).then(stats => { webrtcPeerConnection.getStats(null).then(stats => {

15
raspberry/roberto/views/frontend/templates/manifest.json

@ -0,0 +1,15 @@
{
"short_name": "Roberto Robot",
"name": "Robot Control Application ++",
"icons": [
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "fullscreen",
"orientation": "landscape"
}
Loading…
Cancel
Save