External window for emocam

applications/emocam/emocam1.js

@@ -11,22 +11,17 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
+var webWindow;
 
 (function () {
     var jsMainFileName = "emocam1.js";
     var ROOT = Script.resolvePath('').split(jsMainFileName)[0];
     var channel = "org.overte.application.emocam";
 
-    var TABLET_BUTTON_NAME = "EMOTIONS";
-    var TRANSITION_TIME_SECONDS = 0.25;
-    var onEmoteScreen = false;
     var button;
     var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
-    var icon = "face.png";
-    var activeIcon = "face.png";
-    var isActive = true;
-    var EMOTE_APP_BASE = "index.html?" + Date.now();
-    var EMOTE_APP_URL = Script.resolvePath(EMOTE_APP_BASE);
+    var EMOTE_APP_QML_BASE = "view.qml";
+    var EMOTE_APP_URL = Script.resolvePath(EMOTE_APP_QML_BASE);
     var EMOTE_APP_SORT_ORDER = 12;
     var EMOTE_LABEL = "FACE";
     var pitchValue = 0;
@@ -48,20 +43,29 @@
     });
 
     function onClicked() {
-        if (onEmoteScreen) {
-            tablet.gotoHomeScreen();
+        if (!webWindow) {
+            webWindow = Desktop.createWindow(EMOTE_APP_URL, {
+                title: "Face tracking",
+                presentationMode: Desktop.PresentationMode.NATIVE,
+                size: { x: 500, y: 400 }
+            });
+            if (webWindow) {
+                webWindow.webEventReceived.connect(onWebEventReceived);
+                webWindow.closed.connect(onWindowClosed);
+                button.editProperties({isActive: true});
+            } else {
+                print("Failed to create web window");
+            }
         } else {
-            onEmoteScreen = true;
-            tablet.gotoWebScreen(EMOTE_APP_URL);
-            //webWindow = new OverlayWebWindow(' ', EMOTE_APP_URL, 480, 810, false);
+            if (webWindow.visible) {
+                webWindow.visible = false;
+            } else {
+                webWindow.visible = true;
+            }
+            button.editProperties({isActive: webWindow.visible});
         }
     }
 
-    function onScreenChanged(type, url) {
-        onEmoteScreen = type === "Web" && (url.indexOf(EMOTE_APP_BASE) === url.length - EMOTE_APP_BASE.length);
-        button.editProperties({isActive: onEmoteScreen});
-    }
-
     var mapping = Controller.newMapping();
     var yawBinding = mapping.from(function () {
         return yawValue;
@@ -230,20 +234,21 @@
         }
     }
 
-    button.clicked.connect(onClicked);
-    tablet.screenChanged.connect(onScreenChanged);
-    tablet.webEventReceived.connect(onWebEventReceived);
+    function onWindowClosed() {
+        webWindow = null;
+        button.editProperties({isActive: false});
+    }
 
+    button.clicked.connect(onClicked);
+    
     Script.scriptEnding.connect(function () {
 
         MyAvatar.removeAnimationStateHandler(handlerId);
-
-        if (onEmoteScreen) {
-            tablet.gotoHomeScreen();
+        if (webWindow) {
+            webWindow.close();
         }
         button.clicked.disconnect(onClicked);
-        tablet.screenChanged.disconnect(onScreenChanged);
-        if (tablet) {
+         if (tablet) {
             tablet.removeButton(button);
         }
 

applications/emocam/view.qml

@@ -0,0 +1,15 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtWebChannel 1.0
+import controls 1.0
+import hifi.toolbars 1.0
+import QtGraphicalEffects 1.0
+import controlsUit 1.0 as HifiControls
+import stylesUit 1.0
+
+WebView {
+    id: faceTrackingWebView
+    url: Qt.resolvedUrl("./index.html")
+    enabled: true
+    blurOnCtrlShift: false
+}

applications/metadata.js

@@ -2,12 +2,12 @@ var metadata = { "applications":
     [
         {
             "isActive": true,
-            "directory": "inventory-app",
-            "name": "Inventory App",
-            "description": "The inventory app allows you to store, use, and share items in Overte.",
-            "jsfile": "inventory-app/dist/inventory.js",
-            "icon": "inventory-app/dist/inventory-i.svg",
-            "caption": "INVENTORY"
+            "directory": "emocam",
+            "name": "Face tracking",
+            "description": "Desktop mode face tracking application based on Mediapipe. This allows face tracking and head tracking in desktop mode using a single webcam. (Note: This application has external dependencies. It may stop working one day.)",
+            "jsfile": "emocam/emocam1.js",
+            "icon": "emocam/images/face.png",
+            "caption": "EMOTIONS"
         },
         {
             "isActive": true,
@@ -263,12 +263,12 @@ var metadata = { "applications":
         },
         {
             "isActive": true,
-            "directory": "emocam",
-            "name": "emocam",
-            "description": "Desktop mode face tracking application based on Mediapipe. This allows face tracking and head tracking in desktop mode using a single webcam. (Note: This application has external dependencies. It may stop working one day.)",
-            "jsfile": "emocam/emocam1.js",
-            "icon": "emocam/images/face.png",
-            "caption": "EMOTIONS"
+            "directory": "inventory-app",
+            "name": "Inventory App",
+            "description": "The inventory app allows you to store, use, and share items in Overte.",
+            "jsfile": "inventory-app/dist/inventory.js",
+            "icon": "inventory-app/dist/inventory-i.svg",
+            "caption": "INVENTORY"
         }
     ]
 };