summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNedim Hadzic <nedim.hadzic@pelagicore.com>2016-08-17 12:08:13 +0200
committerNedim Hadzic <nedim.hadzic@pelagicore.com>2016-08-19 07:54:05 +0000
commitfc2e7efd1d5457a7149855e796947b6e32d9cce8 (patch)
treeb5d2537b2f0aaa14799c05fc221ba1cb3ef66678
parent044e47a5f1bb7afb0abbaef041ac04793aa2246a (diff)
downloadneptune-ui-fc2e7efd1d5457a7149855e796947b6e32d9cce8.tar.gz
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>
-rw-r--r--imports/shared/service/vehicle/VehicleService.qml2
-rw-r--r--imports/shared/utils/Style.qml2
-rw-r--r--sysui/Cloud/Store/AppStoreController.qml1
-rw-r--r--sysui/Cluster/Cluster.qml25
-rw-r--r--sysui/Cluster/Dial.qml7
-rw-r--r--sysui/Cluster/Fuel.qml10
-rw-r--r--sysui/Cluster/LeftDial.qml15
-rw-r--r--sysui/Cluster/Middle.qml9
-rw-r--r--sysui/Cluster/RightDial.qml72
-rw-r--r--sysui/Cluster/Top.qml30
10 files changed, 83 insertions, 90 deletions
diff --git a/imports/shared/service/vehicle/VehicleService.qml b/imports/shared/service/vehicle/VehicleService.qml
index ef5984a..70964fe 100644
--- a/imports/shared/service/vehicle/VehicleService.qml
+++ b/imports/shared/service/vehicle/VehicleService.qml
@@ -48,7 +48,7 @@ QtObject {
}
}
- readonly property real rightDialValue: root.speed * 0.0061
+ readonly property real rightDialValue: root.speed * 0.0031
property int displaySpeed: speed
property real fuel: 0.5 // fuel precentage min 0.0; max 1.0;
diff --git a/imports/shared/utils/Style.qml b/imports/shared/utils/Style.qml
index 9301eda..59cdafe 100644
--- a/imports/shared/utils/Style.qml
+++ b/imports/shared/utils/Style.qml
@@ -46,6 +46,8 @@ QtObject {
property int screenWidth: configValue("screenWidth", 1280)
property int screenHeight: configValue("screenHeight", 800)
+ property int clusterWidth: configValue("clusterWidth", 1920)
+ property int clusterHeight: configValue("clusterHeight", 720)
property int displayHMargin: configValue("displayHMargin", 11)
property int displayVMargin: configValue("displayVMargin", 0)
property int cellWidth: configValue("cellWidth", 53) // 1280/24
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
}