From bcccacd1d6a37468926c26b9b84983cfbd53043b Mon Sep 17 00:00:00 2001 From: Michael Zanetti Date: Mon, 11 Jun 2018 17:59:54 +0200 Subject: [PATCH] improve garagegate visuals --- libmea-core/devicemanager.cpp | 2 +- mea/ui/DevicesPage.qml | 2 + mea/ui/components/ShutterControls.qml | 2 + .../devicelistpages/GenericDeviceListPage.qml | 11 +-- mea/ui/devicepages/GarageGateDevicePage.qml | 89 ++++++++++--------- 5 files changed, 55 insertions(+), 51 deletions(-) diff --git a/libmea-core/devicemanager.cpp b/libmea-core/devicemanager.cpp index 8e711e23..cf0bfef7 100644 --- a/libmea-core/devicemanager.cpp +++ b/libmea-core/devicemanager.cpp @@ -210,7 +210,7 @@ void DeviceManager::getConfiguredDevicesResponse(const QVariantMap ¶ms) foreach (QVariant deviceVariant, deviceList) { Device *device = new Device(); if (!JsonTypes::unpackDevice(deviceVariant.toMap(), device)) { - qWarning() << "Error parsing device json"; + qWarning() << "Error parsing device json" << deviceVariant; continue; } diff --git a/mea/ui/DevicesPage.qml b/mea/ui/DevicesPage.qml index 61a3d715..d5122487 100644 --- a/mea/ui/DevicesPage.qml +++ b/mea/ui/DevicesPage.qml @@ -211,6 +211,8 @@ Item { } } return count === 0 ? qsTr("All closed") : qsTr("%1 open").arg(count) + case "shutter": + return qsTr("%1 installed").arg(devicesProxy.count) } console.warn("Unhandled interface", model.name) } diff --git a/mea/ui/components/ShutterControls.qml b/mea/ui/components/ShutterControls.qml index bd98f39d..e818f4a2 100644 --- a/mea/ui/components/ShutterControls.qml +++ b/mea/ui/components/ShutterControls.qml @@ -7,6 +7,8 @@ import Mea 1.0 RowLayout { id: root spacing: (parent.width - app.iconSize*2*children.length) / 4 +// implicitWidth: app.iconSize * 2 * children.length + spacing * (children.length - 1) + implicitWidth: childrenRect.width property var device: null readonly property var deviceClass: device ? Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId) : null diff --git a/mea/ui/devicelistpages/GenericDeviceListPage.qml b/mea/ui/devicelistpages/GenericDeviceListPage.qml index b5f42ef7..eb87d2e8 100644 --- a/mea/ui/devicelistpages/GenericDeviceListPage.qml +++ b/mea/ui/devicelistpages/GenericDeviceListPage.qml @@ -3,6 +3,7 @@ import QtQuick.Controls 2.1 import QtQuick.Layouts 1.1 import Mea 1.0 import "../components" +import "../delegates" Page { id: subPage @@ -62,14 +63,10 @@ Page { id: devicesProxy devices: Engine.deviceManager.devices } - delegate: ItemDelegate { + delegate: ThingDelegate { width: parent.width - Label { - anchors { fill: parent; leftMargin: app.margins; rightMargin: app.margins } - text: model.name - verticalAlignment: Text.AlignVCenter - } - + name: model.name + interfaces: Engine.deviceManager.deviceClasses.getDeviceClass(model.deviceClassId).interfaces onClicked: { enterPage(index, false) } diff --git a/mea/ui/devicepages/GarageGateDevicePage.qml b/mea/ui/devicepages/GarageGateDevicePage.qml index e4034623..5b62bd3e 100644 --- a/mea/ui/devicepages/GarageGateDevicePage.qml +++ b/mea/ui/devicepages/GarageGateDevicePage.qml @@ -21,64 +21,67 @@ DevicePageBase { ColorIcon { id: shutterImage - Layout.preferredWidth: root.landscape ? height : parent.width - Layout.preferredHeight: root.landscape ? parent.height : width - property int currentImage: 0 + Layout.preferredWidth: root.landscape ? Math.min(parent.width - shutterControlsContainer.width, parent.height) - app.margins : parent.width + Layout.preferredHeight: width + property int currentImage: root.openState.value === "closed" ? 10 : + root.openState.value === "open" && root.intermediatePositionState.value === false ? 0 : 5 name: "../images/shutter-" + currentImage + ".svg" - Component.onCompleted: update() - function update() { - switch (root.openState.value) { - case "open": - if (root.intermediatePositionState.value === true) { - shutterImage.currentImage = 5; - } else { - shutterImage.currentImage = 0; - } - break; - case "closed": - if (root.intermediatePositionState.value === true) { - shutterImage.currentImage = 5; - } else { - shutterImage.currentImage = 10; - } + Item { + id: arrows + anchors.centerIn: parent + width: app.iconSize * 2 + height: parent.height * .6 + clip: true + visible: root.openState.value === "opening" || root.openState.value === "closing" + property bool up: root.openState.value === "opening" + + // NumberAnimation doesn't reload to/from while it's running. If we switch from closing to opening or vice versa + // we need to somehow stop and start the animation + property bool animationHack: true + onAnimationHackChanged: { + if (!animationHack) hackTimer.start(); } - print("shutter is now:", shutterImage.currentImage, root.intermediatePositionState.value) - } + Timer { id: hackTimer; interval: 1; onTriggered: arrows.animationHack = true } + Connections { target: root.openState; onValueChanged: arrows.animationHack = false } - Connections { - target: root.openState - onValueChanged: shutterImage.update(); - } - Connections { - target: root.intermediatePositionState - onValueChanged: shutterImage.update(); - } + NumberAnimation { + target: arrowColumn + property: "y" + duration: 500 + easing.type: Easing.Linear + from: arrows.up ? app.iconSize : -app.iconSize + to: arrows.up ? -app.iconSize : app.iconSize + loops: Animation.Infinite + running: arrows.animationHack && (root.openState.value === "opening" || root.openState.value === "closing") + } - Timer { - running: root.openState.value === "closing" || root.openState.value === "opening" - interval: 500 - repeat: true - onTriggered: { - var value = shutterImage.currentImage; - if (root.openState.value === "opening") { - value--; - } else if (root.openState.value === "closing") { - value++; + Column { + id: arrowColumn + width: parent.width + + Repeater { + model: arrows.height / app.iconSize + 1 + ColorIcon { + name: arrows.up ? "../images/up.svg" : "../images/down.svg" + width: parent.width + height: width + color: app.guhAccent + } } - if (value > 10) value = 0; - if (value < 0) value = 10; - shutterImage.currentImage = value; } } } Item { - Layout.preferredWidth: root.landscape ? parent.width / 2 : parent.width + id: shutterControlsContainer + Layout.preferredWidth: root.landscape ? Math.max(parent.width / 2, shutterControls.implicitWidth) : parent.width + Layout.minimumWidth: shutterControls.implicitWidth Layout.fillHeight: true Layout.minimumHeight: app.iconSize * 2.5 ShutterControls { + id: shutterControls device: root.device anchors.centerIn: parent