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"
+}
+