From 6791d3f1b6c6939bb9858c123a29e344aaa785dc Mon Sep 17 00:00:00 2001 From: David Rowe Date: Tue, 21 Aug 2018 08:36:04 +1200 Subject: [PATCH] Mini tablet button icons and states --- scripts/system/html/css/miniTablet.css | 4 +- scripts/system/html/js/miniTablet.js | 88 ++++++++++++++++++++++++++ scripts/system/html/miniTablet.html | 1 + scripts/system/miniTablet.js | 67 +++++++++++++++++++- 4 files changed, 157 insertions(+), 3 deletions(-) create mode 100644 scripts/system/html/js/miniTablet.js diff --git a/scripts/system/html/css/miniTablet.css b/scripts/system/html/css/miniTablet.css index d0585e489a..5ff9944a2c 100644 --- a/scripts/system/html/css/miniTablet.css +++ b/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; - } \ No newline at end of file + } diff --git a/scripts/system/html/js/miniTablet.js b/scripts/system/html/js/miniTablet.js new file mode 100644 index 0000000000..450a87ff8d --- /dev/null +++ b/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 + +}()); diff --git a/scripts/system/html/miniTablet.html b/scripts/system/html/miniTablet.html index f8216e5515..3ba8d66196 100644 --- a/scripts/system/html/miniTablet.html +++ b/scripts/system/html/miniTablet.html @@ -27,5 +27,6 @@ See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0. + diff --git a/scripts/system/miniTablet.js b/scripts/system/miniTablet.js index 08e7103ba4..044500979c 100644 --- a/scripts/system/miniTablet.js +++ b/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); }