adding user speaking level rotated vertically and muted symbol

This commit is contained in:
Wayne Chen 2019-02-26 18:14:56 -08:00
parent efffb8b819
commit 0def39dbaa

View file

@ -13,13 +13,14 @@ import QtQuick 2.5
import QtGraphicalEffects 1.0 import QtGraphicalEffects 1.0
import stylesUit 1.0 import stylesUit 1.0
import stylesUit 1.0
import TabletScriptingInterface 1.0 import TabletScriptingInterface 1.0
Rectangle { Rectangle {
HifiConstants { id: hifi; } HifiConstants { id: hifi; }
readonly property var level: AudioScriptingInterface.inputLevel; readonly property var level: AudioScriptingInterface.inputLevel;
readonly property var userSpeakingLevel: 0.4;
property bool gated: false; property bool gated: false;
Component.onCompleted: { Component.onCompleted: {
AudioScriptingInterface.noiseGateOpened.connect(function() { gated = false; }); AudioScriptingInterface.noiseGateOpened.connect(function() { gated = false; });
@ -29,8 +30,8 @@ Rectangle {
property bool standalone: false; property bool standalone: false;
property var dragTarget: null; property var dragTarget: null;
width: 240; width: 44;
height: 50; height: 44;
radius: 5; radius: 5;
@ -43,8 +44,8 @@ Rectangle {
// borders are painted over fill, so reduce the fill to fit inside the border // borders are painted over fill, so reduce the fill to fit inside the border
Rectangle { Rectangle {
color: standalone ? colors.fill : "#00000000"; color: standalone ? colors.fill : "#00000000";
width: 236; width: 40;
height: 46; height: 40;
radius: 5; radius: 5;
@ -101,7 +102,6 @@ Rectangle {
anchors { anchors {
left: parent.left; left: parent.left;
leftMargin: 5;
verticalCenter: parent.verticalCenter; verticalCenter: parent.verticalCenter;
} }
@ -117,11 +117,11 @@ Rectangle {
id: image; id: image;
source: (AudioScriptingInterface.pushToTalk && !AudioScriptingInterface.pushingToTalk) ? pushToTalkIcon : AudioScriptingInterface.muted ? mutedIcon : unmutedIcon; source: (AudioScriptingInterface.pushToTalk && !AudioScriptingInterface.pushingToTalk) ? pushToTalkIcon : AudioScriptingInterface.muted ? mutedIcon : unmutedIcon;
width: 30; width: 21;
height: 30; height: 24;
anchors { anchors {
left: parent.left; left: parent.left;
leftMargin: 5; leftMargin: 7;
top: parent.top; top: parent.top;
topMargin: 5; topMargin: 5;
} }
@ -138,20 +138,20 @@ Rectangle {
Item { Item {
id: status; id: status;
readonly property string color: AudioScriptingInterface.muted ? colors.muted : colors.unmuted; readonly property string color: colors.muted;
visible: (AudioScriptingInterface.pushToTalk && !AudioScriptingInterface.pushingToTalk) || AudioScriptingInterface.muted; visible: (AudioScriptingInterface.pushToTalk && !AudioScriptingInterface.pushingToTalk) || (AudioScriptingInterface.muted && (level >= userSpeakingLevel));
anchors { anchors {
left: parent.left; left: parent.left;
leftMargin: 50; top: parent.bottom
verticalCenter: parent.verticalCenter; topMargin: 5
} }
width: 170; width: icon.width;
height: 8 height: 8
Text { RalewaySemiBold {
anchors { anchors {
horizontalCenter: parent.horizontalCenter; horizontalCenter: parent.horizontalCenter;
verticalCenter: parent.verticalCenter; verticalCenter: parent.verticalCenter;
@ -189,11 +189,14 @@ Rectangle {
Item { Item {
id: bar; id: bar;
visible: !status.visible; anchors {
right: parent.right;
rightMargin: 7;
verticalCenter: parent.verticalCenter;
}
anchors.fill: status; width: 8;
height: 32;
width: status.width;
Rectangle { // base Rectangle { // base
radius: 4; radius: 4;
@ -203,13 +206,12 @@ Rectangle {
Rectangle { // mask Rectangle { // mask
id: mask; id: mask;
width: gated ? 0 : parent.width * level; height: parent.height * level;
width: parent.width;
radius: 5; radius: 5;
anchors { anchors {
bottom: parent.bottom; bottom: parent.bottom;
bottomMargin: 0; bottomMargin: 0;
top: parent.top;
topMargin: 0;
left: parent.left; left: parent.left;
leftMargin: 0; leftMargin: 0;
} }
@ -219,10 +221,11 @@ Rectangle {
anchors { fill: mask } anchors { fill: mask }
source: mask source: mask
start: Qt.point(0, 0); start: Qt.point(0, 0);
end: Qt.point(170, 0); end: Qt.point(0, bar.height);
rotation: 180
gradient: Gradient { gradient: Gradient {
GradientStop { GradientStop {
position: 0; position: 0.0;
color: colors.greenStart; color: colors.greenStart;
} }
GradientStop { GradientStop {
@ -230,8 +233,8 @@ Rectangle {
color: colors.greenEnd; color: colors.greenEnd;
} }
GradientStop { GradientStop {
position: 1; position: 1.0;
color: colors.yellow; color: colors.red;
} }
} }
} }