From 72be3c2b23e195ba5c235515c31a2d9b6d984be0 Mon Sep 17 00:00:00 2001 From: Hendrik Langer Date: Thu, 6 Aug 2020 12:39:51 +0200 Subject: [PATCH] fullscreen --- raspberry/roberto/views/frontend/routes.py | 4 ++ .../views/frontend/templates/index.html | 72 +++++++++++++++++-- .../views/frontend/templates/manifest.json | 15 ++++ 3 files changed, 86 insertions(+), 5 deletions(-) create mode 100644 raspberry/roberto/views/frontend/templates/manifest.json diff --git a/raspberry/roberto/views/frontend/routes.py b/raspberry/roberto/views/frontend/routes.py index 6ce7441..07ee01b 100644 --- a/raspberry/roberto/views/frontend/routes.py +++ b/raspberry/roberto/views/frontend/routes.py @@ -37,3 +37,7 @@ def gamepad_js(): @frontend_blueprint.route('/virtualjoystick.js') def virtualjoystick_js(): 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'} diff --git a/raspberry/roberto/views/frontend/templates/index.html b/raspberry/roberto/views/frontend/templates/index.html index 84974d3..b23faeb 100644 --- a/raspberry/roberto/views/frontend/templates/index.html +++ b/raspberry/roberto/views/frontend/templates/index.html @@ -3,6 +3,8 @@ + + Roberto @@ -39,7 +41,7 @@ position: relative; z-index: 1; } - #message { + #controls2 { position: absolute; z-index: 1; top: 20px; @@ -68,10 +70,13 @@
-
- - -
+
+ +
+ + +
+
@@ -170,6 +175,20 @@ socket.on('battery', (data) => { 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) { var l = window.location; var wsHost = (hostname != undefined) ? hostname : l.hostname; @@ -203,9 +222,52 @@ socket.on('battery', (data) => { $('#message_data').val(""); 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() { if (webrtcPeerConnection) { webrtcPeerConnection.getStats(null).then(stats => { diff --git a/raspberry/roberto/views/frontend/templates/manifest.json b/raspberry/roberto/views/frontend/templates/manifest.json new file mode 100644 index 0000000..7a3a245 --- /dev/null +++ b/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" +} +