Use opaque colors

Alpha blending is expensive. Reducing alpha blending by using opaque colors reduces GPU work, and thus `swap` time.
victronenergy · Feb 1, 2024 · 3846f17 · 3846f17
1 parent ec4a856
commit 3846f17
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 74 deletions.
diff --git a/components/ArcGauge.qml b/components/ArcGauge.qml
@@ -44,8 +44,8 @@ Item {
 			height: width
 			x: arcX !== undefined ? arcX : (gauge.alignment & Qt.AlignRight ? (gauge.width - 2*radius) : 0)
 			y: arcY !== undefined ? arcY : ((gauge.height - height) / 2)
-			progressColor: Theme.statusColorValue(status)
-			remainderColor: Theme.statusColorValue(status, true)
+			progressColor: Theme.color_darkOk,Theme.statusColorValue(status)
+			remainderColor: Theme.color_darkOk,Theme.statusColorValue(status, true)
 		}
 	}
 }
diff --git a/components/AsymmetricRoundedRectangle.qml b/components/AsymmetricRoundedRectangle.qml
@@ -18,34 +18,7 @@ Item {
 	property alias border: roundedRect.border
 
 	// we have to draw each element separately as any of the colors may have transparency...
-
-	Rectangle {
-		id: topBorderRect
-		anchors {
-			fill: parent
-			bottomMargin: root.height - root.border.width
-			leftMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Left ? root.radius : 0
-			rightMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Right ? root.radius : 0
-		}
-
-		visible: root.roundedSide !== VenusOS.AsymmetricRoundedRectangle_RoundedSide_All
-
-		color: roundedRect.border.color
-	}
-
-	Rectangle {
-		id: bottomBorderRect
-		anchors {
-			fill: parent
-			topMargin: root.height - root.border.width
-			leftMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Left ? root.radius : 0
-			rightMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Right ? root.radius : 0
-		}
-
-		visible: root.roundedSide !== VenusOS.AsymmetricRoundedRectangle_RoundedSide_All
-
-		color: roundedRect.border.color
-	}
+	// the order matters, because any of the colors may be fully opaque...
 
 	Rectangle {
 		id: backgroundRect
@@ -90,4 +63,32 @@ Item {
 			border.color: Theme.color_ok
 		}
 	}
+
+	Rectangle {
+		id: topBorderRect
+		anchors {
+			fill: parent
+			bottomMargin: root.height - root.border.width
+			leftMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Left ? root.radius : 0
+			rightMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Right ? root.radius : 0
+		}
+
+		visible: root.roundedSide !== VenusOS.AsymmetricRoundedRectangle_RoundedSide_All
+
+		color: roundedRect.border.color
+	}
+
+	Rectangle {
+		id: bottomBorderRect
+		anchors {
+			fill: parent
+			topMargin: root.height - root.border.width
+			leftMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Left ? root.radius : 0
+			rightMargin: root.roundedSide === VenusOS.AsymmetricRoundedRectangle_RoundedSide_Right ? root.radius : 0
+		}
+
+		visible: root.roundedSide !== VenusOS.AsymmetricRoundedRectangle_RoundedSide_All
+
+		color: roundedRect.border.color
+	}
 }
diff --git a/components/CircularMultiGauge.qml b/components/CircularMultiGauge.qml
@@ -51,8 +51,8 @@ Item {
 						startAngle: 0
 						endAngle: 270
 						value: loader.value
-						progressColor: Theme.statusColorValue(loader.gaugeStatus)
-						remainderColor: Theme.statusColorValue(loader.gaugeStatus, true)
+						progressColor: Theme.color_darkOk,Theme.statusColorValue(loader.gaugeStatus)
+						remainderColor: Theme.color_darkOk,Theme.statusColorValue(loader.gaugeStatus, true)
 						strokeWidth: gauges.strokeWidth
 						animationEnabled: gauges.animationEnabled
 						shineAnimationEnabled: Global.batteries.system.mode === VenusOS.Battery_Mode_Charging
@@ -66,8 +66,8 @@ Item {
 						startAngle: 0
 						endAngle: 270
 						value: loader.value
-						progressColor: Theme.statusColorValue(loader.gaugeStatus)
-						remainderColor: Theme.statusColorValue(loader.gaugeStatus, true)
+						progressColor: Theme.color_darkOk,Theme.statusColorValue(loader.gaugeStatus)
+						remainderColor: Theme.color_darkOk,Theme.statusColorValue(loader.gaugeStatus, true)
 						strokeWidth: gauges.strokeWidth
 						animationEnabled: gauges.animationEnabled
 					}

diff --git a/components/CircularSingleGauge.qml b/components/CircularSingleGauge.qml
@@ -41,8 +41,8 @@ Item {
 			radius: width/2
 			startAngle: 0
 			endAngle: 359 // "Note that a single PathArc cannot be used to specify a circle."
-			progressColor: Theme.statusColorValue(gauges.status)
-			remainderColor: Theme.statusColorValue(gauges.status, true)
+			progressColor: Theme.color_darkOk,Theme.statusColorValue(gauges.status)
+			remainderColor: Theme.color_darkOk,Theme.statusColorValue(gauges.status, true)
 			strokeWidth: Theme.geometry_circularSingularGauge_strokeWidth
 		}
 	}

diff --git a/components/SegmentedButtonRow.qml b/components/SegmentedButtonRow.qml
@@ -14,6 +14,7 @@ Item {
 	property int fontPixelSize: Theme.font_size_body3
 	property alias model: buttonRepeater.model
 	property int currentIndex
+	property bool flat
 
 	signal buttonClicked(buttonIndex: int)
 
@@ -38,15 +39,16 @@ Item {
 			delegate: AsymmetricRoundedRectangle {
 				id: buttonDelegate
 
+				flat: root.flat
 				width: root.width / buttonRepeater.count
 				height: parent.height
 				color: modelData.enabled === false && model.index !== root.currentIndex
 					   ? Theme.color_background_disabled
-					   : (mouseArea.pressed || model.index === root.currentIndex
+					   : ((mouseArea.pressed || model.index === root.currentIndex)
 						  ? Theme.color_ok
 						  : Theme.color_darkOk)
 				border.width: Theme.geometry_button_border_width
-				border.color: modelData.enabled === false && model.index !== root.currentIndex ? color : Theme.color_ok
+				border.color: (modelData.enabled === false && model.index !== root.currentIndex) ? buttonDelegate.color : Theme.color_ok
 				radius: Theme.geometry_button_radius
 
 				roundedSide: model.index === 0 ? VenusOS.AsymmetricRoundedRectangle_RoundedSide_Left

diff --git a/components/TankGauge.qml b/components/TankGauge.qml
@@ -16,8 +16,8 @@ VerticalGauge {
 
 	readonly property int _gaugeStatus: Gauges.getValueStatus(value * 100, gaugeValueType)
 
-	backgroundColor: Theme.statusColorValue(root._gaugeStatus, true)
-	foregroundColor: Theme.statusColorValue(root._gaugeStatus)
+	backgroundColor: Theme.color_darkOk,Theme.statusColorValue(root._gaugeStatus, true)
+	foregroundColor: Theme.color_darkOk,Theme.statusColorValue(root._gaugeStatus)
 	radius: Theme.geometry_levelsPage_tankGauge_radius
 
 	Rectangle {

diff --git a/components/widgets/BatteryWidget.qml b/components/widgets/BatteryWidget.qml
@@ -21,6 +21,7 @@ OverviewWidget {
 
 	quantityLabel.value: batteryData.stateOfCharge
 	quantityLabel.unit: VenusOS.Units_Percentage
+	quantityLabel.unitColor: Theme.color_brightGray
 
 	color: "transparent"
 
@@ -158,6 +159,7 @@ OverviewWidget {
 
 		value: Global.systemSettings.convertFromCelsius(batteryData.temperature_celsius)
 		unit: Global.systemSettings.temperatureUnit
+		unitColor: Theme.color_brightGray
 		font.pixelSize: Theme.font_size_body2
 		alignment: Qt.AlignRight
 	}
@@ -172,7 +174,7 @@ OverviewWidget {
 			Label {
 				text: Global.batteries.modeToText(batteryData.mode)
 				font.pixelSize: Theme.font_size_body1
-				color: Theme.color_font_secondary
+				color: Theme.color_brightGray
 			}
 			Label {
 				text: Global.batteries.timeToGoText(Global.batteries.system, VenusOS.Battery_TimeToGo_ShortFormat)
@@ -193,6 +195,7 @@ OverviewWidget {
 
 			value: batteryData.voltage
 			unit: VenusOS.Units_Volt
+			unitColor: Theme.color_brightGray
 			font.pixelSize: Theme.font_size_body2
 			alignment: Qt.AlignLeft
 		},
@@ -207,6 +210,7 @@ OverviewWidget {
 			}
 			value: batteryData.current
 			unit: VenusOS.Units_Amp
+			unitColor: Theme.color_brightGray
 			font.pixelSize: Theme.font_size_body2
 		},
 
@@ -221,6 +225,7 @@ OverviewWidget {
 			}
 			value: batteryData.power
 			unit: VenusOS.Units_Watt
+			unitColor: Theme.color_brightGray
 			font.pixelSize: Theme.font_size_body2
 			alignment: Qt.AlignRight
 		}

diff --git a/themes/color/ColorDesign.json b/themes/color/ColorDesign.json
@@ -1,20 +1,11 @@
 {
     "color_blue": "#387DC5",
-    "color_dimBlue": "#B3387DC5",
-    "color_darkBlue": "#4D387DC5",
     "color_orange": "#F0962E",
-    "color_darkOrange": "#4DF0962E",
     "color_green": "#72B84C",
-    "color_dimGreen": "#B372B84C",
-    "color_darkGreen": "#4D72B84C",
     "color_red": "#F35C58",
-    "color_dimRed": "#B3F35C58",
-    "color_darkRed": "#4DF35C58",
     "color_black": "#000000",
     "color_gray1": "#141414",
     "color_gray2": "#272622",
-    "color_dimGray2": "#99272622",
-    "color_darkGray2": "#4D272622",
     "color_gray3": "#504F4B",
     "color_gray4": "#64635F",
     "color_gray5": "#969591",
@@ -23,8 +14,6 @@
     "color_gray8": "#F0EFEB",
     "color_gray9": "#FAF9F5",
     "color_white": "#FFFFFF",
-    "color_dimWhite": "#99FFFFFF",
-    "color_darkWhite": "#4DFFFFFF",
     "color_fuel": "#76832C",
     "color_oil": "#856B5D",
     "color_gasoline": "#DFBC3E",

diff --git a/themes/color/Dark.json b/themes/color/Dark.json
@@ -6,6 +6,20 @@
     "color_humidity2": "#405A25",
     "color_humidity3": "#784B17",
 
+    "color_dimBlue": "#15304A",
+    "color_dimOrange": "#593912",
+    "color_dimRed": "#592220",
+    "color_dimGreen": "#508135",
+    "color_dimWhite": "#969591",
+    "color_dimGray": "#7B7A76",
+    "color_darkBlue": "#11263B",
+    "color_darkOrange": "#482D0E",
+    "color_darkRed": "#491C1B",
+    "color_darkGreen": "#223817",
+    "color_darkWhite": "#64635F",
+    "color_darkGray": "#504F4B",
+    "color_brightGray": "#B3B1AD",
+
     "color_ok": "color_blue",
     "color_darkOk": "color_darkBlue",
     "color_warning": "color_orange",

diff --git a/themes/color/Light.json b/themes/color/Light.json
@@ -6,6 +6,20 @@
     "color_humidity2": "#97B974",
     "color_humidity3": "#DBB78E",
 
+    "color_dimBlue": "#BBCEE0",
+    "color_dimOrange": "#F0D5B4",
+    "color_dimRed": "#F0C3BF",
+    "color_dimGreen": "#9BCB7E",
+    "color_dimWhite": "#969591",
+    "color_dimGray": "#7B7A76",
+    "color_darkBlue": "#C0D4E6",
+    "color_darkOrange": "#F7DBB9",
+    "color_darkRed": "#F8CAC6",
+    "color_darkGreen": "#D1E6C2",
+    "color_darkWhite": "#64635F",
+    "color_darkGray": "#504F4B",
+    "color_brightGray": "#B3B1AD",
+
     "color_ok": "color_blue",
     "color_darkOk": "color_darkBlue",
     "color_warning": "color_orange",
@@ -14,7 +28,7 @@
     "color_darkCritical": "color_darkRed",
 
     "color_font_primary": "color_gray2",
-    "color_font_secondary": "color_dimGray2",
+    "color_font_secondary": "color_dimGray",
     "color_font_disabled": "color_gray4",
 
     "color_background_primary": "color_white",
@@ -93,7 +107,7 @@
     "color_briefPage_battery_value_text_color": "color_gray2",
     "color_briefPage_battery_unit_text_color": "color_gray3",
     "color_briefPage_circularGauge_shine": "#BBFFFFFF",
-    "color_briefPage_sidePanel_forecast_separator": "color_darkGray2",
+    "color_briefPage_sidePanel_forecast_separator": "color_darkWhite",
     "color_briefPage_sidePanel_loadGraph_dotColor": "color_gray3",
     "color_briefPage_sidePanel_loadGraph_warning_strokeColor": "color_orange",
     "color_briefPage_sidePanel_loadGraph_warning_gradientColor1": "#F0952E",
@@ -122,6 +136,6 @@
 
     "color_notificationsPage_text_color": "color_gray4",
 
-    "color_settings_gsmModem_signalStrength_inactive": "color_darkGray2",
+    "color_settings_gsmModem_signalStrength_inactive": "color_darkWhite",
     "color_settings_gsmModem_signalStrength_active": "color_gray2"
 }
diff --git a/tools/themeparser.py b/tools/themeparser.py
@@ -32,32 +32,33 @@
 
 class ThemeSingleton : public Theme
 {
-    Q_OBJECT
-    QML_NAMED_ELEMENT(Theme)
-    QML_SINGLETON
+	Q_OBJECT
+	QML_NAMED_ELEMENT(Theme)
+	QML_SINGLETON
 
-    // property declarations
+	// property declarations
 %s
 
 public:
-    ThemeSingleton(QObject *parent = nullptr)
-        : Theme(parent)
-    {
-    }
+	ThemeSingleton(QObject *parent = nullptr)
+		: Theme(parent)
+	{
+	}
 
-    // property accessors
+	// property accessors
 %s
 
-    Q_INVOKABLE QColor statusColorValue(StatusLevel level, bool darkColor = false) const
-    {
-        const QVariant c = (level == Ok && darkColor) ? color_darkOk()
-            : (level == Ok) ? color_ok()
-            : (level == Warning && darkColor) ? color_darkWarning()
-            : (level == Warning) ? color_warning()
-            : (level == Critical && darkColor) ? color_darkCritical()
-            : color_critical();
-        return c.typeId() == QMetaType::QColor ? c.value<QColor>() : QColor(c.value<QString>());
-    }
+	// NOTE: won't capture, so client needs to manually capture the color change signal.
+	Q_INVOKABLE QColor statusColorValue(StatusLevel level, bool darkColor = false) const
+	{
+		const QVariant c = (level == Ok && darkColor) ? color_darkOk()
+			: (level == Ok) ? color_ok()
+			: (level == Warning && darkColor) ? color_darkWarning()
+			: (level == Warning) ? color_warning()
+			: (level == Critical && darkColor) ? color_darkCritical()
+			: color_critical();
+		return c.typeId() == QMetaType::QColor ? c.value<QColor>() : QColor(c.value<QString>());
+	}
 };