Polestar 2 Visu-Seite / Darstellung in smartVISU ohne HTML Tabellen?

[Sipple]

Servus whe

Ich fahre selbst einen Polestar 2 und habe das mit den unhandlichen Texten so gelöst:

{{ basic.symbol('', 'Polestar.Charger_Connection_Status', ['Nicht angeschlossen', 'Angeschlossen'], ['veh_car_01.svg', 'veh_car_01_charging.svg'], ['CHARGER_CONNECTION_STATUS_DISCONNECTED', 'CHARGER_CONNECTION_STATUS_CONNECTED'], '', ['icon0', '#0f0']) }} <br />

{{ basic.symbol('', 'Polestar.Charging_Status', ['Wird nicht geladen', 'Wird geladen', 'Fertig'], ['scene_flash.svg', 'scene_flash.svg', 'scene_flash.svg'], ['CHARGING_STATUS_IDLE', 'CHARGING_STATUS_CHARGING', 'CHARGING_STATUS_DONE'], '', ['icon0', '#ff0', '#0f0']) }}

Das sieht dann z.B. so aus:

grafik.png

Btw. Ich hole mir die Daten über eine einfache Logik direkt über die Polestar API, ohne das noch auf MQTT und dann erst in die Items zu schreiben.
Du nimmst nicht zufällig den Container von Consulitas aus dem Polestar Forum?


EDIT: Teil des Themas wurde aus smarthomeNG-Forum hierher verschoben (ursprünglich "string split mit eval").

[whe]

Du nimmst nicht zufällig den Container von Consulitas aus dem Polestar Forum?

ja, funktioniert einwandfrei und einfach.
musste allerdings erst Erfahrung mit Docker sammeln.

kannst Du mir bitte Deinen kompletten Block für SmartVISU schicken, dann muss ich das nicht selber basteln;
sieht toll aus

[Sipple]

Moin Wil

Siehe zip Datei.

Dass du sämtliche Items durch deine eigenen ersetzen musst, ist klar. Sollte auch selbsterklärend sein, welches Item was enthält.

Zeile 4 und Zeile 29: Das ist das kleine Polestar Logo in der Blocküberschrift. Dort steht auch der Pfad wo das liegen sollte. Das polestar.svg habe ich mit dazu gepackt.

Zeile 8 ist entsprechend das Bild des Polestar 2. Das habe ich nicht mit geschickt, weil das bei mir ja eine völlig andere Farbe ist. Wo bekommt man das in guter Qualität und ohne Hintergrund? Das ging "damals" entweder über die Polestar Webseite im persönlichen Login oder über die Tibber API. Da muss man etwas tricksen, dann bekommt man aber "seinen" Polestar in acht möglichen Perspektiven, also z.B. von vorne rechts etc. Man kann sich eine URL selbst zusammenreimen, wenn man weiß, wie das Format ist, dann zeigt der Browser das Bild an und du kannst es einfach sichern.
Wie das exakt ging weiß ich gar nicht mehr, aber da fragst du Maxi (Ixam97), den CSV Programmierer, im Polestar Forum. Der hat mir das gezeigt. Andere wissen das bestimmt auch.

Sollten die Timestamps bei dir nicht so angezeigt werden, wie in meinen Screenshots zu sehen, liegt das daran, dass ich den Inhalt meiner Items in meiner eigenen Abfragelogik so formatiere wie ich es möchte. Das geht bei dir wegen dem Umweg über den Container und MQTT natürlich nicht so einfach.
Da wird bei dir - wenn überhaupt - sowas dabei raus kommen: 2024-11-23T11:59:05.000Z, je nachdem, was Consulitas da macht. Wer weiß, ob er dafür überhaupt ein MQTT Topic hat. Gilt natürlich auch für alle anderen Items.

Polestar2.zip

[whe]

Mit diesem Beispiel habe ich eine Weile experimentiert und festgestellt, dass dies super aussieht, aber sich auf unterschiedlichen Devices unterschiedlich verhält, (wie allerdings auch manch andere Layouts).
Aber vielleicht hat Wolfram eine Idee, wie man das mit dem Foto besser lösen kann.
Das Beispiel von Sipple mit der Tabelle um den Block zu teilen, passt auf dem Handy nicht, da wird dann der Text rechts schnell umgebrochen.
Die Tabelle wird immer noch häufig zur Gestaltung einer Seite genutzt, ist aber wohl nicht mehr state of the art.
Wie könnte man das allgemeiner lösen.

[Sipple]

Hi Wil

Da rennst du bei mir offene Türen ein.
Der Grund, warum ich immer noch auf Tabellen zurückgreife, ist schlicht und einfach, weil es funktioniert. Alle anderen Methoden, Objekte innerhalb eines SmartVISU Blocks sauber zu positionieren, sind kläglich gescheitert und sie verhalten sich in keinem Browser gleich. Ich habe das Thema in den letzten Jahren das eine oder andere mal angesprochen, aber eine funktionierende und allgemeingültige Lösung gab es nie. Kein Vorwurf an irgendwen, aber steht ganz oben auf meiner Wunschliste.
Tabellen funktionieren nach meiner ganz persönlichen Erfahrung eigentlich immer, egal in welchem Browser. Auf den Smartphones sind manche dann leider zu breit und die Texte werden umgebrochen. Bin noch nicht dazu gekommen, das schöner zu machen. Eine Lösung könnte sein, dass man die Spalte mit dem Bild abhängig von der Device Art ausblendet. Wie das geht weiß ich nicht. Meine Kenntnisse sind da eh eher rudimentär. HTML geht inzwischen ganz ok, CSS in ganz wenigen Ausnahmefällen, alles andere, z.B. JS oder schiessmichtot, geht gar nicht.
Und das ist auch ein allgemeines Problem. Viele nutzen SHNG und die Smartvisu, ohne Experten zu sein. Alles, was mit einfachen Mitteln zu lösen ist, bekommt auch jeder hin. Wenns dann zu kompliziert wird, steigen viele - mich eingeschlossen - komplett aus.
Wenn irgendjemand da eine zündende Idee hat, wie man solche Darstellungsprobleme einfach lösen kann, wäre ich glücklich.
Dazu gehört für mich meine Liste:
- Das Seitenmenü links ist mir 9 von 10 mal viel zu breit. Den Platz hätte ich gerne für die Blöcke im rechten Bereich. Alles, was ich dazu bisher gefunden habe, hat nicht zuverlässig funktioniert oder war schlicht zu kompliziert.
- Darstellung von Elementen nur im Querformat, bzw. wenn genug Platz ist um alles in einem Block ohne unschöne Effekte (siehe oben) darzustellen.
- Mehr Variabilität der Blöcke. Wie man die Höhe bei Bedarf vergrößern kann, weiß ich inzwischen. Breite geht nicht oder ist mir nicht bekannt. Mehr Spalten weiß ich auch nicht. Ich hätte z.B. gerne manchmal einen schmalen Block und daneben einen breiteren, aber nicht fest auf z.B. Pixel eingestellt, sondern schon noch dynamisch. Man hat je nach Bildschirm halt nur eine oder zwei Spalten und bei letzterem sind alle Blöcke nebeneinander immer gleich breit, was manchmal doof aussieht.
- Drei Spalten habe ich hier schon mal gesehen, aber nicht hinbekommen, außerdem sollte das je nach Seite evtl. nicht immer so sein.

Das ist das, was mir in dem Zusammenhang auf die Schnelle einfällt.

Um auf dein aktuelles Problem zurück zu kommen: Vielleicht reicht es ja schon, wenn du das Bild etwas kleiner darstellst. Da kommts manchmal auf jedes Pixel an.

[wvhn]

Die Visu liefert glaube ich eine ganze Menge out-of-the-box einsetzbarer Möglichkeiten, mit denen man eine responsive Visualisierung auf einer breiten Palette von Geräten erhält. Dabei bewähren sich die Blöcke, weil die sich selbst je nach Bildschirmbreite neben- oder untereinander anordnen. Deren Standard-Breite ist entsprechend festgelegt. Für die meisten Anwender reicht das aus.

Der Grund, warum ich immer noch auf Tabellen zurückgreife, ist schlicht und einfach, weil es funktioniert. Alle anderen Methoden, Objekte innerhalb eines SmartVISU Blocks sauber zu positionieren, sind kläglich gescheitert und sie verhalten sich in keinem Browser gleich. Ich habe das Thema in den letzten Jahren das eine oder andere mal angesprochen, aber eine funktionierende und allgemeingültige Lösung gab es nie. Kein Vorwurf an irgendwen, aber steht ganz oben auf meiner Wunschliste.

Das stand schon zu Zeiten meines Vorgängers auf der Wunschliste, ist aber nicht einfach zu realsieren, weil man dann natürlich genau wissen muss, wie viel Platz zur Verfügung steht und diesen dann im speziellen Fall ausnutzen muss. Mir ist dazu noch keine allgemeingültige Lösung eingefallen. Gute Erfahrungen habe ich mit Tabellen gemacht, deren Spaltenbreite man in % angibt. Wenn die Spalten allerdings zu schmal werden, kann es wieder Probleme mit Symbolen geben, die in px definiert sind.

Eine Lösung könnte sein, dass man die Spalte mit dem Bild abhängig von der Device Art ausblendet. Wie das geht weiß ich nicht.

in der ./pages/base/base.css stehen ganz am Anfang ein paar @media-Definitionen für unterschiedliche Bildschirmgrößen. Damit sind die Inhalte geräteabhängig definiert. Man kann diese Anweisungen in die eigene visu.css kopieren und Eigenschaften umdefinieren oder zusätzlich festlegen. Zum Verstecken von Inhalten auf dem smartphone kann man denen die Klasse ".hide-phone" mitgeben. Also in das entsprechende Element ' class="hide-phone" ' schreiben. “ .show-phone” ist das Gegenstück dazu. Mit

<div class="hide-phone">
    Hier den Code für eine Desktop-Seite
</div>
<div class="show-phone">
    Hier den Code für die zugehörige Smartphone-Seite
</div>​

kann man sogar ganze Seitenabschnitte geräteabhängig steuern.

- Das Seitenmenü links ist mir 9 von 10 mal viel zu breit. Den Platz hätte ich gerne für die Blöcke im rechten Bereich. Alles, was ich dazu bisher gefunden habe, hat nicht zuverlässig funktioniert oder war schlicht zu kompliziert.

Hierzu kopiert man die Klassen-Definitionen .base .primary und .base .secondary aus der base.css in die visu.css und verändert die Werte für "width". Sind nur bestimmte Seiten betroffen, stellt man den Klassen jeweils die id der Seite voran. Beispiel: #wohnzimmer.base .primary ...

- Darstellung von Elementen nur im Querformat, bzw. wenn genug Platz ist um alles in einem Block ohne unschöne Effekte (siehe oben) darzustellen.

Geht auch über die @media-Anweisungen, oder mit den Klassen .hide-phone, .hide-tablet...

- Mehr Variabilität der Blöcke. Wie man die Höhe bei Bedarf vergrößern kann, weiß ich inzwischen. Breite geht nicht oder ist mir nicht bekannt. Mehr Spalten weiß ich auch nicht. Ich hätte z.B. gerne manchmal einen schmalen Block und daneben einen breiteren, aber nicht fest auf z.B. Pixel eingestellt, sondern schon noch dynamisch. Man hat je nach Bildschirm halt nur eine oder zwei Spalten und bei letzterem sind alle Blöcke nebeneinander immer gleich breit, was manchmal doof aussieht.

Wie man Breite und Höhe der Blöcke ändert, steht auf der Doku-Seite Design>Blocks

- Drei Spalten habe ich hier schon mal gesehen, aber nicht hinbekommen, außerdem sollte das je nach Seite evtl. nicht immer so sein.

3 Blöcke passen nebeneinander, wenn man pro Block die Breite auf 33% einstellt. Siehe ebenfalls die Doku-Seite für die Blöcke.

In CSS muss man sich erstmal eine Weile eindenken. Das ist nicht jedermanns Sache, aber es gibt ja schon eine Menge Lösungen hier im Forum. Wenn man mit den Entwicklertools des Browsers umgehen kann, dann kann man sich das meiste herleiten und auch live an den Formaten spielen. Es lohnt sich, sich da mal näher einzufuchsen.

Gruß
Wolfram