Merge pull request #9651 from ctrlaltdavid/21164

Make it Easier to Change Audio Settings in the Tablet UI

interface/resources/icons/tablet-icons/mic-mute.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40 40"
+   style="enable-background:new 0 0 40 40;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="mic-mute.svg"><metadata
+     id="metadata6958"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6956" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1824"
+     inkscape:window-height="1057"
+     id="namedview6954"
+     showgrid="false"
+     inkscape:zoom="5.9"
+     inkscape:cx="-40.338983"
+     inkscape:cy="20"
+     inkscape:window-x="88"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style6942">
+	.st0{fill:#FFFFFF;}
+</style><ellipse
+     style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+     id="path8048"
+     cx="20.1"
+     cy="20.5"
+     rx="15.967586"
+     ry="15.967585" /><rect
+     style="fill:#ffffff;fill-opacity:1;stroke:#feffff;stroke-width:0;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+     id="rect8065"
+     width="30.1991"
+     height="2.9999897"
+     x="13.432917"
+     y="-1.2235159"
+     transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" /></svg>

interface/resources/icons/tablet-icons/mic.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40 40"
+   style="enable-background:new 0 0 40 40;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="tablet-mic.svg"><metadata
+     id="metadata6958"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6956" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1824"
+     inkscape:window-height="1057"
+     id="namedview6954"
+     showgrid="false"
+     inkscape:zoom="5.9"
+     inkscape:cx="20"
+     inkscape:cy="20"
+     inkscape:window-x="88"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style6942">
+	.st0{fill:#FFFFFF;}
+</style><path
+     class="st0"
+     d="m 22.5,14.7 0,-3.1 C 22.5,10.1 21.3,9 19.9,9 l 0,0 c -1.5,0 -2.6,1.1 -2.6,2.6 l 0,3.1 5.2,0 z"
+     id="path6948"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><path
+     class="st0"
+     d="m 17.3,17.4 0,3 c 0,1.5 1.2,2.6 2.7,2.6 l 0,0 c 1.5,0 2.6,-1.2 2.6,-2.6 l 0,-3 -5.3,0 z"
+     id="path6950"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /><path
+     class="st0"
+     d="m 27.9,20.9 c 0,0 0,-3.6 0,-3.8 0,-0.7 -0.6,-1.2 -1.3,-1.2 -0.7,0 -1.2,0.6 -1.2,1.3 0,0.2 0,3.4 0,3.7 0,2.6 -2.4,4.8 -5.3,4.8 -2.9,0 -5.3,-2.1 -5.3,-4.8 0,-0.3 0,-3.5 0,-3.8 0,-0.7 -0.5,-1.3 -1.2,-1.3 -0.7,0 -1.3,0.5 -1.3,1.2 0,0.2 0,3.9 0,3.9 0,3.6 2.9,6.6 6.6,7.2 l 0,2.4 -3.1,0 c -0.7,0 -1.3,0.6 -1.3,1.3 0,0.7 0.6,1.3 1.3,1.3 l 8.8,0 c 0.7,0 1.3,-0.6 1.3,-1.3 0,-0.7 -0.6,-1.3 -1.3,-1.3 l -3.2,0 0,-2.4 c 3.6,-0.5 6.5,-3.5 6.5,-7.2 z"
+     id="path6952"
+     inkscape:connector-curvature="0"
+     style="fill:#ffffff" /></svg>

interface/resources/qml/hifi/tablet/Tablet.qml

@@ -1,4 +1,4 @@
-import QtQuick 2.0
+import QtQuick 2.5
 import QtGraphicalEffects 1.0
 import "../../styles-uit"
 
@@ -6,10 +6,16 @@ Item {
     id: tablet
     objectName: "tablet"
     property double micLevel: 0.8
+    property bool micEnabled: true
     property int rowIndex: 0
     property int columnIndex: 0
     property int count: (flowMain.children.length - 1)
 
+    // called by C++ code to keep mic state updated
+    function setMicEnabled(newMicEnabled) {
+        tablet.micEnabled = newMicEnabled;
+    }
+
     // called by C++ code to keep audio bar updated
     function setMicLevel(newMicLevel) {
         tablet.micLevel = newMicLevel;
@@ -97,17 +103,38 @@ Item {
         anchors.topMargin: 0
         anchors.top: parent.top
 
-
+        Item {
-        Image {
+            id: audioIcon
-            id: muteIcon
+            anchors.verticalCenter: parent.verticalCenter
             width: 40
             height: 40
-            source: "../../../icons/tablet-mute-icon.svg"
+            anchors.left: parent.left
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.leftMargin: 5
+
+            Image {
+                id: micIcon
+                source: "../../../icons/tablet-icons/mic.svg"
             }
 
             Item {
-            id: item1
+                visible: (!tablet.micEnabled && !toggleMuteMouseArea.containsMouse)
+                         || (tablet.micEnabled && toggleMuteMouseArea.containsMouse)
+
+                Image {
+                    id: muteIcon
+                    source: "../../../icons/tablet-icons/mic-mute.svg"
+                }
+
+                ColorOverlay {
+                    anchors.fill: muteIcon
+                    source: muteIcon
+                    color: toggleMuteMouseArea.containsMouse ? "#a0a0a0" : "#ff0000"
+                }
+            }
+        }
+
+        Item {
+            id: audioBar
             width: 170
             height: 10
             anchors.left: parent.left
@@ -157,6 +184,22 @@ Item {
             }
         }
 
+        MouseArea {
+            id: toggleMuteMouseArea
+            anchors {
+                left: audioIcon.left
+                right: audioBar.right
+                top: audioIcon.top
+                bottom: audioIcon.bottom
+            }
+
+            hoverEnabled: true
+            preventStealing: true
+            propagateComposedEvents: false
+            scrollGestureEnabled: false
+            onClicked: tabletRoot.toggleMicEnabled()
+        }
+
         RalewaySemiBold {
             id: usernameText
             text: tablet.parent.parent.username
@@ -175,7 +218,6 @@ Item {
             GradientStop {
                 position: 0
                 color: "#2b2b2b"
-
             }
 
             GradientStop {
@@ -225,7 +267,7 @@ Item {
 
             PropertyChanges {
                 target: muteIcon
-                source: "../../../icons/tablet-unmute-icon.svg"
+                visible: micEnabled
             }
 
             PropertyChanges {

interface/resources/qml/hifi/tablet/TabletMenu.qml

@@ -14,6 +14,7 @@ FocusScope {
 
     property var rootMenu: Menu { objectName:"rootMenu" }
     property var point: Qt.point(50, 50)
+    property string subMenu: ""
 
     TabletMouseHandler { id: menuPopperUpper }
 
@@ -101,6 +102,24 @@ FocusScope {
         buildMenu()
     }
     function buildMenu() {
-        menuPopperUpper.popup(tabletMenu, rootMenu.items)
+        // Build submenu if specified.
+        if (subMenu !== "") {
+            var index = 0;
+            var found = false;
+            while (!found && index < rootMenu.items.length) {
+                found = rootMenu.items[index].title === subMenu;
+                if (!found) {
+                    index += 1;
+                }
+            }
+            subMenu = "";  // Continue with full menu after initially displaying submenu.
+            if (found) {
+                menuPopperUpper.popup(tabletMenu, rootMenu.items[index].items);
+                return;
+            }
+        }
+
+        // Otherwise build whole menu.
+        menuPopperUpper.popup(tabletMenu, rootMenu.items);
     }
 }

interface/resources/qml/hifi/tablet/TabletRoot.qml

@@ -6,9 +6,14 @@ Item {
     objectName: "tabletRoot"
     property string username: "Unknown user"
     property var eventBridge;
+    property string option: ""
 
     signal showDesktop();
 
+    function setOption(value) {
+        option = value;
+    }
+
     function loadSource(url) {
         loader.source = url;
     }
@@ -42,6 +47,10 @@ Item {
         }
     }
 
+    function toggleMicEnabled() {
+        ApplicationInterface.toggleMuteAudio();
+    }
+
     function setUsername(newUsername) {
         username = newUsername;
     }
@@ -68,6 +77,9 @@ Item {
             if (loader.item.hasOwnProperty("sendToScript")) {
                 loader.item.sendToScript.connect(tabletRoot.sendToScript);
             }
+            if (loader.item.hasOwnProperty("subMenu")) {
+                loader.item.subMenu = option;
+            }
             loader.item.forceActiveFocus();
         }
     }

interface/src/Application.cpp

@@ -6853,3 +6853,8 @@ void Application::updateThreadPoolCount() const {
     qCDebug(interfaceapp) << "Setting thread pool size to " << threadPoolSize;
     QThreadPool::globalInstance()->setMaxThreadCount(threadPoolSize);
 }
+
+void Application::toggleMuteAudio() {
+    auto menu = Menu::getInstance();
+    menu->setIsOptionChecked(MenuOption::MuteAudio, !menu->isOptionChecked(MenuOption::MuteAudio));
+}

interface/src/Application.h

@@ -386,6 +386,8 @@ public slots:
 
     void addAssetToWorldMessageClose();
 
+    Q_INVOKABLE void toggleMuteAudio();
+
 private slots:
     void showDesktop();
     void clearDomainOctreeDetails();

libraries/script-engine/src/TabletScriptingInterface.cpp

@@ -213,10 +213,11 @@ void TabletProxy::setQmlTabletRoot(QQuickItem* qmlTabletRoot, QObject* qmlOffscr
     }
 }
 
-void TabletProxy::gotoMenuScreen() {
+void TabletProxy::gotoMenuScreen(const QString& submenu) {
     if (_qmlTabletRoot) {
         if (_state != State::Menu) {
             removeButtonsFromHomeScreen();
+            QMetaObject::invokeMethod(_qmlTabletRoot, "setOption", Q_ARG(const QVariant&, QVariant(submenu)));
             auto loader = _qmlTabletRoot->findChild<QQuickItem*>("loader");
             QObject::connect(loader, SIGNAL(loaded()), this, SLOT(addButtonsToMenuScreen()), Qt::DirectConnection);
             QMetaObject::invokeMethod(_qmlTabletRoot, "loadSource", Q_ARG(const QVariant&, QVariant(VRMENU_SOURCE_URL)));
@@ -309,6 +310,15 @@ void TabletProxy::removeButton(QObject* tabletButtonProxy) {
     }
 }
 
+void TabletProxy::updateMicEnabled(const bool micOn) {
+    auto tablet = getQmlTablet();
+    if (!tablet) {
+        //qCCritical(scriptengine) << "Could not find tablet in TabletRoot.qml";
+    } else {
+        QMetaObject::invokeMethod(tablet, "setMicEnabled", Qt::AutoConnection, Q_ARG(QVariant, QVariant(micOn)));
+    }
+}
+
 void TabletProxy::updateAudioBar(const double micLevel) {
     auto tablet = getQmlTablet();
     if (!tablet) {
@@ -359,13 +369,13 @@ void TabletProxy::addButtonsToMenuScreen() {
     }
 
     QQuickItem* VrMenu = loader->findChild<QQuickItem*>("tabletMenu");
-    if (!VrMenu) {
+    if (VrMenu) {
-        return;
-    }
-
         auto offscreenUi = DependencyManager::get<OffscreenUi>();
         QObject* menu = offscreenUi->getRootMenu();
         QMetaObject::invokeMethod(VrMenu, "setRootMenu", Qt::AutoConnection, Q_ARG(QVariant, QVariant::fromValue(menu)));
+    }
+
+    QObject::disconnect(loader, SIGNAL(loaded()), this, SLOT(addButtonsToMenuScreen()));
 }
 
 void TabletProxy::removeButtonsFromHomeScreen() {

libraries/script-engine/src/TabletScriptingInterface.h

@@ -72,7 +72,7 @@ public:
 
     void setQmlTabletRoot(QQuickItem* qmlTabletRoot, QObject* qmlOffscreenSurface);
 
-    Q_INVOKABLE void gotoMenuScreen();
+    Q_INVOKABLE void gotoMenuScreen(const QString& submenu = "");
 
     /**jsdoc
      * transition to the home screen
@@ -106,6 +106,13 @@ public:
      */
     Q_INVOKABLE void removeButton(QObject* tabletButtonProxy);
 
+    /**jsdoc
+     * Updates the tablet's mic enabled state
+     * @function TabletProxy#updateMicEnabled
+     * @param micEnabled {bool} mic enabled state
+     */
+    Q_INVOKABLE void updateMicEnabled(const bool micEnabled);
+
     /**jsdoc
      * Updates the audio bar in tablet to reflect latest mic level
      * @function TabletProxy#updateAudioBar

scripts/defaultScripts.js

@@ -14,7 +14,7 @@
 var DEFAULT_SCRIPTS = [
     "system/progress.js",
     "system/away.js",
-    "system/mute.js",
+    "system/audio.js",
     "system/hmd.js",
     "system/menu.js",
     "system/bubble.js",

scripts/system/audio.js

@@ -1,8 +1,7 @@
 "use strict";
 
 //
-//  goto.js
+//  audio.js
-//  scripts/system/
 //
 //  Created by Howard Stearns on 2 Jun 2016
 //  Copyright 2016 High Fidelity, Inc.
@@ -14,22 +13,33 @@
 (function() { // BEGIN LOCAL_SCOPE
 
 var button;
-var buttonName = "MUTE";
+var TOOLBAR_BUTTON_NAME = "MUTE";
+var TABLET_BUTTON_NAME = "AUDIO";
 var toolBar = null;
 var tablet = null;
+var isHUDUIEnabled = Settings.getValue("HUDUIEnabled");
+var HOME_BUTTON_TEXTURE = "http://hifi-content.s3.amazonaws.com/alan/dev/tablet-with-home-button.fbx/tablet-with-home-button.fbm/button-root.png";
 
 function onMuteToggled() {
-    button.editProperties({isActive: AudioDevice.getMuted()});
+    if (isHUDUIEnabled) {
+        button.editProperties({ isActive: AudioDevice.getMuted() });
+    }
 }
 function onClicked(){
+    if (isHUDUIEnabled) {
         var menuItem = "Mute Microphone";
         Menu.setIsOptionChecked(menuItem, !Menu.isOptionChecked(menuItem));
+    } else {
+        var entity = HMD.tabletID;
+        Entities.editEntity(entity, { textures: JSON.stringify({ "tex.close": HOME_BUTTON_TEXTURE }) });
+        tablet.gotoMenuScreen("Audio");
+    }
 }
 
 if (Settings.getValue("HUDUIEnabled")) {
     toolBar = Toolbars.getToolbar("com.highfidelity.interface.toolbar.system");
     button = toolBar.addButton({
-        objectName: buttonName,
+        objectName: TOOLBAR_BUTTON_NAME,
         imageURL: Script.resolvePath("assets/images/tools/mic.svg"),
         visible: true,
         alpha: 0.9
@@ -37,12 +47,8 @@ if (Settings.getValue("HUDUIEnabled")) {
 } else {
     tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
     button = tablet.addButton({
-        icon: "icons/tablet-icons/mic-unmute-i.svg",
+        icon: "icons/tablet-icons/mic-i.svg",
-        hoverIcon: "icons/tablet-icons/mic-mute-i.svg",
+        text: TABLET_BUTTON_NAME,
-        activeIcon: "icons/tablet-icons/mic-mute-a.svg",
-        activeHoverIcon: "icons/tablet-icons/mic-unmute-a.svg",
-        text: "MUTE",
-        activeText: "UNMUTE",
         sortOrder: 1
     });
 }
@@ -58,7 +64,7 @@ Script.scriptEnding.connect(function () {
         tablet.removeButton(button);
     }
     if (toolBar) {
-        toolBar.removeButton(buttonName);
+        toolBar.removeButton(TOOLBAR_BUTTON_NAME);
     }
 });
 

scripts/system/selectAudioDevice.js

@@ -52,33 +52,7 @@ var selectedInputMenu = "";
 var selectedOutputMenu = "";
 
 function setupAudioMenus() {
-    Menu.addMenu("Audio > Devices");
+    Menu.addSeparator("Audio", "Input Audio Device");
-    Menu.addSeparator("Audio > Devices","Output Audio Device");
-
-    var outputDeviceSetting = Settings.getValue(OUTPUT_DEVICE_SETTING);
-    var outputDevices = AudioDevice.getOutputDevices();
-    var selectedOutputDevice = AudioDevice.getOutputDevice();
-    if (outputDevices.indexOf(outputDeviceSetting) != -1 && selectedOutputDevice != outputDeviceSetting) {
-        if (AudioDevice.setOutputDevice(outputDeviceSetting)) {
-            selectedOutputDevice = outputDeviceSetting;
-        }
-    }
-    print("audio output devices: " + outputDevices);
-    for(var i = 0; i < outputDevices.length; i++) {
-        var thisDeviceSelected = (outputDevices[i] == selectedOutputDevice);
-        var menuItem = "Use " + outputDevices[i] + " for Output";
-        Menu.addMenuItem({
-                            menuName: "Audio > Devices",
-                            menuItemName: menuItem,
-                            isCheckable: true,
-                            isChecked: thisDeviceSelected
-                        });
-        if (thisDeviceSelected) {
-            selectedOutputMenu = menuItem;
-        }
-    }
-
-    Menu.addSeparator("Audio > Devices","Input Audio Device");
 
     var inputDeviceSetting = Settings.getValue(INPUT_DEVICE_SETTING);
     var inputDevices = AudioDevice.getInputDevices();
@@ -93,7 +67,7 @@ function setupAudioMenus() {
         var thisDeviceSelected = (inputDevices[i] == selectedInputDevice);
         var menuItem = "Use " + inputDevices[i] + " for Input";
         Menu.addMenuItem({
-                            menuName: "Audio > Devices",
+                            menuName: "Audio",
                             menuItemName: menuItem,
                             isCheckable: true,
                             isChecked: thisDeviceSelected
@@ -102,6 +76,31 @@ function setupAudioMenus() {
             selectedInputMenu = menuItem;
         }
     }
+
+    Menu.addSeparator("Audio", "Output Audio Device");
+
+    var outputDeviceSetting = Settings.getValue(OUTPUT_DEVICE_SETTING);
+    var outputDevices = AudioDevice.getOutputDevices();
+    var selectedOutputDevice = AudioDevice.getOutputDevice();
+    if (outputDevices.indexOf(outputDeviceSetting) != -1 && selectedOutputDevice != outputDeviceSetting) {
+        if (AudioDevice.setOutputDevice(outputDeviceSetting)) {
+            selectedOutputDevice = outputDeviceSetting;
+        }
+    }
+    print("audio output devices: " + outputDevices);
+    for (var i = 0; i < outputDevices.length; i++) {
+        var thisDeviceSelected = (outputDevices[i] == selectedOutputDevice);
+        var menuItem = "Use " + outputDevices[i] + " for Output";
+        Menu.addMenuItem({
+            menuName: "Audio",
+            menuItemName: menuItem,
+            isCheckable: true,
+            isChecked: thisDeviceSelected
+        });
+        if (thisDeviceSelected) {
+            selectedOutputMenu = menuItem;
+        }
+    }
 }
 
 function onDevicechanged() {

scripts/system/tablet-ui/tabletUI.js

@@ -53,8 +53,11 @@
 
     function updateShowTablet() {
         if (tabletShown) {
+            var MUTE_MICROPHONE_MENU_ITEM = "Mute Microphone";
+            var currentMicEnabled = !Menu.isOptionChecked(MUTE_MICROPHONE_MENU_ITEM);
             var currentMicLevel = getMicLevel();
             var tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
+            tablet.updateMicEnabled(currentMicEnabled);
             tablet.updateAudioBar(currentMicLevel);
         }