Merge pull request #9506 from sethalves/tablet-ui-HUD-ui

provide a way to switch mostly back to HUD-based ui

interface/resources/qml/hifi/tablet/TabletButton.qml

@@ -125,7 +125,6 @@ Item {
             }
         }
         onEntered: {
-            console.log("Tablet Button Hovered!");
             tabletButton.isEntered = true;
             if (tabletButton.isActive) {
                 tabletButton.state = "hover active state";
@@ -134,7 +133,6 @@ Item {
             }
         }
         onExited: {
-            console.log("Tablet Button Unhovered!");
             tabletButton.isEntered = false;
             if (tabletButton.isActive) {
                 tabletButton.state = "active state";

interface/resources/qml/hifi/toolbars/StateImage.qml

@@ -6,7 +6,7 @@ Item {
     property alias alpha: image.opacity
     property var subImage;
     property int yOffset: 0
-    property int buttonState: 0
+    property int buttonState: 1
     property real size: 50
     width: size; height: size
     property bool pinned: false

interface/resources/qml/hifi/toolbars/ToolbarButton.qml

@@ -3,11 +3,34 @@ import QtQuick.Controls 1.4
 
 StateImage {
     id: button
-    property int hoverState: -1
+    property bool isActive: false
-    property int defaultState: -1
+    property bool isEntered: false
+
+    property int imageOffOut: 1
+    property int imageOffIn: 3
+    property int imageOnOut: 0
+    property int imageOnIn: 2
 
     signal clicked()
 
+    function changeProperty(key, value) {
+        button[key] = value;
+    }
+
+    function updateState() {
+        if (!button.isEntered && !button.isActive) {
+            buttonState = imageOffOut;
+        } else if (!button.isEntered && button.isActive) {
+            buttonState = imageOnOut;
+        } else if (button.isEntered && !button.isActive) {
+            buttonState = imageOffIn;
+        } else {
+            buttonState = imageOnIn;
+        }
+    }
+
+    onIsActiveChanged: updateState();
+
     Timer {
         id: asyncClickSender
         interval: 10
@@ -22,14 +45,12 @@ StateImage {
         anchors.fill: parent
         onClicked: asyncClickSender.start();
         onEntered: {
-            if (hoverState >= 0) {
+            button.isEntered = true;
-                buttonState = hoverState;
+            updateState();
-            }
         }
         onExited: {
-            if (defaultState >= 0) {
+            button.isEntered = false;
-                buttonState = defaultState;
+            updateState();
-            }
         }
     }
 }

interface/src/scripting/HMDScriptingInterface.h

@@ -91,11 +91,10 @@ public:
     bool getShouldShowTablet() const { return _showTablet; }
 
     void setCurrentTabletUIID(QUuid tabletID) { _tabletUIID = tabletID; }
-    QUuid getCurrentTableUIID() { return _tabletUIID; }
+    QUuid getCurrentTableUIID() const { return _tabletUIID; }
 
     void setCurrentHomeButtonUUID(unsigned int homeButtonID) { _homeButtonID = homeButtonID; }
-    unsigned int getCurrentHomeButtonUUID() { return _homeButtonID; }
+    unsigned int getCurrentHomeButtonUUID() const { return _homeButtonID; }
-
 
 private:
     bool _showTablet { false };

interface/src/scripting/ToolbarScriptingInterface.cpp

@@ -19,11 +19,33 @@ class ToolbarButtonProxy : public QmlWrapper {
 
 public:
     ToolbarButtonProxy(QObject* qmlObject, QObject* parent = nullptr) : QmlWrapper(qmlObject, parent) {
+        std::lock_guard<std::mutex> guard(_mutex);
+        _qmlButton = qobject_cast<QQuickItem*>(qmlObject);
         connect(qmlObject, SIGNAL(clicked()), this, SIGNAL(clicked()));
     }
 
+    Q_INVOKABLE void editProperties(QVariantMap properties) {
+        std::lock_guard<std::mutex> guard(_mutex);
+        QVariantMap::const_iterator iter = properties.constBegin();
+        while (iter != properties.constEnd()) {
+            _properties[iter.key()] = iter.value();
+            if (_qmlButton) {
+                // [01/25 14:26:20] [WARNING] [default] QMetaObject::invokeMethod: No such method ToolbarButton_QMLTYPE_195::changeProperty(QVariant,QVariant)
+
+                QMetaObject::invokeMethod(_qmlButton, "changeProperty", Qt::AutoConnection,
+                                          Q_ARG(QVariant, QVariant(iter.key())), Q_ARG(QVariant, iter.value()));
+            }
+            ++iter;
+        }
+    }
+
 signals:
     void clicked();
+
+protected:
+    mutable std::mutex _mutex;
+    QQuickItem* _qmlButton { nullptr };
+    QVariantMap _properties;
 };
 
 class ToolbarProxy : public QmlWrapper {

scripts/system/bubble.js

@@ -15,8 +15,7 @@
 
 (function () { // BEGIN LOCAL_SCOPE
 
-    // grab the toolbar
+    var button;
-    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     // Used for animating and disappearing the bubble
     var bubbleOverlayTimestamp;
     // Used for flashing the HUD button upon activation
@@ -164,11 +163,23 @@
         }
     }
 
-    // Setup the bubble button and add it to the toolbar
+    // Setup the bubble button
-    var button = tablet.addButton({
+    var buttonName = "BUBBLE";
-        icon: "icons/tablet-icons/bubble-i.svg",
+    if (Settings.getValue("HUDUIEnabled")) {
-        text: "BUBBLE"
+        var toolbar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
-    });
+        button = toolbar.addButton({
+            objectName: 'bubble',
+            imageURL: buttonImageURL(),
+            visible: true,
+            alpha: 0.9
+        });
+    } else {
+        var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+        button = tablet.addButton({
+            icon: "icons/tablet-icons/bubble-i.svg",
+            text: buttonName
+        });
+    }
     onBubbleToggled();
 
     button.clicked.connect(Users.toggleIgnoreRadius);
@@ -178,7 +189,12 @@
     // Cleanup the toolbar button and overlays when script is stopped
     Script.scriptEnding.connect(function () {
         button.clicked.disconnect(Users.toggleIgnoreRadius);
-        tablet.removeButton(button);
+        if (tablet) {
+            tablet.removeButton(button);
+        }
+        if (toolbar) {
+            toolbar.removeButton('bubble');
+        }
         Users.ignoreRadiusEnabledChanged.disconnect(onBubbleToggled);
         Users.enteredIgnoreRadius.disconnect(enteredIgnoreRadius);
         Overlays.deleteOverlay(bubbleOverlay);

scripts/system/edit.js

@@ -170,8 +170,9 @@ var toolBar = (function () {
     var EDIT_SETTING = "io.highfidelity.isEditting"; // for communication with other scripts
     var that = {},
         toolBar,
-        activeButton,
+        activeButton = null,
-        tablet;
+        systemToolbar = null,
+        tablet = null;
 
     function createNewEntity(properties) {
         Settings.setValue(EDIT_SETTING, false);
@@ -196,7 +197,12 @@ var toolBar = (function () {
 
     function cleanup() {
         that.setActive(false);
-        tablet.removeButton(activeButton);
+        if (tablet) {
+            tablet.removeButton(activeButton);
+        }
+        if (systemToolbar) {
+            systemToolbar.removeButton(EDIT_TOGGLE_BUTTON);
+        }
     }
 
     function addButton(name, image, handler) {
@@ -231,11 +237,22 @@ var toolBar = (function () {
         });
 
 
-        tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+        if (Settings.getValue("HUDUIEnabled")) {
-        activeButton = tablet.addButton({
+            systemToolbar = Toolbars.getToolbar(SYSTEM_TOOLBAR);
-            icon: "icons/tablet-icons/edit-i.svg",
+            activeButton = systemToolbar.addButton({
-            text: "EDIT"
+                objectName: EDIT_TOGGLE_BUTTON,
-        });
+                imageURL: TOOLS_PATH + "edit.svg",
+                visible: true,
+                alpha: 0.9,
+                defaultState: 1
+            });
+        } else {
+            tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+            activeButton = tablet.addButton({
+                icon: "icons/tablet-icons/edit-i.svg",
+                text: "EDIT"
+            });
+        }
 
         activeButton.clicked.connect(function() {
             that.toggle();

scripts/system/goto.js

@@ -10,32 +10,50 @@
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
+/* globals Tablet, Toolbars, Script, HMD, DialogsManager */
 
 (function() { // BEGIN LOCAL_SCOPE
 
-var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+var button;
-var button = tablet.addButton({
+var buttonName = "GOTO";
-    icon: "icons/tablet-icons/goto-i.svg",
+var toolBar = null;
-    text:"GOTO"
+var tablet = null;
-});
-
 
 function onAddressBarShown(visible) {
     button.editProperties({isActive: visible});
 }
 
-function setActive(active) {
-    isActive = active;
-}
 function onClicked(){
     DialogsManager.toggleAddressBar();
 }
+
+if (Settings.getValue("HUDUIEnabled")) {
+    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
+    button = toolBar.addButton({
+        objectName: buttonName,
+        imageURL: Script.resolvePath("assets/images/tools/directory.svg"),
+        visible: true,
+        alpha: 0.9
+    });
+} else {
+    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    button = tablet.addButton({
+        icon: "icons/tablet-icons/goto-i.svg",
+        text: buttonName
+    });
+}
+
 button.clicked.connect(onClicked);
 DialogsManager.addressBarShown.connect(onAddressBarShown);
 
 Script.scriptEnding.connect(function () {
     button.clicked.disconnect(onClicked);
-    tablet.removeButton(button);
+    if (tablet) {
+        tablet.removeButton(button);
+    }
+    if (toolBar) {
+        toolBar.removeButton(buttonName);
+    }
     DialogsManager.addressBarShown.disconnect(onAddressBarShown);
 });
 

scripts/system/help.js

@@ -10,19 +10,31 @@
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
-/* globals Tablet */
+/* globals Tablet, Toolbars, Script, HMD, Controller, Menu */
 
 (function() { // BEGIN LOCAL_SCOPE
 
-    var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    var button;
-    var button = tablet.addButton({
+    var buttonName = "HELP";
-        icon: "icons/tablet-icons/help-i.svg",
+    var toolBar = null;
-        text: "HELP"
+    var tablet = null;
-    });
+    if (Settings.getValue("HUDUIEnabled")) {
+        toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
+        button = toolBar.addButton({
+            objectName: buttonName,
+            imageURL: Script.resolvePath("assets/images/tools/help.svg"),
+            visible: true,
+            alpha: 0.9
+        });
+    } else {
+        tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+        button = tablet.addButton({
+            icon: "icons/tablet-icons/help-i.svg",
+            text: buttonName
+        });
+    }
     var enabled = false;
     function onClicked() {
-        var HELP_URL = Script.resourcesPath() + "html/help.html";
-
         // Similar logic to Application::showHelp()
         var defaultTab = "kbm";
         var handControllerName = "vive";
@@ -37,8 +49,6 @@
         } else if ("SDL2" in Controller.Hardware) {
             defaultTab = "gamepad";
         }
-        var queryParameters = "handControllerName=" + handControllerName + "&defaultTab=" + defaultTab;
-        print("Help enabled " + Menu.isMenuEnabled("Help..."))
 
         if (enabled) {
             Menu.closeInfoView('InfoView_html/help.html');
@@ -63,8 +73,14 @@
     }, POLL_RATE);
 
     Script.scriptEnding.connect(function () {
+        button.clicked.disconnect(onClicked);
         Script.clearInterval(interval);
-        tablet.removeButton(button);
+        if (tablet) {
+            tablet.removeButton(button);
+        }
+        if (toolBar) {
+            toolBar.removeButton(buttonName);
+        }
     });
 
 }()); // END LOCAL_SCOPE

scripts/system/hmd.js

@@ -10,6 +10,7 @@
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
+/*globals HMD, Toolbars, Script, Menu, Tablet, Camera */
 
 (function() { // BEGIN LOCAL_SCOPE
 
@@ -35,23 +36,37 @@ function updateControllerDisplay() {
     }
 }
 
-var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
 var button;
+var toolBar = null;
+var tablet = null;
+
+if (Settings.getValue("HUDUIEnabled")) {
+    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
+} else {
+    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+}
+
 // Independent and Entity mode make people sick. Third Person and Mirror have traps that we need to work through.
 // Disable them in hmd.
 var desktopOnlyViews = ['Mirror', 'Independent Mode', 'Entity Mode'];
 function onHmdChanged(isHmd) {
-    //TODO change button icon when the hmd changes
+    if (Settings.getValue("HUDUIEnabled")) {
-    if (isHmd) {
+        button.writeProperty('buttonState', isHmd ? 0 : 1);
-        button.editProperties({
+        button.writeProperty('defaultState', isHmd ? 0 : 1);
-            icon: "icons/tablet-icons/switch-a.svg",
+        button.writeProperty('hoverState', isHmd ? 2 : 3);
-            text: "DESKTOP"
-        });
     } else {
-        button.editProperties({
+        //TODO change button icon when the hmd changes
-            icon: "icons/tablet-icons/switch-i.svg",
+        if (isHmd) {
-            text: "VR"
+            button.editProperties({
-        });
+                icon: "icons/tablet-icons/switch-a.svg",
+                text: "DESKTOP"
+            });
+        } else {
+            button.editProperties({
+                icon: "icons/tablet-icons/switch-i.svg",
+                text: "VR"
+            });
+        }
     }
     desktopOnlyViews.forEach(function (view) {
         Menu.setMenuEnabled("View>" + view, !isHmd);
@@ -63,10 +78,19 @@ function onClicked(){
     Menu.setIsOptionChecked(isDesktop ? headset : desktopMenuItemName, true);
 }
 if (headset) {
-    button = tablet.addButton({
+    if (Settings.getValue("HUDUIEnabled")) {
-        icon: "icons/tablet-icons/switch-a.svg",
+        button = toolBar.addButton({
-        text: "SWITCH"
+            objectName: "hmdToggle",
-    });
+            imageURL: Script.resolvePath("assets/images/tools/switch.svg"),
+            visible: true,
+            alpha: 0.9
+        });
+    } else {
+        button = tablet.addButton({
+            icon: "icons/tablet-icons/switch-a.svg",
+            text: "SWITCH"
+        });
+    }
     onHmdChanged(HMD.active);
 
     button.clicked.connect(onClicked);
@@ -75,7 +99,12 @@ if (headset) {
 
     Script.scriptEnding.connect(function () {
         button.clicked.disconnect(onClicked);
-        tablet.removeButton(button);
+        if (tablet) {
+            tablet.removeButton(button);
+        }
+        if (toolBar) {
+            toolBar.removeButton("hmdToggle");
+        }
         HMD.displayModeChanged.disconnect(onHmdChanged);
         Camera.modeUpdated.disconnect(updateControllerDisplay);
     });

scripts/system/marketplaces/marketplaces.js

@@ -8,7 +8,7 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
-/* global WebTablet Tablet */
+/* global Tablet, Script, HMD, Toolbars, UserActivityLogger, Entities */
 /* eslint indent: ["error", 4, { "outerIIFEBody": 0 }] */
 
 (function() { // BEGIN LOCAL_SCOPE
@@ -31,6 +31,8 @@ var QUERY_CAN_WRITE_ASSETS = "QUERY_CAN_WRITE_ASSETS";
 var CAN_WRITE_ASSETS = "CAN_WRITE_ASSETS";
 var WARN_USER_NO_PERMISSIONS = "WARN_USER_NO_PERMISSIONS";
 
+var marketplaceWindow = null;
+
 var CLARA_DOWNLOAD_TITLE = "Preparing Download";
 var messageBox = null;
 var isDownloadBeingCancelled = false;
@@ -51,49 +53,54 @@ function onMessageBoxClosed(id, button) {
 Window.messageBoxClosed.connect(onMessageBoxClosed);
 
 function showMarketplace() {
-    tablet.gotoWebScreen(MARKETPLACE_URL_INITIAL, MARKETPLACES_INJECT_SCRIPT_URL);
-
     UserActivityLogger.openedMarketplace();
 
-    tablet.webEventReceived.connect(function (message) {
+    if (tablet) {
-        if (message === GOTO_DIRECTORY) {
+        tablet.gotoWebScreen(MARKETPLACE_URL_INITIAL, MARKETPLACES_INJECT_SCRIPT_URL);
-            tablet.gotoWebScreen(MARKETPLACES_URL);
+        tablet.webEventReceived.connect(function (message) {
-        }
+            if (message === GOTO_DIRECTORY) {
+                tablet.gotoWebScreen(MARKETPLACES_URL);
+            }
 
-        if (message === QUERY_CAN_WRITE_ASSETS) {
+            if (message === QUERY_CAN_WRITE_ASSETS) {
-            tablet.emitScriptEvent(CAN_WRITE_ASSETS + " " + Entities.canWriteAssets());
+                tablet.emitScriptEvent(CAN_WRITE_ASSETS + " " + Entities.canWriteAssets());
-        }
+            }
 
-        if (message === WARN_USER_NO_PERMISSIONS) {
+            if (message === WARN_USER_NO_PERMISSIONS) {
-            Window.alert(NO_PERMISSIONS_ERROR_MESSAGE);
+                Window.alert(NO_PERMISSIONS_ERROR_MESSAGE);
-        }
+            }
 
-        if (message.slice(0, CLARA_IO_STATUS.length) === CLARA_IO_STATUS) {
+            if (message.slice(0, CLARA_IO_STATUS.length) === CLARA_IO_STATUS) {
-            if (isDownloadBeingCancelled) {
+                if (isDownloadBeingCancelled) {
+                    return;
+                }
+
+                var text = message.slice(CLARA_IO_STATUS.length);
+                if (messageBox === null) {
+                    messageBox = Window.openMessageBox(CLARA_DOWNLOAD_TITLE, text, CANCEL_BUTTON, NO_BUTTON);
+                } else {
+                    Window.updateMessageBox(messageBox, CLARA_DOWNLOAD_TITLE, text, CANCEL_BUTTON, NO_BUTTON);
+                }
                 return;
             }
 
-            var text = message.slice(CLARA_IO_STATUS.length);
+            if (message.slice(0, CLARA_IO_DOWNLOAD.length) === CLARA_IO_DOWNLOAD) {
-            if (messageBox === null) {
+                if (messageBox !== null) {
-                messageBox = Window.openMessageBox(CLARA_DOWNLOAD_TITLE, text, CANCEL_BUTTON, NO_BUTTON);
+                    Window.closeMessageBox(messageBox);
-            } else {
+                    messageBox = null;
-                Window.updateMessageBox(messageBox, CLARA_DOWNLOAD_TITLE, text, CANCEL_BUTTON, NO_BUTTON);
+                }
+                return;
             }
-            return;
-        }
 
-        if (message.slice(0, CLARA_IO_DOWNLOAD.length) === CLARA_IO_DOWNLOAD) {
+            if (message === CLARA_IO_CANCELLED_DOWNLOAD) {
-            if (messageBox !== null) {
+                isDownloadBeingCancelled = false;
-                Window.closeMessageBox(messageBox);
-                messageBox = null;
             }
-            return;
+        });
-        }
+    } else {
-
+        marketplaceWindow.setURL(MARKETPLACE_URL_INITIAL);
-        if (message === CLARA_IO_CANCELLED_DOWNLOAD) {
+        marketplaceWindow.setVisible(true);
-            isDownloadBeingCancelled = false;
+        marketplaceVisible = true;
-        }
+    }
-    });
 }
 
 function toggleMarketplace() {
@@ -102,12 +109,32 @@ function toggleMarketplace() {
     showMarketplace();
 }
 
-var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+var tablet = null;
-
+var toolBar = null;
-var marketplaceButton = tablet.addButton({
+var marketplaceButton = null;
-    icon: "icons/tablet-icons/market-i.svg",
+if (Settings.getValue("HUDUIEnabled")) {
-    text: "MARKET"
+    marketplaceWindow = new OverlayWebWindow({
-});
+        title: "Marketplace",
+        source: "about:blank",
+        width: 900,
+        height: 700,
+        visible: false
+    });
+    marketplaceWindow.setScriptURL(MARKETPLACES_INJECT_SCRIPT_URL);
+    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
+    var toolIconUrl = Script.resolvePath("../assets/images/tools/");
+    marketplaceButton = toolBar.addButton({
+        imageURL: toolIconUrl + "market.svg",
+        objectName: "marketplace",
+        alpha: 0.9
+    });
+} else {
+    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    marketplaceButton = tablet.addButton({
+        icon: "icons/tablet-icons/market-i.svg",
+        text: "MARKET"
+    });
+}
 
 function onCanWriteAssetsChanged() {
     var message = CAN_WRITE_ASSETS + " " + Entities.canWriteAssets();
@@ -122,7 +149,12 @@ marketplaceButton.clicked.connect(onClick);
 Entities.canWriteAssetsChanged.connect(onCanWriteAssetsChanged);
 
 Script.scriptEnding.connect(function () {
-    tablet.removeButton(marketplaceButton);
+    if (toolBar) {
+        toolBar.removeButton("marketplace");
+    }
+    if (tablet) {
+        tablet.removeButton(marketplaceButton);
+    }
     Entities.canWriteAssetsChanged.disconnect(onCanWriteAssetsChanged);
 });
 

scripts/system/mute.js

@@ -13,30 +13,50 @@
 
 (function() { // BEGIN LOCAL_SCOPE
 
-var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+var button;
-
+var buttonName = "MUTE";
-var button = tablet.addButton({
+var toolBar = null;
-    icon: "icons/tablet-icons/mic-a.svg",
+var tablet = null;
-    text: "MUTE",
-    activeIcon: "icons/tablet-icons/mic-i.svg",
-    activeText: "UNMUTE"
-});
 
 function onMuteToggled() {
     button.editProperties({isActive: AudioDevice.getMuted()});
 }
-onMuteToggled();
 function onClicked(){
     var menuItem = "Mute Microphone";
     Menu.setIsOptionChecked(menuItem, !Menu.isOptionChecked(menuItem));
 }
+
+if (Settings.getValue("HUDUIEnabled")) {
+    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
+    button = toolBar.addButton({
+        objectName: buttonName,
+        imageURL: Script.resolvePath("assets/images/tools/mic.svg"),
+        visible: true,
+        alpha: 0.9
+    });
+} else {
+    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    button = tablet.addButton({
+        icon: "icons/tablet-icons/mic-a.svg",
+        text: buttonName,
+        activeIcon: "icons/// TODO: ablet-icons/mic-i.svg",
+        activeText: "UNMUTE"
+    });
+}
+onMuteToggled();
+
 button.clicked.connect(onClicked);
 AudioDevice.muteToggled.connect(onMuteToggled);
 
 Script.scriptEnding.connect(function () {
     button.clicked.disconnect(onClicked);
-    tablet.removeButton(button);
     AudioDevice.muteToggled.disconnect(onMuteToggled);
+    if (tablet) {
+        tablet.removeButton(button);
+    }
+    if (toolBar) {
+        toolBar.removeButton(buttonName);
+    }
 });
 
 }()); // END LOCAL_SCOPE

scripts/system/pal.js

@@ -477,12 +477,25 @@ triggerPressMapping.from(Controller.Standard.LT).peek().to(makePressHandler(Cont
 //
 // Manage the connection between the button and the window.
 //
-var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+var button;
 var buttonName = "PAL";
-var button = tablet.addButton({
+var tablet = null;
-    text: buttonName,
+var toolBar = null;
-    icon: "icons/tablet-icons/people-i.svg"
+if (Settings.getValue("HUDUIEnabled")) {
-});
+    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
+    button = toolBar.addButton({
+        objectName: buttonName,
+        imageURL: Script.resolvePath("assets/images/tools/people.svg"),
+        visible: true,
+        alpha: 0.9
+    });
+} else {
+    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    button = tablet.addButton({
+        text: buttonName,
+        icon: "icons/tablet-icons/people-i.svg"
+    });
+}
 var isWired = false;
 function off() {
     if (isWired) { // It is not ok to disconnect these twice, hence guard.
@@ -623,7 +636,12 @@ Window.domainConnectionRefused.connect(clearLocalQMLDataAndClosePAL);
 //
 Script.scriptEnding.connect(function () {
     button.clicked.disconnect(onClicked);
-    tablet.removeButton(button);
+    if (tablet) {
+        tablet.removeButton(button);
+    }
+    if (toolBar) {
+        toolBar.removeButton(buttonName);
+    }
     pal.visibleChanged.disconnect(onVisibleChanged);
     pal.closed.disconnect(off);
     Users.usernameFromIDReply.disconnect(usernameFromIDReply);

scripts/system/snapshot.js

@@ -7,19 +7,36 @@
 // Distributed under the Apache License, Version 2.0
 // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
+/* globals Tablet, Toolbars, Script, HMD, Settings, DialogsManager, Menu, Reticle, OverlayWebWindow, Desktop, Account, MyAvatar */
 
 (function() { // BEGIN LOCAL_SCOPE
 
 var SNAPSHOT_DELAY = 500; // 500ms
 var FINISH_SOUND_DELAY = 350;
-var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
 var resetOverlays;
 var reticleVisible;
 var clearOverlayWhenMoving;
-var button = tablet.addButton({
+
-    icon: "icons/tablet-icons/snap-i.svg",
+var button;
-    text: "SNAP"
+var buttonName = "SNAP";
-});
+var tablet = null;
+var toolBar = null;
+
+if (Settings.getValue("HUDUIEnabled")) {
+    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
+    button = toolBar.addButton({
+        objectName: buttonName,
+        imageURL: Script.resolvePath("assets/images/tools/snap.svg"),
+        visible: true,
+        alpha: 0.9,
+    });
+} else {
+    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    button = tablet.addButton({
+        icon: "icons/tablet-icons/snap-i.svg",
+        text: buttonName
+    });
+}
 
 function shouldOpenFeedAfterShare() {
     var persisted = Settings.getValue('openFeedAfterShare', true); // might answer true, false, "true", or "false"
@@ -51,10 +68,10 @@ function confirmShare(data) {
                 Desktop.show("hifi/dialogs/GeneralPreferencesDialog.qml", "GeneralPreferencesDialog");
                 break;
             case 'setOpenFeedFalse':
-                Settings.setValue('openFeedAfterShare', false)
+                Settings.setValue('openFeedAfterShare', false);
                 break;
             case 'setOpenFeedTrue':
-                Settings.setValue('openFeedAfterShare', true)
+                Settings.setValue('openFeedAfterShare', true);
                 break;
             default:
                 dialog.webEventReceived.disconnect(onMessage);
@@ -200,7 +217,12 @@ Window.processingGif.connect(processingGif);
 
 Script.scriptEnding.connect(function () {
     button.clicked.disconnect(onClicked);
-    tablet.removeButton(button);
+    if (tablet) {
+        tablet.removeButton(button);
+    }
+    if (toolBar) {
+        toolBar.removeButton(buttonName);
+    }
     Window.snapshotShared.disconnect(snapshotShared);
     Window.processingGif.disconnect(processingGif);
 });

scripts/system/tablet-ui/tabletUI.js

@@ -108,6 +108,6 @@
     Script.scriptEnding.connect(function () {
         Entities.deleteEntity(HMD.tabletID);
         HMD.tabletID = null;
-        HDM.homeButtonID = null;
+        HMD.homeButtonID = null;
     });
 }()); // END LOCAL_SCOPE

scripts/system/users.js

@@ -10,16 +10,37 @@
 //  Distributed under the Apache License, Version 2.0.
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
+/*globals HMD, Toolbars, Script, Menu, Overlays, Tablet, Controller, Settings, OverlayWebWindow, Account, GlobalServices */
 
 (function() { // BEGIN LOCAL_SCOPE
+var button;
+var buttonName = "USERS";
+var toolBar = null;
+var tablet = null;
+
 var MENU_ITEM = "Users Online";
-// create tablet button
+
-var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+if (Settings.getValue("HUDUIEnabled")) {
-var button = tablet.addButton({
+    toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
-    icon: "icons/tablet-icons/users-i.svg",
+    button = toolBar.addButton({
-    text: "Users",
+        objectName: buttonName,
-    isActive: Menu.isOptionChecked(MENU_ITEM)
+        imageURL: Script.resolvePath("assets/images/tools/people.svg"),
-});
+        visible: true,
+        buttonState: 1,
+        defaultState: 1,
+        hoverState: 3,
+        alpha: 0.9
+    });
+} else {
+    tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+    button = tablet.addButton({
+        icon: "icons/tablet-icons/users-i.svg",
+        text: "Users",
+        isActive: Menu.isOptionChecked(MENU_ITEM)
+    });
+}
+
+
 function onClicked() {
     Menu.setIsOptionChecked(MENU_ITEM, !Menu.isOptionChecked(MENU_ITEM));
     button.editProperties({isActive: Menu.isOptionChecked(MENU_ITEM)});
@@ -442,11 +463,11 @@ var usersWindow = (function () {
         }
 
         // Reserve space for title, friends button, and option controls
-        nonUsersHeight = WINDOW_MARGIN + windowLineHeight
+        nonUsersHeight = WINDOW_MARGIN + windowLineHeight +
-            + (shouldShowFriendsButton() ? FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT : 0)
+            (shouldShowFriendsButton() ? FRIENDS_BUTTON_SPACER + FRIENDS_BUTTON_HEIGHT : 0) +
-            + DISPLAY_SPACER
+            DISPLAY_SPACER +
-            + windowLineHeight + VISIBILITY_SPACER
+            windowLineHeight + VISIBILITY_SPACER +
-            + windowLineHeight + WINDOW_BASE_MARGIN;
+            windowLineHeight + WINDOW_BASE_MARGIN;
 
         // Limit window to height of viewport above window position minus VU meter and mirror if displayed
         windowHeight = linesOfUsers.length * windowLineHeight - windowLineSpacing + nonUsersHeight;
@@ -504,8 +525,8 @@ var usersWindow = (function () {
             x: scrollbarBackgroundPosition.x,
             y: scrollbarBackgroundPosition.y
         });
-        scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1
+        scrollbarBarPosition.y = scrollbarBackgroundPosition.y + 1 +
-            + scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
+            scrollbarValue * (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
         Overlays.editOverlay(scrollbarBar, {
             x: scrollbarBackgroundPosition.x + 1,
             y: scrollbarBarPosition.y
@@ -513,10 +534,10 @@ var usersWindow = (function () {
 
 
         x = windowLeft + WINDOW_MARGIN;
-        y = windowPosition.y
+        y = windowPosition.y -
-            - DISPLAY_SPACER
+            DISPLAY_SPACER -
-            - windowLineHeight - VISIBILITY_SPACER
+            windowLineHeight - VISIBILITY_SPACER -
-            - windowLineHeight - WINDOW_BASE_MARGIN;
+            windowLineHeight - WINDOW_BASE_MARGIN;
         if (shouldShowFriendsButton()) {
             y -= FRIENDS_BUTTON_HEIGHT;
             Overlays.editOverlay(friendsButton, {
@@ -811,8 +832,8 @@ var usersWindow = (function () {
 
             userClicked = firstUserToDisplay + lineClicked;
 
-            if (0 <= userClicked && userClicked < linesOfUsers.length && 0 <= overlayX
+            if (0 <= userClicked && userClicked < linesOfUsers.length && 0 <= overlayX &&
-                    && overlayX <= usersOnline[linesOfUsers[userClicked]].textWidth) {
+                overlayX <= usersOnline[linesOfUsers[userClicked]].textWidth) {
                 //print("Go to " + usersOnline[linesOfUsers[userClicked]].username);
                 location.goToUser(usersOnline[linesOfUsers[userClicked]].username);
             }
@@ -885,12 +906,12 @@ var usersWindow = (function () {
         }
 
         if (isMovingScrollbar) {
-            if (scrollbarBackgroundPosition.x - WINDOW_MARGIN <= event.x
+            if (scrollbarBackgroundPosition.x - WINDOW_MARGIN <= event.x &&
-                    && event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH + WINDOW_MARGIN
+                event.x <= scrollbarBackgroundPosition.x + SCROLLBAR_BACKGROUND_WIDTH + WINDOW_MARGIN &&
-                    && scrollbarBackgroundPosition.y - WINDOW_MARGIN <= event.y
+                scrollbarBackgroundPosition.y - WINDOW_MARGIN <= event.y &&
-                    && event.y <= scrollbarBackgroundPosition.y + scrollbarBackgroundHeight + WINDOW_MARGIN) {
+                event.y <= scrollbarBackgroundPosition.y + scrollbarBackgroundHeight + WINDOW_MARGIN) {
-                scrollbarValue = (event.y - scrollbarBarClickedAt * scrollbarBarHeight - scrollbarBackgroundPosition.y)
+                scrollbarValue = (event.y - scrollbarBarClickedAt * scrollbarBarHeight - scrollbarBackgroundPosition.y) /
-                    / (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
+                    (scrollbarBackgroundHeight - scrollbarBarHeight - 2);
                 scrollbarValue = Math.min(Math.max(scrollbarValue, 0.0), 1.0);
                 firstUserToDisplay = Math.floor(scrollbarValue * (linesOfUsers.length - numUsersToDisplay));
                 updateOverlayPositions();
@@ -918,13 +939,13 @@ var usersWindow = (function () {
 
             isVisible = isBorderVisible;
             if (isVisible) {
-                isVisible = windowPosition.x - WINDOW_BORDER_LEFT_MARGIN <= event.x
+                isVisible = windowPosition.x - WINDOW_BORDER_LEFT_MARGIN <= event.x &&
-                    && event.x <= windowPosition.x - WINDOW_BORDER_LEFT_MARGIN + WINDOW_BORDER_WIDTH
+                    event.x <= windowPosition.x - WINDOW_BORDER_LEFT_MARGIN + WINDOW_BORDER_WIDTH &&
-                    && windowPosition.y - windowHeight - WINDOW_BORDER_TOP_MARGIN <= event.y
+                    windowPosition.y - windowHeight - WINDOW_BORDER_TOP_MARGIN <= event.y &&
-                    && event.y <= windowPosition.y + WINDOW_BORDER_BOTTOM_MARGIN;
+                    event.y <= windowPosition.y + WINDOW_BORDER_BOTTOM_MARGIN;
             } else {
-                isVisible = windowPosition.x <= event.x && event.x <= windowPosition.x + WINDOW_WIDTH
+                isVisible = windowPosition.x <= event.x && event.x <= windowPosition.x + WINDOW_WIDTH &&
-                    && windowPosition.y - windowHeight <= event.y && event.y <= windowPosition.y;
+                    windowPosition.y - windowHeight <= event.y && event.y <= windowPosition.y;
             }
             if (isVisible !== isBorderVisible) {
                 isBorderVisible = isVisible;
@@ -951,10 +972,10 @@ var usersWindow = (function () {
 
         if (isMovingWindow) {
             // Save offset of bottom of window to nearest edge of the window.
-            offset.x = (windowPosition.x + WINDOW_WIDTH / 2 < viewport.x / 2)
+            offset.x = (windowPosition.x + WINDOW_WIDTH / 2 < viewport.x / 2) ?
-                ? windowPosition.x : windowPosition.x - viewport.x;
+                windowPosition.x : windowPosition.x - viewport.x;
-            offset.y = (windowPosition.y < viewport.y / 2)
+            offset.y = (windowPosition.y < viewport.y / 2) ?
-                ? windowPosition.y : windowPosition.y - viewport.y;
+                windowPosition.y : windowPosition.y - viewport.y;
             Settings.setValue(SETTING_USERS_WINDOW_OFFSET, JSON.stringify(offset));
             isMovingWindow = false;
         }
@@ -975,8 +996,8 @@ var usersWindow = (function () {
         isMirrorDisplay = Menu.isOptionChecked(MIRROR_MENU_ITEM);
         isFullscreenMirror = Menu.isOptionChecked(FULLSCREEN_MIRROR_MENU_ITEM);
 
-        if (viewport.y !== oldViewport.y || isMirrorDisplay !== oldIsMirrorDisplay
+        if (viewport.y !== oldViewport.y || isMirrorDisplay !== oldIsMirrorDisplay ||
-                || isFullscreenMirror !== oldIsFullscreenMirror) {
+            isFullscreenMirror !== oldIsFullscreenMirror) {
             calculateWindowHeight();
             updateUsersDisplay();
         }
@@ -1250,7 +1271,12 @@ var usersWindow = (function () {
 function cleanup () {
     //remove tablet button
     button.clicked.disconnect(onClicked);
-    tablet.removeButton(button);
+    if (tablet) {
+        tablet.removeButton(button);
+    }
+    if (toolBar) {
+        toolBar.removeButton(buttonName);
+    }
 }
 Script.scriptEnding.connect(cleanup);