Beliebige Widgets etc. nur Anzeigen wenn Item einen bestimmten Wert hat

[Sipple]

Guten Morgen

Es gibt ja Widgets, die nur angezeigt werden, wenn ein Item einen bestimmten Wert hat. Gilt aber nicht für alle und schon gar nicht für mehrere zusammen.

Was ich möchte:

Ich möchte die openWB Wallbox in der Visu per MQTT abfragen und steuern. MQTT klappt schon mal.
In der Visu habe ich jetzt einen basic.select, mit dem ich die Lademodi der openWB anzeigen und einstellen kann.
Sieht so aus:

{{ basic.select('', 'go_e.openWB_ChargeMode', 'midi', [0, 1, 2, 3, 4], ['control_on_off.svg', 'measure_photovoltaic_inst.svg', 'measure_photovoltaic_inst.svg', 'control_cancel.svg', 'control_standby.svg'], ['Sofort', 'Min+PV', 'Nur PV', 'Stop', 'Standby'], '', '') }}

Screenshot 2021-03-21 104048.png

Jetzt gibt es aber je nach Lademodus noch weitere Einstellmöglichkeiten, oder eben nicht. Die maximale Ladestromstärke z.B. oder ob das E-Auto oder der Speicher Vorrang haben. Die Widgets dafür sind wohl eher nicht das Problem, ein paar simple, weitere basic.select, basic.stateswitch oder basic.slider.
Die sollen aber nur angezeigt werden, wenn der entsprechende Lademodus ausgewählt wurde, was ein simpler num Wert von 0 bis 4 ist.

Wie mache ich das? Javascript fällt aus, kann ich nicht. In den Widgets findet man ja immer wieder diese {% if... %} {% else %} {% endif %} Konstrukte. Das ist doch kein HTML, oder? Google wirft was aus, was "Django" genannt wird.
Ist das der richtige Weg oder nur was für die Widget Definitionen?
Wichtig ist vor allem, dass die abhängigen Widgets angezeigt werden, wenn man den basic.select oben ändert, also nicht nur nach einem Page-Reload.

Bin für jede Hilfe dankbar.

Gruß, Martin

[wvhn]

Hi Martin,

Mit dem Widget status.collapse kannst Du ganze divs, popups und collapsible blocks ein- und ausblenden. Die inline-Doku enthält Beispiele dafür. Du kannst also 5 Abschnitte in Deiner html anlegen mit jeweils class="hide" und data-bind an jeweils einen status.collapse mit dem entsprechenden Wert für das trigger-item.

Mit der aktuell im develop befindlichen Version könntest Du außerdem anstelle des basic.select eine identisch aussehende Abfolge von basic.symbol verwenden und diese jeweils ein Popup für die Einstellungen öffnen lassen.

Die {% if %}... Anweisungen gehören zur Twig Template Engine. Die sind nach dem Rendern der Seite statisch und helfen nicht bei der Anzeige dynamischer Inhalte.

Gruß
Wolfram.

[Sipple]

Danke Wolfram, status.collapse hört sich gut an. Damit versuche ich es mal.

[Sipple]

N'Abend Wolfram.

Das status.collapse wäre eigentlich genau das was ich brauche, nur "anders rum".
Wenn ich die Anleitung richtig verstehe, dann kann ich bei einem bestimmten Item-Wert ein div verstecken, aber nicht umgekehrt, also anzeigen.
Ich habe die Werte 0-4. Bei Wert 0 soll ein div angezeigt werden, alle anderen ausgeblendet, bei 1 ein anderes usw.
Das ginge nur, wenn man die Logik umdreht also "hide if NOT value". Alternative, indem man die Werte mit or kombiniert, also "hide if 1 or 2 or 3 or 4" usw.

Geht das?

Gruß, Martin

[wvhn]

Hi Martin,

ich hatte kurz die Doku gecheckt. Aber Du hast recht: man müsste das Widget genau umdrehen.
Das kannst Du erreichen, indem Du im der widgets/status.js die Zeile 47 änderst.

if (response[0]==this.options['val-collapsed']) {

Das sollte als Workaround erstmal gehen. Ich überlege mir eine dauerhafte Lösung.

Wenn Du status.collapse schon anderweitig nutzt, müsstest Du den Code in ein neues Widget kopieren. Dann melde Dich nochmal.

Gruß
Wolfram

[Sipple]

Schnell getestet und macht genau das was es soll.
Wieder einmal vielen Dank Wolfram.

Gruß, Martin

[wvhn]

Im develop branch ist jetzt eine neue Version, die eine Werteliste akzeptiert:

{{ status.collapse('w4', 'bath.multistate', [1, 2, 4]) }}

Die Logik ist jetzt wieder wie vorher. D.h. wenn das item einen der im Widget definierten Werte annimmt, wird der angebundene Abschnitt versteckt.

Gruß
Wolfram