[Gelöst] Elemente ausblenden wenn Device off / Umstieg von 2.7 auf 3.0.1

[swsmily]

Hallo.

ich habe eine Smartvisu-Seite, wo ein Hauptgerät angeschaltet oder ausgeschaltet werden kann.
Wenn es angeschaltet ist, möchte ich, dass weitere Elemente eingeblendet werden.  Ansonsten sollen diese nicht sichtbar sein.

Hier ein kleiner Teil der Konfig:

Code: [Auswählen]

<!-- Hauptsteuerung -->
<ul data-role="listview" data-dividertheme="c">
<li data-role="list-divider">Hauptsteuerung</li>
<li data-icon="false">
<table width=100% align=center>

<tr>
<td align=center>

<h2><font color="ffffff" size="5">Hauptschalter f&uuml;r L&uuml;ftersteuerung</font></h2>
{{ basic.button('lufthaupt0', 'lufthaupt', 'An' , '', 'on', 'maxi') }}
{{ basic.text('lufthaupt0', 'lufthaupt', '<br><font color="00ff00" size="5">An</font>', '<br><font color="gray" size="5">An</font>', 'on', '') }}
{{ basic.button('lufthaupt1', 'lufthaupt', 'Aus' , '', 'off', 'maxi') }}
{{ basic.text('lufthaupt1', 'lufthaupt', '<br><font color="00ff00" size="5">Aus</font>', '<br><font color="gray" size="5">Aus</font>', 'off', '') }}
</td>

###### ab hier nur anzeigen, wenn 'lufthaupt' an ist #####

<td align=center>
<h2><font color="ffffff" size="5">L&uuml;ftergebl&auml;se</font></h2>
{{ basic.button('lufter0', 'lufter', 'rein' , '', 'rein', 'maxi') }}
{{ basic.text('lufter0', 'lufter', '<br><font color="00ff00" size="5">Rein</font>', '<br><font color="gray" size="5">Rein</font>', 'rein', '') }}
{{ basic.button('lufter1', 'lufter', 'aus' , '', 'aus', 'maxi') }}
{{ basic.text('lufter1', 'lufter', '<br><font color="00ff00" size="5">Aus</font>', '<br><font color="gray" size="5">Aus</font>', 'aus', '') }}
{{ basic.button('lufter2', 'lufter', 'raus' , '', 'raus', 'maxi') }}
{{ basic.text('lufter2', 'lufter', '<br><font color="00ff00" size="5">Raus</font>', '<br><font color="gray" size="5">Raus</font>', 'raus', '') }}

</td>
</tr>
</table>
</li>
</li>

Ich möchte gern, dass wenn lufthaupt = on ist, dass nur dann alles andere darunter angezeigt wird.
Versucht habe ich mich an collapse und hide, aber bin mit allen Versuchen gescheitert.
Smartvisu nutze ich in Version 2.8.

Was ich gefunden habe, dass mit <div> </div> irgendwie Bereiche markiert werden können, die hidden sind, oder collapse - aber egal was ich probiert habe, es hat mich leider nicht zum Erfolg gebracht.

Hat jemand einen Tipp, was ich genau machen könnte? Oder - zugegeben, Lerneffekt dadurch geringer - könnte mir meinen Code oben "anpassen", damit es funktioniert?

Kleiner Hintergrund warum ich das möchte: Die eigentliche Steuerung der Lüftung (Lüftergebläse, diverse Klappen, die ich der einfachheithalber aus dem Code raus gelassen habe) bekommt erst überhaupt Strom, wenn der Hauptschalter (ein Sonoff) angeschaltet wird.

Vielen Dank bereits im Voraus für eure Hilfe.

[wvhn]

Das geht mit dem Widget status.collapse.

Code: [Auswählen]

{{ status.collapse('w1', 'lufthaupt') }}
<div class="hide" data-bind="w1">
... hier das, was nur bei lufthaupt=on angezeigtbwerden soll.
</div>

In der Doku gibt es dafür Beispiele.

Gruß
Wolfram

P.S.: v2.8 ist schon ziemlich alt. Ein Update wäre sicher sinnvoll. Das erfordert allerdings einige Änderungen an den inzwischen gelöschten Widgets.

[swsmily]

Danke für deine Hilfe.
Ich habe Testweise auch eine Smartvisu 3.0.1 bei mir laufen, dort funktioniert dein Beispiel.
Unter der alten Version leider nicht.

Ich weiß, dass die 2.7 schon sehr alt ist, aber hab große Probleme alles was ich in 2.7 hinbekommen habe in die neue Version zu verändern.

Zwei Beispiele:

Um Buttons besser "touchbar" auf einem Wandtablet zu machen, konnten Buttons breiter gemacht werden, wenn im Text des Buttons vor und nach dem Text jeweils &nbsp; mehrfach eingefügt hat.
Das wird in der neuen Version ignoriert. Da hilft dann nur ein geschützes Leerzeichen (ALT+0160), was aber z.B. in Notepad++ optisch ja nicht von einem normalen Leerzeichen zu unterscheiden ist. Im Anhang dazu mal ein kleines Beispiel, wie es einmal ohne und einmal mit geschützen Leerzeichen aussieht.
Gibts dafür evtl. eine angenehmere Möglichkeit? Laut Doku ist das größste der Modus "medi" bei Buttons - das habe ich in beiden Beispielen genutzt.


Ebenso habe ich noch keine Möglichkeit gefunden von FHEM aus einen HTML-Text an Smartvisu zu übergeben.
Bisher hab ich basic.value, das den Inhalt eines Dummys aus FHEM anzeigt. Dort werden mir Geburtstage angezeigt. Wenn an einem Tag kein Geburtstag hinterlegt ist, ist der HTML-Inhalt eben leer, damit keine Anzeige in Smartvisu.
Dafür habe ich bis jetzt auch keine Möglichkeit gefunden, da scheinbar neuere SmartVisu-Versionen leider HTML-Code nicht mehr umsetzen.
Dies sind beides Gründe, warum ich lieber bei der alten Version bleiben wollte.

Hat zwar mit dem Ursprungsthema gerade nicht wirklich was zu tun, aber gibt es evtl. dafür auch Möglichkeiten in neueren Versionen?

[wvhn]

In Deinem Post hattest Du v2.8 geschrieben. Deshalb hatte ich es in einer v2.8 getestet, die ich noch zu Vergleichszwecken habe.

Zu den "Wurstfinger"-Buttons  gibts im smartVISU-Forum einen Tipp, der einen Bug zum Feature gemacht hat:
https://knx-user-forum.de/forum/supportforen/smartvisu/1634938-basic-stateswitch-treppenlichtfunktion-icon-farbe
Hier wird anstelle eines icon-Typs einfach irgendetwas eingegeben.
Sauberer wäre es, eigene Button-Größen in der visu.css anzulegen.

Zur html-Ausgabe gibt es das Widget basic.print. Schau Dir mal die Inline-Doku an und probiere den Widget Assistenten aus.
Hier die Beschreibung des Parameters "format":

Code: [Auswählen]

format
either a unit of the language file, an individual format string (PHP sprintf like) or a simple string as suffix.
Use 'text' to display result as unformatted string, 'html' to render it as unescaped html, 'text2br' to convert line endings like '\r', '\n' or '\r\n' to HTML breaks or 'script' to just execute as JavaScript w/o displaying anything.
Gruß
Wolfram

[wvhn]

Theoretisch kann man das status.collapse auch nach v2.7 übernehmen. Dazu das entsprechende Macro in der ./widgets/status.html von v2.8 nach v2.7 übernehmen - mit den dazu gehörenden Doku-Zeilen.
Dann aus der ./widgets/widget.js den js-Code für status.collapse ab Zeile 1172 kopieren und in v2.7 einsetzen. Aber Achtung: das Widget darf nicht an jQuery mobile gebunden werden, wie in v2.8, sondern mit $(document).delegate… wie die anderen Widgets in v2.7.

Ein Versionswechsel ist IMHO dennoch sinnvoller. Die neuen Versionen können erheblich mehr. Nachzulesen im Changelog im Rootverzeichnis der aktuellen Version.

Gruß
Wolfram

[swsmily]

Hallo Wolfram, danke für deine Hinweise.
Ich habe das mit dem basic.print nun ausprobiert und es funktioniert. Ich hab wohl in der Doku das html übersehen, als ich den Versuch gewagt hatte, alles auf 3.0.1 umzustellen.

Apropos "Wurstfinger" - so ist wohl auch der Tippfehler passiert mit den Versionen. Meinte im ersten Post eigentlich auch 2.7 statt 2.8 - aber die Zahlen lagen wohl zu nah beieinander. 

Werde nun erstmal alle Buttons die ich habe auf die neue Version umändern und schauen, wann und wo ich wieder auf Probleme stoße und dann auch die Doku nochmal genauer studieren.
Wenn ich alles soweit durch habe, schau ich mir mal die visu.css an, wie ich da eigene Button-Größen anlegen kann.
Das Collaps übernehmen in die alte Version klingt mir etwas zu kompliziert und ist wohl auf Dauer eh nicht die beste Möglichkeit. Daher mache ich mich mal dran, alles auf die neue Version zu bringen. Viel Arbeit  - aber so wird nich langweilig 


Nochmals Danke für deine Hilfe und Hinweise. Das hat mich sehr weiter gebracht!
viele Grüße
Sebastian

[swsmily]

Hallo Wolfram,

dank deiner Hilfe ist es mir gelungen eigentlich alles auf 3.0.1 umzustellen. Bis auf eines.
Ich hatte basic.text, welches nur angezeigt wurde, wenn das Device Offline war:

Code: [Auswählen]

<h2><font color="ffffff" size="5">Kamin-Licht {{ basic.text('Kamin-Heizung_Licht_r_1', 'Kamin-Licht_online', ' <font color="red"> ist Offline</font>', '', 'Offline','') }}</font></h2>
Auf Smartvisu wurde damit über den Buttons "Kamin-Licht" angezeigt, wenn aber das Device selbst Online war. War das Device Offline wurde "Kamin-Licht ist Offline" angezeigt, wobei "ist Offline" rot angezeigt wurde.

In dem Wert Kamin-Licht_online wird von FHEM Online oder Offline übergeben. Wenn ich nun basic.print nutze, bekomme ich es einfach nicht hin, dass ich in der SmartVisu-Seite sowas einstelle: Wenn Device Offline, dann schreibe Text in rot "ist Offline".
Ich bekomme es nur hin, dass der von FHEM übermittelte Wert angezeit wird.

Mit

Code: [Auswählen]

{ basic.print('Kamin-Heizung_Licht_r_1', 'Kamin-Licht_online', ' <font color="red"> ist Offline</font>', '', 'Offline','') }}wird nur Online oder Offline angezeigt.

Mit

Code: [Auswählen]

{{ basic.print('Kamin-Heizung_Licht_r_1', 'Kamin-Licht_online', 'text', ['Online', 'Offline'], ['Online', 'Offline'], ['#00ff00', 'grey']) }}kommt als Anzeige 0,0,---

Um den ganzen Text zusammenzufassen, ist es möglich mit basic.print einen beliebigen Text (mit html zu formatieren), je nach Status eines Readings in FHEM?

Kannst du mir evtl. nochmals einen Tipp geben? 

[wvhn]

Hallo Sebastian,

die Anzeige von Symbolen und Texten in Abhängigkeit von items erledigt basic.symbol. Der Docstring für den item-Parameter sagt zwar, dass ein item von numerischem Typ erwartet wird, aber es funktioniert auch mit items vom Typ Text.
Wenn Du für den Parameter „value“ die beiden Werte in Array-Form ['online', 'offline'] angibst, kannst Du Texte, Symbole und Farben ebenfalls in Array-Form dazu definieren. Wenn Du nur die Anzeige für 'online' benötigst, brauchst Du die Arrays nicht.

Gruß
Wolfram

[swsmily]

Hallo Wolfram,

da wäre ich nie drauf gekommen basic.symbol für einen Text zu nutzen 

Vielen vielen Dank für deine Unterstüzung. Ich habe nun alles umgestellt bekommen und es funktioniert perfekt. Inklusive dem ursprünglich gewollten collapse 

viele Grüße
Sebastian