Mini tablet button icons and states

scripts/system/html/css/miniTablet.css

@@ -96,7 +96,7 @@ footer {
         }
 
     footer .button:hover {
-        border: 1px solid #1fc6a6;
+        border: 1px solid #e3e3e3;
         border-radius: 2px;
         margin: -1px;
-    }
+    }

scripts/system/html/js/miniTablet.js

@@ -0,0 +1,88 @@
+//
+//  miniTablet.js
+//
+//  Created by David Rowe on 20 Aug 2018.
+//  Copyright 2018 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+/* global EventBridge */
+/* eslint-env browser */
+
+(function () {
+
+    "use strict";
+
+    var // EventBridge
+        READY_MESSAGE = "ready", // Engine <== Dialog
+        MUTE_MESSAGE = "mute", // Engine <=> Dialog
+        BUBBLE_MESSAGE = "bubble", // Engine <=> Dialog
+
+        muteButton,
+        muteImage,
+        bubbleButton,
+        bubbleImage;
+
+    // #region Communications ==================================================================================================
+
+    function onScriptEventReceived(data) {
+        var message;
+
+        try {
+            message = JSON.parse(data);
+        } catch (e) {
+            console.error("EventBridge message error");
+            return;
+        }
+
+        switch (message.type) {
+            case MUTE_MESSAGE:
+                muteImage.src = message.icon;
+                break;
+            case BUBBLE_MESSAGE:
+                bubbleButton.classList.remove(message.on ? "off" : "on");
+                bubbleButton.classList.add(message.on ? "on" : "off");
+                bubbleImage.src = message.icon;
+                break;
+        }
+    }
+
+    function connectEventBridge() {
+        EventBridge.scriptEventReceived.connect(onScriptEventReceived);
+        EventBridge.emitWebEvent(JSON.stringify({
+            type: READY_MESSAGE
+        }));
+    }
+
+    function disconnectEventBridge() {
+        EventBridge.scriptEventReceived.disconnect(onScriptEventReceived);
+    }
+
+    // #endregion
+
+    // #region Set-up and tear-down ============================================================================================
+
+    function onUnload() {
+        disconnectEventBridge();
+    }
+
+    function onLoad() {
+        muteButton = document.getElementById("mute");
+        muteImage = document.getElementById("mute-img");
+        bubbleButton = document.getElementById("bubble");
+        bubbleImage = document.getElementById("bubble-img");
+
+        connectEventBridge();
+
+        document.body.onunload = function () {
+            onUnload();
+        };
+    }
+
+    onLoad();
+
+    // #endregion
+
+}());

scripts/system/html/miniTablet.html

@@ -27,5 +27,6 @@ See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.
     <footer>
         <div id="expand" class="button"><p>...</p></div>
     </footer>
+    <script src="js/miniTablet.js"></script>
 </body>
 </html>

scripts/system/miniTablet.js

@@ -51,6 +51,12 @@
         PROXY_UI_LOCAL_ROTATION = Quat.fromVec3Degrees({ x: 0, y: 180, z: 0 }),
         proxyUIOverlayEnabled = false,
         PROXY_UI_OVERLAY_ENABLED_DELAY = 500,
+        proxyOverlayObject = null,
+
+        MUTE_ON_ICON = Script.resourcesPath() + "icons/tablet-icons/mic-mute-a.svg",
+        MUTE_OFF_ICON = Script.resourcesPath() + "icons/tablet-icons/mic-unmute-i.svg",
+        BUBBLE_ON_ICON = Script.resourcesPath() + "icons/tablet-icons/bubble-a.svg",
+        BUBBLE_OFF_ICON = Script.resourcesPath() + "icons/tablet-icons/bubble-i.svg",
 
         // State machine
         PROXY_DISABLED = 0,
@@ -77,6 +83,11 @@
         proxyTargetWidth,
         tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system"),
 
+        // EventBridge
+        READY_MESSAGE = "ready", // Engine <== Dialog
+        MUTE_MESSAGE = "mute", // Engine <=> Dialog
+        BUBBLE_MESSAGE = "bubble", // Engine <=> Dialog
+
         // Events
         MIN_HAND_CAMERA_ANGLE = 30,
         DEGREES_180 = 180,
@@ -136,6 +147,47 @@
 
     // #endregion
 
+    // #region Communications ==================================================================================================
+
+    function updateMutedStatus() {
+        var isMuted = Audio.muted;
+        proxyOverlayObject.emitScriptEvent(JSON.stringify({
+            type: MUTE_MESSAGE,
+            on: isMuted,
+            icon: isMuted ? MUTE_ON_ICON : MUTE_OFF_ICON
+        }));
+    }
+
+    function updateBubbleStatus() {
+        var isBubbleOn = Users.getIgnoreRadiusEnabled();
+        proxyOverlayObject.emitScriptEvent(JSON.stringify({
+            type: BUBBLE_MESSAGE,
+            on: isBubbleOn,
+            icon: isBubbleOn ? BUBBLE_ON_ICON : BUBBLE_OFF_ICON
+        }));
+    }
+
+    function onWebEventReceived(data) {
+        var message;
+
+        try {
+            message = JSON.parse(data);
+        } catch (e) {
+            console.error("EventBridge message error");
+            return;
+        }
+
+        switch (message.type) {
+            case READY_MESSAGE:
+                // Send initial button statuses.
+                updateMutedStatus();
+                updateBubbleStatus();
+                break;
+        }
+    }
+
+    // #endregion
+
     // #region UI ==============================================================================================================
 
     function createUI() {
@@ -161,6 +213,9 @@
         });
 
         proxyUIOverlayEnabled = false; // This and alpha = 0 hides overlay while its content is being created.
+
+        proxyOverlayObject = Overlays.getOverlayObject(proxyUIOverlay);
+        proxyOverlayObject.webEventReceived.connect(onWebEventReceived);
     }
 
     function showUI(hand) {
@@ -217,9 +272,11 @@
     }
 
     function destroyUI() {
-        if (proxyOverlay) {
+        if (proxyOverlayObject) {
+            proxyOverlayObject.webEventReceived.disconnect(onWebEventReceived);
             Overlays.deleteOverlay(proxyUIOverlay);
             Overlays.deleteOverlay(proxyOverlay);
+            proxyOverlayObject = null;
             proxyUIOverlay = null;
             proxyOverlay = null;
         }
@@ -236,6 +293,10 @@
             updateTimer = null;
         }
 
+        // Stop monitoring mute and bubble changes.
+        Audio.mutedChanged.disconnect(updateMutedStatus);
+        Users.ignoreRadiusEnabledChanged.disconnect(updateBubbleStatus);
+
         // Don't keep overlays prepared if in desktop mode.
         destroyUI();
     }
@@ -244,6 +305,10 @@
         // Create UI so that it's ready to be displayed without seeing artefacts from creating the UI.
         createUI();
 
+        // Start monitoring mute and bubble changes.
+        Audio.mutedChanged.connect(updateMutedStatus);
+        Users.ignoreRadiusEnabledChanged.connect(updateBubbleStatus);
+
         // Start updates.
         updateTimer = Script.setTimeout(updateState, UPDATE_INTERVAL);
     }