Show center value inside circular multi gauge on Brief Page

Contributes to issue #1491

CMakeLists.txt

@@ -187,6 +187,7 @@ set (VENUS_QML_MODULE_SOURCES
     components/BarGaugeBase.qml
     components/Breadcrumbs.qml
     components/BriefSidePanelWidget.qml
+    components/CenterValueDisplay.qml
     components/CircularMultiGauge.qml
     components/CircularSingleGauge.qml
     components/CheapBarGauge.qml

components/CenterValueDisplay.qml

@@ -0,0 +1,83 @@
+/*
+** Copyright (C) 2024 Victron Energy B.V.
+** See LICENSE.txt for license information.
+*/
+
+import QtQuick
+import QtQuick.Controls.impl as CP
+import Victron.VenusOS
+
+Item {
+	id: root
+
+	implicitWidth: label.visible ? Math.max(icon.width + label.width, quantity.width) : quantity.width
+	implicitHeight: label.visible ? icon.height + quantity.height : quantity.height
+	visible: (!root._valueDisplay.isValid || (root.gaugeCount <= root._valueDisplay.value)) && (_device.isValid && !isNaN(_device.value))
+
+	property alias icon: icon
+	property alias label: label
+	property alias quantity: quantity
+
+	required property int gaugeCount
+	required property real maximumWidth
+	readonly property bool isTemperature: _valueDevice.isValid && BackendConnection.serviceTypeFromUid(_valueDevice.value) == "temperature"
+
+	property VeQuickItem _valueDisplay: VeQuickItem {
+		uid: Global.systemSettings.serviceUid + "/Settings/Gui/BriefView/CenterValueDisplay"
+	}
+
+	property VeQuickItem _labelDisplay: VeQuickItem {
+		uid: Global.systemSettings.serviceUid + "/Settings/Gui/BriefView/CenterValueLabelDisplay"
+	}
+
+	property VeQuickItem _valueDevice: VeQuickItem {
+		uid: Global.systemSettings.serviceUid + "/Settings/Gui/BriefView/CenterValueDevice"
+	}
+
+	property VeQuickItem _device: VeQuickItem {
+		uid: _valueDevice.value + "/" + (root.isTemperature ? "Temperature" : "Soc")
+	}
+
+	CP.ColorImage {
+		id: icon
+		anchors.right: label.left
+		width: 24
+		height: 24
+		visible: label.visible
+		color: Theme.color_font_primary
+		source: root.isTemperature ? "qrc:/images/icon_temp_32.svg" : "qrc:/images/icon_battery_24.svg"
+	}
+	Label {
+		id: label
+		anchors {
+			// usually, center the label over the quantity,
+			// except when there is only one gauge or the quantity only has 1 digit
+			// in which case take icon width into account (i.e. properly centered).
+			horizontalCenterOffset: (root.gaugeCount == 1 || quantity.valueText.length <= 1) ? icon.width/2 : 0
+			horizontalCenter: quantity.horizontalCenter
+			verticalCenter: icon.verticalCenter
+		}
+		visible: !root._labelDisplay.isValid || (root.gaugeCount <= root._labelDisplay.value)
+		font.pixelSize: (root.isTemperature && gaugeCount > 2) ? Theme.font_size_body1 : Theme.font_size_body2
+		color: Theme.color_font_primary
+		text: root.isTemperature ? CommonWords.temperature : CommonWords.battery
+		width: Math.min(implicitWidth, root.maximumWidth)
+		elide: Text.ElideRight
+	}
+	QuantityLabel {
+		id: quantity
+		anchors {
+			top: icon.visible ? icon.bottom : parent.top
+			horizontalCenter: parent.horizontalCenter
+		}
+		font.pixelSize: root.isTemperature && gaugeCount > 2 ? Theme.font_briefPage_battery_percentage_pixelSize - 12
+			: root.isTemperature && gaugeCount > 1 ? Theme.font_briefPage_battery_percentage_pixelSize - 8 // temperature units takes lots of space.
+			: gaugeCount <= 2 ? Theme.font_briefPage_battery_percentage_pixelSize + 4 // larger font size if we have more space.
+			: valueText.length < 3 ? Theme.font_briefPage_battery_percentage_pixelSize // default font size.
+			: Theme.font_briefPage_battery_percentage_pixelSize - 8 // 5-inch "100%" fits with this font size with 3 gauges.
+		unit: root.isTemperature ? Global.systemSettings.temperatureUnit : VenusOS.Units_Percentage
+		value: !root._device.isValid ? NaN
+			: root.isTemperature ? Global.systemSettings.convertFromCelsius(root._device.value)
+			: root._device.value
+	}
+}

components/CircularMultiGauge.qml

@@ -155,4 +155,10 @@ Item {
 			}
 		}
 	}
+
+	CenterValueDisplay {
+		anchors.centerIn: parent
+		maximumWidth: gauges.width - (gaugeCount*gauges._stepSize)
+		gaugeCount: arcRepeater.count
+	}
 }

components/CircularSingleGauge.qml

@@ -12,8 +12,6 @@ import Victron.Gauges
 Item {
 	id: gauges
 
-	property alias icon: icon
-	property alias name: nameLabel.text
 	property alias voltage: voltageLabel.value
 	property alias current: currentLabel.value
 	property alias value: arc.value
@@ -49,43 +47,22 @@ Item {
 
 	Column {
 		anchors {
-			top: parent.top
-			topMargin: Theme.geometry_briefPage_centerGauge_centerText_topMargin
+			top: centerValue.isTemperature ? undefined : parent.top
+			topMargin: centerValue.isTemperature ? undefined : Theme.geometry_briefPage_centerGauge_centerText_topMargin
+			verticalCenter: centerValue.isTemperature ? parent.verticalCenter : undefined
 			horizontalCenter: parent.horizontalCenter
 		}
 		spacing: Theme.geometry_briefPage_centerGauge_centerTextSpacing
 
-		Row {
-			anchors.horizontalCenter: parent.horizontalCenter
-			spacing: 6
-
-			CP.ColorImage {
-				id: icon
-
-				color: Theme.color_font_primary
-			}
-
-			Label {
-				id: nameLabel
-
-				anchors.verticalCenter: icon.verticalCenter
-				font.pixelSize: Theme.font_size_body2
-				color: Theme.color_font_primary
-
-				// Keep the name bounding box inside the circle to avoid truncation
-				width: Math.min(implicitWidth, 0.7*gauges.width - icon.width - parent.spacing)
-				elide: Text.ElideRight
-			}
-		}
-
-		QuantityLabel {
+		CenterValueDisplay {
+			id: centerValue
 			anchors.horizontalCenter: parent.horizontalCenter
-			font.pixelSize: Theme.font_briefPage_battery_percentage_pixelSize
-			unit: VenusOS.Units_Percentage
-			value: gauges.value
+			maximumWidth: 0.7*gauges.width - icon.width
+			gaugeCount: 1
 		}
 
 		Row {
+			visible: !centerValue.isTemperature
 			topPadding: Theme.geometry_briefPage_centerGauge_centerText_topPadding
 			anchors.horizontalCenter: parent.horizontalCenter
 			spacing: Theme.geometry_briefPage_centerGauge_centerText_horizontalSpacing
@@ -111,6 +88,7 @@ Item {
 		Label {
 			id: captionLabel
 
+			visible: !centerValue.isTemperature
 			anchors.horizontalCenter: parent.horizontalCenter
 			font.pixelSize: Theme.font_briefPage_battery_timeToGo_pixelSize
 			color: Theme.color_briefPage_battery_value_text_color

data/mock/SystemSettingsImpl.qml

@@ -96,6 +96,10 @@ QtObject {
 		setMockSettingValue("SystemSetup/BatteryService", "default")
 		setMockSettingValue("Alarm/System/GridLost", 1)
 
+		setMockSettingValue("Gui/BriefView/CenterValueDisplay", VenusOS.BriefView_CenterValue_SingleGaugeOnly)
+		setMockSettingValue("Gui/BriefView/CenterValueLabelDisplay", VenusOS.BriefView_CenterValue_SingleGaugeOnly)
+		setMockSettingValue("Gui/BriefView/CenterValueDevice", "mock/com.victronenergy.battery.ttyUSB1")
+
 		setMockSettingValue("System/TimeZone", "Europe/Berlin")
 
 		setMockSettingValue("Services/Bol", 1)

data/mock/config/LevelsPageConfig.qml

@@ -164,6 +164,11 @@ QtObject {
 				{ type: VenusOS.Tank_Type_FreshWater, level: 75, capacity: 20 },
 			]
 		},
+		{
+			name: "No tanks",
+			tanks: [
+			]
+		},
 	]
 
 	property var environmentConfigs: [

pages/BriefPage.qml

@@ -193,8 +193,6 @@ SwipeViewPage {
 			readonly property var properties: Gauges.tankProperties(VenusOS.Tank_Type_Battery)
 			readonly property var battery: Global.system.battery
 
-			name: properties.name
-			icon.source: battery.icon
 			value: visible && !isNaN(battery.stateOfCharge) ? battery.stateOfCharge : 0
 			voltage: battery.voltage
 			current: battery.current

pages/settings/PageSettingsDisplay.qml

@@ -72,8 +72,8 @@ Page {
 			}
 
 			ListNavigation {
-				//% "Brief view levels"
-				text: qsTrId("settings_brief_view_levels")
+				//% "Brief view settings"
+				text: qsTrId("settings_brief_view_settings")
 				onClicked: {
 					Global.pageManager.pushPage("/pages/settings/PageSettingsDisplayBrief.qml", {"title": text})
 				}
@@ -169,7 +169,7 @@ Page {
 
 			ListNavigation {
 				//% "Start page"
-				text: qsTrId("settings_brief_view_start_page")
+				text: qsTrId("settings_display_start_page")
 				onClicked: {
 					Global.pageManager.pushPage("/pages/settings/PageSettingsDisplayStartPage.qml", {"title": text})
 				}