Use opaque colors on the Brief page

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

Hide file tree

Showing 8 changed files with 45 additions and 22 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.gaugeColorValue(status)
+			remainderColor: Theme.gaugeColorValue(status, true)
 		}
 	}
 }
diff --git a/components/ArcGaugeQuantityLabel.qml b/components/ArcGaugeQuantityLabel.qml
@@ -13,6 +13,7 @@ Row {
 	property int alignment: Qt.AlignTop | Qt.AlignLeft
 	property alias icon: icon
 	property alias quantityLabel: quantityLabel
+	property alias useOpaqueColor: quantityLabel.useOpaqueColor
 	property real leftMargin
 
 	// Use x/y bindings as the layout sometimes did not update dynamically when multiple anchor

diff --git a/components/QuantityLabel.qml b/components/QuantityLabel.qml
@@ -16,6 +16,7 @@ Item {
 	property alias unitColor: unitLabel.color
 	property int alignment: Qt.AlignHCenter
 	property int precision: Units.defaultUnitPrecision(unit)
+	property bool useOpaqueColor: false
 
 	readonly property quantityInfo _quantity: Units.getDisplayText(unit, value, precision)
 
@@ -64,7 +65,7 @@ Item {
 			id: unitLabel
 
 			text: root._quantity.unit
-			color: Theme.color_font_secondary
+			color: useOpaqueColor ? Theme.color_opaque_font_secondary : Theme.color_font_secondary
 			verticalAlignment: Qt.AlignVCenter
 		}
 	}

diff --git a/components/SideGauge.qml b/components/SideGauge.qml
@@ -32,5 +32,6 @@ ArcGauge {
 		id: quantityLabel
 
 		alignment: root.alignment
+		useOpaqueColor: true
 	}
 }
diff --git a/components/SolarYieldGauge.qml b/components/SolarYieldGauge.qml
@@ -80,6 +80,7 @@ Item {
 		alignment: root.alignment
 		icon.source: "qrc:/images/solaryield.svg"
 		quantityLabel.dataObject: Global.system.solar
+		useOpaqueColor: true
 	}
 
 	Connections {

diff --git a/themes/color/Dark.json b/themes/color/Dark.json
@@ -8,13 +8,17 @@
 
     "color_ok": "color_blue",
     "color_darkOk": "color_darkBlue",
+    "color_opaque_darkOk": "#11263B",
     "color_warning": "color_orange",
     "color_darkWarning": "color_darkOrange",
+    "color_opaque_darkWarning": "#482D0E",
     "color_critical": "color_red",
     "color_darkCritical": "color_darkRed",
+    "color_opaque_darkCritical": "#491C1B",
 
     "color_font_primary": "color_white",
     "color_font_secondary": "color_dimWhite",
+    "color_opaque_font_secondary": "#999999",
     "color_font_disabled": "color_gray4",
 
     "color_background_primary": "color_black",

diff --git a/themes/color/Light.json b/themes/color/Light.json
@@ -8,13 +8,17 @@
 
     "color_ok": "color_blue",
     "color_darkOk": "color_darkBlue",
+    "color_opaque_darkOk": "#C0D4E6",
     "color_warning": "color_orange",
     "color_darkWarning": "color_darkOrange",
+    "color_opaque_darkWarning": "#F7DBB9",
     "color_critical": "color_red",
     "color_darkCritical": "color_darkRed",
+    "color_opaque_darkCritical": "#F8CAC6",
 
     "color_font_primary": "color_gray2",
     "color_font_secondary": "color_dimGray2",
+    "color_opaque_font_secondary": "#7B7A76",
     "color_font_disabled": "color_gray4",
 
     "color_background_primary": "color_white",

diff --git a/tools/themeparser.py b/tools/themeparser.py
@@ -32,32 +32,43 @@
 
 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>());
-    }
+	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>());
+	}
+
+	Q_INVOKABLE QColor gaugeColorValue(StatusLevel level, bool darkColor = false) const
+	{
+		const QVariant c = (level == Ok && darkColor) ? color_opaque_darkOk()
+			: (level == Ok) ? color_ok()
+			: (level == Warning && darkColor) ? color_opaque_darkWarning()
+			: (level == Warning) ? color_warning()
+			: (level == Critical && darkColor) ? color_opaque_darkCritical()
+			: color_critical();
+		return c.typeId() == QMetaType::QColor ? c.value<QColor>() : QColor(c.value<QString>());
+	}
 };