feat(StatusSmartIdenticon): Add support for color rings in StatusSmartIdenticon (#553)

Created new control `StatusIdenticonRing` and used in `StatusSmartIdenticon` component. Added property assignments in sandbox models to display the `StatusIdenticonRing` when needed. Added first documentation approach for `StatusIdenticonRing` and `StatusIdenticonRingSettings`. Closes #517
2022-02-17 09:20:17 +01:00 · 2022-02-17 09:20:17 +01:00 · 0df69a8f51
parent 3bc3216ba0
commit 0df69a8f51
17 changed files with 275 additions and 5 deletions
--- a/ui/StatusQ/.gitignore
+++ b/ui/StatusQ/.gitignore
@ -13,3 +13,4 @@ Makefile
 *_qml.cpp
 *_qmlcache.qrc
 sandbox/qmlcache_loader.cpp
+doc/html
--- a/ui/StatusQ/doc/src/images/status_identicon_ring.png
+++ b/ui/StatusQ/doc/src/images/status_identicon_ring.png
--- a/ui/StatusQ/doc/src/statusqcontrols.qdoc
+++ b/ui/StatusQ/doc/src/statusqcontrols.qdoc
@ -30,6 +30,7 @@
       \li \l{StatusSlider}
       \li \l{StatusSelect}
       \li \l{StatusBaseInput}
+       \li \l{StatusIdenticonRing}
       \li \l{StatusInput}
       \li \l{StatusPickerButton}
       \li \l{StatusProgressBar}
--- a/ui/StatusQ/doc/src/statusqcore.qdoc
+++ b/ui/StatusQ/doc/src/statusqcore.qdoc
@ -15,6 +15,7 @@
       \li \l{StatusIcon}
       \li \l{StatusIconBackgroundSettings}
       \li \l{StatusIconSettings}
+       \li \l{StatusIdenticonRingSettings}
       \li \l{StatusImageSettings}
       \li \l{StatusModalHeaderSettings}
       \li \l{StatusTooltipSettings}
--- a/ui/StatusQ/sandbox/controls/ListItems.qml
+++ b/ui/StatusQ/sandbox/controls/ListItems.qml
@ -357,6 +357,18 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
                      nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
        image.isIdenticon: true
        isOnline: true
+        ringSettings.ringSpecModel:
+            ListModel {
+                ListElement {colorId: 13; segmentLength: 5}
+                ListElement {colorId: 31; segmentLength: 5}
+                ListElement {colorId: 10; segmentLength: 1}
+                ListElement {colorId: 2; segmentLength: 5}
+                ListElement {colorId: 26; segmentLength: 2}
+                ListElement {colorId: 19; segmentLength: 4}
+                ListElement {colorId: 28; segmentLength: 3}
+            }
+        ringSettings.distinctiveColors: Theme.palette.identiconRingColors
+        ringSettings.totalRingUnits: 25
    }

    StatusMemberListItem {
--- a/ui/StatusQ/sandbox/demoapp/StatusAppCommunityView.qml
+++ b/ui/StatusQ/sandbox/demoapp/StatusAppCommunityView.qml
@ -266,6 +266,9 @@ StatusAppThreePanelLayout {
                image.source: model.source
                image.isIdenticon: model.isIdenticon
                isOnline: model.isOnline
+                ringSettings.ringSpecModel: model.ringSpecModel
+                ringSettings.distinctiveColors: Theme.palette.identiconRingColors
+                ringSettings.totalRingUnits: model.totalRingUnits
            }
        }
    }
--- a/ui/StatusQ/sandbox/demoapp/data/Models.qml
+++ b/ui/StatusQ/sandbox/demoapp/data/Models.qml
@ -903,6 +903,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
                            nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
            isIdenticon: true
+            totalRingUnits: 25
+            ringSpecModel: [ ListElement {colorId: 13; segmentLength: 5},
+                             ListElement {colorId: 31; segmentLength: 5},
+                             ListElement {colorId: 10; segmentLength: 1},
+                             ListElement {colorId: 2; segmentLength: 5},
+                             ListElement {colorId: 26; segmentLength: 2},
+                             ListElement {colorId: 19; segmentLength: 4},
+                             ListElement {colorId: 28; segmentLength: 3} ]
        }
        ListElement {
            nickName: "carmen.eth"
@ -912,7 +920,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            isMutualContact: false
            isOnline: false
            source: ""
-            isIdenticon: false
+            isIdenticon: false            
        }
        ListElement {
            nickName: "This girl I know from work"
@ -924,6 +932,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
                     ExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
            isIdenticon: true
+            totalRingUnits: 25
+            ringSpecModel: [ ListElement {colorId: 11; segmentLength: 1},
+                             ListElement {colorId: 23; segmentLength: 5},
+                             ListElement {colorId: 23; segmentLength: 5},
+                             ListElement {colorId: 10; segmentLength: 4},
+                             ListElement {colorId: 15; segmentLength: 3},
+                             ListElement {colorId: 26; segmentLength: 2},
+                             ListElement {colorId: 29; segmentLength: 5} ]
        }
        ListElement {
            nickName: "Mark Cuban"
@ -932,9 +948,18 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
            trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
            isMutualContact: true
            isOnline: false
-            source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
-                     nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            isIdenticon: true
+            source: ""
+            isIdenticon: false
+            totalRingUnits: 25
+            ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
+                             ListElement {colorId: 28; segmentLength: 1},
+                             ListElement {colorId: 31; segmentLength: 1},
+                             ListElement {colorId: 22; segmentLength: 4},
+                             ListElement {colorId: 28; segmentLength: 3},
+                             ListElement {colorId: 27; segmentLength: 5},
+                             ListElement {colorId: 7; segmentLength: 5},
+                             ListElement {colorId: 13; segmentLength: 1},
+                             ListElement {colorId: 25; segmentLength: 4}]
        }
    }

--- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
@ -50,6 +50,11 @@ Rectangle {
        height: 40
        isIdenticon: false
    }
+    property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
+        totalRingUnits: 1
+        initalAngleRad: 0
+        ringPxSize: 1.5
+    }

    property alias sensor: sensor
    property alias badge: statusListItemBadge
@ -123,6 +128,7 @@ Rectangle {
                    !!statusListItem.icon.name ||
                    !!statusListItem.image.source.toString()
            badge.border.color: statusListItem.color
+            ringSettings: statusListItem.ringSettings
        }

        Item {
--- a/ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml
@ -1,11 +1,13 @@
 import QtQuick 2.13
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1

 Loader {
    id: statusSmartIdenticon

    property string name: ""
+    property int dZ: 100

    // Badge color properties must be set if badgeItem.visible = true
    property alias badge: statusBadge
@ -20,6 +22,12 @@ Loader {
        height: 40
    }

+    property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
+        totalRingUnits: 1
+        initalAngleRad: 0
+        ringPxSize: 1.5
+    }
+
    sourceComponent: statusSmartIdenticon.icon.isLetterIdenticon ? letterIdenticon :
                     !!statusSmartIdenticon.image.source.toString() ? roundedImage :
                     !!statusSmartIdenticon.icon.name.toString() ? roundedIcon : letterIdenticon
@ -79,6 +87,13 @@ Loader {
        }
    }

+    // Next components are painted above main sourceComponent
+    StatusIdenticonRing {
+        settings: statusSmartIdenticon.ringSettings
+        anchors.fill: parent
+        z: statusSmartIdenticon.dZ/2
+    }
+
    // State component
    StatusBadge {
        id: statusBadge
@ -88,6 +103,6 @@ Loader {
        border.width: 3
        implicitHeight: 15
        implicitWidth: 15
-        z: 100
+        z: statusSmartIdenticon.dZ
    }
 }
--- a/ui/StatusQ/src/StatusQ/Controls/StatusIdenticonRing.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusIdenticonRing.qml
@ -0,0 +1,108 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.0
+
+import StatusQ.Core 0.1
+/*!
+   \qmltype StatusIdenticonRing
+   \inherits Item
+   \inqmlmodule StatusQ.Controls
+   \since StatusQ.Controls 0.1
+   \brief It provides lines wrapped into a ring around another component like avatars.
+
+   The \c StatusIdenticonRing item displays lines wrapped into a ring. The line is rendered clockwise.
+
+   N segments and M distinctive colors compose identicon lines.
+
+   Example of how the component looks like:
+   \image status_identicon_ring.png
+
+   Example of how to use it:
+
+   \qml
+        StatusIdenticonRing {
+            anchors.fill: parent
+            settings: StatusIdenticonRingSettings {
+                totalRingUnits: 25
+                initalAngleRad: 0
+                ringPxSize: 1.5
+                ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
+                                 ListElement {colorId: 28; segmentLength: 1},
+                                 ListElement {colorId: 31; segmentLength: 1},
+                                 ListElement {colorId: 22; segmentLength: 4},
+                                 ListElement {colorId: 28; segmentLength: 3},
+                                 ListElement {colorId: 27; segmentLength: 5},
+                                 ListElement {colorId: 7; segmentLength: 5},
+                                 ListElement {colorId: 13; segmentLength: 1},
+                                 ListElement {colorId: 25; segmentLength: 4}]
+                distinctiveColors: ["#000000", "#726F6F", "#C4C4C4",
+                                    "#E7E7E7", "#FFFFFF", "#00FF00",
+                                    "#009800", "#B8FFBB", "#FFC413",
+                                    "#9F5947", "#FFFF00", "#A8AC00",
+                                    "#FFFFB0", "#FF5733", "#FF0000",
+                                    "#9A0000", "#FF9D9D", "#FF0099",
+                                    "#C80078", "#FF00FF", "#900090",
+                                    "#FFB0FF", "#9E00FF", "#0000FF",
+                                    "#000086", "#9B81FF", "#3FAEF9",
+                                    "#9A6600", "#00FFFF", "#008694",
+                                    "#C2FFFF", "#00F0B6"]
+            }
+        }
+   \endqml
+
+   For a list of components available see StatusQ.
+*/
+Item {
+    id: identiconRing
+
+    /*!
+       \qmlproperty StatusIdenticonRingSettings StatusIdenticonRing::settings
+       This property holds a set of settings for building the ring.
+    */
+    property StatusIdenticonRingSettings settings: StatusIdenticonRingSettings {
+        totalRingUnits: 1
+        initalAngleRad: 0
+        ringPxSize: 1.5
+    }
+
+    /*!
+       \qmlproperty real StatusIdenticonRing::segmentRadLen
+       This property holds the total ring line length in radians. It depends on totalRingUnits value of settings object.
+    */
+    readonly property real segmentRadLen: 2 * Math.PI / settings.totalRingUnits
+
+    visible: settings.ringSpecModel !== undefined
+
+    Canvas {
+        function printArcSegment(context, xPos, yPos, radius, color, startAngle, arcAngleLen, lineWidth) {
+            context.beginPath()
+            context.arc(xPos, yPos, radius, startAngle, startAngle + arcAngleLen, false/*anticlockwise*/)
+            context.strokeStyle = color
+            context.lineWidth = lineWidth
+            context.stroke()
+        }
+
+        anchors.fill: parent
+        onPaint: {
+            const context = getContext("2d")
+            const radius = (height  - settings.ringPxSize) / 2
+            const xPos = width / 2
+            const yPos = height / 2
+            let arcPos = settings.initalAngleRad
+            context.reset()
+            if(settings.ringSpecModel) {
+                for (let i=0; i<settings.ringSpecModel.count; i++) {
+                    const segment = settings.ringSpecModel.get(i)
+                    printArcSegment(context,
+                                    xPos,
+                                    yPos,
+                                    radius,
+                                    settings.distinctiveColors[segment.colorId],
+                                    arcPos,
+                                    segment.segmentLength * identiconRing.segmentRadLen,
+                                    settings.ringPxSize)
+                    arcPos += segment.segmentLength * identiconRing.segmentRadLen
+                }
+            }
+        }
+    }
+}
--- a/ui/StatusQ/src/StatusQ/Controls/qmldir
+++ b/ui/StatusQ/src/StatusQ/Controls/qmldir
@ -8,6 +8,7 @@ StatusChatInfoButton 0.1 StatusChatInfoButton.qml
 StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
 StatusColorSelector 0.1 StatusColorSelector.qml
 StatusIconTabButton 0.1 StatusIconTabButton.qml
+StatusIdenticonRing 0.1 StatusIdenticonRing.qml
 StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusTabBarIconButton 0.1 StatusTabBarIconButton.qml
 StatusToolTip 0.1 StatusToolTip.qml
--- a/ui/StatusQ/src/StatusQ/Core/StatusIdenticonRingSettings.qml
+++ b/ui/StatusQ/src/StatusQ/Core/StatusIdenticonRingSettings.qml
@ -0,0 +1,78 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+
+/*!
+   \qmltype StatusIdenticonRingSettings
+   \inherits QtObject
+   \inqmlmodule StatusQ.Core
+   \since StatusQ.Core 0.1
+   \brief It describes identicon ring settings.
+
+   The \c StatusIdenticonRingSettings object is not a graphical component just an object to encapsulate identicon ring settings.
+
+   Example of how to use it:
+
+   \qml
+        StatusIdenticonRingSettings {
+            totalRingUnits: 25
+            initalAngleRad: 0
+            ringPxSize: 1.5
+            ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
+                             ListElement {colorId: 28; segmentLength: 1},
+                             ListElement {colorId: 31; segmentLength: 1},
+                             ListElement {colorId: 22; segmentLength: 4},
+                             ListElement {colorId: 28; segmentLength: 3},
+                             ListElement {colorId: 27; segmentLength: 5},
+                             ListElement {colorId: 7; segmentLength: 5},
+                             ListElement {colorId: 13; segmentLength: 1},
+                             ListElement {colorId: 25; segmentLength: 4}]
+            distinctiveColors: ["#000000", "#726F6F", "#C4C4C4",
+                                "#E7E7E7", "#FFFFFF", "#00FF00",
+                                "#009800", "#B8FFBB", "#FFC413",
+                                "#9F5947", "#FFFF00", "#A8AC00",
+                                "#FFFFB0", "#FF5733", "#FF0000",
+                                "#9A0000", "#FF9D9D", "#FF0099",
+                                "#C80078", "#FF00FF", "#900090",
+                                "#FFB0FF", "#9E00FF", "#0000FF",
+                                "#000086", "#9B81FF", "#3FAEF9",
+                                "#9A6600", "#00FFFF", "#008694",
+                                "#C2FFFF", "#00F0B6"]
+        }
+   \endqml
+
+   For a list of components available see StatusQ.
+*/
+QtObject {
+    id: statusIdenticonRingSettings
+
+    /*!
+       \qmlproperty ListModel StatusIdenticonRingSettings::ringSpecModel
+       This is a REQUIRED property that contains a ListModel object that describes each ring segment color and length.
+       Example of use: [ListElement {colorId: 0; segmentLength: 1}, ...]
+    */
+    property ListModel ringSpecModel
+
+    /*!
+       \qmlproperty var StatusIdenticonRingSettings::distinctiveColors
+       This is a REQUIRED property that holds an string array of disctinctive segment colors.
+    */
+    property var distinctiveColors
+
+    /*!
+       \qmlproperty real StatusIdenticonRingSettings::totalRingUnits
+       This property provides the total number of units the identicon ring is composed by.
+    */
+    property real totalRingUnits
+
+    /*!
+       \qmlproperty real StatusIdenticonRingSettings::initalAngleRad
+       This property provides the initial angle, in radians, the identicon ring will start rendering the line.
+    */
+    property real initalAngleRad
+
+    /*!
+       \qmlproperty real StatusIdenticonRingSettings::ringPxSize
+       This property provides the pixels size of the ring line.
+    */
+    property real ringPxSize
+}
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
@ -158,6 +158,13 @@ ThemePalette {
        getColor('brown3')
    ]

+    identiconRingColors: ["#000000", "#726F6F", "#C4C4C4", "#E7E7E7", "#FFFFFF", "#00FF00",
+                          "#009800", "#B8FFBB", "#FFC413", "#9F5947", "#FFFF00", "#A8AC00",
+                          "#FFFFB0", "#FF5733", "#FF0000", "#9A0000", "#FF9D9D", "#FF0099",
+                          "#C80078", "#FF00FF", "#900090", "#FFB0FF", "#9E00FF", "#0000FF",
+                          "#000086", "#9B81FF", "#3FAEF9", "#9A6600", "#00FFFF", "#008694",
+                          "#C2FFFF", "#00F0B6"]
+
    property QtObject statusAppLayout: QtObject {
        property color backgroundColor: baseColor3
        property color rightPanelBackgroundColor: baseColor3
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
@ -156,6 +156,13 @@ ThemePalette {
        getColor('brown')
    ]

+    identiconRingColors: ["#000000", "#726F6F", "#C4C4C4", "#E7E7E7", "#FFFFFF", "#00FF00",
+                          "#009800", "#B8FFBB", "#FFC413", "#9F5947", "#FFFF00", "#A8AC00",
+                          "#FFFFB0", "#FF5733", "#FF0000", "#9A0000", "#FF9D9D", "#FF0099",
+                          "#C80078", "#FF00FF", "#900090", "#FFB0FF", "#9E00FF", "#0000FF",
+                          "#000086", "#9B81FF", "#3FAEF9", "#9A6600", "#00FFFF", "#008694",
+                          "#C2FFFF", "#00F0B6"]
+
    property QtObject statusAppLayout: QtObject {
        property color backgroundColor: white
        property color rightPanelBackgroundColor: white
--- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
@ -92,6 +92,8 @@ QtObject {

    property var accountColors: []

+    property var identiconRingColors: []
+
    property QtObject statusAppLayout: QtObject {
        property color backgroundColor
        property color rightPanelBackgroundColor
--- a/ui/StatusQ/src/StatusQ/Core/qmldir
+++ b/ui/StatusQ/src/StatusQ/Core/qmldir
@ -4,6 +4,7 @@ StatusBaseText 0.1 StatusBaseText.qml
 StatusIcon 0.1 StatusIcon.qml
 StatusIconSettings 0.1 StatusIconSettings.qml
 StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
+StatusIdenticonRingSettings 0.1 StatusIdenticonRingSettings.qml
 StatusImageSettings 0.1 StatusImageSettings.qml
 StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
 StatusTooltipSettings 0.1 StatusTooltipSettings.qml
--- a/ui/StatusQ/statusq.qrc
+++ b/ui/StatusQ/statusq.qrc
@ -324,5 +324,7 @@
        <file>src/StatusQ/Components/StatusToastMessage.qml</file>
        <file>src/StatusQ/Components/StatusWizardStepper.qml</file>
        <file>src/StatusQ/Components/StatusContactVerificationIcons.qml</file>
+        <file>src/StatusQ/Controls/StatusIdenticonRing.qml</file>
+        <file>src/StatusQ/Core/StatusIdenticonRingSettings.qml</file>
    </qresource>
 </RCC>