- added color indicator to main overview page

- redesigned chips and made them consistent

OmobiDisplayApp/OmobiDisplayApp.pro

@@ -39,5 +39,9 @@ include($$PWD/QBluetoothLeUart/QBluetoothLeUart.pri)
 DISTFILES += \
     test.qmodel
 
-STATECHARTS += \
+STATECHARTS +=
-    testChart.scxml
+
+contains(ANDROID_TARGET_ARCH,armeabi-v7a) {
+    ANDROID_ABIS = \
+        armeabi-v7a
+}

OmobiDisplayApp/omobidisplaybackend.cpp

@@ -147,7 +147,7 @@ void OmobiDisplayBackend::handleBluetoothDataReceived(QString s){
         if(index < 0)
             return;
 
-        if(this->textSetsBuffer.length() <= index)
+        while(this->textSetsBuffer.length() <= index)
             this->textSetsBuffer.append(QMap<int, QVariant>());
 
         int parameter = data["parameter"].toInt();

OmobiDisplayApp/ressources/qml/Chip.qml

@@ -0,0 +1,78 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtGraphicalEffects 1.12
+
+Item {
+    id: control
+
+    property bool raised: false
+    property alias mouseArea: mouseArea
+    property string text: ""
+    property string color: "#fcba03"
+    property bool isDarkColor: control.checkIsDarkColor(color)
+    property double glowRadius: 0.001
+    property double glowSpread: 0.2
+    property bool glowVisible: true
+    property double glowScale: 0.9
+    property double glowOpacity: Math.pow( control.opacity, 100 )
+
+    signal clicked
+
+    function checkIsDarkColor(color) {
+        var c = color.substring(1);      // strip #
+        var rgb = parseInt(c, 16);   // convert rrggbb to decimal
+        var r = (rgb >> 16) & 0xff;  // extract red
+        var g = (rgb >>  8) & 0xff;  // extract green
+        var b = (rgb >>  0) & 0xff;  // extract blue
+
+        var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
+
+        return luma < 150
+    }
+
+    RectangularGlow {
+        id: effect
+        glowRadius: control.glowRadius
+        spread: control.glowSpread
+        color: "black"
+
+        visible: control.glowVisible
+
+        cornerRadius: background.radius
+        anchors.fill: background
+        scale: control.glowScale
+        opacity: control.glowOpacity
+    }
+
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        color: control.color
+        radius: height * 0.5
+
+        Behavior on color {
+            ColorAnimation {}
+        }
+    }
+
+    Text {
+        id: contentText
+        anchors.fill: parent
+        anchors.margins: parent.height * 0.25
+
+        font.pixelSize: height
+        fontSizeMode: Text.Fit
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+
+        color: control.isDarkColor ? "white":"black"
+        text: control.text
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        enabled: control.enabled
+        onClicked: control.clicked()
+    }
+}

OmobiDisplayApp/ressources/qml/ColorPicker.qml

@@ -10,8 +10,6 @@ Rectangle {
     property string currentColor: rgbToHex(redSlider.value, greenSlider.value, blueSlider.value)
     property bool isDarkColor: control.checkIsDarkColor(value)
 
-    implicitHeight: width
-
     onValueChanged: {
         var rgb = hexToRgb(value)
 
@@ -38,18 +36,20 @@ Rectangle {
     }
 
     function checkIsDarkColor(color) {
-        var temp = Qt.darker(color, 1) //Force conversion to color QML type object
+        var rgb = hexToRgb(color)
-        var a = 1 - ( 0.299 * temp.r + 0.587 * temp.g + 0.114 * temp.b);
+        var luma = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b; // per ITU-R BT.709
-        return temp.a > 0 && a >= 0.3
+
+        return luma < 50
     }
 
     ColumnLayout {
         anchors.fill: parent
 
-        Rectangle {
+        Pane {
             Layout.fillWidth: true
             Layout.preferredHeight: parent.height * 0.5
-            color: control.currentColor
+            Material.background: control.currentColor
+            Material.elevation: 5
         }
 
         Slider {

OmobiDisplayApp/ressources/qml/ColorPickerDelegate.qml

@@ -12,7 +12,7 @@ ItemDelegate {
         textEditDialog.open()
     }
 
-    Rectangle {
+    Chip {
         anchors {
             right: nextPageIconText.left
             verticalCenter: parent.verticalCenter
@@ -21,27 +21,10 @@ ItemDelegate {
 
         width: parent.width * 0.15
         height: parent.height * 0.6
-        radius: height *  0.1
 
         color: control.value === "" ? "transparent":control.value
 
-        border.width: 2
+        text: value === "" ? "Not set": value
-        border.color: control.value === "" ? "lightgrey":control.value
-
-
-        Text {
-            anchors.fill: parent
-            anchors.margins: parent.height * 0.1
-
-            font.pixelSize: height * 0.5
-            fontSizeMode: Text.Fit
-            verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignHCenter
-
-            color: colorPicker.isDarkColor && control.value !== "" ? "white":"black"
-
-            text: value === "" ? "Not set": value
-        }
     }
 
     Text {
@@ -68,6 +51,10 @@ ItemDelegate {
         y: (parent.height - height) / 2
 
         width: parent.width * 0.9
+        height: Math.min(parent.height, contentHeight)
+
+        contentWidth: parent.width * 0.9 - leftInset - rightInset
+        contentHeight: contentWidth
 
         Material.theme: control.Material.theme
         Material.accent: control.Material.accent

OmobiDisplayApp/ressources/qml/ConnectPage.qml

@@ -42,6 +42,7 @@ Page {
             Layout.alignment: Layout.Center
 
             clip: true
+            boundsBehavior: Flickable.OvershootBounds
 
             model: backend.bleController.availableDevicesModel
 

OmobiDisplayApp/ressources/qml/DisplayTextDelegate.qml

@@ -42,77 +42,41 @@ ItemDelegate {
             }
         }
 
-        Rectangle {
+        Chip {
             Layout.fillHeight: true
             Layout.preferredWidth: model.scroll ? parent.width * 0.15 : 0
 
             visible: model.scroll
 
-            radius: height * 0.1
+            color: Material.accent
 
-            color: model.active ? Material.accent:"lightgrey"
+            opacity: model.active ? 1:0.5
 
             Behavior on color {
                 ColorAnimation {}
             }
 
-            Text {
+            text: model.scroll ? qsTr("scrolling"):qsTr("false")
-                anchors.centerIn: parent
-
-                width: parent.width * 0.9
-                height: parent.height * 0.8
-
-                font.pixelSize: height
-                fontSizeMode: Text.Fit
-                minimumPixelSize: 1
-                verticalAlignment: Text.AlignVCenter
-                horizontalAlignment: Text.AlignHCenter
-
-                color: "white"
-
-                text: model.scroll ? qsTr("scrolling"):qsTr("false")
-            }
         }
 
-        Rectangle {
+        Chip {
+            Layout.fillHeight: true
+            Layout.preferredWidth: parent.width * 0.1
+
+            opacity: model.active ? 1:0.5
+
+            color: model.color
+        }
+
+        Chip {
             Layout.preferredHeight: parent.height
             Layout.preferredWidth: parent.width * 0.15
 
-            radius: height * 0.1
+            color: model.active ? "#4CAF50" : "#F44336"
 
-            color: model.active ? "green" : "red"
+            text: model.active ? qsTr("  active  "):qsTr("inactive")
 
-            Behavior on color {
+            onClicked: model.active = !model.active
-                ColorAnimation {}
-            }
-
-            Text {
-                id: activeText
-                anchors.centerIn: parent
-
-                width: parent.width * 0.8
-                height: parent.height * 0.8
-
-                font.pixelSize: height
-                fontSizeMode: Text.Fit
-                minimumPixelSize: 1
-                verticalAlignment: Text.AlignVCenter
-                horizontalAlignment: Text.AlignHCenter
-
-                color: "white"
-                text: model.active ? qsTr("  active  "):qsTr("inactive")
-            }
-
-            Button {
-                anchors.centerIn: parent
-                width: parent.width
-                height: parent.height * 1.4
-                flat: true
-
-                onClicked: {
-                    model.active = !model.active
-                }
-            }
         }
     }
 }

OmobiDisplayApp/ressources/qml/DisplayTextModelListView.qml

@@ -8,6 +8,10 @@ import de.itsblue.omobidisplayapp 1.0
 ListView {
     id: control
 
+    spacing: 5
+
+    boundsBehavior: Flickable.OvershootBounds
+
     model: backend.displayTextModel
 
     add: Transition {
@@ -20,8 +24,6 @@ ListView {
         NumberAnimation { property: "scale"; from: 1; to: 0.9; duration: 200 }
     }
 
-    spacing: 5
-
     delegate: DisplayTextDelegate {
         id: delegate
 

OmobiDisplayApp/ressources/qml/qml.qrc

@@ -4,7 +4,6 @@
         <file>ConnectPage.qml</file>
         <file>ConnectedPage.qml</file>
         <file>DisplayTextDelegate.qml</file>
-        <file>CollapsableItemDelegate.qml</file>
         <file>DisplayTextModelListView.qml</file>
         <file>TextEditDialog.qml</file>
         <file>TextInputDelegate.qml</file>
@@ -13,5 +12,6 @@
         <file>ComboBoxDelegate.qml</file>
         <file>ColorPickerDelegate.qml</file>
         <file>ColorPicker.qml</file>
+        <file>Chip.qml</file>
     </qresource>
 </RCC>

OmobiDisplayApp/test.qmodel

@@ -1,55 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<qmt>
- <project>
-  <uid>{53c9b534-ff35-4fc2-bbb2-1ecf37f46c4a}</uid>
-  <root-package>
-   <instance>
-    <MPackage>
-     <base-MObject>
-      <MObject>
-       <base-MElement>
-        <MElement>
-         <uid>{3502968e-5cd9-4ab0-b3b9-52d8cd1ec0d3}</uid>
-        </MElement>
-       </base-MElement>
-       <name>test</name>
-       <children>
-        <handles>
-         <handles>
-          <qlist>
-           <item>
-            <handle>
-             <uid>{ede58291-b8a9-4a30-9631-1771046708c7}</uid>
-             <target>
-              <instance type="MCanvasDiagram">
-               <MCanvasDiagram>
-                <base-MDiagram>
-                 <MDiagram>
-                  <base-MObject>
-                   <MObject>
-                    <base-MElement>
-                     <MElement>
-                      <uid>{ede58291-b8a9-4a30-9631-1771046708c7}</uid>
-                     </MElement>
-                    </base-MElement>
-                    <name>test</name>
-                   </MObject>
-                  </base-MObject>
-                 </MDiagram>
-                </base-MDiagram>
-               </MCanvasDiagram>
-              </instance>
-             </target>
-            </handle>
-           </item>
-          </qlist>
-         </handles>
-        </handles>
-       </children>
-      </MObject>
-     </base-MObject>
-    </MPackage>
-   </instance>
-  </root-package>
- </project>
-</qmt>