Made Cluster scalable

Cluster UI was designed for fixed size (1920x720).
It is now possible to set the cluster size in your
Style file and the Cluster should adopt to it.
Only restrictions is the proportion,
it needs to match 24:9.

Task-number: QTAUTO-110
Change-Id: I4de5c48f5ea5f65398c7dacd37d75f4a1fe314a2
Reviewed-by: Dominik Holland <dominik.holland@pelagicore.com>

8 files changed, 80 insertions, 89 deletions

diff --git a/sysui/Cloud/Store/AppStoreController.qml b/sysui/Cloud/Store/AppStoreController.qml
index 107e779..20ba15f 100644
--- a/sysui/Cloud/Store/AppStoreController.qml
+++ b/sysui/Cloud/Store/AppStoreController.qml
@@ -34,7 +34,6 @@ import QtQuick.Layouts 1.0
 
 import controls 1.0
 import utils 1.0
-import service.apps 1.0
 
 import "JSONBackend.js" as JSONBackend
 import QtApplicationManager 1.0
diff --git a/sysui/Cluster/Cluster.qml b/sysui/Cluster/Cluster.qml
index cddef8b..12f79d7 100644
--- a/sysui/Cluster/Cluster.qml
+++ b/sysui/Cluster/Cluster.qml
@@ -35,11 +35,13 @@ import utils 1.0
 Item {
     id: root
 
-    width: 1920
-    height: 720
-
-    property bool zoom: false
+    width: Style.clusterWidth
+    height: Style.clusterHeight
 
+//    Image {
+//        anchors.fill: parent
+//        source: Style.gfx("cluster/background")
+//    }
     Rectangle {
         anchors.fill: parent
         color: "#0c0c0c"
@@ -48,31 +50,20 @@ Item {
     Middle {
         id: widgetBase
         anchors.centerIn: parent
-        onZoomIn: {
-            widgetBase.width = 1000
-            root.zoom = true
-        }
-
-        onZoomOut: {
-            widgetBase.width = 700
-            root.zoom = false
-        }
     }
 
     LeftDial {
         id: leftDial
-        //x: root.zoom ? -230 : 0
-        Tracer {}
     }
 
     RightDial {
         id: rightDial
-        x: (1920 - width)
+        x: (root.width - (width + 0.1 * width))
     }
 
     Top {
         id: topbar
-        y: root.zoom ? - topbar.height : 11
+        y: 7
         anchors.horizontalCenter: parent.horizontalCenter
     }
 
diff --git a/sysui/Cluster/Dial.qml b/sysui/Cluster/Dial.qml
index 12ed135..a79750c 100644
--- a/sysui/Cluster/Dial.qml
+++ b/sysui/Cluster/Dial.qml
@@ -34,6 +34,10 @@ import utils 1.0
 
 Item {
     id: root
+
+    width: 480
+    height: 480
+
     property real value: 0
     property int upDuration: 2000
     property int downDuration: 1000
@@ -41,9 +45,6 @@ Item {
     property string circleRadius: "0.193"
     property string dialCursor: "cluster/dial_cursor"
 
-    width: 480
-    height: width
-
     Image {
         id: meter
         property real min: -83.5
diff --git a/sysui/Cluster/Fuel.qml b/sysui/Cluster/Fuel.qml
index ff402e6..2beabec 100644
--- a/sysui/Cluster/Fuel.qml
+++ b/sysui/Cluster/Fuel.qml
@@ -36,8 +36,9 @@ import service.vehicle 1.0
 
 Item {
     id: root
-    implicitWidth: fuel.sourceSize.width
-    implicitHeight: fuel.sourceSize.height
+
+    width: 0.73 * Style.clusterHeight
+    height: width -1
 
     property real value: VehicleService.fuel <= 0.3 ? (VehicleService.fuel + 0.1) : VehicleService.fuel
 
@@ -52,16 +53,17 @@ Item {
         height: parent.height
         clip: true
         Image {
+            width: root.width
+            height: root.height
             source: Style.gfx("cluster/fuel_level")
         }
-        Tracer { }
     }
 
     Image {
         id: fuel
+        anchors.fill: parent
         source: Style.gfx("cluster/fuel")
 
     }
-    Tracer { }
 }
 
diff --git a/sysui/Cluster/LeftDial.qml b/sysui/Cluster/LeftDial.qml
index 3cd48bb..d2adfd1 100644
--- a/sysui/Cluster/LeftDial.qml
+++ b/sysui/Cluster/LeftDial.qml
@@ -37,8 +37,8 @@ import service.vehicle 1.0
 Item {
     id: root
 
-    width: 570
-    height: 720
+    width: 0.72 * Style.clusterHeight
+    height: Style.clusterHeight
 
     scale: zoom ? 0.7 : 1
     property bool zoom: false
@@ -60,14 +60,13 @@ Item {
 
     Image {
         id: overlay
+
+        width: 0.91 * root.width
+        height: 0.98 * width
         anchors.right: parent.right
-        anchors.top: parent.top
         anchors.rightMargin: 0
-        anchors.topMargin: 120
-
+        anchors.verticalCenter: parent.verticalCenter
         source: Style.gfx("cluster/left_dial")
-
-        Tracer {}
     }
 
     Text {
@@ -122,6 +121,8 @@ Item {
 
 
     Dial {
+        width: 0.66 * root.height
+        height: width
         anchors.centerIn: overlay
         anchors.verticalCenterOffset: 2
         fillImage: "cluster/dial_fill_color_left"
diff --git a/sysui/Cluster/Middle.qml b/sysui/Cluster/Middle.qml
index c4416b1..89c0829 100644
--- a/sysui/Cluster/Middle.qml
+++ b/sysui/Cluster/Middle.qml
@@ -37,14 +37,11 @@ import models 1.0
 
 Item {
     id: root
-    width: 1300
-    height: 720
+    width: 0.67 * Style.clusterWidth
+    height: Style.clusterHeight
 
     focus: true
 
-    signal zoomIn()
-    signal zoomOut()
-
     Behavior on width {
         NumberAnimation { duration: 200}
     }
@@ -158,6 +155,4 @@ Item {
             GradientStop { position: 0.7; color: "#0c0c0c" }
         }
     }
-
-
 }
diff --git a/sysui/Cluster/RightDial.qml b/sysui/Cluster/RightDial.qml
index 02b239e..1efa2bf 100644
--- a/sysui/Cluster/RightDial.qml
+++ b/sysui/Cluster/RightDial.qml
@@ -37,8 +37,9 @@ import service.navigation 1.0
 
 Item {
     id: root
-    width: 570
-    height: 720
+
+    width: 0.8 * Style.clusterHeight
+    height: Style.clusterHeight
 
     scale: zoom ? 0.7 : 1
     property bool zoom: false
@@ -59,36 +60,40 @@ Item {
     transform: Rotation { origin.x: root.width/2; origin.y: root.height/2; axis { x: 0; y: 1; z: 0 } angle: root.angle }
 
     Item {
-        width: parent.width/3
-        height: 50
+        width: root.width/3
+        height: 0.1 * root.width
         anchors.bottom: overlay.top
         anchors.left: parent.left
-        anchors.leftMargin: 110
+        anchors.leftMargin: 0.2 * root.width
+
         Image {
             id: gears
+
+            width: 0.2 * root.width
+            height: 0.25 * width
             anchors.bottom: parent.bottom
             anchors.right: parent.right
             source: Style.gfx("cluster/P-R-N-D")
-
         }
 
         Image {
             id: plusMinus
             anchors.bottom: parent.bottom
-            anchors.left: parent.left
-            anchors.leftMargin: 50
+            anchors.left: gears.right
+            anchors.leftMargin: 10
             source: Style.gfx("cluster/+--")
         }
-        Tracer {}
     }
 
     Image {
         id: overlay
+
+        width: 0.91 * root.width
+        height: 0.99 * width
+
         anchors.left: parent.left
-        anchors.top: parent.top
         anchors.leftMargin: 0
-        anchors.topMargin: 120
-
+        anchors.verticalCenter: parent.verticalCenter
         source: Style.gfx("cluster/right_dial")
 
         Rectangle {
@@ -132,6 +137,9 @@ Item {
 
         Image {
             id: circle
+
+            width: root.width/2
+            height: width
             anchors.centerIn: parent
             anchors.horizontalCenterOffset: -6
             anchors.verticalCenterOffset: 0
@@ -139,6 +147,9 @@ Item {
 
             Image {
                 id: circle_overlay
+
+                width: parent.width
+                height: parent.height
                 anchors.centerIn: parent
                 source: Style.gfx("cluster/middle-circle")
             }
@@ -155,7 +166,7 @@ Item {
 
             Item {
                 width: parent.width
-                height: parent.height/2
+                height: parent.height/4
                 anchors.centerIn: parent
                 anchors.verticalCenterOffset: 40
 
@@ -171,28 +182,13 @@ Item {
                     }
 
                     Label {
-                        width: 100
+                        width: parent.width
                         anchors.centerIn: parent
                         horizontalAlignment: Text.AlignHCenter
-                        font.pixelSize: 36
+                        font.pixelSize: 0.05 * root.height
                         font.bold: true
-                        //font.letterSpacing: 2
-                        color: Style.colorWhite
                         text: VehicleService.rightDialMainText
                     }
-
-                }
-                Label {
-                    id: infoText
-                    anchors.top: speedText.bottom
-                    anchors.topMargin: 20
-                    anchors.horizontalCenter: parent.horizontalCenter
-
-                    font.pixelSize: 24
-                    //font.letterSpacing: 2
-                    color: Style.colorWhite
-                    horizontalAlignment: Text.AlignHCenter
-                    text: VehicleService.rightDialSubText
                 }
             }
         }
@@ -200,22 +196,22 @@ Item {
 
     Fuel {
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: 30
+        anchors.bottomMargin: 0.05 * root.height
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.horizontalCenterOffset: -50
+        anchors.horizontalCenterOffset: -20
     }
 
     Dial {
         id: dial
+
+        width: 0.69 * root.height
+        height: width
         anchors.centerIn: overlay
-        anchors.verticalCenterOffset: 3
-        anchors.horizontalCenterOffset: 2
+        anchors.verticalCenterOffset: 0
+        anchors.horizontalCenterOffset: -5
         fillImage: "cluster/dial_fill_color"
-        circleRadius: "0.28"
+        circleRadius: "0.29"
         dialCursor: "cluster/dial_cursor_right"
         value: VehicleService.rightDialValue
-
     }
-
-    Tracer {}
 }
diff --git a/sysui/Cluster/Top.qml b/sysui/Cluster/Top.qml
index ee56986..d377868 100644
--- a/sysui/Cluster/Top.qml
+++ b/sysui/Cluster/Top.qml
@@ -37,8 +37,8 @@ import service.settings 1.0
 import service.statusbar 1.0
 
 Item {
-    width: background.width
-    height: background.height
+    width: 0.37 * Style.clusterWidth
+    height: 0.12 * Style.clusterHeight
 
     Behavior on y {
         NumberAnimation { duration: 200}
@@ -46,6 +46,8 @@ Item {
 
     Image {
         id: background
+        width: parent.width
+        height: parent.height
         source: Style.gfx("cluster/top_bar")
         Tracer {}
     }
@@ -54,16 +56,19 @@ Item {
         id: timeText
         anchors.verticalCenter: background.verticalCenter
         anchors.left: background.left
-        anchors.verticalCenterOffset: 0
-        anchors.leftMargin: 162
+        anchors.leftMargin: 0.2 * background.width
 
-        font.pixelSize: 37
+        font.pixelSize: 0.42 * background.height
         font.bold: true
 
         text: Qt.formatTime(StatusBarService.currentDate, SettingsService.clockOption.format)
     }
 
     Item {
+        id: navigator
+
+        width: 0.25 * background.width
+        height: background.height
         anchors.verticalCenter: background.verticalCenter
         anchors.horizontalCenter: background.horizontalCenter
 
@@ -88,22 +93,23 @@ Item {
         Label {
             id: navText
 
-            anchors.centerIn: parent
-            anchors.verticalCenterOffset: 17
+            width: parent.width
+            height: parent.height - row.height
+            anchors.top: row.bottom
             horizontalAlignment: Text.AlignHCenter
             text: StatusBarService.clusterTitle
-            font.pixelSize: 32
+            font.pixelSize: 0.32 * background.height
         }
     }
 
     Label {
         id: temperatureText
         anchors.verticalCenter: background.verticalCenter
-        anchors.left: background.right
-        anchors.verticalCenterOffset: 0
-        anchors.leftMargin: -248
+        anchors.left: navigator.right
+        anchors.leftMargin: 15
 
-        font.pixelSize: 37
+        font.pixelSize: 0.42 * background.height
+        font.bold: true
 
         text: ClimateService.outsideTempText
     }