diff options
37 files changed, 337 insertions, 523 deletions
diff --git a/basicsuite/ebike-ui/BikeInfoTab.qml b/basicsuite/ebike-ui/BikeInfoTab.qml index 0dc4f27..a9ff216 100644 --- a/basicsuite/ebike-ui/BikeInfoTab.qml +++ b/basicsuite/ebike-ui/BikeInfoTab.qml @@ -52,6 +52,7 @@ Item { property string primaryDetailsValue: "85%" property bool primaryDetailsOk: true property var activeComponent: batteryCircle + property real circleRadius: Math.min(parent.height * 0.125, parent.width * 0.125) function updateComponent() { if (selectedComponent === "") @@ -111,13 +112,13 @@ Item { left: parent.left right: parent.right } - height: UILayout.configurationItemHeight + height: stackLayout.height * 0.225 width: parent.width text: qsTr("BIKE INFO") font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.configurationTitleSize + pixelSize: height * 0.375 } color: Colors.tabTitleColor verticalAlignment: Text.AlignVCenter @@ -135,21 +136,22 @@ Item { anchors { top: spacer.bottom right: parent.right - rightMargin: -30 + bottom: parent.bottom } + fillMode: Image.PreserveAspectFit source: bikeImageSource } Rectangle { id: brakesCircle - width: 2 * UILayout.bikeInfoCircleRadius - height: 2 * UILayout.bikeInfoCircleRadius - radius: UILayout.bikeInfoCircleRadius + width: circleRadius + height: circleRadius + radius: circleRadius * 2 anchors { verticalCenter: bikeImage.top - verticalCenterOffset: 43 + verticalCenterOffset: bikeImage.height * 0.2 horizontalCenter: bikeImage.left - horizontalCenterOffset: 243 + horizontalCenterOffset: bikeImage.width * 0.63 } color: "transparent" @@ -168,14 +170,14 @@ Item { Rectangle { id: lightCircle - width: 2 * UILayout.bikeInfoCircleRadius - height: 2 * UILayout.bikeInfoCircleRadius - radius: UILayout.bikeInfoCircleRadius + width: circleRadius + height: circleRadius + radius: circleRadius * 2 anchors { verticalCenter: bikeImage.top - verticalCenterOffset: 77 + verticalCenterOffset: bikeImage.height * 0.325 horizontalCenter: bikeImage.left - horizontalCenterOffset: 252 + horizontalCenterOffset: bikeImage.width * 0.65 } color: "transparent" @@ -194,14 +196,14 @@ Item { Rectangle { id: batteryCircle - width: 2 * UILayout.bikeInfoCircleRadius - height: 2 * UILayout.bikeInfoCircleRadius - radius: UILayout.bikeInfoCircleRadius + width: circleRadius + height: circleRadius + radius: circleRadius * 2 anchors { verticalCenter: bikeImage.top - verticalCenterOffset: 106 + verticalCenterOffset: bikeImage.height * 0.475 horizontalCenter: bikeImage.left - horizontalCenterOffset: 200 + horizontalCenterOffset: bikeImage.width * 0.525 } color: "transparent" @@ -220,14 +222,14 @@ Item { Rectangle { id: gearsCircle - width: 2 * UILayout.bikeInfoCircleRadius - height: 2 * UILayout.bikeInfoCircleRadius - radius: UILayout.bikeInfoCircleRadius + width: circleRadius + height: circleRadius + radius: circleRadius * 2 anchors { verticalCenter: bikeImage.top - verticalCenterOffset: 143 + verticalCenterOffset: bikeImage.height * 0.625 horizontalCenter: bikeImage.left - horizontalCenterOffset: 106 + horizontalCenterOffset: bikeImage.width * 0.2725 } color: "transparent" @@ -246,14 +248,14 @@ Item { Rectangle { id: rearWheelCircle - width: 2 * UILayout.bikeInfoCircleRadius - height: 2 * UILayout.bikeInfoCircleRadius - radius: UILayout.bikeInfoCircleRadius + width: circleRadius + height: circleRadius + radius: circleRadius * 2 anchors { verticalCenter: bikeImage.top - verticalCenterOffset: 144 + verticalCenterOffset: bikeImage.height * 0.625 horizontalCenter: bikeImage.left - horizontalCenterOffset: 56 + horizontalCenterOffset: bikeImage.width * 0.15 } color: "transparent" @@ -271,20 +273,22 @@ Item { Image { anchors.centerIn: parent + height: circleRadius * 0.65 + width: height source: "images/warning.png" } } Rectangle { id: frontWheelCircle - width: 2 * UILayout.bikeInfoCircleRadius - height: 2 * UILayout.bikeInfoCircleRadius - radius: UILayout.bikeInfoCircleRadius + width: circleRadius + height: circleRadius + radius: circleRadius * 2 anchors { verticalCenter: bikeImage.top - verticalCenterOffset: 144 + verticalCenterOffset: bikeImage.height * 0.625 horizontalCenter: bikeImage.left - horizontalCenterOffset: 322 + horizontalCenterOffset: bikeImage.width * 0.82 } color: "transparent" @@ -338,9 +342,10 @@ Item { Image { id: componentStatusImage + height: circleRadius * 0.9 + width: height anchors { - verticalCenter: spacer.bottom - verticalCenterOffset: (UILayout.bikeInfoComponentBaselineOffset + UILayout.bikeInfoComponentLineOffset) / 2 + verticalCenter: componentNameText.verticalCenter left: parent.left } source: componentStatusImageSource @@ -350,15 +355,15 @@ Item { Text { id: componentNameText anchors { - baseline: spacer.bottom - baselineOffset: UILayout.bikeInfoComponentBaselineOffset + top: spacer.bottom + topMargin: parent.height * 0.0175 left: componentStatusImage.right - leftMargin: 5 + leftMargin: parent.width * 0.01 } font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.bikeInfoComponentHeaderTextSize + pixelSize: parent.height * 0.075 } color: Colors.bikeInfoComponentHeader text: componentName @@ -370,7 +375,7 @@ Item { id: statusLineHorizontal anchors { top: componentNameText.baseline - topMargin: UILayout.bikeInfoComponentLineOffset + topMargin: parent.height * 0.03 left: parent.left } height: UILayout.bikeInfoLineWidth @@ -382,14 +387,14 @@ Item { Text { id: primaryDetailsText anchors { - baseline: statusLineHorizontal.bottom - baselineOffset: UILayout.bikeInfoLineDetailsMargin + top: statusLineHorizontal.bottom + topMargin: parent.height * 0.035 left: parent.left } font { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.bikeInfoInfoHeaderTextSize + pixelSize: parent.height * 0.065 } color: Colors.bikeInfoComponentText text: primaryDetails @@ -399,14 +404,13 @@ Item { Text { id: primaryDetailsValueText anchors { - baseline: primaryDetailsText.baseline - baselineOffset: UILayout.bikeInfoDetailsValueMargin + top: primaryDetailsText.bottom left: parent.left } font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.bikeInfoInfoHeaderTextSize + pixelSize: parent.height * 0.065 } color: primaryDetailsOk ? Colors.bikeInfoComponentOk : Colors.bikeInfoComponentWarning text: primaryDetailsValue @@ -416,14 +420,14 @@ Item { Text { id: lastMaintenanceText anchors { - baseline: primaryDetailsValueText.baseline - baselineOffset: UILayout.bikeInfoDetailsBaselineMargin + top: primaryDetailsValueText.bottom + topMargin: parent.height * 0.03 left: parent.left } font { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.bikeInfoInfoHeaderTextSize + pixelSize: parent.height * 0.065 } color: Colors.bikeInfoComponentText text: qsTr("Last maintenance") @@ -433,14 +437,13 @@ Item { Text { id: lastMaintenanceValueText anchors { - baseline: lastMaintenanceText.baseline - baselineOffset: UILayout.bikeInfoDetailsValueMargin + top: lastMaintenanceText.bottom left: parent.left } font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.bikeInfoInfoHeaderTextSize + pixelSize: parent.height * 0.065 } color: Colors.bikeInfoComponentOk text: "10/3/2017" @@ -450,14 +453,14 @@ Item { Text { id: nextMaintenanceText anchors { - baseline: lastMaintenanceValueText.baseline - baselineOffset: UILayout.bikeInfoDetailsBaselineMargin + top: lastMaintenanceValueText.bottom + topMargin: parent.height * 0.03 left: parent.left } font { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.bikeInfoInfoHeaderTextSize + pixelSize: parent.height * 0.065 } color: Colors.bikeInfoComponentText text: qsTr("Scheduled maintenance") @@ -467,14 +470,13 @@ Item { Text { id: nextMaintenanceValueText anchors { - baseline: nextMaintenanceText.baseline - baselineOffset: UILayout.bikeInfoDetailsValueMargin + top: nextMaintenanceText.bottom left: parent.left } font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.bikeInfoInfoHeaderTextSize + pixelSize: parent.height * 0.065 } color: Colors.bikeInfoComponentOk text: "10/3/2018" diff --git a/basicsuite/ebike-ui/BikeStyle/UILayout.qml b/basicsuite/ebike-ui/BikeStyle/UILayout.qml index 55f6baf..046de2e 100644 --- a/basicsuite/ebike-ui/BikeStyle/UILayout.qml +++ b/basicsuite/ebike-ui/BikeStyle/UILayout.qml @@ -39,94 +39,22 @@ import QtQuick 2.9 QtObject { readonly property int clockBaselineMargin: 25 - readonly property int clockFontSize: 18 - readonly property int statsIconTop: 56 - readonly property int statsIconLeft: 50 - readonly property int statsIconSeparator: 20 - readonly property int statsIconWidth: 40 - readonly property int statsIconHeight: 40 - readonly property int statsTextSeparator: 15 - readonly property int statsTextSize: 20 - readonly property int statsTextTopOffset: 0 - readonly property int statsUnitBaselineOffset: 0 - - readonly property int lightsIconBottom: 90 - readonly property int lightsIconLeft: 50 - readonly property int lightsIconWidth: 80 - readonly property int lightsIconHeight: 80 - - readonly property int naviModeCenterMargin: 90 - - readonly property int naviIconTop: 45 - readonly property int naviIconRight: 50 - readonly property int naviIconWidth: 80 - readonly property int naviIconHeight: 80 - readonly property int naviTextSize: 26 - readonly property int naviTextMargin: 30 - - readonly property int modeBottomOffset: 84 - readonly property int modeDistance: 50 - readonly property int modeTextSize: 20 - - readonly property int speedViewTop: 78 - readonly property int speedViewRadius: 150 /* Normal mode */ - readonly property int speedViewRadiusMinified: 90 /* Minified to corner mode */ - readonly property int speedViewRadiusEnlarged: 205 /* Enlarged to full screen mode */ readonly property int speedViewDots: 96 readonly property int speedViewDotsMinified: 48 readonly property int speedViewDotsEnlarged: 128 - readonly property int speedViewCornerLeftMargin: 15 - readonly property int speedViewCornerBottomMargin: 15 - readonly property int speedViewInnerRadius: 125 - readonly property int speedViewInnerRadiusMinified: 65 - readonly property int speedViewInnerRadiusEnlarged: 185 - readonly property int speedViewInnerWidth: 12 - readonly property int speedViewInnerWidthMinified: 8 + readonly property double speedViewSpeedStart: Math.PI * 0.5 + Math.PI / 30 readonly property double speedViewSpeedEnd: Math.PI * 1.5 - Math.PI / 30 readonly property double speedViewBatteryStart: Math.PI * 0.5 - Math.PI / 30 readonly property double speedViewBatteryEnd: -Math.PI * 0.5 + Math.PI / 30 - readonly property double speedViewAssistPowerStart: Math.PI * 0.5 + Math.PI / 34 - readonly property double speedViewAssistPowerEnd: Math.PI * 0.5 - Math.PI / 34 - readonly property int speedViewAssistPowerWidth: 6 - readonly property int speedViewAssistPowerRadius: 230 - readonly property int speedViewAssistPowerBottomOffset: 104 + readonly property int speedBaselineOffset: 137 - readonly property int speedBaselineOffsetMinified: 73 - readonly property int speedBaselineOffsetEnlarged: 155 - readonly property int speedTextSize: 108 - readonly property int speedTextSizeMinified: 80 - readonly property int speedTextSizeEnlarged: 190 - readonly property int speedUnitsSize: 14 - readonly property int speedUnitsSizeEnlarged: 18 - readonly property int speedTextUnitMargin: 24 - readonly property int speedTextUnitMarginMinified: 18 - readonly property int speedTextUnitMarginEnlarged: 30 - readonly property int speedIconsCenterOffset: 71 - readonly property int speedIconsCenterOffsetEnlarged: 111 + readonly property int speedInfoTextsOffsetEnlarged: -34 - readonly property int speedInfoTextsSize: 38 - readonly property int speedInfoTextsSizeEnlarged: 64 - readonly property int speedInfoUnitsOffset: 24 - readonly property int speedInfoUnitsOffsetEnlarged: 34 - readonly property int averageSpeedIconMargin: -5 - readonly property int averageSpeedIconWidth: 40 - readonly property int averageSpeedIconHeight: 40 - readonly property int assistDistanceIconMargin: -5 - readonly property int assistDistanceIconWidth: 40 - readonly property int assistDistanceIconHeight: 40 - readonly property int assistPowerIconOffset: 49 - readonly property int assistPowerIconOffsetEnlarged: 100 - readonly property int assistPowerIconWidth: 30 - readonly property int assistPowerIconHeight: 30 - readonly property int assistPowerCircleRadius: 6 + readonly property int assistPowerCircleOffset: 8 readonly property int assistPowerCircleVerticalOffset: 5 - readonly property int assistPowerCircleTopMargin: 7 - readonly property int speedometerCornerArrowWidth: 40 - readonly property int speedometerCornerArrowHeight: 40 - readonly property int ringValueText: 14 readonly property int musicPlayerWidth: 260 readonly property int musicPlayerHeight: 75 @@ -170,36 +98,11 @@ QtObject { readonly property int naviPageTripTotalTextSize: 18 readonly property int naviPageTripTotalUnitSize: 18 - readonly property int naviPageGuideRadius: 90 - readonly property int naviPageGuideRightMargin: 15 - readonly property int naviPageGuideBottomMargin: 15 - readonly property int naviPageGuideArrowTopMargin: 30 - readonly property int naviPageGuideArrowLeftMargin: 50 - readonly property int naviPageGuideArrowWidth: 80 - readonly property int naviPageGuideArrowHeight: 80 - readonly property int naviPageGuideAddressBaselineMargin: 20 - readonly property int naviPageGuideAddressRightMargin: 20 - readonly property int naviPageGuideAddressTextSize: 14 - readonly property int naviPageGuideDistanceBaselineMargin: 20 - readonly property int naviPageGuideDistanceTextSize: 26 - readonly property int naviPageGuideUnitTextSize: 26 - - readonly property int tabBarTabHeight: 60 - readonly property int tabBarFontSize: 24 - readonly property int tabButtonTopMargin: 13 - readonly property int tabButtonIconWidth: 40 - readonly property int tabButtonIconHeight: 40 - readonly property int curtainMargin: 30 - readonly property int curtainCloseHeight: 30 - readonly property int configurationItemHeight: 59 readonly property int configurationItemSeparator: 1 - readonly property int configurationTextSize: 18 - readonly property int configurationTitleSize: 18 - readonly property int languageTextSize: 18 + readonly property int checkboxWidth: 20 readonly property int checkboxHeight: 20 readonly property int checkboxRadius: 5 - readonly property int checkboxLabelSize: 16 readonly property int checkboxTextOffset: 10 readonly property int checkboxSliderOffset: 20 readonly property int sliderHandleRadius: 10 @@ -209,49 +112,23 @@ QtObject { readonly property int switchWidth: 50 readonly property int switchHeight: 20 readonly property int switchIndicatorRadius: 15 - readonly property int unitButtonWidthMargin: 20 - readonly property int unitButtonHeight: 40 readonly property int unitButtonSpacing: 10 readonly property int unitFontSize: 16 - readonly property int bikeInfoComponentBaselineOffset: 30 - readonly property int bikeInfoComponentLineOffset: 14 readonly property int bikeInfoLineWidth: 2 - readonly property int bikeInfoLineDetailsMargin: 24 - readonly property int bikeInfoDetailsValueMargin: 20 - readonly property int bikeInfoDetailsBaselineMargin: 30 - readonly property int bikeInfoComponentHeaderTextSize: 18 - readonly property int bikeInfoInfoHeaderTextSize: 18 readonly property int bikeInfoCircleRadius: 17 readonly property int statsTripButtonWidth: 40 readonly property int statsTripButtonHeight: 40 readonly property int statsTripButtonMarginSide: 30 - readonly property int statsTripButtonMarginTop: 60 readonly property int statsEndtripWidth: 150 readonly property int statsEndtripHeight: 40 readonly property int statsEndtripMargin: 60 readonly property int statsEndtripTextSize: 16 - readonly property int statsDescriptionTextSize: 18 - readonly property int statsValueTextSize: 18 + readonly property int statsOdometerMarginRight: 30 readonly property int statsOdometerBaselineOffset: 40 readonly property int statsTopMargin: 28 - readonly property int statsHeight: 39 - readonly property int statsCenterOffset: 30 - readonly property int chartWidth: 440 - readonly property int chartHeight: 200 - readonly property int chartBottomMargin: 0 - readonly property int chartRightMargin: 0 - readonly property int chartLegendTextSize: 14 - readonly property int chartTimeLabelSize: 14 - readonly property int chartSpeedLabelSize: 14 - readonly property int chartAssistpowerLabelSize: 14 - readonly property int topViewHeight: 229 - readonly property int bottomViewHeight: 251 readonly property int horizontalViewSeparatorHeight: 1 - readonly property int horizontalViewSeparatorWidth: 170 - readonly property int verticalViewSeparatorHeightTop: 110 - readonly property int verticalViewSeparatorHeightBottom: 132 readonly property int verticalViewSeparatorWidth: 1 } diff --git a/basicsuite/ebike-ui/ClockView.qml b/basicsuite/ebike-ui/ClockView.qml index 21310c0..55ada41 100644 --- a/basicsuite/ebike-ui/ClockView.qml +++ b/basicsuite/ebike-ui/ClockView.qml @@ -52,6 +52,9 @@ Item { id: backgroundImage source: "images/top_curtain_drag.png" anchors.centerIn: parent + fillMode: Image.PreserveAspectFit + width: root.width * 0.225 + height: root.height * 0.075 } Text { @@ -66,7 +69,7 @@ Item { font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.clockFontSize + pixelSize: parent.height * 0.4 } } } diff --git a/basicsuite/ebike-ui/ConfigurationDrawer.qml b/basicsuite/ebike-ui/ConfigurationDrawer.qml index 258a264..f6f6094 100644 --- a/basicsuite/ebike-ui/ConfigurationDrawer.qml +++ b/basicsuite/ebike-ui/ConfigurationDrawer.qml @@ -55,17 +55,16 @@ Drawer { anchors { left: parent.left right: parent.right - leftMargin: UILayout.curtainMargin - rightMargin: UILayout.curtainMargin + leftMargin: root.width * 0.025 + rightMargin: root.width * 0.025 } - height: UILayout.tabBarTabHeight + contentHeight: parent.height * 0.175 background: Rectangle { color: Colors.curtainBackground } IconifiedTabButton { id: bikeInfoTabButton - height: parent.height bar: bar deselectedIcon: "images/info.png" selectedIcon: "images/info_selected.png" @@ -73,7 +72,6 @@ Drawer { IconifiedTabButton { id: configurationTabButton - height: parent.height bar: bar deselectedIcon: "images/settings.png" selectedIcon: "images/settings_selected.png" @@ -81,7 +79,6 @@ Drawer { IconifiedTabButton { id: viewTabButton - height: parent.height bar: bar deselectedIcon: "images/list.png" selectedIcon: "images/list_selected.png" @@ -94,10 +91,10 @@ Drawer { left: parent.left right: parent.right top: bar.bottom - leftMargin: UILayout.curtainMargin - rightMargin: UILayout.curtainMargin + leftMargin: parent.width * 0.025 + rightMargin: parent.width * 0.025 + bottom: parent.bottom } - height: 290 currentIndex: bar.currentIndex BikeInfoTab { @@ -124,12 +121,12 @@ Drawer { id: drawerClose anchors { top: stackLayout.bottom + topMargin: -stackLayout.height * 0.01 left: parent.left right: parent.right } - width: parent.width - height: drawerCloseImage.implicitHeight + height: drawerCloseImage.height color: "transparent" Image { @@ -137,6 +134,9 @@ 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 + fillMode: Image.PreserveAspectFit } MouseArea { diff --git a/basicsuite/ebike-ui/ConfigurationItem.qml b/basicsuite/ebike-ui/ConfigurationItem.qml index 350e910..100f13e 100644 --- a/basicsuite/ebike-ui/ConfigurationItem.qml +++ b/basicsuite/ebike-ui/ConfigurationItem.qml @@ -42,7 +42,7 @@ Rectangle { property string description color: "transparent" - height: UILayout.configurationItemHeight + height: stackLayout.height * 0.25 width: parent.width Text { @@ -55,7 +55,7 @@ Rectangle { font { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.configurationTextSize + pixelSize: height * 0.3 } color: Colors.tabItemColor verticalAlignment: Text.AlignVCenter diff --git a/basicsuite/ebike-ui/GeneralTab.qml b/basicsuite/ebike-ui/GeneralTab.qml index 697a451..70f661f 100644 --- a/basicsuite/ebike-ui/GeneralTab.qml +++ b/basicsuite/ebike-ui/GeneralTab.qml @@ -47,13 +47,13 @@ Item { anchors.right: parent.right Text { - height: UILayout.configurationItemHeight + height: stackLayout.height * 0.225 width: parent.width text: qsTr("GENERAL") font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.configurationTitleSize + pixelSize: height * 0.375 } color: Colors.tabTitleColor verticalAlignment: Text.AlignVCenter @@ -76,7 +76,7 @@ Item { font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.languageTextSize + pixelSize: height * 0.25 } color: Colors.languageTextColor verticalAlignment: Text.AlignVCenter @@ -100,7 +100,7 @@ Item { font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.checkboxLabelSize + pixelSize: parent.height * 0.225 } color: Colors.checkboxCheckedText } @@ -139,6 +139,7 @@ Item { Slider { id: brightnessSlider value: 4 + width: parent.width * 0.2 anchors { top: parent.top bottom: parent.bottom @@ -202,8 +203,8 @@ Item { RoundButton { id: kmhButton - width: UILayout.unitButtonWidthMargin * 2 + kmhText.implicitWidth - height: UILayout.unitButtonHeight + height: parent.height * 0.6 + width: height + kmhText.implicitWidth radius: height / 2 anchors { verticalCenter: parent.verticalCenter @@ -237,8 +238,8 @@ Item { RoundButton { id: mphButton - width: UILayout.unitButtonWidthMargin * 2 + mphText.implicitWidth - height: UILayout.unitButtonHeight + height: parent.height * 0.6 + width: height + mphText.implicitWidth radius: height / 2 anchors { verticalCenter: parent.verticalCenter diff --git a/basicsuite/ebike-ui/IconifiedTabButton.qml b/basicsuite/ebike-ui/IconifiedTabButton.qml index 572ce51..4762d94 100644 --- a/basicsuite/ebike-ui/IconifiedTabButton.qml +++ b/basicsuite/ebike-ui/IconifiedTabButton.qml @@ -43,27 +43,24 @@ TabButton { property string selectedIcon property var bar - contentItem: Image { - width: UILayout.tabButtonIconWidth - height: UILayout.tabButtonIconHeight - source: bar.currentItem === parent ? selectedIcon : deselectedIcon - fillMode: Image.Pad - anchors { - top: parent.top - topMargin: UILayout.tabButtonTopMargin - horizontalCenter: parent.horizontalCenter - } - } - background: Rectangle { color: Colors.tabBackground - height: parent.height + + Image { + height: parent.height + width: height + source: bar.currentItem === parent.parent ? selectedIcon : deselectedIcon + fillMode: Image.PreserveAspectFit + anchors.centerIn: parent + + } Rectangle { visible: bar.currentItem === parent.parent width: parent.width height: 2 anchors.bottom: parent.bottom + anchors.bottomMargin: height color: Colors.activeTabBorder } } diff --git a/basicsuite/ebike-ui/LightsBox.qml b/basicsuite/ebike-ui/LightsBox.qml index 327c819..b920864 100644 --- a/basicsuite/ebike-ui/LightsBox.qml +++ b/basicsuite/ebike-ui/LightsBox.qml @@ -41,20 +41,20 @@ import "./BikeStyle" // Bottom-left corner, controls Item { - width: 320 - height: UILayout.bottomViewHeight + width: root.width * 0.425 + height: root.height * 0.45 + property real imageMargin: Math.min(width, height) * 0.35 Image { id: lightsIcon - width: UILayout.lightsIconWidth - height: UILayout.lightsIconHeight + width: Math.min(parent.width, parent.height) * 0.35 + height: width source: datastore.lights ? "images/lights_on.png" : "images/lights_off.png" fillMode: Image.PreserveAspectFit anchors { - left: parent.left - leftMargin: UILayout.lightsIconLeft + right: parent.horizontalCenter bottom: parent.bottom - bottomMargin: UILayout.lightsIconBottom + bottomMargin: imageMargin } } @@ -64,7 +64,7 @@ Item { } Rectangle { - width: UILayout.horizontalViewSeparatorWidth + width: parent.width * 0.775 height: UILayout.horizontalViewSeparatorHeight anchors.top: parent.top anchors.left: parent.left @@ -73,7 +73,7 @@ Item { Rectangle { width: UILayout.verticalViewSeparatorWidth - height: UILayout.verticalViewSeparatorHeightBottom + height: parent.height * 0.475 anchors.bottom: parent.bottom anchors.right: parent.right color: Colors.separator diff --git a/basicsuite/ebike-ui/ModeBox.qml b/basicsuite/ebike-ui/ModeBox.qml index ad4eba7..490bc16 100644 --- a/basicsuite/ebike-ui/ModeBox.qml +++ b/basicsuite/ebike-ui/ModeBox.qml @@ -42,22 +42,21 @@ import "./BikeStyle" // Bottom-right corner, mode Item { - width: 320 - height: UILayout.bottomViewHeight + width: root.width * 0.425 + height: root.height * 0.45 Text { id: sportModeText anchors { - baseline: parent.bottom - baselineOffset: -UILayout.modeBottomOffset - horizontalCenter: parent.right - horizontalCenterOffset: -UILayout.naviModeCenterMargin + bottom: parent.bottom + bottomMargin: parent.height * 0.3 + left: parent.horizontalCenter } color: datastore.mode == DataStore.Sport ? Colors.modeSelected : Colors.modeUnselected font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.modeTextSize + pixelSize: parent.height * 0.1 } text: qsTr("SPORT") } @@ -65,15 +64,15 @@ Item { Text { id: cruiseModeText anchors { - baseline: sportModeText.baseline - baselineOffset: -UILayout.modeDistance + bottom: sportModeText.top + bottomMargin: parent.height * 0.025 horizontalCenter: sportModeText.horizontalCenter } color: datastore.mode == DataStore.Cruise ? Colors.modeSelected : Colors.modeUnselected font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.modeTextSize + pixelSize: parent.height * 0.1 } text: qsTr("CRUISE") } @@ -84,7 +83,7 @@ Item { } Rectangle { - width: UILayout.horizontalViewSeparatorWidth + width: parent.width * 0.775 height: UILayout.horizontalViewSeparatorHeight anchors.top: parent.top anchors.right: parent.right @@ -93,7 +92,7 @@ Item { Rectangle { width: UILayout.verticalViewSeparatorWidth - height: UILayout.verticalViewSeparatorHeightBottom + height: parent.height * 0.475 anchors.bottom: parent.bottom anchors.left: parent.left color: Colors.separator diff --git a/basicsuite/ebike-ui/NaviBox.qml b/basicsuite/ebike-ui/NaviBox.qml index 53b55c8..9a97cf8 100644 --- a/basicsuite/ebike-ui/NaviBox.qml +++ b/basicsuite/ebike-ui/NaviBox.qml @@ -41,22 +41,23 @@ import "./BikeStyle" // Top-right corner, navi Item { - width: 320 - height: UILayout.topViewHeight + id: rootItem + width: root.width * 0.425 + height: root.height * 0.45 property string arrowSource: "images/nav_right.png" property string distance: "0" property string unit: "m" + property real imageMargin: Math.min(width, height) * 0.275 Image { id: naviIcon - width: UILayout.naviIconWidth - height: UILayout.naviIconHeight + width: Math.min(parent.width, parent.height) * 0.375 + height: width source: arrowSource anchors { top: parent.top - topMargin: UILayout.naviIconTop - horizontalCenter: parent.right - horizontalCenterOffset: -UILayout.naviModeCenterMargin + topMargin: imageMargin + left: parent.horizontalCenter } } @@ -75,7 +76,7 @@ Item { font { family: "Montserrat, Bold" weight: Font.Bold - pixelSize: UILayout.naviTextSize + pixelSize: rootItem.height * 0.1 } text: Math.round(datastore.convertSmallDistance(distance) / 10) * 10 } @@ -91,7 +92,7 @@ Item { font { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.naviTextSize + pixelSize: rootItem.height * 0.1 } text: datastore.smallUnit } @@ -106,13 +107,13 @@ Item { font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.modeTextSize + pixelSize: rootItem.height * 0.1 } text: qsTr("NAVIGATE") } Rectangle { - width: UILayout.horizontalViewSeparatorWidth + width: parent.width * 0.775 height: UILayout.horizontalViewSeparatorHeight anchors.bottom: parent.bottom anchors.right: parent.right @@ -121,7 +122,7 @@ Item { Rectangle { width: UILayout.verticalViewSeparatorWidth - height: UILayout.verticalViewSeparatorHeightTop + height: parent.height * 0.475 anchors.top: parent.top anchors.left: parent.left color: Colors.separator diff --git a/basicsuite/ebike-ui/NaviGuide.qml b/basicsuite/ebike-ui/NaviGuide.qml index 1ba6f5e..a3c011f 100644 --- a/basicsuite/ebike-ui/NaviGuide.qml +++ b/basicsuite/ebike-ui/NaviGuide.qml @@ -44,16 +44,16 @@ Rectangle { property string distance: "0" property string unit: "m" - width: UILayout.naviPageGuideRadius * 2 + width: root.width * 0.14 height: width radius: width color: Colors.naviPageGuideBackground z: 1 Rectangle { - width: UILayout.naviPageGuideRadius + width: parent.width / 2 height: width - radius: 10 + radius: width * 0.1 color: Colors.naviPageGuideBackground anchors.right: parent.right anchors.bottom: parent.bottom @@ -63,49 +63,48 @@ Rectangle { id: guideArrow anchors { top: parent.top - topMargin: UILayout.naviPageGuideArrowTopMargin - left: parent.left - leftMargin: UILayout.naviPageGuideArrowLeftMargin + topMargin: parent.height * 0.075 + horizontalCenter: parent.horizontalCenter } source: arrowSource - width: UILayout.naviPageGuideArrowWidth - height: UILayout.naviPageGuideArrowHeight + width: parent.width * 0.5 + height: width } Text { id: naviAddressText anchors { - baseline: parent.bottom - baselineOffset: -UILayout.naviPageGuideAddressBaselineMargin + top: naviDistance.bottom + topMargin: parent.height * 0.025 right: parent.right - rightMargin: UILayout.naviPageGuideAddressRightMargin + rightMargin: parent.width * 0.1 } - width: 123 + width: parent.width * 0.725 horizontalAlignment: Text.AlignRight color: Colors.naviPageGuideAddressColor font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.naviPageGuideAddressTextSize + pixelSize: parent.height * 0.075 } fontSizeMode: Text.Fit wrapMode: Text.WordWrap - minimumPixelSize: 9 + minimumPixelSize: 5 text: address } Text { id: naviUnit anchors { - baseline: naviAddressText.baseline - baselineOffset: -UILayout.naviPageGuideDistanceBaselineMargin + bottom: naviDistance.bottom right: naviAddressText.right } + verticalAlignment: Text.AlignBottom color: Colors.naviPageGuideUnitColor font { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.naviPageGuideUnitTextSize + pixelSize: parent.height * 0.125 } text: datastore.smallUnit } @@ -113,26 +112,29 @@ Rectangle { Text { id: naviDistance anchors { - baseline: naviUnit.baseline + top: guideArrow.bottom right: naviUnit.left - rightMargin: 10 + rightMargin: parent.width * 0.05 } + verticalAlignment: Text.AlignBottom color: Colors.naviPageGuideTextColor font { family: "Montserrat, Bold" weight: Font.Bold - pixelSize: UILayout.naviPageGuideDistanceTextSize + pixelSize: parent.height * 0.175 } text: Math.round(datastore.convertSmallDistance(distance) / 10) * 10 } Image { source: "images/navigation_widget_shadow.png" + width: parent.width * 1.05 + height: width anchors { horizontalCenter: parent.horizontalCenter verticalCenter: parent.verticalCenter - horizontalCenterOffset: 1 - verticalCenterOffset: 1 + horizontalCenterOffset: parent.width * 0.025 + verticalCenterOffset: parent.height * 0.025 } z: -1 } diff --git a/basicsuite/ebike-ui/NaviPage.qml b/basicsuite/ebike-ui/NaviPage.qml index e6c8805..e059e68 100644 --- a/basicsuite/ebike-ui/NaviPage.qml +++ b/basicsuite/ebike-ui/NaviPage.qml @@ -290,8 +290,8 @@ Page { anchors { right: parent.right bottom: parent.bottom - rightMargin: UILayout.naviPageGuideRightMargin - bottomMargin: UILayout.naviPageGuideBottomMargin + rightMargin: root.width * 0.015 + bottomMargin: anchors.rightMargin } arrowSource: naviGuideArrowSource distance: naviGuideDistance diff --git a/basicsuite/ebike-ui/SpeedView.qml b/basicsuite/ebike-ui/SpeedView.qml index d62e710..1a153d3 100644 --- a/basicsuite/ebike-ui/SpeedView.qml +++ b/basicsuite/ebike-ui/SpeedView.qml @@ -39,28 +39,28 @@ import DataStore 1.0 import "./BikeStyle" Rectangle { - width: UILayout.speedViewRadius * 2 + 2 - height: UILayout.speedViewRadius * 2 + 2 + id: speedViewItem + width: root.width * 0.35 + height: width color: "transparent" - radius: width * 0.5 + radius: width z: 1 - anchors { + anchors{ + verticalCenter: parent.verticalCenter horizontalCenter: parent.horizontalCenter - top: parent.top - topMargin: UILayout.speedViewTop } property int dotcount: UILayout.speedViewDots - property int curvewidth: UILayout.speedViewInnerWidth - property int speedTextSize: UILayout.speedTextSize - property int speedBaselineOffset: UILayout.speedBaselineOffset + 1 - property int innerRadius: UILayout.speedViewInnerRadius - property int speedUnitsSize: UILayout.speedUnitsSize - property int speedUnitBaselineOffset: UILayout.speedTextUnitMargin - property int speedIconsOffset: UILayout.speedIconsCenterOffset + property int curvewidth: Math.min(width, height) * 0.0425 + property int speedTextSize: height * 0.4 + property int speedBaselineOffset: height * 0.45 + property int innerRadius: width * 0.45 + property int speedUnitsSize: height * 0.05 + property int speedUnitBaselineOffset: height * 0.075 + property int speedIconsOffset: width * 0.25 property int speedInfoTextsOffset: 0 - property int speedInfoTextsSize: UILayout.speedInfoTextsSize - property int speedInfoUnitsOffset: UILayout.speedInfoUnitsOffset - property int assistPowerIconOffset: UILayout.assistPowerIconOffset + property int speedInfoTextsSize: speedTextSize * 0.45 + property int speedInfoUnitsOffset: height * 0.075 + property int assistPowerIconOffset: height * 0.175 property bool enlarged: false property alias cornerRectangle: cornerRectangle property bool showZero: false @@ -143,13 +143,13 @@ Rectangle { Image { id: averageSpeedIcon - width: UILayout.averageSpeedIconWidth - height: UILayout.averageSpeedIconHeight + width: parent.width * 0.075 + height: width + fillMode: Image.PreserveAspectFit source: "images/speed.png" anchors { horizontalCenter: averageSpeedText.horizontalCenter bottom: averageSpeedText.top - bottomMargin: UILayout.averageSpeedIconMargin } visible: speedView.state !== "CORNERED" } @@ -195,13 +195,13 @@ Rectangle { Image { id: assistDistanceIcon - width: UILayout.assistDistanceIconWidth - height: UILayout.assistDistanceIconHeight + width: parent.width * 0.075 + height: width + fillMode: Image.PreserveAspectFit source: "images/battery.png" anchors { horizontalCenter: assistDistanceText.horizontalCenter bottom: assistDistanceText.top - bottomMargin: UILayout.assistDistanceIconMargin } visible: speedView.state !== "CORNERED" } @@ -209,8 +209,9 @@ Rectangle { // Assist power icon Image { id: assistPowerIcon - width: UILayout.assistPowerTconWidth - height: UILayout.assistPowerTconHeight + width: parent.width * 0.125 + height: width + fillMode: Image.PreserveAspectFit source: "images/assist.png" anchors { horizontalCenter: speedView.horizontalCenter @@ -229,9 +230,9 @@ Rectangle { // Assist power circles Rectangle { id: assistPowerIcon1 - width: UILayout.assistPowerCircleRadius * 2 + width: parent.width * 0.0375 height: width - radius: UILayout.assistPowerCircleRadius + radius: parent.width * 0.0375 anchors { right: assistPowerIcon2.left rightMargin: UILayout.assistPowerCircleOffset @@ -245,14 +246,14 @@ Rectangle { Rectangle { id: assistPowerIcon2 - width: UILayout.assistPowerCircleRadius * 2 + width: parent.width * 0.0375 height: width - radius: UILayout.assistPowerCircleRadius + radius: parent.width * 0.0375 anchors { right: parent.horizontalCenter rightMargin: UILayout.assistPowerCircleOffset / 2 top: assistPowerIcon.bottom - topMargin: UILayout.assistPowerCircleTopMargin + topMargin: parent.height * 0.02 } color: Colors.assistPowerEmpty gradient: datastore.assistpower > 25.0 ? assistPowerGradient : null @@ -261,14 +262,14 @@ Rectangle { Rectangle { id: assistPowerIcon3 - width: UILayout.assistPowerCircleRadius * 2 + width: parent.width * 0.0375 height: width - radius: UILayout.assistPowerCircleRadius + radius: parent.width * 0.0375 anchors { left: parent.horizontalCenter leftMargin: UILayout.assistPowerCircleOffset / 2 top: assistPowerIcon.bottom - topMargin: UILayout.assistPowerCircleTopMargin + topMargin: parent.height * 0.02 } color: Colors.assistPowerEmpty gradient: datastore.assistpower > 50.0 ? assistPowerGradient : null @@ -277,9 +278,9 @@ Rectangle { Rectangle { id: assistPowerIcon4 - width: UILayout.assistPowerCircleRadius * 2 + width: parent.width * 0.0375 height: width - radius: UILayout.assistPowerCircleRadius + radius: parent.width * 0.0375 anchors { left: assistPowerIcon3.right leftMargin: UILayout.assistPowerCircleOffset @@ -295,9 +296,9 @@ Rectangle { Text { anchors { baseline: parent.bottom - baselineOffset: 20 + baselineOffset: parent.height * 0.04 right: parent.horizontalCenter - rightMargin: 10 + rightMargin: parent.width * 0.02 } visible: speedView.state !== "CORNERED" @@ -305,7 +306,7 @@ Rectangle { font { family: "Montserrat, Regular" weight: Font.Normal - pixelSize: UILayout.ringValueText + pixelSize: parent.height * 0.04 } text: "0" } @@ -313,9 +314,9 @@ Rectangle { Text { anchors { baseline: parent.bottom - baselineOffset: 20 + baselineOffset: parent.height * 0.04 left: parent.horizontalCenter - leftMargin: 10 + leftMargin: parent.width * 0.02 } visible: speedView.state !== "CORNERED" @@ -323,7 +324,7 @@ Rectangle { font { family: "Montserrat, Regular" weight: Font.Normal - pixelSize: UILayout.ringValueText + pixelSize: parent.height * 0.04 } text: "0 %" } @@ -331,9 +332,8 @@ Rectangle { Text { anchors { baseline: parent.verticalCenter - baselineOffset: -10 right: parent.left - rightMargin: 9 + rightMargin: parent.width * 0.02 } visible: speedView.state !== "CORNERED" @@ -341,7 +341,7 @@ Rectangle { font { family: "Montserrat, Regular" weight: Font.Normal - pixelSize: UILayout.ringValueText + pixelSize: parent.height * 0.04 } text: "30" } @@ -349,9 +349,8 @@ Rectangle { Text { anchors { baseline: parent.verticalCenter - baselineOffset: -10 left: parent.right - leftMargin: 9 + leftMargin: parent.width * 0.02 } visible: speedView.state !== "CORNERED" @@ -359,7 +358,7 @@ Rectangle { font { family: "Montserrat, Regular" weight: Font.Normal - pixelSize: UILayout.ringValueText + pixelSize: parent.height * 0.04 } text: "50 %" } @@ -367,9 +366,9 @@ Rectangle { Text { anchors { baseline: parent.top - baselineOffset: -10 + baselineOffset: -parent.height * 0.02 right: parent.horizontalCenter - rightMargin: 10 + rightMargin: parent.width * 0.02 } visible: speedView.state !== "CORNERED" @@ -377,7 +376,7 @@ Rectangle { font { family: "Montserrat, Regular" weight: Font.Normal - pixelSize: UILayout.ringValueText + pixelSize: parent.height * 0.04 } text: "60" } @@ -385,9 +384,9 @@ Rectangle { Text { anchors { baseline: parent.top - baselineOffset: -10 + baselineOffset: -parent.height * 0.02 left: parent.horizontalCenter - leftMargin: 10 + leftMargin: parent.width * 0.02 } visible: speedView.state !== "CORNERED" @@ -395,39 +394,43 @@ Rectangle { font { family: "Montserrat, Regular" weight: Font.Normal - pixelSize: UILayout.ringValueText + pixelSize: parent.height * 0.04 } text: "100 %" } Rectangle { id: cornerRectangle - width: UILayout.speedViewRadiusMinified + width: parent.width / 2 height: width // By default this is centered, and invisible anchors.horizontalCenter: speedView.horizontalCenter anchors.verticalCenter: speedView.verticalCenter color: "transparent" - radius: 10 + radius: width * 0.1 z: -1 Image { source: "images/small_speedometer_arrow.png" - width: UILayout.speedometerCornerArrowWidth - height: UILayout.speedometerCornerArrowHeight + width: parent.width * 0.25 + height: width anchors.left: parent.left + anchors.leftMargin: parent.width * 0.075 anchors.bottom: parent.bottom + anchors.bottomMargin: parent.height * 0.075 visible: swipeView.currentIndex != 1 } } Image { source: "images/small_speedometer_shadow.png" + width: parent.width * 1.05 + height: width anchors { horizontalCenter: parent.horizontalCenter verticalCenter: parent.verticalCenter - horizontalCenterOffset: 1 - verticalCenterOffset: 1 + horizontalCenterOffset: parent.width * 0.025 + verticalCenterOffset: parent.height * 0.025 } z: -1 @@ -436,7 +439,7 @@ Rectangle { Canvas { id: speedArc - anchors.fill: parent + anchors.fill: speedView Component.onCompleted: { datastore.onSpeedChanged.connect(speedArc.requestPaint) diff --git a/basicsuite/ebike-ui/StatsBox.qml b/basicsuite/ebike-ui/StatsBox.qml index 7d6f24c..76254db 100644 --- a/basicsuite/ebike-ui/StatsBox.qml +++ b/basicsuite/ebike-ui/StatsBox.qml @@ -42,19 +42,21 @@ import "./BikeStyle" // Top-left corner, stats Item { - width: 320 - height: UILayout.topViewHeight + width: root.width * 0.425 + height: root.height * 0.45 + property real imageMargin: Math.min(width, height) * 0.3 Image { id: tripIcon - width: UILayout.statsIconWidth - height: UILayout.statsIconHeight + width: Math.min(parent.width, parent.height) * 0.15 + height: width source: "images/trip.png" + fillMode: Image.PreserveAspectFit anchors { - top: parent.top left: parent.left - topMargin: UILayout.statsIconTop - leftMargin: UILayout.statsIconLeft + leftMargin: imageMargin + top: parent.top + topMargin: imageMargin } } @@ -62,46 +64,45 @@ Item { id: tripText color: Colors.distanceText anchors { - top: tripIcon.top - topMargin: UILayout.statsTextTopOffset + bottom: tripIcon.verticalCenter + bottomMargin: -imageMargin * 0.05 left: tripIcon.right - leftMargin: UILayout.statsTextSeparator } font { family: "Montserrat, Bold" weight: Font.Bold - pixelSize: UILayout.statsTextSize + pixelSize: parent.height * 0.1 } text: datastore.trip.toFixed(1) + verticalAlignment: Text.AlignBottom } Text { id: tripUnitText color: Colors.distanceUnit anchors { - baseline: tripIcon.bottom - baselineOffset: -UILayout.statsUnitBaselineOffset + top: tripText.bottom left: tripIcon.right - leftMargin: UILayout.statsTextSeparator } font { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.statsTextSize + pixelSize: parent.height * 0.065 } + verticalAlignment: Text.AlignTop text: datastore.unit === DataStore.Kmh ? "km" : "mi." } Image { id: calIcon - width: UILayout.statsIconWidth - height: UILayout.statsIconHeight + width: Math.min(parent.width, parent.height) * 0.15 + height: width source: "images/calories.png" anchors { - top: tripIcon.bottom left: parent.left - topMargin: UILayout.statsIconSeparator - leftMargin: UILayout.statsIconLeft + leftMargin: imageMargin + top: tripIcon.bottom + topMargin: imageMargin * 0.25 } } @@ -109,15 +110,14 @@ Item { id: calText color: Colors.distanceText anchors { - top: calIcon.top - topMargin: UILayout.statsTextTopOffset + bottom: calIcon.verticalCenter + bottomMargin: -imageMargin * 0.05 left: calIcon.right - leftMargin: UILayout.statsTextSeparator } font { family: "Montserrat, Bold" weight: Font.Bold - pixelSize: UILayout.statsTextSize + pixelSize: parent.height * 0.1 } text: datastore.calories.toFixed(0) } @@ -126,21 +126,19 @@ Item { id: calUnitText color: Colors.distanceUnit anchors { - baseline: calIcon.bottom - baselineOffset: -UILayout.statsUnitBaselineOffset + top: calText.bottom left: calIcon.right - leftMargin: UILayout.statsTextSeparator } font { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.statsTextSize + pixelSize: parent.height * 0.065 } text: "kcal" } Rectangle { - width: UILayout.horizontalViewSeparatorWidth + width: parent.width * 0.775 height: UILayout.horizontalViewSeparatorHeight anchors.bottom: parent.bottom anchors.left: parent.left @@ -149,7 +147,7 @@ Item { Rectangle { width: UILayout.verticalViewSeparatorWidth - height: UILayout.verticalViewSeparatorHheightTop + height: parent.height * 0.475 anchors.top: parent.top anchors.right: parent.right color: Colors.separator diff --git a/basicsuite/ebike-ui/StatsPage.qml b/basicsuite/ebike-ui/StatsPage.qml index 959b813..3a0351e 100644 --- a/basicsuite/ebike-ui/StatsPage.qml +++ b/basicsuite/ebike-ui/StatsPage.qml @@ -180,7 +180,9 @@ Page { } // Odometer - Item { + Rectangle { + color: "transparent" + border.color: "red" width: odometerText.width + odometerUnit.width + odometerDescription.width + 2 * 4 anchors { right: parent.right @@ -199,7 +201,7 @@ Page { font { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.statsDescriptionTextSize + pixelSize: root.height * 0.035 } } @@ -213,7 +215,7 @@ Page { font { family: "Montserrat, Bold" weight: Font.Bold - pixelSize: UILayout.statsValueTextSize + pixelSize: root.height * 0.035 } } @@ -226,7 +228,7 @@ Page { font { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.statsDescriptionTextSize + pixelSize: root.height * 0.035 } } } @@ -237,11 +239,11 @@ Page { left: parent.left right: parent.right top: endTrip.bottom - bottom: tripChart.top - leftMargin: UILayout.statsTripButtonMarginSide - rightMargin: UILayout.statsTripButtonMarginSide + leftMargin: root.width * 0.025 + rightMargin: root.width * 0.025 topMargin: UILayout.statsTopMargin } + height: root.height * 0.2 // Hide any excess content, since we are using margins clip: true @@ -299,16 +301,18 @@ Page { TripChart { id: tripChart - width: UILayout.chartWidth - height: UILayout.chartHeight anchors { bottom: parent.bottom right: parent.right - bottomMargin: UILayout.chartBottomMargin - rightMargin: UILayout.chartRightMargin + bottomMargin: root.height * 0.0125 + rightMargin: root.width * 0.02 + top: tripView.bottom + left: parent.left + leftMargin: root.width * 0.175 } animationRunning: tripView.currentIndex === 0 tripDetails: tripdata.get(currentIndex) currentIndex: tripView.currentIndex + visible: swipeView.currentIndex === 0 } } diff --git a/basicsuite/ebike-ui/StatsRow.qml b/basicsuite/ebike-ui/StatsRow.qml index df0f523..fe49d68 100644 --- a/basicsuite/ebike-ui/StatsRow.qml +++ b/basicsuite/ebike-ui/StatsRow.qml @@ -43,8 +43,9 @@ Item { property string leftValue property string rightTitle property string rightValue - height: UILayout.statsHeight + height: parent.height / 3 width: parent.width + property int rowTextSize: height * 0.5 Text { text: leftTitle @@ -55,35 +56,35 @@ Item { font { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.statsDescriptionTextSize + pixelSize: rowTextSize } } Text { text: leftValue anchors.right: parent.horizontalCenter - anchors.rightMargin: UILayout.statsCenterOffset + anchors.rightMargin: parent.width * 0.0125 height: parent.height color: Colors.statsValueText verticalAlignment: Text.AlignVCenter font { family: "Montserrat, Bold" weight: Font.Bold - pixelSize: UILayout.statsValueTextSize + pixelSize: rowTextSize } } Text { text: rightTitle anchors.left: parent.horizontalCenter - anchors.leftMargin: UILayout.statsCenterOffset + anchors.leftMargin: parent.width * 0.0125 height: parent.height color: Colors.statsDescriptionText verticalAlignment: Text.AlignVCenter font { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.statsDescriptionTextSize + pixelSize: rowTextSize } } @@ -96,7 +97,7 @@ Item { font { family: "Montserrat, Bold" weight: Font.Bold - pixelSize: UILayout.statsValueTextSize + pixelSize: rowTextSize } } } diff --git a/basicsuite/ebike-ui/TripChart.qml b/basicsuite/ebike-ui/TripChart.qml index 72812a5..0bc3a7d 100644 --- a/basicsuite/ebike-ui/TripChart.qml +++ b/basicsuite/ebike-ui/TripChart.qml @@ -63,7 +63,7 @@ ChartView { font { family: "Montserrat, Regular" weight: Font.Normal - pixelSize: UILayout.chartLegendTextSize + pixelSize: parent.height * 0.025 } } @@ -87,7 +87,7 @@ ChartView { labelsFont { family: "Montserrat, Light" weight: Font.Light - pixelSize: UILayout.chartTimeLabelSize + pixelSize: parent.height * 0.02 } } @@ -100,7 +100,7 @@ ChartView { labelsFont { family: "Montserrat, Regular" weight: Font.Normal - pixelSize: UILayout.chartSpeedLabelSize + pixelSize: parent.height * 0.0225 } titleVisible: false lineVisible: false @@ -115,7 +115,7 @@ ChartView { labelsFont { family: "Montserrat, Regular" weight: Font.Normal - pixelSize: UILayout.chartAssistpowerLabelSize + pixelSize: parent.height * 0.0225 } titleVisible: false lineVisible: false diff --git a/basicsuite/ebike-ui/ViewTab.qml b/basicsuite/ebike-ui/ViewTab.qml index 040436a..8670b2a 100644 --- a/basicsuite/ebike-ui/ViewTab.qml +++ b/basicsuite/ebike-ui/ViewTab.qml @@ -50,13 +50,13 @@ Item { anchors.right: parent.right Text { - height: UILayout.configurationItemHeight + height: stackLayout.height * 0.225 width: parent.width text: qsTr("VIEW") font { family: "Montserrat, Medium" weight: Font.Medium - pixelSize: UILayout.configurationTitleSize + pixelSize: height * 0.375 } color: Colors.tabTitleColor verticalAlignment: Text.AlignVCenter @@ -108,8 +108,8 @@ Item { RoundButton { id: resetButton - width: UILayout.unitButtonWidthMargin * 2 + mphText.implicitWidth - height: UILayout.unitButtonHeight + height: parent.height * 0.6 + width: height + mphText.implicitWidth radius: height / 2 anchors { verticalCenter: parent.verticalCenter diff --git a/basicsuite/ebike-ui/app.pro b/basicsuite/ebike-ui/app.pro index dd993f1..d7094dc 100644 --- a/basicsuite/ebike-ui/app.pro +++ b/basicsuite/ebike-ui/app.pro @@ -138,4 +138,3 @@ export(INSTALLS) OTHER_FILES += $${content.files} INSTALLS += target content - diff --git a/basicsuite/ebike-ui/images/battery.png b/basicsuite/ebike-ui/images/battery.png Binary files differindex 170c48d..90280ca 100644 --- a/basicsuite/ebike-ui/images/battery.png +++ b/basicsuite/ebike-ui/images/battery.png diff --git a/basicsuite/ebike-ui/images/curtain_shadow_handle.png b/basicsuite/ebike-ui/images/curtain_shadow_handle.png Binary files differindex afaf3ec..6e57a56 100644 --- a/basicsuite/ebike-ui/images/curtain_shadow_handle.png +++ b/basicsuite/ebike-ui/images/curtain_shadow_handle.png diff --git a/basicsuite/ebike-ui/images/small_speedometer_arrow.png b/basicsuite/ebike-ui/images/small_speedometer_arrow.png Binary files differindex 4959e8d..728825d 100644 --- a/basicsuite/ebike-ui/images/small_speedometer_arrow.png +++ b/basicsuite/ebike-ui/images/small_speedometer_arrow.png diff --git a/basicsuite/ebike-ui/images/speed.png b/basicsuite/ebike-ui/images/speed.png Binary files differindex 17d2e6d..400ac9e 100644 --- a/basicsuite/ebike-ui/images/speed.png +++ b/basicsuite/ebike-ui/images/speed.png diff --git a/basicsuite/ebike-ui/images/top_curtain_drag.png b/basicsuite/ebike-ui/images/top_curtain_drag.png Binary files differindex 28388c6..46e9f90 100644 --- a/basicsuite/ebike-ui/images/top_curtain_drag.png +++ b/basicsuite/ebike-ui/images/top_curtain_drag.png diff --git a/basicsuite/ebike-ui/main.qml b/basicsuite/ebike-ui/main.qml index 33fe5e8..c6e3675 100644 --- a/basicsuite/ebike-ui/main.qml +++ b/basicsuite/ebike-ui/main.qml @@ -76,81 +76,34 @@ Rectangle { id: speedView onShowMain: swipeView.currentIndex = 1 showZero: naviPage.targetEdit.activeFocus - + property real enlargedMultiplier: 1.19 + property real corneredMultiplier: 0.25 states: [ State { - name: "" - when: swipeView.currentIndex == 1 && (!speedView.enlarged) - PropertyChanges { - target: speedView - width: UILayout.speedViewRadius * 2 + 2 - height: UILayout.speedViewRadius * 2 + 2 - anchors.topMargin: UILayout.speedViewTop - anchors.leftMargin: 0 - anchors.bottomMargin: 0 - color: "transparent" - dotcount: UILayout.speedViewDots - curvewidth: UILayout.speedViewInnerWidth - speedTextSize: UILayout.speedTextSize - speedBaselineOffset: UILayout.speedBaselineOffset + 1 - innerRadius: UILayout.speedViewInnerRadius - speedUnitsSize: UILayout.speedUnitsSize - speedUnitBaselineOffset: UILayout.speedTextUnitMargin - speedIconsOffset: UILayout.speedIconsCenterOffset - speedInfoTextsOffset: 0 - speedInfoTextsSize: UILayout.speedInfoTextsSize - speedInfoUnitsOffset: UILayout.speedInfoUnitsOffset - assistPowerIconOffset: UILayout.assistPowerIconOffset - } - AnchorChanges { - target: speedView - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.left: undefined - anchors.bottom: undefined - } - PropertyChanges { - target: speedView.cornerRectangle - color: "transparent" - } - AnchorChanges { - target: speedView.cornerRectangle - anchors.horizontalCenter: speedView.horizontalCenter - anchors.verticalCenter: speedView.verticalCenter - anchors.left: undefined - anchors.bottom: undefined - } - StateChangeScript { - script: { - if (musicPlayer.lastMusicPlayerState === "" && (!drawer.viewTab.musicPlayerSwitch.checked)) - musicPlayer.state = ""; - } - } - }, - State { name: "CORNERED" when: swipeView.currentIndex != 1 PropertyChanges { target: speedView - width: UILayout.speedViewRadiusMinified * 2 - height: UILayout.speedViewRadiusMinified * 2 - anchors.topMargin: 0 - anchors.leftMargin: UILayout.speedViewCornerLeftMargin - anchors.bottomMargin: UILayout.speedViewCornerBottomMargin + width: root.width * 0.14 + height: width + anchors.leftMargin: root.width * 0.015 + anchors.bottomMargin: anchors.leftMargin color: Colors.speedViewBackgroundCornered dotcount: UILayout.speedViewDotsMinified - curvewidth: UILayout.speedViewInnerWidthMinified - speedTextSize: UILayout.speedTextSizeMinified - speedBaselineOffset: UILayout.speedBaselineOffsetMinified - innerRadius: UILayout.speedViewInnerRadiusMinified - speedUnitBaselineOffset: UILayout.speedTextUnitMarginMinified + speedTextSize: height * 0.475 + speedBaselineOffset: height * 0.4 + innerRadius: width * 0.45 * 0.875 + speedUnitBaselineOffset: height * 0.1 + speedUnitsSize: height * 0.09 + curvewidth: Math.min(width, height) * 0.055 } AnchorChanges { target: speedView anchors.horizontalCenter: undefined anchors.top: undefined - anchors.left: parent.left - anchors.bottom: parent.bottom + anchors.verticalCenter: undefined + anchors.left: root.left + anchors.bottom: root.bottom } PropertyChanges { target: speedView.cornerRectangle @@ -175,20 +128,18 @@ Rectangle { when: swipeView.currentIndex == 1 && speedView.enlarged PropertyChanges { target: speedView - width: UILayout.speedViewRadiusEnlarged * 2 - height: UILayout.speedViewRadiusEnlarged * 2 - anchors.topMargin: 35 + width: root.width * 0.35 * enlargedMultiplier + height: width dotcount: UILayout.speedViewDotsEnlarged - speedTextSize: UILayout.speedTextSizeEnlarged - speedBaselineOffset: UILayout.speedBaselineOffsetEnlarged - innerRadius: UILayout.speedViewInnerRadiusEnlarged - speedUnitsSize: UILayout.speedUnitsSizeEnlarged - speedUnitBaselineOffset: UILayout.speedTextUnitMarginEnlarged - speedIconsOffset: UILayout.speedIconsCenterOffsetEnlarged - speedInfoTextsOffset: UILayout.speedInfoTextsOffsetEnlarged - speedInfoTextsSize: UILayout.speedInfoTextsSizeEnlarged - speedInfoUnitsOffset: UILayout.speedInfoUnitsOffsetEnlarged - assistPowerIconOffset: UILayout.assistPowerIconOffsetEnlarged + speedTextSize: height * 0.4 * enlargedMultiplier + innerRadius: width * 0.45 + speedUnitsSize: height * 0.05 * 1.125 + speedUnitBaselineOffset: height * 0.075 * enlargedMultiplier + speedIconsOffset: width * 0.25 + speedInfoTextsOffset: 0 + speedInfoTextsSize: speedTextSize * 0.45 * enlargedMultiplier + speedInfoUnitsOffset: height * 0.075 * enlargedMultiplier + assistPowerIconOffset: height * 0.175 * enlargedMultiplier } PropertyChanges { target: mainPage.statsButton @@ -217,9 +168,7 @@ Rectangle { AnchorChanges { target: speedView anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.left: undefined - anchors.bottom: undefined + anchors.verticalCenter: parent.verticalCenter } StateChangeScript { script: { @@ -280,7 +229,7 @@ Rectangle { // Configuration and settings drawer ConfigurationDrawer { id: drawer - height: 350 + height: root.height * 0.475 width: root.width edge: Qt.TopEdge dragMargin: 20 @@ -317,34 +266,4 @@ Rectangle { target: datastore onDemoReset: drawer.close() } - - // Virtual keyboard - InputPanel { - id: inputPanel - z: 99 - x: 0 - y: root.height - width: root.width - - states: State { - name: "visible" - when: inputPanel.active - PropertyChanges { - target: inputPanel - y: root.height - inputPanel.height - } - } - transitions: Transition { - from: "" - to: "visible" - reversible: true - ParallelAnimation { - NumberAnimation { - properties: "y" - duration: 250 - easing.type: Easing.InOutQuad - } - } - } - } } diff --git a/basicsuite/shared/fonts.qrc b/basicsuite/shared/fonts.qrc index 13b8cb2..ccc8864 100644 --- a/basicsuite/shared/fonts.qrc +++ b/basicsuite/shared/fonts.qrc @@ -2,14 +2,18 @@ <qresource prefix="/"> <file>fonts/TitilliumWeb-Black.ttf</file> <file>fonts/TitilliumWeb-Bold.ttf</file> - <file>fonts/TitilliumWeb-BoldItalic.ttf</file> <file>fonts/TitilliumWeb-ExtraLight.ttf</file> - <file>fonts/TitilliumWeb-ExtraLightItalic.ttf</file> - <file>fonts/TitilliumWeb-Italic.ttf</file> <file>fonts/TitilliumWeb-Light.ttf</file> - <file>fonts/TitilliumWeb-LightItalic.ttf</file> <file>fonts/TitilliumWeb-Regular.ttf</file> <file>fonts/TitilliumWeb-SemiBold.ttf</file> - <file>fonts/TitilliumWeb-SemiBoldItalic.ttf</file> + <file>fonts/ebike-fonts/fontawesome-webfont.ttf</file> + <file>fonts/ebike-fonts/Montserrat-Bold.ttf</file> + <file>fonts/ebike-fonts/Montserrat-Light.ttf</file> + <file>fonts/ebike-fonts/Montserrat-Medium.ttf</file> + <file>fonts/ebike-fonts/Montserrat-Regular.ttf</file> + <file>fonts/ebike-fonts/Teko-Bold.ttf</file> + <file>fonts/ebike-fonts/Teko-Light.ttf</file> + <file>fonts/ebike-fonts/Teko-Medium.ttf</file> + <file>fonts/ebike-fonts/Teko-Regular.ttf</file> </qresource> </RCC> diff --git a/basicsuite/shared/fonts/ebike-fonts/Montserrat-Bold.ttf b/basicsuite/shared/fonts/ebike-fonts/Montserrat-Bold.ttf Binary files differnew file mode 100644 index 0000000..8e9a5f3 --- /dev/null +++ b/basicsuite/shared/fonts/ebike-fonts/Montserrat-Bold.ttf diff --git a/basicsuite/shared/fonts/ebike-fonts/Montserrat-Light.ttf b/basicsuite/shared/fonts/ebike-fonts/Montserrat-Light.ttf Binary files differnew file mode 100644 index 0000000..e66dc5b --- /dev/null +++ b/basicsuite/shared/fonts/ebike-fonts/Montserrat-Light.ttf diff --git a/basicsuite/shared/fonts/ebike-fonts/Montserrat-Medium.ttf b/basicsuite/shared/fonts/ebike-fonts/Montserrat-Medium.ttf Binary files differnew file mode 100644 index 0000000..88d70b8 --- /dev/null +++ b/basicsuite/shared/fonts/ebike-fonts/Montserrat-Medium.ttf diff --git a/basicsuite/shared/fonts/ebike-fonts/Montserrat-Regular.ttf b/basicsuite/shared/fonts/ebike-fonts/Montserrat-Regular.ttf Binary files differnew file mode 100644 index 0000000..626355a --- /dev/null +++ b/basicsuite/shared/fonts/ebike-fonts/Montserrat-Regular.ttf diff --git a/basicsuite/shared/fonts/ebike-fonts/Teko-Bold.ttf b/basicsuite/shared/fonts/ebike-fonts/Teko-Bold.ttf Binary files differnew file mode 100644 index 0000000..d061824 --- /dev/null +++ b/basicsuite/shared/fonts/ebike-fonts/Teko-Bold.ttf diff --git a/basicsuite/shared/fonts/ebike-fonts/Teko-Light.ttf b/basicsuite/shared/fonts/ebike-fonts/Teko-Light.ttf Binary files differnew file mode 100644 index 0000000..ec5194a --- /dev/null +++ b/basicsuite/shared/fonts/ebike-fonts/Teko-Light.ttf diff --git a/basicsuite/shared/fonts/ebike-fonts/Teko-Medium.ttf b/basicsuite/shared/fonts/ebike-fonts/Teko-Medium.ttf Binary files differnew file mode 100644 index 0000000..cc38086 --- /dev/null +++ b/basicsuite/shared/fonts/ebike-fonts/Teko-Medium.ttf diff --git a/basicsuite/shared/fonts/ebike-fonts/Teko-Regular.ttf b/basicsuite/shared/fonts/ebike-fonts/Teko-Regular.ttf Binary files differnew file mode 100644 index 0000000..3161e63 --- /dev/null +++ b/basicsuite/shared/fonts/ebike-fonts/Teko-Regular.ttf diff --git a/basicsuite/shared/fonts/ebike-fonts/fontawesome-webfont.ttf b/basicsuite/shared/fonts/ebike-fonts/fontawesome-webfont.ttf Binary files differnew file mode 100644 index 0000000..35acda2 --- /dev/null +++ b/basicsuite/shared/fonts/ebike-fonts/fontawesome-webfont.ttf diff --git a/basicsuite/shared/main.cpp b/basicsuite/shared/main.cpp index 4afbbe4..d22ea8a 100644 --- a/basicsuite/shared/main.cpp +++ b/basicsuite/shared/main.cpp @@ -95,15 +95,15 @@ int main(int argc, char **argv) QFontDatabase::addApplicationFont(":/fonts/TitilliumWeb-Black.ttf"); //For eBike demo - QFontDatabase::addApplicationFont(":/fonts/Montserrat-Bold.ttf"); - QFontDatabase::addApplicationFont(":/fonts/Montserrat-Light.ttf"); - QFontDatabase::addApplicationFont(":/fonts/Montserrat-Medium.ttf"); - QFontDatabase::addApplicationFont(":/fonts/Montserrat-Regular.ttf"); - QFontDatabase::addApplicationFont(":/fonts/Teko-Bold.ttf"); - QFontDatabase::addApplicationFont(":/fonts/Teko-Light.ttf"); - QFontDatabase::addApplicationFont(":/fonts/Teko-Medium.ttf"); - QFontDatabase::addApplicationFont(":/fonts/Teko-Regular.ttf"); - QFontDatabase::addApplicationFont(":/fonts/fontawesome-webfont.ttf"); + QFontDatabase::addApplicationFont(":/fonts/ebike-fonts/Montserrat-Bold.ttf"); + QFontDatabase::addApplicationFont(":/fonts/ebike-fonts/Montserrat-Light.ttf"); + QFontDatabase::addApplicationFont(":/fonts/ebike-fonts/Montserrat-Medium.ttf"); + QFontDatabase::addApplicationFont(":/fonts/ebike-fonts/Montserrat-Regular.ttf"); + QFontDatabase::addApplicationFont(":/fonts/ebike-fonts/Teko-Bold.ttf"); + QFontDatabase::addApplicationFont(":/fonts/ebike-fonts/Teko-Light.ttf"); + QFontDatabase::addApplicationFont(":/fonts/ebike-fonts/Teko-Medium.ttf"); + QFontDatabase::addApplicationFont(":/fonts/ebike-fonts/Teko-Regular.ttf"); + QFontDatabase::addApplicationFont(":/fonts/ebike-fonts/fontawesome-webfont.ttf"); QString path = app.applicationDirPath(); diff --git a/basicsuite/shared/shared.pri b/basicsuite/shared/shared.pri index 223bb02..50772d0 100644 --- a/basicsuite/shared/shared.pri +++ b/basicsuite/shared/shared.pri @@ -28,15 +28,19 @@ defineTest(b2qtdemo_deploy_defaults) { DISTFILES += $$PWD/fonts/TitilliumWeb-Black.ttf \ $$PWD/fonts/TitilliumWeb-Bold.ttf \ - $$PWD/fonts/TitilliumWeb-BoldItalic.ttf \ $$PWD/fonts/TitilliumWeb-ExtraLight.ttf \ - $$PWD/fonts/TitilliumWeb-ExtraLightItalic.ttf \ - $$PWD/fonts/TitilliumWeb-Italic.ttf \ $$PWD/fonts/TitilliumWeb-Light.ttf \ - $$PWD/fonts/TitilliumWeb-LightItalic.ttf \ $$PWD/fonts/TitilliumWeb-Regular.ttf \ $$PWD/fonts/TitilliumWeb-SemiBold.ttf \ - $$PWD/fonts/TitilliumWeb-SemiBoldItalic.ttf + $$PWD/fonts/ebike-fonts/fontawesome-webfont.ttf \ + $$PWD/fonts/ebike-fonts/Montserrat-Bold.ttf \ + $$PWD/fonts/ebike-fonts/Montserrat-Light.ttf \ + $$PWD/fonts/ebike-fonts/Montserrat-Medium.ttf \ + $$PWD/fonts/ebike-fonts/Montserrat-Regular.ttf \ + $$PWD/fonts/ebike-fonts/Teko-Bold.ttf \ + $$PWD/fonts/ebike-fonts/Teko-Light.ttf \ + $$PWD/fonts/ebike-fonts/Teko-Medium.ttf \ + $$PWD/fonts/ebike-fonts/Teko-Regular.ttf RESOURCES += \ $$PWD/fonts.qrc |
