Drop SegmentedImages and rewrite ColorIcon

nymea-app/resources.qrc

@@ -43,10 +43,6 @@
         <file>ui/components/SwipeDelegateGroup.qml</file>
         <file>ui/components/PasswordTextField.qml</file>
         <file>ui/components/BrightnessSlider.qml</file>
-        <file>ui/components/SegmentedImage.qml</file>
-        <file>ui/components/SegmentRenderer.qml</file>
-        <file>ui/components/SegmentBoundingBoxes.qml</file>
-        <file>ui/components/FingerprintVisual.qml</file>
         <file>ui/components/ListSectionHeader.qml</file>
         <file>ui/components/ListFilterInput.qml</file>
         <file>ui/components/Led.qml</file>

nymea-app/ui/components/ColorIcon.qml

@@ -1,126 +1,67 @@
-/*
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
- * Copyright (C) 2013 Canonical, Ltd.
+*
- *
+* Copyright 2013 - 2020, nymea GmbH
- * This program is free software; you can redistribute it and/or modify
+* Contact: contact@nymea.io
- * it under the terms of the GNU General Public License as published by
+*
- * the Free Software Foundation; version 3.
+* This file is part of nymea.
- *
+* This project including source code and documentation is protected by
- * This program is distributed in the hope that it will be useful,
+* copyright law, and remains the property of nymea GmbH. All rights, including
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
+* reproduction, publication, editing and translation, are reserved. The use of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+* this project is subject to the terms of a license agreement to be concluded
- * GNU General Public License for more details.
+* with nymea GmbH in accordance with the terms of use of nymea GmbH, available
- *
+* under https://nymea.io/license
- * You should have received a copy of the GNU General Public License
+*
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+* GNU General Public License Usage
- */
+* Alternatively, this project may be redistributed and/or modified under the
+* terms of the GNU General Public License as published by the Free Software
+* Foundation, GNU version 3. This project is distributed in the hope that it
+* will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty
+* of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
+* Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along with
+* this project. If not, see <https://www.gnu.org/licenses/>.
+*
+* For any further details and any questions please contact us under
+* contact@nymea.io or see our FAQ/Licensing Information on
+* https://nymea.io/license/faq
+*
+* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
 
 import QtQuick 2.4
+import QtGraphicalEffects 1.0
 
-/*!
-    \qmltype Icon
-    \inqmlmodule Ubuntu.Components 0.1
-    \ingroup ubuntu
-    \brief The Icon component displays an icon from the icon theme.
-
-    The icon theme contains a set of standard icons referred to by their name.
-    Using icons whenever possible enhances consistency accross applications.
-    Each icon has a name and can have different visual representations depending
-    on the size requested.
-
-    Icons can also be colorized. Setting the \l color property will make all pixels
-    with the \l keyColor (by default #808080) colored.
-
-    Example:
-    \qml
-    Icon {
-        width: 64
-        height: 64
-        name: "search"
-    }
-    \endqml
-
-    Example of colorization:
-    \qml
-    Icon {
-        width: 64
-        height: 64
-        name: "search"
-        color: UbuntuColors.warmGrey
-    }
-    \endqml
-
-    Icon themes are created following the
-    \l{http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html}{Freedesktop Icon Theme Specification}.
-*/
 Item {
     id: icon
 
-    /*!
-       The name of the icon to display.
-       \qmlproperty string name
-    */
     property string name
-
+    property alias color: colorizedImage.color
-    /*!
-       The color that all pixels that originally are of color \l keyColor should take.
-       \qmlproperty color color
-    */
-    property alias color: colorizedImage.keyColorOut
-
-    /*!
-       The color of the pixels that should be colorized.
-       By default it is set to #808080.
-       \qmlproperty color keyColor
-    */
-    property alias keyColor: colorizedImage.keyColorIn
-
     property int margins: 0
 
+    //TODO: Should be in the style
+    readonly property color keyColor: "#808080"
+
     property alias status: image.status
 
     Image {
         id: image
-
-        /* Necessary so that icons are not loaded before a size is set. */
-        property bool ready: false
-        Component.onCompleted: ready = true
-
         anchors.fill: parent
         anchors.margins: parent ? parent.margins : 0
-        source: ready && width > 0 && height > 0 && icon.name ? icon.name : ""
+        source: width > 0 && height > 0 && icon.name ? icon.name : ""
         sourceSize {
             width: width
             height: height
         }
         cache: true
-        visible: !colorizedImage.active
     }
 
-    ShaderEffect {
+    ColorOverlay {
         id: colorizedImage
 
         anchors.fill: parent
         anchors.margins: parent ? parent.margins : 0
-        visible: active && image.status == Image.Ready
+        visible: image.status == Image.Ready
-
+        source: image
-        // Whether or not a color has been set.
-        property bool active: keyColorOut != Qt.rgba(0.0, 0.0, 0.0, 0.0)
-
-        property Image source: image
-        property color keyColorOut: Qt.rgba(0.0, 0.0, 0.0, 0.0)
-        property color keyColorIn: "#808080"
-        property real threshold: 0.1
-
-        fragmentShader: "
-            varying highp vec2 qt_TexCoord0;
-            uniform sampler2D source;
-            uniform highp vec4 keyColorOut;
-            uniform highp vec4 keyColorIn;
-            uniform lowp float threshold;
-            uniform lowp float qt_Opacity;
-            void main() {
-                lowp vec4 sourceColor = texture2D(source, qt_TexCoord0);
-                gl_FragColor = mix(vec4(keyColorOut.rgb, 1.0) * sourceColor.a, sourceColor, step(threshold, distance(sourceColor.rgb / sourceColor.a, keyColorIn.rgb))) * qt_Opacity;
-            }"
     }
 }

nymea-app/ui/devicepages/FingerprintReaderDevicePage.qml

@@ -164,10 +164,11 @@ DevicePageBase {
                             Layout.preferredWidth: 100
                             Layout.preferredHeight: width
                             Layout.alignment: Qt.AlignHCenter
-                            FingerprintVisual {
+                            ColorIcon {
-                                id: fingerprintVisual
+                                name: "../images/fingerprint.svg"
                                 anchors.centerIn: parent
-                                scale: parent.height / implicitHeight
+                                height: Math.min(parent.width, parent.height)
+                                width: height
                             }
                         }
 
@@ -199,11 +200,10 @@ DevicePageBase {
             Connections {
                 target: engine.deviceManager
                 onExecuteActionReply: {
-                    addUserPage.error = params["deviceError"] !== "DeviceErrorNoError"
+                    print("Execute action reply:", JSON.stringify(params));
-                    print("Execute action reply:", params["deviceError"]);
+                    addUserPage.error = params["params"]["deviceError"] !== "DeviceErrorNoError"
                     var masks =[]
                     masks.push({x: 0, y: 0, width: 1, height: 1});
-                    fingerprintVisual.masks = masks
                     addUserPage.done = true
                 }
             }
@@ -299,13 +299,15 @@ DevicePageBase {
                                 Layout.preferredHeight: 100
                                 Layout.alignment: Qt.AlignCenter
 
-                                FingerprintVisual {
+                                ColorIcon {
-                                    id: fingerprintVisual
+                                    name: "../images/fingerprint.svg"
-                                    scale: parent.height / implicitHeight
+                                    height: Math.min(parent.width, parent.height)
+                                    width: height
                                     anchors.centerIn: parent
-                                    fillColor: addUserPage.error ? "red" : app.accentColor
+                                    color: addUserPage.done ?
+                                               (addUserPage.error ? "red" : app.accentColor)
+                                             : keyColor
                                 }
-
                             }
                             Label {
                                 text: addUserPage.error ? qsTr("Fingerprint could not be read.\nPlease try again.") :