Koala user defined custom colors by Brett-S-OWB · Pull Request #3361 · openWB/core

Brett-S-OWB · 2026-05-11T14:06:02Z

Benutzerdefinierte Farben im Koala Theme implementiert und konsistent über mehrere UI-Komponenten hinweg integriert.

Die Farben können nun individuell für verschiedene Entitäten (z. B. Ladepunkte, Fahrzeuge, Komponenten) definiert werden (in ui-settings project) und werden automatisch in der gesamten Oberfläche verwendet.

Diagramme

Unterstützung benutzerdefinierter Farben im:
- Energy Flow Chart
- History Chart
- Daily Totals Chart

Daily Totals Chart

Erweiterung der Batterie-Anzeige:
- Dropdown bei mehreren Batterien
- Trennlinie zwischen einzelnen Einträgen
Erweiterung der Ladepunkt-Anzeige:
- Trennlinie zwischen einzelnen Einträgen
Verbesserung der Darstellung:
- Ellipsis (Textverkürzung) für lange Namen bei Batterien und Ladepunkten

Karten (Carousel)
Benutzerdefinierte Farben wurden ergänzt für:

Charge Point Cards
Vehicle Cards
Battery Cards

Tabellenansichten

Integration der Farben in:
- Charge Point Tabelle
- Vehicle Tabelle
Darstellung als visuelle Farbmarkierung pro Zeile

Änderungen an BaseTable
Die bisherige Implementierung der Tabelle hatte zwei unterschiedliche Render-Pfade:
(ChargePointInformation.vue)

rowExpandable = true (z. B. kleine Screens) → BaseTable hat die komplette Tabellenzeile selbst gerendert (#body Slot)
rowExpandable = false (z. B. große Screens) → QTable hat das Rendering übernommen (Default-Verhalten)
Gleichzeitig wurden Inhalte über body-cell-* Slots vom Parent bereitgestellt.

Ergebnis: Zwei unterschiedliche Rendering-Mechanismen je nach Screen-Größe, was zu Inkonsistenzen bei Layout, Spacing und Styling geführt hat.

Problem
Für die neue Funktion einer benutzerdefinierten Farbanzeige pro Zeile (farbiger Indikator / Farbstreifen) war ein konsistenter Zugriff auf die gesamte Zeilenstruktur notwendig.
Durch die unterschiedlichen Render-Pfade war es nicht möglich, diesen Farbindikator zuverlässig und einheitlich darzustellen.

Lösung
Die Tabellenstruktur wurde vereinheitlicht:

BaseTable rendert jetzt immer die komplette Tabellenzeile (#body Slot wird immer verwendet)
wird zentral in BaseTable erzeugt
Parent-Komponenten liefern nur noch den Zelleninhalt über Slots (body-cell-*)
-Klare Trennung:
Struktur & Layout → BaseTable
Inhalt → Parent

Neue Funktion: Farbindikator pro Zeile
Im Zuge der Umstellung wurde ein benutzerdefinierter Farbstreifen pro Tabellenzeile eingeführt:

Farbe wird über rowColor vom Parent geliefert
Darstellung erfolgt zentral in BaseTable
Umsetzung über ein background-image (Gradient), um:
- vertikale Zentrierung
- Abstand oben/unten
- Abstand zum linken Rand

…l tables

benderl · 2026-05-12T07:04:46Z

+    BLACK = "#000000"
+    BLUE = "#007bff"
+    CYAN = "#17a2b8"
+    GREEN = "#28a745"
+    RED = "#dc3545"
+    YELLOW = "#ffc107"
+
    def upgrade_datastore_91(self) -> None:


Die Zeilen scheinen unbeabsichtigt zu sein. Bitte entfernen.

benderl · 2026-05-12T07:06:57Z

Warum hast Du das Symbol geändert? Gibt es mit owbBattery.svg ein Problem?

benderl · 2026-05-12T07:17:51Z

+  <svg
+    class="svg-icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+  >
+    <path
+      d="M711.253333 170.666667 640 170.666667 640 85.333333 384 85.333333 384 170.666667 312.746667 170.666667C281.6 170.666667 256 196.266667 256 227.413333L256 881.92C256 913.066667 281.6 938.666667 312.746667 938.666667L711.253333 938.666667C742.4 938.666667 768 913.066667 768 881.92L768 227.413333C768 196.266667 742.4 170.666667 711.253333 170.666667Z"
+    />
+  </svg>
+</template>


Stellvertretend für alle "*Icon.vue":
Warum hast Du den Code eines SVG in ein Template gepackt? Wäre es nicht einfacher, in BaseIcon.vue direkt ein SVG zu importieren?

benderl · 2026-05-12T07:20:19Z

+:deep(.base-icon svg) {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+  vertical-align: middle;
+  overflow: hidden;
 }
 .col-title {


Die Definition gehört eigentlich in BaseIcon.vue.

benderl · 2026-05-12T07:31:35Z

+          if (defaultValue !== undefined) {
+            // expected missing optional value - no error
+            console.debug('optional path not found', topicObject, path[i]);
+            return defaultValue;
+          }
+          // real error case


defaultValue wird bereits in Zeile 656 zurückgegeben und auch vorher eine Meldung geschrieben.

benderl · 2026-05-12T08:43:09Z

  soc?: number;
-  icon: string;
+  iconComponent?: Component;
+  iconColor?: string | null;


Ist das nicht ausreichend?

Suggested change

iconColor?: string | null;

iconColor?: string;

benderl · 2026-05-12T08:46:11Z

      soc: batterySoc.value,
-      icon: 'icons/owbBattery.svg',
+      iconComponent: BatteryIcon,
+      iconColor: 'var(--q-diagram-icon)',


Warum wird die individuelle Farbe der Batterie nicht verwendet?

benderl · 2026-05-12T08:54:52Z

+            <foreignObject
              :x="-svgIconWidth / 2"
              :y="-svgIconHeight / 2"
-              :height="svgIconHeight"
              :width="svgIconWidth"
-            />
+              :height="svgIconHeight"
+            >
+              <div class="icon-wrapper" :style="{ color: component.iconColor }">
+                <component
+                  :is="component.iconComponent"
+                  style="width: 100%; height: 100%"
+                />
+              </div>
+            </foreignObject>
          </g>


Hmm... jetzt haben wir eine Vue Datei, welche im Template ein DIV mit einem SVG enthält. Das SVG hat dann wieder mehrere andere Vue Komponenten, welche auch jeweils ein DIV mit einem SVG enthalten.

Ist das nicht etwas zu verschachtelt?

benderl · 2026-05-12T08:57:29Z

  background: var(--q-charge-point-fill);
  border: 0.125rem solid var(--q-charge-point-stroke);
 }
+.counter.sub-row {


Bezieht sich der Selector auf ein Element oder zwei verschachtelte?
Oder anders gefragt: warum ist es hier beim Counter anders, als bei den anderen Komponenten?

benderl · 2026-05-12T09:12:22Z

      'full-height': props.fullHeight,
-    }"
+    }, batteryUserDefinedColor && 'has-custom-color']"
+    :style="batteryUserDefinedColor && { '--component-color': batteryUserDefinedColor }"


Bitte verwende nach Möglichkeit keine direkten style Angaben im Template. batteryDefinedColor kann auch direkt im <style> Bereich verwendet werden. Das gilt auch für die anderen Dateien.

LKuemmel and others added 17 commits May 11, 2026 15:37

update logfiles

34d5040

Koala - Add custom colors - charge points

7a70435

Koala - Add custom colors - battery

52bbdba

Daily totals - multiple batteries dropdown - icons: user defined colors

41e0c4a

Add SVG icons as vue components

f8c3499

formatting

513fec7

formatting icon

80cbe98

Add user defined colors to history chart

67023a2

Add user defined colors to energy flow chart

bc6d4cd

energy flow chart move css to style section

ec12a71

Add user defined colors to vehicle cards

5672b8f

Add border between all expansion items/components

71d0aea

Add user defined colors to tables (vehicle & charge points)

293c750

Fix color bar display in tables smaller screen sizes

cf7cdd1

Table data tag in BaseTable.vue - color application consistent for al…

0e54b63

…l tables

formatting

7e0e1fd

Add user defined color to table expansion row

71f464b

Brett-S-OWB requested a review from benderl May 11, 2026 14:17

benderl self-assigned this May 12, 2026

benderl added the enhancement New feature or request label May 12, 2026

benderl requested changes May 12, 2026

View reviewed changes

Use icon sprite for icons in place of vue components

476a383

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Koala user defined custom colors#3361

Koala user defined custom colors#3361
Brett-S-OWB wants to merge 18 commits into
openWB:feature-custom-colorsfrom
Brett-S-OWB:custom-colors-bv

Brett-S-OWB commented May 11, 2026

Uh oh!

benderl May 12, 2026

Uh oh!

benderl May 12, 2026

Uh oh!

benderl May 12, 2026

Uh oh!

benderl May 12, 2026

Uh oh!

benderl May 12, 2026

Uh oh!

benderl May 12, 2026

Uh oh!

benderl May 12, 2026

Uh oh!

benderl May 12, 2026

Uh oh!

benderl May 12, 2026

Uh oh!

benderl May 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Brett-S-OWB commented May 11, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants