Widgets in Tabelle

[Mario67]

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.

Code Auswählen Erweitern

<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

[Mario67]

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.

Code Auswählen Erweitern

<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

[setstate]

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');

[Mario67]

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:

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern

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

Label-Widgets werden, wie gesagt,  korrekt angezeigt.

Gruß,
Mario

[setstate]

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!)

Code Auswählen Erweitern


                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:

Code Auswählen Erweitern


<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.

[Mario67]

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.