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