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

ui/StatusQ/.gitignore

@@ -13,3 +13,4 @@ Makefile
 *_qml.cpp
 *_qmlcache.qrc
 sandbox/qmlcache_loader.cpp
+doc/html

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}

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}

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 {

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
             }
         }
     }

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/
+            source: ""
-                     nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
+            isIdenticon: false
-            isIdenticon: true
+            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}]
         }
     }
 

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 {

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
     }
 }

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
+                }
+            }
+        }
+    }
+}

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

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
+}

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

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

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

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

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>