FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Mario67 am 26 Oktober 2016, 18:36:52

Titel: Widgets in Tabelle
Beitrag von: Mario67 am 26 Oktober 2016, 18:36:52
Um die aktuellen Werte meiner Heizungsanlage als Overlay mit transparentem Background über eine schematische Darstellung der Anlage (SVG, Hintergrundbild) zu legen, nutze ich eine Tabelle.
Diese wird in einer PERL-Funktion erzeugt (in myUtils, getriggert durch ein Notify), welche einen Dummy mit dem HTML-Tabellen-Code beschreibt. Dieser String wird dann mit einem Label-Widget dargestellt.
Das Ganze funktioniert, von Positionierungs-/ und Skalierungsunterschieden zwischen PC und Tablet abgesehen, ziemlich stabil (siehe Bild: die ,,_" dienen als Platzhalter während der Designphase ;-).
Bestimmte Infos (z.B. Brennerstatus) möchte ich gern mit Symbolen darstellen. Dazu generiere ich entsprechenden Code in die passende Zelle
z.B.
<tr>
   <td>:</td>
    <td>
       <div data-type="symbol"
          data-device="Buderus_EMSClient" 
          data-get="heateractive"
          data-states='["on","off"]'
          data-icons='["fa-fire","fa-fire"]'
          data-colors='["red", "black"]'
         class="tiny">
       </div>
    </td>
      :
      :
</tr>
Leider wird das Icon nicht dargestellt.
Eine Inspektion mit den Entwicklertools haben vernünftiges HTML für die Tabelle und die betreffende Zelle gezeigt. Wenn ich dort ein Label-Widget einbette, wird dessen Inhalt auch angezeigt. Wird das Label mit der großen Tabelle und Hintergrundbild zum Test in ein Popup eingebettet, wird dort das Bild manchmal angezeigt. Dann ist es aber gelegentlich beim nächsten Update der Readings aus der FHEM-Instanz wieder weg.

Wichtig ist noch die Tatsache, dass die Seiten über Pagebuttons (wie in den Demos von setstate) aufgerufen werden. Eventuell gibt es hier einen ähnlichen Effekt wie bei Chart?
Hat jemand bereits Ähnliches erlebt oder eine Idee?

Gruß,
Mario
Titel: Antw:Widgets in Tabelle
Beitrag von: Mario67 am 29 Oktober 2016, 01:03:21
Ich war inzwischen immerhin in der Lage die konkrete Ursache für das Fehlen des Symbols zu finden.
Die sonst durch die Basis-Implementierung widget_famultibutton.js hinzugefügten Includes
z.B.
<i id="bg" class="fa fa-stack-2x" style="color: blue;"> </i>
<i id="fg" class="fa fa-stack-1x fa-fire" style="color: firebrick;"> </i>

fehlen, wenn man sich die angezeigten Elemente mit F12 ansieht.
Das passiert aber nur, wenn das Label-Widget zur Anzeige des HTML-Fragments (Tabelle mit dem Symbol-Widget und anderen Labeln) benutzt wird.
Wenn ich dann allerdings die Sequenz zum Test hart einfüge, wird das Symbol auch angezeigt.

Jetzt fehlen mir langsam die Ansätze zum Weitersuchen.

Auf eine Tabelle würde man natürlich gern verzichten. Die Idee von Sven (https://forum.fhem.de/index.php/topic,37378.msg385939.html#msg385939) funktioniert bei mir auch nicht. Die notwendige sehr starke Verringerung der Basismaße für die Gridster-Elemente (widget_base_width, widget_base_height) lässt sich wohl nicht lokal auf eine Sub-Seite (vorgeladen und über Pagebutton aufgerufen) beschränken.

Gruß,
Mario
Titel: Antw:Widgets in Tabelle
Beitrag von: setstate am 29 Oktober 2016, 08:09:44
Wenn man DIVs mit data-type="irgendeinwidget" durch Injektion nachträglich in die DOM Struktur einfügt, müssen diese erst initialisiert werden, damit sie funktionieren.
JS-Code: initWidgets(area);
Also muss man sich einen trigger bauen, der auf Änderung an der Tabelle reagiert und dann für diese die Widgets initialisiert: initWidget('#myBigTable');
Titel: Antw:Widgets in Tabelle
Beitrag von: Mario67 am 29 Oktober 2016, 22:51:41
Danke für den Hinweis. Leider war ich noch nicht erfolgreich.
Ich denke, das Triggerereignis passt nicht. Ich habe nur onhashchange gefunden.

Anbei mein Versuch.

HTML-Content zur Anzeige im Label-Widget:
<table id="heatingtable">
    <colgroup id="spaltengruppe">
      <col>
      :
      :
    </colgroup>
    <tr>
        <td class="cell left-align">
            <div data-type="symbol"
                data-device="Buderus_EMSClient" 
                data-get="heateractive"
                data-states='["on","off"]'
                data-icons='["fa-fire","fa-fire"]'
                data-colors='["red", "black"]'
                class="cell">
            </div>
        </td>
        </div>
    </tr>
</table>

Unterseite zur Anzeige:
<body style="margin: 0px; padding: 0px;" onhashchange="initWidget('#heatingtable');">
        <div class="page gridster" id="content9">
            :
            :


Label-Widgets werden, wie gesagt,  korrekt angezeigt.

Gruß,
Mario
Titel: Antw:Widgets in Tabelle
Beitrag von: setstate am 30 Oktober 2016, 10:38:06
onhashchanged ist der falsche Zeitpunkt, viel zu früh. Da beginnt erst der Neuaufbau der Seiten.
Man muss sich ein Custom-Event erzeugen und sich das damit verbinden.

im Widget-Label müssen diesen 2-3 Zeilen (mit dem +) zusätzlich rein (ohne das + kopieren!)


                if ( !elem.hasClass('fixedlabel') ) {
                  if ( unit )
                    elem.html( val + "<span class='label-unit'>"+unescape(unit)+"</span>" );
                  else
                    elem.html(val);
               +   if (elem.children().length > 0){
               +       elem.trigger('domChanged');
               + }
                }


Auf der HTML bindet man das Event so ein:


<script>
    $(document).on('domChanged','#myNode', function(e) {
        ftui.initWidgets('#myNode');
    });
</script>


Ich sehe aber noch einen (abgefangenen) Fehler in der Console in solch einer Konstellation bei mir, den ich mir erst noch ansehen muss.
Titel: Antw:Widgets in Tabelle
Beitrag von: Mario67 am 30 Oktober 2016, 12:16:02
Danke für die Sonntagsarbeit ;-)
Ich war gestern spät doch noch auf die passene Signatur ftui.initWidgets('#heatingtable'); gekommen.
Das Einbinden des Symbol-Widgets funktioniert auch schon mal, wenn ich die Methode direkt aus einem Push-Widget onclick heraus aufrufe.