[hud] add more contents such as speed limit and cruise speed

Change-Id: I90fed22701a31779f9096c50ed7afcac188947c4
Reviewed-by: Egor Nemtsev <enemtsev@luxoft.com>

2 files changed, 56 insertions, 3 deletions

diff --git a/apps/com.pelagicore.hud/Main.qml b/apps/com.pelagicore.hud/Main.qml
index 5ce13f14..f5a10add 100644
--- a/apps/com.pelagicore.hud/Main.qml
+++ b/apps/com.pelagicore.hud/Main.qml
@@ -44,6 +44,9 @@ NeptuneWindow {
     height: Sizes.dp(240)
 
     property real currentSpeed: clusterSettings.speed
+    property real speedLimit: clusterSettings.speedLimit
+    property real cruiseSpeed: clusterSettings.speedCruise
+
     Behavior on currentSpeed {
         NumberAnimation { easing.type: Easing.OutCubic; duration: 5000 }
     }
@@ -59,23 +62,70 @@ NeptuneWindow {
     Item {
         anchors.fill: parent
 
+        Rectangle {
+            anchors.centerIn: parent
+            anchors.horizontalCenterOffset: - Sizes.dp(80)
+            anchors.rightMargin: Sizes.dp(20)
+            width: Sizes.dp(50)
+            height: Sizes.dp(50)
+            radius: width / 2
+            border.color: (root.currentSpeed > root.speedLimit) ? "red" : "grey"
+            border.width: Sizes.dp(6)
+            opacity: (root.currentSpeed > root.speedLimit) ? 1.0 : 0.0
+            Behavior on opacity {
+                NumberAnimation { easing.type: Easing.OutCubic; duration: 270 }
+            }
+            Label {
+                anchors.centerIn: parent
+                text: Math.round(speedLimit)
+                opacity: Style.opacityHigh
+                font.pixelSize: Sizes.fontSizeXS
+                color: root.Style.theme === Style.Dark ? Style.mainColor : Style.contrastColor
+            }
+        }
+
+        Image {
+            id: cruiseIcon
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.horizontalCenterOffset: -Sizes.dp(18)
+            anchors.bottom: speed.top
+            opacity: (root.cruiseSpeed >= 30) ? 1 : 0.0
+            width: Sizes.dp(35)
+            height: Sizes.dp(31)
+            source: "assets/ic-acc.png"
+            Behavior on opacity {
+                NumberAnimation { easing.type: Easing.OutCubic; duration: 270 }
+            }
+        }
+
+        Label {
+            anchors.left: cruiseIcon.right
+            anchors.leftMargin: Sizes.dp(10)
+            anchors.verticalCenter: cruiseIcon.verticalCenter
+            text: Math.round(root.cruiseSpeed)
+            font.weight: Font.Light
+            font.pixelSize: Sizes.fontSizeS
+            opacity: cruiseIcon.opacity
+            color: "white"
+        }
+
         Label {
+            id: speed
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
-            anchors.verticalCenterOffset: Sizes.dp(-30)
             text: Math.round(root.currentSpeed)
             verticalAlignment: Text.AlignTop
             horizontalAlignment: Text.AlignHCenter
             font.weight: Font.DemiBold
             color: Style.accentColor
             opacity: Style.opacityHigh
-            font.pixelSize: Sizes.fontSizeL
+            font.pixelSize: Sizes.fontSizeXXL
         }
 
         Label {
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
-            anchors.verticalCenterOffset: Sizes.dp(30)
+            anchors.horizontalCenterOffset: Sizes.dp(88)
             text: qsTr("km/h")
             font.weight: Font.Light
             color: Style.accentColor
diff --git a/apps/com.pelagicore.hud/assets/ic-acc.png b/apps/com.pelagicore.hud/assets/ic-acc.png
new file mode 100644
index 00000000..ac5026ef
--- /dev/null
+++ b/apps/com.pelagicore.hud/assets/ic-acc.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3c14ec8c599e808ae81b59514023d097b34ef183c0e904b7fdb3eb23ddf920f3
+size 906