adding switches and buttons to testing audio

This commit is contained in:
Wayne Chen 2019-03-04 19:28:12 -08:00
parent a68aaaa7a4
commit 0f2792930a
4 changed files with 62 additions and 88 deletions

View file

@ -27,6 +27,7 @@ Item {
property string labelGlyphOnText: ""; property string labelGlyphOnText: "";
property int labelGlyphOnSize: 32; property int labelGlyphOnSize: 32;
property alias checked: originalSwitch.checked; property alias checked: originalSwitch.checked;
property string backgroundOnColor: "#252525";
signal onCheckedChanged; signal onCheckedChanged;
signal clicked; signal clicked;
@ -54,7 +55,7 @@ Item {
} }
background: Rectangle { background: Rectangle {
color: "#252525"; color: checked ? backgroundOnColor : "#252525";
implicitWidth: rootSwitch.switchWidth; implicitWidth: rootSwitch.switchWidth;
implicitHeight: rootSwitch.height; implicitHeight: rootSwitch.height;
radius: rootSwitch.switchRadius; radius: rootSwitch.switchRadius;

View file

@ -16,7 +16,7 @@ import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import stylesUit 1.0 import stylesUit 1.0
import controlsUit 1.0 as HifiControls import controlsUit 1.0 as HifiControlsUit
import "../../windows" import "../../windows"
import "./" as AudioControls import "./" as AudioControls
@ -27,6 +27,8 @@ Rectangle {
property var eventBridge; property var eventBridge;
property string title: "Audio Settings" property string title: "Audio Settings"
property int switchHeight: 16
property int switchWidth: 40
signal sendToScript(var message); signal sendToScript(var message);
color: hifi.colors.baseGray; color: hifi.colors.baseGray;
@ -38,7 +40,7 @@ Rectangle {
property bool isVR: AudioScriptingInterface.context === "VR" property bool isVR: AudioScriptingInterface.context === "VR"
property real rightMostInputLevelPos: 0 property real rightMostInputLevelPos: 450
//placeholder for control sizes and paddings //placeholder for control sizes and paddings
//recalculates dynamically in case of UI size is changed //recalculates dynamically in case of UI size is changed
QtObject { QtObject {
@ -98,58 +100,68 @@ Rectangle {
Separator { } Separator { }
ColumnLayout { RowLayout {
x: margins.paddings; x: 2 * margins.paddings;
spacing: 16; spacing: columnOne.width;
width: parent.width; width: parent.width;
// mute is in its own row // mute is in its own row
RowLayout { ColumnLayout {
spacing: (margins.sizeCheckBox - 10.5) * 3; id: columnOne
AudioControls.CheckBox { spacing: 12;
id: muteMic x: margins.paddings
text: qsTr("Mute microphone"); HifiControlsUit.Switch {
spacing: margins.sizeCheckBox - boxSize id: muteMic;
isRedCheck: true; height: root.switchHeight;
switchWidth: root.switchWidth;
labelTextOn: "Mute microphone";
backgroundOnColor: "#E3E3E3";
checked: AudioScriptingInterface.muted; checked: AudioScriptingInterface.muted;
onClicked: { onCheckedChanged: {
AudioScriptingInterface.muted = checked; AudioScriptingInterface.muted = checked;
checked = Qt.binding(function() { return AudioScriptingInterface.muted; }); // restore binding checked = Qt.binding(function() { return AudioScriptingInterface.muted; }); // restore binding
} }
} }
AudioControls.CheckBox { HifiControlsUit.Switch {
id: stereoMic id: stereoInput;
spacing: muteMic.spacing; height: root.switchHeight;
text: qsTr("Enable stereo input"); switchWidth: root.switchWidth;
labelTextOn: qsTr("Stereo input");
backgroundOnColor: "#E3E3E3";
checked: AudioScriptingInterface.isStereoInput; checked: AudioScriptingInterface.isStereoInput;
onClicked: { onCheckedChanged: {
AudioScriptingInterface.isStereoInput = checked; AudioScriptingInterface.isStereoInput = checked;
checked = Qt.binding(function() { return AudioScriptingInterface.isStereoInput; }); // restore binding checked = Qt.binding(function() { return AudioScriptingInterface.isStereoInput; }); // restore binding
} }
} }
} }
RowLayout { ColumnLayout {
spacing: muteMic.spacing*2; //make it visually distinguish spacing: 12;
AudioControls.CheckBox { HifiControlsUit.Switch {
spacing: muteMic.spacing height: root.switchHeight;
text: qsTr("Enable noise reduction"); switchWidth: root.switchWidth;
labelTextOn: "Noise Reduction";
backgroundOnColor: "#E3E3E3";
checked: AudioScriptingInterface.noiseReduction; checked: AudioScriptingInterface.noiseReduction;
onClicked: { onCheckedChanged: {
AudioScriptingInterface.noiseReduction = checked; AudioScriptingInterface.noiseReduction = checked;
checked = Qt.binding(function() { return AudioScriptingInterface.noiseReduction; }); // restore binding checked = Qt.binding(function() { return AudioScriptingInterface.noiseReduction; }); // restore binding
} }
} }
AudioControls.CheckBox {
spacing: muteMic.spacing HifiControlsUit.Switch {
text: qsTr("Show audio level meter"); id: audioLevelSwitch
height: root.switchHeight;
switchWidth: root.switchWidth;
labelTextOn: qsTr("Audio Level Meter");
backgroundOnColor: "#E3E3E3";
checked: AvatarInputs.showAudioTools; checked: AvatarInputs.showAudioTools;
onClicked: { onCheckedChanged: {
AvatarInputs.showAudioTools = checked; AvatarInputs.showAudioTools = checked;
checked = Qt.binding(function() { return AvatarInputs.showAudioTools; }); // restore binding checked = Qt.binding(function() { return AvatarInputs.showAudioTools; }); // restore binding
} }
onXChanged: rightMostInputLevelPos = x + width
} }
} }
} }
@ -203,7 +215,7 @@ Rectangle {
width: parent.width - inputLevel.width width: parent.width - inputLevel.width
clip: true clip: true
checkable: !checked checkable: !checked
checked: bar.currentIndex === 0 ? selectedDesktop : selectedHMD; checked: bar.currentIndex === 0 ? selectedDesktop : selectedHMD;
boxSize: margins.sizeCheckBox / 2 boxSize: margins.sizeCheckBox / 2
isRound: true isRound: true
text: devicename text: devicename
@ -215,7 +227,7 @@ Rectangle {
} }
} }
} }
InputPeak { AudioControls.InputPeak {
id: inputLevel id: inputLevel
anchors.right: parent.right anchors.right: parent.right
peak: model.peak; peak: model.peak;
@ -225,8 +237,11 @@ Rectangle {
AudioScriptingInterface.devices.input.peakValuesAvailable; AudioScriptingInterface.devices.input.peakValuesAvailable;
} }
} }
Component.onCompleted: {
console.log("width " + rightMostInputLevelPos);
}
} }
LoopbackAudio { AudioControls.LoopbackAudio {
x: margins.paddings x: margins.paddings
visible: (bar.currentIndex === 1 && isVR) || visible: (bar.currentIndex === 1 && isVR) ||
@ -293,7 +308,7 @@ Rectangle {
} }
} }
} }
PlaySampleSound { AudioControls.PlaySampleSound {
x: margins.paddings x: margins.paddings
visible: (bar.currentIndex === 1 && isVR) || visible: (bar.currentIndex === 1 && isVR) ||

View file

@ -14,7 +14,7 @@ import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import stylesUit 1.0 import stylesUit 1.0
import controlsUit 1.0 as HifiControls import controlsUit 1.0 as HifiControlsUit
RowLayout { RowLayout {
property bool audioLoopedBack: AudioScriptingInterface.getServerEcho(); property bool audioLoopedBack: AudioScriptingInterface.getServerEcho();
@ -43,29 +43,9 @@ RowLayout {
} }
} }
Button { HifiControlsUit.Button {
id: control text: audioLoopedBack ? qsTr("STOP TESTING YOUR VOICE") : qsTr("TEST YOUR VOICE");
background: Rectangle { color: audioLoopedBack ? hifi.buttons.red : hifi.buttons.blue;
implicitWidth: 20;
implicitHeight: 20;
radius: hifi.buttons.radius;
gradient: Gradient {
GradientStop {
position: 0.2;
color: audioLoopedBack ? hifi.buttons.colorStart[hifi.buttons.blue] : "#FFFFFF";
}
GradientStop {
position: 1.0;
color: audioLoopedBack ? hifi.buttons.colorFinish[hifi.buttons.blue] : "#AFAFAF";
}
}
}
contentItem: HiFiGlyphs {
size: 14;
color: (control.pressed || control.hovered) ? (audioLoopedBack ? "black" : hifi.colors.primaryHighlight) : "#404040";
text: audioLoopedBack ? hifi.glyphs.stop_square : hifi.glyphs.mic;
}
onClicked: { onClicked: {
if (audioLoopedBack) { if (audioLoopedBack) {
loopbackTimer.stop(); loopbackTimer.stop();
@ -81,6 +61,7 @@ RowLayout {
Layout.leftMargin: 2; Layout.leftMargin: 2;
size: 14; size: 14;
color: "white"; color: "white";
text: audioLoopedBack ? qsTr("Stop testing your voice") : qsTr("Test your voice"); font.italic: true
text: audioLoopedBack ? qsTr("Speak in your input") : "";
} }
} }

View file

@ -14,7 +14,7 @@ import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import stylesUit 1.0 import stylesUit 1.0
import controlsUit 1.0 as HifiControls import controlsUit 1.0 as HifiControlsUit
RowLayout { RowLayout {
property var sound: null; property var sound: null;
@ -55,32 +55,9 @@ RowLayout {
HifiConstants { id: hifi; } HifiConstants { id: hifi; }
Button { HifiControlsUit.Button {
id: control text: isPlaying ? qsTr("STOP TESTING YOUR SOUND") : qsTr("TEST YOUR SOUND");
background: Rectangle { color: isPlaying ? hifi.buttons.red : hifi.buttons.blue;
implicitWidth: 20;
implicitHeight: 20;
radius: hifi.buttons.radius;
gradient: Gradient {
GradientStop {
position: 0.2;
color: isPlaying ? hifi.buttons.colorStart[hifi.buttons.blue] : "#FFFFFF";
}
GradientStop {
position: 1.0;
color: isPlaying ? hifi.buttons.colorFinish[hifi.buttons.blue] : "#AFAFAF";
}
}
}
contentItem: HiFiGlyphs {
// absolutely position due to asymmetry in glyph
// x: isPlaying ? 0 : 1;
// y: 1;
size: 14;
color: (control.pressed || control.hovered) ? (isPlaying ? "black" : hifi.colors.primaryHighlight) : "#404040";
text: isPlaying ? hifi.glyphs.stop_square : hifi.glyphs.playback_play;
}
onClicked: isPlaying ? stopSound() : playSound(); onClicked: isPlaying ? stopSound() : playSound();
} }
@ -88,7 +65,7 @@ RowLayout {
Layout.leftMargin: 2; Layout.leftMargin: 2;
size: 14; size: 14;
color: "white"; color: "white";
text: isPlaying ? qsTr("Stop sample sound") : qsTr("Play sample sound"); font.italic: true
text: isPlaying ? qsTr("Listen to your output") : "";
} }
} }