perf: Improve performance on low end devices

Task-number: QTBUG-85573
Change-Id: I04168910f7b306e5e4a9287df496bb9af13b0159
Reviewed-by: Samuli Piippo <samuli.piippo@qt.io>

16 files changed, 98 insertions, 44 deletions

diff --git a/basicsuite/ebike-ui/ClockView.qml b/basicsuite/ebike-ui/ClockView.qml
index 55ada41..70101e1 100644
--- a/basicsuite/ebike-ui/ClockView.qml
+++ b/basicsuite/ebike-ui/ClockView.qml
@@ -38,8 +38,8 @@ import QtQuick 2.7
 import "./BikeStyle"
 // Permanent placeholder for time display
 Item {
-    width: backgroundImage.width
-    height: backgroundImage.height
+    width: parent.width * 0.225
+    height: parent.height * 0.075
     z: 1
 
     // Timer that will show the current time at the top of the screen
@@ -53,12 +53,11 @@ Item {
         source: "images/top_curtain_drag.png"
         anchors.centerIn: parent
         fillMode: Image.PreserveAspectFit
-        width: root.width * 0.225
-        height: root.height * 0.075
     }
 
     Text {
         id: timeLabel
+        clip: clipDynamicText
         anchors {
             horizontalCenter: parent.horizontalCenter
             baseline: parent.top
diff --git a/basicsuite/ebike-ui/ConfigurationDrawer.qml b/basicsuite/ebike-ui/ConfigurationDrawer.qml
index f6f6094..05b1e0a 100644
--- a/basicsuite/ebike-ui/ConfigurationDrawer.qml
+++ b/basicsuite/ebike-ui/ConfigurationDrawer.qml
@@ -43,6 +43,7 @@ Drawer {
     property alias bikeInfoTab: bikeInfoTab
     property alias generalTab: generalTab
     property alias viewTab: viewTab
+    dim: false
 
     background: Rectangle {
         color: Colors.curtainBackground
@@ -55,12 +56,12 @@ Drawer {
         anchors {
             left: parent.left
             right: parent.right
-            leftMargin: root.width * 0.025
-            rightMargin: root.width * 0.025
+            leftMargin: parent.width * 0.025
+            rightMargin: parent.width * 0.025
         }
         contentHeight: parent.height * 0.175
         background: Rectangle {
-            color: Colors.curtainBackground
+            color: "transparent"
         }
 
         IconifiedTabButton {
@@ -134,8 +135,8 @@ Drawer {
             source: "images/curtain_shadow_handle.png"
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.top: parent.top
-            width: root.width * 0.2
-            height: root.height * 0.07
+            width: parent.width * 0.2
+            height: parent.height * 0.07
             fillMode: Image.PreserveAspectFit
         }
 
diff --git a/basicsuite/ebike-ui/FpsItem.qml b/basicsuite/ebike-ui/FpsItem.qml
index 0ab183d..71d2af5 100644
--- a/basicsuite/ebike-ui/FpsItem.qml
+++ b/basicsuite/ebike-ui/FpsItem.qml
@@ -59,6 +59,7 @@ Item {
 
     Text {
         id: fpsText
+        clip: clipDynamicText
         anchors.right: parent.right
         anchors.verticalCenter: spinnerImage.verticalCenter
         color: "red"
diff --git a/basicsuite/ebike-ui/IconifiedTabButton.qml b/basicsuite/ebike-ui/IconifiedTabButton.qml
index 4762d94..1095625 100644
--- a/basicsuite/ebike-ui/IconifiedTabButton.qml
+++ b/basicsuite/ebike-ui/IconifiedTabButton.qml
@@ -44,7 +44,7 @@ TabButton {
     property var bar
 
     background: Rectangle {
-        color: Colors.tabBackground
+        color: "transparent"
 
         Image {
             height: parent.height
diff --git a/basicsuite/ebike-ui/LightsBox.qml b/basicsuite/ebike-ui/LightsBox.qml
index b920864..33ff043 100644
--- a/basicsuite/ebike-ui/LightsBox.qml
+++ b/basicsuite/ebike-ui/LightsBox.qml
@@ -41,8 +41,8 @@ import "./BikeStyle"
 
 // Bottom-left corner, controls
 Item {
-    width: root.width * 0.425
-    height: root.height * 0.45
+    width: parent.width * 0.425
+    height: parent.height * 0.45
 
     property real imageMargin: Math.min(width, height) * 0.35
     Image {
diff --git a/basicsuite/ebike-ui/MainPage.qml b/basicsuite/ebike-ui/MainPage.qml
index e459789..9ca9edb 100644
--- a/basicsuite/ebike-ui/MainPage.qml
+++ b/basicsuite/ebike-ui/MainPage.qml
@@ -42,8 +42,9 @@ import "./BikeStyle"
 
 Page {
     background: Rectangle {
-        color: Colors.mainBackground
+        color: "transparent"
     }
+
     property alias statsButton: statsButton
     property alias naviButton: naviButton
     property alias lightsButton: lightsButton
@@ -61,7 +62,7 @@ Page {
         MouseArea {
             anchors.fill: parent
             onClicked: {
-                swipeView.currentIndex = 0
+                swipeView.decrementCurrentIndex()
             }
         }
     }
@@ -77,7 +78,7 @@ Page {
         MouseArea {
             anchors.fill: parent
             onClicked: {
-                swipeView.currentIndex = 2
+                swipeView.incrementCurrentIndex()
             }
         }
     }
diff --git a/basicsuite/ebike-ui/ModeBox.qml b/basicsuite/ebike-ui/ModeBox.qml
index 490bc16..7250d30 100644
--- a/basicsuite/ebike-ui/ModeBox.qml
+++ b/basicsuite/ebike-ui/ModeBox.qml
@@ -42,11 +42,12 @@ import "./BikeStyle"
 
 // Bottom-right corner, mode
 Item {
-    width: root.width * 0.425
-    height: root.height * 0.45
+    width: parent.width * 0.425
+    height: parent.height * 0.45
 
     Text {
         id: sportModeText
+        clip: clipDynamicText
         anchors {
             bottom: parent.bottom
             bottomMargin: parent.height * 0.3
@@ -63,6 +64,7 @@ Item {
 
     Text {
         id: cruiseModeText
+        clip: clipDynamicText
         anchors {
             bottom: sportModeText.top
             bottomMargin: parent.height * 0.025
diff --git a/basicsuite/ebike-ui/NaviBox.qml b/basicsuite/ebike-ui/NaviBox.qml
index 9a97cf8..f02ed95 100644
--- a/basicsuite/ebike-ui/NaviBox.qml
+++ b/basicsuite/ebike-ui/NaviBox.qml
@@ -42,8 +42,8 @@ import "./BikeStyle"
 // Top-right corner, navi
 Item {
     id: rootItem
-    width: root.width * 0.425
-    height: root.height * 0.45
+    width: parent.width * 0.425
+    height: parent.height * 0.45
     property string arrowSource: "images/nav_right.png"
     property string distance: "0"
     property string unit: "m"
@@ -71,6 +71,7 @@ Item {
 
         Text {
             id: naviText
+            clip: clipDynamicText
             anchors.baseline: container.bottom
             color: Colors.distanceText
             font {
diff --git a/basicsuite/ebike-ui/NaviGuide.qml b/basicsuite/ebike-ui/NaviGuide.qml
index a3c011f..f6fdf25 100644
--- a/basicsuite/ebike-ui/NaviGuide.qml
+++ b/basicsuite/ebike-ui/NaviGuide.qml
@@ -44,7 +44,7 @@ Rectangle {
     property string distance: "0"
     property string unit: "m"
 
-    width: root.width * 0.14
+    width: parent.width * 0.14
     height: width
     radius: width
     color: Colors.naviPageGuideBackground
diff --git a/basicsuite/ebike-ui/NaviPage.qml b/basicsuite/ebike-ui/NaviPage.qml
index 0b6c3e3..217887c 100644
--- a/basicsuite/ebike-ui/NaviPage.qml
+++ b/basicsuite/ebike-ui/NaviPage.qml
@@ -44,6 +44,11 @@ import "./BikeStyle"
 
 Page {
     id: mapContainer
+
+    background: Rectangle {
+        color: "transparent"
+    }
+
     property var startCoordinate: QtPositioning.coordinate(36.131961, -115.153048)
     property var destinationCoordinate: QtPositioning.coordinate(90, 0)
     property var targetPlace
@@ -183,7 +188,7 @@ Page {
 
         delegate: Component {
             Rectangle {
-                width: parent.width
+                width: targetList.width
                 height: UILayout.naviPageSuggestionHeight
                 color: "white"
                 border.color: Colors.naviPageSuggestionsDivider
@@ -290,7 +295,7 @@ Page {
         anchors {
             right: parent.right
             bottom: parent.bottom
-            rightMargin: root.width * 0.015
+            rightMargin: parent.width * 0.015
             bottomMargin: anchors.rightMargin
         }
         arrowSource: naviGuideArrowSource
@@ -624,9 +629,15 @@ Page {
         }
     }
 
+    Binding {
+        target: mapboxgl
+        property: 'name'
+        value: "mapboxgl"
+        when:  navigation.active
+    }
+
     Plugin {
         id: mapboxgl
-        name: "mapboxgl"
         PluginParameter {
             name: "mapbox.access_token"
             value: "pk.eyJ1IjoibWFwYm94NHF0IiwiYSI6ImNpd3J3eDE0eDEzdm8ydHM3YzhzajlrN2oifQ.keEkjqm79SiFDFjnesTcgQ"
@@ -635,10 +646,21 @@ Page {
             name: "mapboxgl.mapping.additional_style_urls"
             value: "mapbox://styles/mapbox/outdoors-v11"
         }
+        PluginParameter {
+            name: "mapboxgl.mapping.use_fbo"
+            value: "false"
+        }
     }
+
+    Binding {
+        target: mapbox
+        property: 'name'
+        value: "mapbox"
+        when:  navigation.active
+    }
+
     Plugin {
         id: mapbox
-        name: "mapbox"
         PluginParameter {
             name: "mapbox.access_token"
             value: "pk.eyJ1IjoibWFwYm94NHF0IiwiYSI6ImNpd3J3eDE0eDEzdm8ydHM3YzhzajlrN2oifQ.keEkjqm79SiFDFjnesTcgQ"
diff --git a/basicsuite/ebike-ui/SpeedView.qml b/basicsuite/ebike-ui/SpeedView.qml
index 49be98a..af698df 100644
--- a/basicsuite/ebike-ui/SpeedView.qml
+++ b/basicsuite/ebike-ui/SpeedView.qml
@@ -41,11 +41,13 @@ import "./BikeStyle"
 Rectangle {
     id: speedViewItem
     objectName: "ebikeSpeedView"
-    width: root.width * 0.35
+    width: parent.width * 0.35
     height: width
     color: "transparent"
     radius: width
     z: 1
+    layer.enabled: enableLayerForSpeedView
+
     anchors{
         verticalCenter: parent.verticalCenter
         horizontalCenter: parent.horizontalCenter
@@ -71,6 +73,7 @@ Rectangle {
     // Speed info
     Text {
         id: speedText
+        clip: (clipDynamicText && !enableLayerForSpeedView)
         anchors {
             horizontalCenter: speedView.horizontalCenter
             baseline: speedView.bottom
@@ -106,6 +109,7 @@ Rectangle {
     // Average speed info
     Text {
         id: averageSpeedText
+        clip: (clipDynamicText && !enableLayerForSpeedView)
         anchors {
             baseline: speedText.baseline
             baselineOffset: speedInfoTextsOffset
@@ -158,6 +162,7 @@ Rectangle {
     // Assist info
     Text {
         id: assistDistanceText
+        clip: (clipDynamicText && !enableLayerForSpeedView)
         anchors {
             baseline: speedText.baseline
             baselineOffset: speedInfoTextsOffset
@@ -419,7 +424,7 @@ Rectangle {
             anchors.leftMargin: parent.width * 0.075
             anchors.bottom: parent.bottom
             anchors.bottomMargin: parent.height * 0.075
-            visible: swipeView.currentIndex != 1
+            visible: speedView.state == "CORNERED"
         }
     }
 
@@ -521,7 +526,7 @@ Rectangle {
         onClicked: {
             if (enlarged)
                 enlarged = false
-            else if (swipeView.currentIndex === 1)
+            else if (speedView.state !== "CORNERED")
                 enlarged = true
             else
                 speedView.showMain()
diff --git a/basicsuite/ebike-ui/StandaloneMain.qml b/basicsuite/ebike-ui/StandaloneMain.qml
index 40fb75f..ae83a75 100644
--- a/basicsuite/ebike-ui/StandaloneMain.qml
+++ b/basicsuite/ebike-ui/StandaloneMain.qml
@@ -48,6 +48,16 @@ Window {
     id: window
     visible: true
     color: "#111520"
+
+    /* Updating Text properties dynamically can cause rebuild of whole SceneGraph node tree which is expensive.
+       Enabling this might help in that case to prevent full rebuild from happening.
+       More info see https://www.qt.io/blog/2017/01/19/shoot-foot-using-scene-graph-neat-optimization-trick-inside
+    */
+    readonly property bool clipDynamicText: false
+
+    /* SpeedView uses Canvas so it might be optimization when enabling layer for rendering it */
+    readonly property bool enableLayerForSpeedView: false
+
     readonly property int portraitRotation: 90
     property real rotation: Screen.orientation === Qt.PortraitOrientation ? portraitRotation : 0
     property bool rotate: Screen.orientation === Qt.PortraitOrientation ? true : false
@@ -258,15 +268,18 @@ Window {
 
             // List of pages
             StatsPage {
+                visible: SwipeView.isCurrentItem
             }
             MainPage {
                 id: mainPage
+                visible: SwipeView.isCurrentItem
                 naviGuideArrowSource: naviPage.naviGuideArrowSource
                 naviGuideDistance: naviPage.naviGuideDistance
                 naviGuideAddress: naviPage.naviGuideAddress
             }
             NaviPage {
                 id: naviPage
+                visible: SwipeView.isCurrentItem
             }
         }
 
@@ -274,6 +287,7 @@ Window {
         MusicPlayer {
             id: musicPlayer
             property string lastMusicPlayerState: "unknown"
+            visible: (musicPlayer.state == "hidden" ? false : true)
             z: 1
         }
 
diff --git a/basicsuite/ebike-ui/StatsBox.qml b/basicsuite/ebike-ui/StatsBox.qml
index 76254db..62c48bd 100644
--- a/basicsuite/ebike-ui/StatsBox.qml
+++ b/basicsuite/ebike-ui/StatsBox.qml
@@ -42,8 +42,8 @@ import "./BikeStyle"
 
 // Top-left corner, stats
 Item {
-    width: root.width * 0.425
-    height: root.height * 0.45
+    width: parent.width * 0.425
+    height: parent.height * 0.45
     property real imageMargin: Math.min(width, height) * 0.3
 
     Image {
@@ -62,6 +62,7 @@ Item {
 
     Text {
         id: tripText
+        clip: clipDynamicText
         color: Colors.distanceText
         anchors {
             bottom: tripIcon.verticalCenter
@@ -108,6 +109,7 @@ Item {
 
     Text {
         id: calText
+        clip: clipDynamicText
         color: Colors.distanceText
         anchors {
             bottom: calIcon.verticalCenter
diff --git a/basicsuite/ebike-ui/StatsPage.qml b/basicsuite/ebike-ui/StatsPage.qml
index 9b204f0..5d34c91 100644
--- a/basicsuite/ebike-ui/StatsPage.qml
+++ b/basicsuite/ebike-ui/StatsPage.qml
@@ -45,7 +45,7 @@ import "moment.js" as Moment
 Page {
     id: statsPage
     background: Rectangle {
-        color: Colors.mainBackground
+        color: "transparent"
     }
 
     // Function for pretty-printing duration
@@ -104,6 +104,7 @@ Page {
 
     Text {
         id: tripDateText
+        clip: clipDynamicText
         anchors {
             horizontalCenter: parent.horizontalCenter
             verticalCenter: parent.top
@@ -184,6 +185,7 @@ Page {
         color: "transparent"
         border.color: "red"
         width: odometerText.width + odometerUnit.width + odometerDescription.width + 2 * 4
+        clip: clipDynamicText
         anchors {
             right: parent.right
             bottom: parent.top
@@ -201,7 +203,7 @@ Page {
             font {
                 family: "Montserrat, Light"
                 weight: Font.Light
-                pixelSize: root.height * 0.035
+                pixelSize: parent.height * 0.035
             }
         }
 
@@ -215,7 +217,7 @@ Page {
             font {
                 family: "Montserrat, Bold"
                 weight: Font.Bold
-                pixelSize: root.height * 0.035
+                pixelSize: parent.height * 0.035
             }
         }
 
@@ -228,7 +230,7 @@ Page {
             font {
                 family: "Montserrat, Light"
                 weight: Font.Light
-                pixelSize: root.height * 0.035
+                pixelSize: parent.height * 0.035
             }
         }
     }
@@ -239,13 +241,11 @@ Page {
             left: parent.left
             right: parent.right
             top: endTrip.bottom
-            leftMargin: root.width * 0.025
-            rightMargin: root.width * 0.025
+            leftMargin: parent.width * 0.025
+            rightMargin: parent.width * 0.025
             topMargin: UILayout.statsTopMargin
         }
-        height: root.height * 0.2
-        // Hide any excess content, since we are using margins
-        clip: true
+        height: parent.height * 0.2
 
         // Load data on first show
         Component.onCompleted: tripdata.refresh()
@@ -256,8 +256,10 @@ Page {
             model: tripdata
 
             Column {
+                clip: clipDynamicText
                 width: tripView.width
                 height: tripView.height
+                visible: SwipeView.isCurrentItem
 
                 ColumnSpacer {
                     color: Colors.statsSeparator
@@ -304,15 +306,14 @@ Page {
         anchors {
             bottom: parent.bottom
             right: parent.right
-            bottomMargin: root.height * 0.0125
-            rightMargin: root.width * 0.02
+            bottomMargin: parent.height * 0.0125
+            rightMargin: parent.width * 0.02
             top: tripView.bottom
             left: parent.left
-            leftMargin: root.width * 0.175
+            leftMargin: parent.width * 0.175
         }
         animationRunning: tripView.currentIndex === 0
         tripDetails: tripdata.get(currentIndex)
         currentIndex: tripView.currentIndex
-        visible: swipeView.currentIndex === 0
     }
 }
diff --git a/basicsuite/ebike-ui/TripChart.qml b/basicsuite/ebike-ui/TripChart.qml
index 0bc3a7d..01ba457 100644
--- a/basicsuite/ebike-ui/TripChart.qml
+++ b/basicsuite/ebike-ui/TripChart.qml
@@ -199,7 +199,7 @@ ChartView {
             [0, 0]]
 
         // Animate only if visible on screen
-        running: animationRunning && (swipeView.currentIndex === 0)
+        running: animationRunning && parent.visible
         repeat: true
         interval: 200
         onTriggered: {
diff --git a/basicsuite/ebike-ui/main.qml b/basicsuite/ebike-ui/main.qml
index 22396d1..bb2b403 100644
--- a/basicsuite/ebike-ui/main.qml
+++ b/basicsuite/ebike-ui/main.qml
@@ -243,15 +243,19 @@ Rectangle {
         interactive: false
 
         // List of pages
-        StatsPage {}
+        StatsPage {
+            visible: SwipeView.isCurrentItem
+        }
         MainPage {
             id: mainPage
+            visible: SwipeView.isCurrentItem
             naviGuideArrowSource: naviPage.naviGuideArrowSource
             naviGuideDistance: naviPage.naviGuideDistance
             naviGuideAddress: naviPage.naviGuideAddress
         }
         NaviPage {
             id: naviPage;
+            visible: SwipeView.isCurrentItem
         }
     }
 
@@ -259,6 +263,7 @@ Rectangle {
     MusicPlayer {
         id: musicPlayer
         property string lastMusicPlayerState: "unknown"
+        visible: (musicPlayer.state == "hidden" ? false : true)
         z: 1
     }