From 8170c9280b57c8da5d1d6045e16d5ac14bc5220d Mon Sep 17 00:00:00 2001 From: Scott Murray Date: Mon, 30 Dec 2019 18:44:05 -0500 Subject: Enhance voice configuration Various tweaks to the new voice configuration support: - Moved "Version" choice on the main menu back down to the last choice, since it's less likely to be used. - Pull in qt-qrcode library's quickitem support and use it to display a QR code when Alexa authorization is required. - Reworked layout of voice configuration dialog to tighten up spacing and make more room for the QR code. - Tweaked voice configuration dialog logic to only show the login prompting when in not-authorized state. Ideally, a deauth button would be shown in the authorized state, but the voiceagent API currently does not enable that AFAICT. - Replace voiceagent ID with vendor in voiceagent configuration dialog, as the ID is more of an internal thing that's not useful to users. - Tweaked some text colors in voiceagent configuration dialog for better consistency with the other settings pages. - Switched voiceagent configuration dialog positioning to center it on-screen, as that seems more consistent with the look of the other settings pages. - Made the previous two changes to the wired settings configuration dialog as well for consistency. - Updated the voice settings icon with a microphone icon to match the default icon shown for the homescreen PTT button. - Updated the wired settings icon with a more typical network icon to avoid confusion. Bug-AGL: SPEC-2981 Signed-off-by: Scott Murray Change-Id: I75560e3cab393e6efdfb1310f266e5b6bb0534d6 --- app/Settings.qml | 4 +- app/app.pro | 2 +- app/main.cpp | 2 + app/voice/ConfigDialog.qml | 206 ++++++++------ app/voice/Voice.qml | 53 +--- app/voice/images/HMI_Settings_VoiceIcon.svg | 424 ++++++++++++++++++++-------- app/wired/ConfigDialog.qml | 45 ++- app/wired/Wired.qml | 11 +- app/wired/images/HMI_Settings_WiredIcon.svg | 106 +++++-- 9 files changed, 539 insertions(+), 314 deletions(-) diff --git a/app/Settings.qml b/app/Settings.qml index 2fc560c..47e720e 100644 --- a/app/Settings.qml +++ b/app/Settings.qml @@ -73,9 +73,9 @@ ApplicationWindow { Wired {} - Version {} - Voice {} + + Version {} } } } diff --git a/app/app.pro b/app/app.pro index c26e44b..5db10ec 100644 --- a/app/app.pro +++ b/app/app.pro @@ -4,7 +4,7 @@ QT = quickcontrols2 websockets SOURCES = main.cpp CONFIG += link_pkgconfig -PKGCONFIG += libhomescreen qlibwindowmanager qtappfw +PKGCONFIG += libhomescreen qlibwindowmanager qtappfw qtqrcode-quickitem RESOURCES += \ settings.qrc \ diff --git a/app/main.cpp b/app/main.cpp index b46029c..20aff96 100644 --- a/app/main.cpp +++ b/app/main.cpp @@ -24,6 +24,7 @@ #include #include #include +#include #include #include #include @@ -115,6 +116,7 @@ int main(int argc, char *argv[]) qWarning() << aglversion.errorString(); } + QtQrCodeQuickItem::registerQmlTypes(); engine.rootContext()->setContextProperty("bluetooth", new Bluetooth(bindingAddressWS, context)); engine.rootContext()->setContextProperty("voice", new Voice(bindingAddressWS, context)); engine.rootContext()->setContextProperty(QStringLiteral("screenInfo"), &screenInfo); diff --git a/app/voice/ConfigDialog.qml b/app/voice/ConfigDialog.qml index dd939d2..9767804 100644 --- a/app/voice/ConfigDialog.qml +++ b/app/voice/ConfigDialog.qml @@ -18,9 +18,9 @@ import QtQuick 2.11 import QtQuick.Controls 2.4 import QtQuick.Layouts 1.3 +import QtQrCode.Component 1.0 import AGL.Demo.Controls 1.0 - Dialog { id: root property alias xpos: root.x @@ -30,6 +30,7 @@ Dialog { property string thisAgentName: undefined property string thisAgentId: undefined + property string thisAgentVendor: undefined property string thisAgentWuW: undefined property string thisAgentAuthState: undefined property string thisAgentConnState: undefined @@ -44,7 +45,7 @@ Dialog { visible: false z: 1 focus: true - modal: false + modal: true footer: DialogButtonBox { Button { text: "CLOSE" DialogButtonBox.buttonRole: DialogButtonBox.RejectRole @@ -60,7 +61,8 @@ Dialog { background: Rectangle { border.color : '#00ADDC' - color: 'transparent' + color: 'black' + opacity: 0.5 } onReset: refreshToken() @@ -74,161 +76,189 @@ Dialog { anchors.fill: parent ColumnLayout { anchors.fill: parent + spacing: 0 + RowLayout { - Layout.fillHeight: true - Layout.fillWidth: true - Layout.alignment: Qt.AlignLeft - spacing: 32 - visible: true - Label { - id: voiceLabel - font.pixelSize: 28 - color: '#080C0F' - text: "Voice Agent:" - Layout.preferredWidth: 200 - } - Label { - id: idLabel - font.pixelSize: 28 - color: '#66FF99' - text: thisAgentId - } - } - RowLayout { - Layout.fillHeight: true - Layout.fillWidth: true - Layout.alignment: Qt.AlignLeft - spacing: 32 - visible: true - Label { - id: namelabel - font.pixelSize: 28 - color: '#080C0F' - text: "Assistant Name:" - Layout.preferredWidth: 200 - } - Label { - id: aNamelabel - font.pixelSize: 28 - color: '#66FF99' - text: thisAgentName - } - } - RowLayout { - Layout.fillHeight: true + Layout.fillHeight: false Layout.fillWidth: true - Layout.alignment: Qt.AlignLeft - spacing: 32 - visible: true - Label { - id: wuwlabel - font.pixelSize: 28 - color: '#080C0F' - text: "Wake Up Word:" - Layout.preferredWidth: 200 - } - Label { - id: thiswuwlabel - font.pixelSize: 28 - color: '#848286' - text: thisAgentWuW - } - } - RowLayout { - Layout.fillHeight: true - Layout.fillWidth: true - Layout.alignment: Qt.AlignHCenter + Layout.alignment: Qt.AlignLeft | Qt.AlignTop spacing: 16 - visible: true + + /* Labels */ ColumnLayout { Layout.fillWidth: true + Label { + id: nameLabel + font.pixelSize: 28 + color: 'white' + text: "Voice Agent:" + Layout.preferredWidth: 200 + } + Label { + id: vendorLabel + font.pixelSize: 28 + color: 'white' + text: "Vendor:" + Layout.preferredWidth: 200 + } + Label { + id: wuwLabel + font.pixelSize: 28 + color: 'white' + text: "Wake Up Word:" + Layout.preferredWidth: 200 + } Label { id: authLabel font.pixelSize: 28 - color: '#080C0F' + color: 'white' text: "Authorization status:" } Label { - id: connlabel + id: connLabel font.pixelSize: 28 - color: '#080C0F' + color: 'white' text: "Connection status:" } Label { id: dialogLabel font.pixelSize: 28 - color: '#080C0F' + color: 'white' text: "Dialog status:" } } + + /* Values */ ColumnLayout { Layout.fillWidth: true Label { - id: authsLabel + id: nameValue + font.pixelSize: 28 + color: '#66FF99' + text: thisAgentName + } + Label { + id: vendorValue + font.pixelSize: 28 + color: '#66FF99' + text: thisAgentVendor + } + Label { + id: wuwValue + font.pixelSize: 28 + color: '#66FF99' + text: thisAgentWuW + } + Label { + id: authValue font.pixelSize: 28 color: (thisAgentAuthState == "UNINITIALIZED")? '#00ADDC' : '#848286' text: thisAgentAuthState } Label { - id: connslabel + id: connValue font.pixelSize: 28 color: (thisAgentConnState == "DISCONNECTED")? '#00ADDC' : '#848286' text: thisAgentConnState } Label { - id: dialogsLabel + id: dialogValue font.pixelSize: 28 color: (thisAgentDialogState == "MICROPHONEOFF")? '#00ADDC' : '#848286' text: thisAgentDialogState - } + } } } RowLayout { Layout.fillHeight: true Layout.fillWidth: true - Layout.alignment: Qt.AlignHCenter + Layout.alignment: Qt.AlignLeft + Layout.topMargin: 32 spacing: 16 - visible: true + visible: root.thisAgentAuthState !== "REFRESHED" ColumnLayout { Layout.fillWidth: true Label { - id: loginurlLabel + id: loginUrlLabel font.pixelSize: 28 - color: '#080C0F' + color: 'white' text: "Login url:" } Label { - id: logincodeLabel + id: loginCodeLabel font.pixelSize: 28 - color: '#080C0F' + color: 'white' text: "Login code:" } } ColumnLayout { Layout.fillWidth: true Label { - id: urlLabel + id: loginUrlValue font.pixelSize: 28 color: root.tokenValid? '#848286':'#0DF9FF' text: thisAgentLoginUrl } Label { - id: codeLabel + id: loginCodeValue font.pixelSize: 28 color: root.tokenValid? '#848286':'#0DF9FF' text: thisAgentLoginCode } } } - Label { - font.pixelSize: 18 - visible: root.tokenValid - text: "You can use the supplied login data to enable "+thisAgentName+"." + RowLayout { + Layout.fillHeight: true + Layout.fillWidth: true + Layout.alignment: Qt.AlignHCenter + Layout.topMargin: 8 + Layout.bottomMargin: 8 + + QtQrCode { + /* + * FIXME: Generated URL is currently Alexa-specific, work around for + * now by checking agent name and only displaying for Alexa. + */ + data: root.thisAgentLoginUrl + '?cbl-code=' + root.thisAgentLoginCode + visible: root.thisAgentName === "Alexa" && root.thisAgentAuthState !== "REFRESHED" && root.tokenValid + background: 'white' + margin: 16 + Layout.fillWidth: true + Layout.fillHeight: true + } } Label { + id: instructions font.pixelSize: 18 - visible: !root.tokenValid - text: "The current login data is not valid. Press 'UPDATE' to refresh." + + states: [ + State { + name: "HAVE_TOKEN" + when: root.thisAgentAuthState !== "REFRESHED" && root.tokenValid + PropertyChanges { + target: instructions + text: "You can use the supplied login data to enable "+thisAgentName+"." + visible: true + } + }, + State { + name: "NEED_TOKEN" + when: root.thisAgentAuthState !== "REFRESHED" && !root.tokenValid + PropertyChanges { + target: instructions + text: "The current login data is not valid. Press 'UPDATE' to refresh." + visible: true + } + }, + State { + name: "AUTHORIZED" + when: root.thisAgentAuthState === "REFRESHED" + PropertyChanges { + target: instructions + visible: false + } + } + ] } } } diff --git a/app/voice/Voice.qml b/app/voice/Voice.qml index b316132..4de43b6 100644 --- a/app/voice/Voice.qml +++ b/app/voice/Voice.qml @@ -27,62 +27,12 @@ SettingPage { title: 'Voice' readonly property bool isVoice: true - Rectangle { - anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: parent.top - anchors.margins: 80 - width: 110 - color: "#222" - border.color: "white" - - Button { - id: buttonScan - anchors.centerIn: parent - anchors.margins: 10 - text: enabled? "SCAN" : "PROCESSING" - visible: true - enabled: true - - Timer { - id: scanAnimationTimer - interval: 3000 - running: false - repeat: false - onTriggered: { - buttonScan.enabled = true - } - } - MouseArea { - anchors.fill: parent - - onClicked: { - voice.scan() - buttonScan.enabled = false - scanAnimationTimer.start() - } - } - } - } - Component { id: voiceAgent MouseArea { height: 120 width: ListView.view.width Column { - anchors.left: parent.left - anchors.leftMargin: 5 - id: agentId - Label { - id: agentIdText - text: id - color: '#66FF99' - font.pixelSize: 38 - font.bold: active === "active" - } - } - Column { - anchors.left: agentId.right anchors.leftMargin: 100 id: agentName Label { @@ -112,10 +62,11 @@ SettingPage { maxpwidth: 744 maxpheight: 744 xpos: (parent.width - maxpwidth)/2 - ypos: (parent.height - maxpheight) + ypos: (parent.height - maxpheight)/2 thisAgentName: name thisAgentId: id thisAgentWuW: wuw + thisAgentVendor: vendor thisAgentAuthState: authstate thisAgentConnState: connstate thisAgentDialogState: dialogstate diff --git a/app/voice/images/HMI_Settings_VoiceIcon.svg b/app/voice/images/HMI_Settings_VoiceIcon.svg index edc87a7..7e6f8f6 100644 --- a/app/voice/images/HMI_Settings_VoiceIcon.svg +++ b/app/voice/images/HMI_Settings_VoiceIcon.svg @@ -1,54 +1,29 @@ - + image/svg+xmlCommunication LinkTranscommunication link.ConnectorExit to or entry from another part of chart.Magnetic TapeMagnetic tape storage \ No newline at end of file + id="switch5194" + transform="matrix(1.3307804,0,0,1.3314313,-62.924861,-27.94579)"> \ No newline at end of file diff --git a/app/wired/ConfigDialog.qml b/app/wired/ConfigDialog.qml index 4d8632f..0cb77e1 100644 --- a/app/wired/ConfigDialog.qml +++ b/app/wired/ConfigDialog.qml @@ -69,7 +69,8 @@ Dialog { background: Rectangle { border.color : '#00ADDC' - color: 'transparent' + color: 'black' + opacity: 0.5 } function setDefaultValues() { @@ -141,7 +142,7 @@ Dialog { Label { id: nwLabel font.pixelSize: 28 - color: '#080C0F' + color: 'white' text: "Network:" Layout.preferredWidth: 200 } @@ -161,7 +162,7 @@ Dialog { Label { id: ipvlabel font.pixelSize: 28 - color: '#080C0F' + color: 'white' text: "IP version:" Layout.preferredWidth: 200 } @@ -206,7 +207,7 @@ Dialog { Label { id: modelabel font.pixelSize: 28 - color: '#080C0F' + color: 'white' text: "Addressing:" Layout.preferredWidth: 200 } @@ -241,15 +242,20 @@ Dialog { Label { id: address font.pixelSize: 28 - color: '#080C0F' - text: "address:" + color: 'white' + text: "Address:" } TextArea { id: m_customAddress font.pixelSize: 28 + color: 'black' Layout.fillWidth: true Layout.alignment: Qt.AlignLeft placeholderText: activeAddress + background: Rectangle { + color: 'white' + border.color: '#848286' + } } } ColumnLayout { @@ -257,15 +263,20 @@ Dialog { Label { id: netmask font.pixelSize: 28 - color: '#080C0F' - text: "netmask:" + color: 'white' + text: "Netmask:" } TextArea { id: m_customNetmask font.pixelSize: 28 + color: 'black' Layout.fillWidth: true Layout.alignment: Qt.AlignLeft placeholderText: activeNetmask + background: Rectangle { + color: 'white' + border.color: '#848286' + } } } ColumnLayout { @@ -273,15 +284,20 @@ Dialog { Label { id: gateway font.pixelSize: 28 - color: '#080C0F' - text: "gateway:" + color: 'white' + text: "Gateway:" } TextArea { id: m_customGateway font.pixelSize: 28 + color: 'black' Layout.fillWidth: true Layout.alignment: Qt.AlignLeft placeholderText: activeGateway + background: Rectangle { + color: 'white' + border.color: '#848286' + } } } } @@ -294,7 +310,7 @@ Dialog { Label { id: dnslabel font.pixelSize: 28 - color: '#080C0F' + color: 'white' text: "DNS address:" Layout.preferredWidth: 200 } @@ -329,15 +345,20 @@ Dialog { Label { id: dnsList font.pixelSize: 28 - color: '#080C0F' + color: 'white' text: "DNS list:" } TextArea { id: m_customNSlist font.pixelSize: 28 + color: 'black' Layout.fillWidth: true Layout.alignment: Qt.AlignLeft placeholderText: activeNSList + background: Rectangle { + color: 'white' + border.color: '#848286' + } } } } diff --git a/app/wired/Wired.qml b/app/wired/Wired.qml index 52d24cd..0a3e312 100644 --- a/app/wired/Wired.qml +++ b/app/wired/Wired.qml @@ -41,12 +41,10 @@ SettingPage { text: service color: '#66FF99' font.pixelSize: 38 - font.bold: sstate === "ready" - || sstate === "online" + font.bold: sstate === "ready" || sstate === "online" } Label { - visible: sstate === "ready" - || sstate === "online" + visible: sstate === "ready" || sstate === "online" text: "connected, " + address font.pixelSize: 18 color: "white" @@ -56,8 +54,7 @@ SettingPage { anchors.left: networkName.right anchors.leftMargin: 50 Button { - visible: sstate === "ready" - || sstate === "online" + visible: sstate === "ready" || sstate === "online" font.pixelSize: 18 text: "CONFIGURE" onClicked: { @@ -76,7 +73,7 @@ SettingPage { maxpwidth: 744 maxpheight: 744 xpos: (parent.width - maxpwidth)/2 - ypos: (parent.height - maxpheight) + ypos: (parent.height - maxpheight)/2 serviceName: service activeAddress: address activeNetmask: sroute[2] diff --git a/app/wired/images/HMI_Settings_WiredIcon.svg b/app/wired/images/HMI_Settings_WiredIcon.svg index 4314729..57ef45b 100644 --- a/app/wired/images/HMI_Settings_WiredIcon.svg +++ b/app/wired/images/HMI_Settings_WiredIcon.svg @@ -1,8 +1,8 @@ - + image/svg+xml \ No newline at end of file + id="g5196"> \ No newline at end of file -- cgit 1.2.3-korg