From c826858458644c18fa043a04b0556ac62edfe90c Mon Sep 17 00:00:00 2001 From: Zach Pomerantz Date: Mon, 19 Jun 2017 17:49:02 -0700 Subject: [PATCH] revamp tablet MicBar --- interface/resources/qml/hifi/audio/MicBar.qml | 208 ++++++++++++++++++ .../resources/qml/hifi/tablet/Tablet.qml | 142 ++---------- .../src/TabletScriptingInterface.cpp | 9 - .../src/TabletScriptingInterface.h | 7 - scripts/system/tablet-ui/tabletUI.js | 11 - 5 files changed, 224 insertions(+), 153 deletions(-) create mode 100644 interface/resources/qml/hifi/audio/MicBar.qml diff --git a/interface/resources/qml/hifi/audio/MicBar.qml b/interface/resources/qml/hifi/audio/MicBar.qml new file mode 100644 index 0000000000..01c3d54c80 --- /dev/null +++ b/interface/resources/qml/hifi/audio/MicBar.qml @@ -0,0 +1,208 @@ +// +// MicBar.qml +// qml/hifi/audio +// +// Created by Zach Pomerantz on 6/14/2017 +// Copyright 2017 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 +// + +import QtQuick 2.5 +import QtQuick.Controls 1.4 +import QtQuick.Layouts 1.3 +import QtGraphicalEffects 1.0 + +Rectangle { + readonly property var level: Audio.inputLevel; + + property bool standalone: false; + + radius: 5; + color: standalone ? colors.fill : "#00000000"; + border { + width: (standalone || Audio.muted || mouseArea.containsMouse) ? 2 : 0; + color: colors.border; + } + + width: 240; + height: 50; + + MouseArea { + id: mouseArea; + + anchors { + left: icon.left; + right: bar.right; + top: icon.top; + bottom: icon.bottom; + } + + hoverEnabled: true + preventStealing: true + propagateComposedEvents: false + scrollGestureEnabled: false + onClicked: { Audio.muted = !Audio.muted; } + } + + Item { + id: colors; + + readonly property string unmuted: "#FFF"; + readonly property string muted: "#E2334D"; + readonly property string gutter: "#575757"; + readonly property string greenStart: "#39A38F"; + readonly property string greenEnd: "#1FC6A6"; + readonly property string red: colors.muted; + readonly property string fill: "#4D000000"; + readonly property string border: "#4DFFFFFF"; + readonly property string icon: (Audio.muted && !mouseArea.containsMouse) ? muted : unmuted; + } + + Item { + id: icon; + + anchors { + left: parent.left; + leftMargin: 5; + verticalCenter: parent.verticalCenter; + } + + width: 40; + height: 40; + + Item { + Image { + readonly property string unmutedIcon: "../../../icons/tablet-icons/mic-unmute-i.svg"; + readonly property string mutedIcon: "../../../icons/tablet-icons/mic-mute-i.svg"; + + function exclusiveOr(a, b) { return (a || b) && !(a && b); } + + id: image; + source: exclusiveOr(Audio.muted, mouseArea.containsMouse) ? mutedIcon : unmutedIcon; + + width: 30; + height: 30; + anchors { + left: parent.left; + leftMargin: 5; + top: parent.top; + topMargin: 5; + } + } + + ColorOverlay { + anchors { fill: image } + source: image; + color: colors.icon; + } + } + } + + Item { + id: status; + + readonly property string color: (Audio.muted && !mouseArea.containsMouse) ? colors.muted : colors.unmuted; + + visible: Audio.muted || mouseArea.containsMouse; + + anchors { + left: parent.left; + leftMargin: 50; + verticalCenter: parent.verticalCenter; + } + + width: 170; + height: 8 + + Text { + anchors { + horizontalCenter: parent.horizontalCenter; + verticalCenter: parent.verticalCenter; + } + + color: parent.color; + + text: Audio.muted ? (mouseArea.containsMouse ? "UNMUTE" : "MUTED") : "MUTE"; + font.pointSize: 12; + } + + Rectangle { + anchors { + left: parent.left; + verticalCenter: parent.verticalCenter; + } + + width: 50; + height: 4; + color: parent.color; + } + + Rectangle { + anchors { + right: parent.right; + verticalCenter: parent.verticalCenter; + } + + width: 50; + height: 4; + color: parent.color; + } + } + + Item { + id: bar; + + visible: !status.visible; + + anchors.fill: status; + + width: status.width; + + Rectangle { // base + radius: 4; + anchors { fill: parent } + color: colors.gutter; + } + + Rectangle { // mask + id: mask; + width: parent.width * level; + radius: 5; + anchors { + bottom: parent.bottom; + bottomMargin: 0; + top: parent.top; + topMargin: 0; + left: parent.left; + leftMargin: 0; + } + } + + LinearGradient { + anchors { fill: mask } + source: mask + start: Qt.point(0, 0); + end: Qt.point(170, 0); + gradient: Gradient { + GradientStop { + position: 0; + color: colors.greenStart; + } + GradientStop { + position: 0.8; + color: colors.greenEnd; + } + GradientStop { + position: 0.81; + color: colors.red; + } + GradientStop { + position: 1; + color: colors.red; + } + } + } + } +} diff --git a/interface/resources/qml/hifi/tablet/Tablet.qml b/interface/resources/qml/hifi/tablet/Tablet.qml index 25cbd02426..459c53074a 100644 --- a/interface/resources/qml/hifi/tablet/Tablet.qml +++ b/interface/resources/qml/hifi/tablet/Tablet.qml @@ -1,20 +1,16 @@ import QtQuick 2.5 import QtGraphicalEffects 1.0 + import "../../styles-uit" +import "../audio" as Audio Item { id: tablet objectName: "tablet" - property double micLevel: 0.8 property int rowIndex: 0 property int columnIndex: 0 property int count: (flowMain.children.length - 1) - // called by C++ code to keep audio bar updated - function setMicLevel(newMicLevel) { - tablet.micLevel = newMicLevel; - } - // used to look up a button by its uuid function findButtonIndex(uuid) { if (!uuid) { @@ -83,6 +79,16 @@ Item { Rectangle { id: bgTopBar height: 90 + + anchors { + top: parent.top + topMargin: 0 + left: parent.left + leftMargin: 0 + right: parent.right + rightMargin: 0 + } + gradient: Gradient { GradientStop { position: 0 @@ -94,108 +100,13 @@ Item { color: "#1e1e1e" } } - anchors.right: parent.right - anchors.rightMargin: 0 - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.topMargin: 0 - anchors.top: parent.top - Item { - id: audioIcon - anchors.verticalCenter: parent.verticalCenter - width: 40 - height: 40 - anchors.left: parent.left - anchors.leftMargin: 5 - - Image { - id: micIcon - source: "../../../icons/tablet-icons/mic.svg" - } - - Item { - visible: (Audio.muted && !toggleMuteMouseArea.containsMouse) - || (!Audio.muted && 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 - anchors.leftMargin: 50 - anchors.verticalCenter: parent.verticalCenter - Rectangle { - id: audioBarBase - color: "#333333" - radius: 5 - anchors.fill: parent - } - Rectangle { - id: audioBarMask - width: parent.width * tablet.micLevel - color: "#333333" - radius: 5 - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - anchors.top: parent.top - anchors.topMargin: 0 - anchors.left: parent.left - anchors.leftMargin: 0 - } - LinearGradient { - anchors.fill: audioBarMask - source: audioBarMask - start: Qt.point(0, 0) - end: Qt.point(170, 0) - gradient: Gradient { - GradientStop { - position: 0 - color: "#2c8e72" - } - GradientStop { - position: 0.8 - color: "#1fc6a6" - } - GradientStop { - position: 0.81 - color: "#ea4c5f" - } - GradientStop { - position: 1 - color: "#ea4c5f" - } - } - } - } - - MouseArea { - id: toggleMuteMouseArea + Audio.MicBar { anchors { - left: audioIcon.left - right: audioBar.right - top: audioIcon.top - bottom: audioIcon.bottom + left: parent.left + leftMargin: 30 + verticalCenter: parent.verticalCenter } - - hoverEnabled: true - preventStealing: true - propagateComposedEvents: false - scrollGestureEnabled: false - onClicked: { Audio.muted = !Audio.muted } } RalewaySemiBold { @@ -254,27 +165,6 @@ Item { } } - states: [ - State { - name: "muted state" - - PropertyChanges { - target: muteText - text: "UNMUTE" - } - - PropertyChanges { - target: muteIcon - visible: !Audio.muted - } - - PropertyChanges { - target: tablet - micLevel: 0 - } - } - ] - function setCurrentItemState(state) { var index = rowIndex + columnIndex; diff --git a/libraries/script-engine/src/TabletScriptingInterface.cpp b/libraries/script-engine/src/TabletScriptingInterface.cpp index b41c548e57..ef2887fdfb 100644 --- a/libraries/script-engine/src/TabletScriptingInterface.cpp +++ b/libraries/script-engine/src/TabletScriptingInterface.cpp @@ -614,15 +614,6 @@ void TabletProxy::removeButton(QObject* tabletButtonProxy) { } } -void TabletProxy::updateAudioBar(const double micLevel) { - auto tablet = getQmlTablet(); - if (!tablet) { - //qCCritical(scriptengine) << "Could not find tablet in TabletRoot.qml"; - } else { - QMetaObject::invokeMethod(tablet, "setMicLevel", Qt::AutoConnection, Q_ARG(QVariant, QVariant(micLevel))); - } -} - void TabletProxy::emitScriptEvent(QVariant msg) { if (!_toolbarMode && _qmlOffscreenSurface) { QMetaObject::invokeMethod(_qmlOffscreenSurface, "emitScriptEvent", Qt::AutoConnection, Q_ARG(QVariant, msg)); diff --git a/libraries/script-engine/src/TabletScriptingInterface.h b/libraries/script-engine/src/TabletScriptingInterface.h index 2ae9e70846..23d7ecaea4 100644 --- a/libraries/script-engine/src/TabletScriptingInterface.h +++ b/libraries/script-engine/src/TabletScriptingInterface.h @@ -152,13 +152,6 @@ public: */ Q_INVOKABLE void removeButton(QObject* tabletButtonProxy); - /**jsdoc - * Updates the audio bar in tablet to reflect latest mic level - * @function TabletProxy#updateAudioBar - * @param micLevel {double} mic level value between 0 and 1 - */ - Q_INVOKABLE void updateAudioBar(const double micLevel); - /**jsdoc * Used to send an event to the html/js embedded in the tablet * @function TabletProxy#emitScriptEvent diff --git a/scripts/system/tablet-ui/tabletUI.js b/scripts/system/tablet-ui/tabletUI.js index b7324ed28c..9188f39a2e 100644 --- a/scripts/system/tablet-ui/tabletUI.js +++ b/scripts/system/tablet-ui/tabletUI.js @@ -183,11 +183,6 @@ return; } - //TODO: move to tablet qml? - if (tabletShown) { - gTablet.updateAudioBar(getMicLevel()); - } - if (now - validCheckTime > MSECS_PER_SEC) { validCheckTime = now; updateTabletWidthFromSettings(); @@ -268,12 +263,6 @@ Script.setInterval(updateShowTablet, 100); - // Calculate microphone level with the same scaling equation (log scale, exponentially averaged) in AvatarInputs and pal.js - function getMicLevel() { - //reuse already existing C++ code - return AvatarInputs.loudnessToAudioLevel(MyAvatar.audioLoudness) - } - Script.scriptEnding.connect(function () { // if we reload scripts in tablet mode make sure we close the currently open window, by calling gotoHomeScreen