WwxTileVisu - (W)ilk(w)are E(x)tended Tile Visu

Erweiterungen Visualisierung (Kacheln)
1

Frohe Weihnachten zusammen!

Genau so begann damals auch die Einleitung zu meinem Beitrag über den WwxSkin. Im Jahr 2018 entstand die erste Version meines Skins fürs WebFront, um einige kleine, aber für mich entscheidende Details in der Visualisierung zu verbessern. Über die Jahre hinweg sind zahlreiche Optimierungen, Erweiterungen und Verbesserungen hinzugekommen.

Nun, sechs Jahre später, widme ich viel Zeit und Mühe der neuen Tile-Visu. Leider gibt es für uns Endanwender aktuell nur begrenzte Möglichkeiten, das Erscheinungsbild individuell anzupassen. Immerhin stehen bereits einige (farbliche) Themes zur Verfügung, um den persönlichen Geschmack zu treffen – ein großes Dankeschön an das Symcon-Team dafür!

Ein Thema hat mich jedoch besonders beschäftigt: die Herausforderung, sowohl das alte WebFront als auch die neue Tile-Visu gleichzeitig optimal zu bedienen. Vor allem die HTML-Boxen waren hierbei immer wieder ein Knackpunkt – nicht nur für mich. Die Idee, zwei separate Versionen für WebFront und Tile-Visu bereitzustellen, schien mir wenig praktikabel und störte meinen Workflow erheblich.

Also machte ich mich auf die Suche nach einer Lösung. Und ich freue mich, euch mitteilen zu können: Ich habe sie gefunden und stelle sie jetzt online zur Verfügung!

Die ganze Geschichte, inklusive meiner Lösung, könnt ihr in meinem Blog nachlesen: WwxTileVisu

Version 1.1.20241221 ist online!

Changelog:

  • NEU: Tabellenstyle ‚theme‘ (head), Tabellenkopffarbe wie Theme-Farbe
  • NEU: Sticky (stehender) Tabellenkopf
  • FIX: Tabellenstyle ‚lines‘ (head) funktioniert beim scrollen korrekt
  • FIX: Meta-Tag wird jetzt von IPS ausgeliefert bzw. bereitgestellt

Ich denke für alle Nutzer meines WwxSkins ein MUSS :loveips:

Die Dokumentation kann man auf hier nachlesen => GitHub - Wilkware/WwxTileVisu

Viel Spaß
Heiko

7 „Gefällt mir“
2

Ich finde das echt sehr sehr geil. ABER, bei mir sind alle Tabellenüberschriften sticky, auch wenn ich die Klasse „Theme“ oder welche auch immer verwende. Wie kann ich das abdrehen?

3

Danke!

Du kannst natürlich die CSS Datei entsprechend Deinen Wünschen anpassen! Die von mir vorgegebenen Styles sind ja - wie immer - primär nach meinen Wünschen erstellt worden und korrospondieren dementsprechend auch mit den WwxSkin. Aber man kann da auch was komplett anderes „rein“ designen :slight_smile:

Für die spezielle Frage wäre glaube ich folgende Änderung notwendig …

.wwx thead {
    font-weight: bold;
    color: rgb(255, 255, 255);
    /* position: sticky; */
    /* top: 0; */
}

Gruß Heiko

4

Supi, jetzt passt es (mir :wink: ). Danke!

5

Eine Frage hätte ich noch. Im alte Style wurden die Zeilenfarben gewechselt. Ich hätte mir das CSS angeschaut und ich denke das sollte da auch so sein. Oder nicht?

Edit: Habs im alten CSS gefunden
Sollte das jemand haben wollen

.wwx td:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.wwx td:not(:first-child):not(:last-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wwx td:last-child {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.wwx tr:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.wwx tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.2);
}

Das nach

.wwx td {
    vertical-align: middle;
    text-align: left;
    padding: 4px;
}

einfügen.

6

Nur diese eine Zeile, sonst haste komische Linien um die Zellen.

Aber das kann wie gesagt jeder machen wie er mag :slight_smile:

Gruß Heiko

1 „Gefällt mir“