Probleme wenn Homestatus und Knob gemeinsam benutzt

jayjay · 10 Februar 2020, 16:18:35

Wenn ich das Module Homestatus zusammen mit dem Modul Knob auf der gleichen Seite verwende gibt es ein Problem, das sich je nach Browser unterschiedlich zeigt:
Chrome unter Windows 10: erscheinen keine Icons im Homestatus sonder der Text "undefined" anstelle der Icons.
Firefox 60.9.0 unter Windows 10: es erscheint gar nichts im Fenster
-> Siehe Bilder im Anhang

Dieses Verhalten tritt aber nur auf falls Knob im HTML Text for Homestatus definiert wird. Wird es danach definiert oder gar nicht verwendet funktioniert Homestatuts richtig.

html der zum Fehler führt:

Code Auswählen


<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
                <header>Knob</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
				<div data-type="knob" data-device="HZ_test1" data-get="measured-temp" data-set="desired-temp"></div>
                        </div>
                    </div>
               </div>
            </li>
            <li data-row="1" data-col="2" data-sizex="2" data-sizey="2">
                <header>Homestatus</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
				<div data-type="homestatus" data-device="Heiles_States" data-get="SJ_State"  data-get-on='["auto_work","away","auto_home","party"]' data-set="SJ_State" data-alias='["Auto Arbeit","Ausser Haus","Auto Zuhause","Party"]' data-icons='["fa-building","fa-walking","fa-home","fa-cocktail"]' class=""></div>
                        </div>
                    </div>
               </div>
            </li>
        </ul>
    </div>
</body>

html ohne Fehler:

Code Auswählen


<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="2" data-sizex="2" data-sizey="2">
                <header>Homestatus</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
			<div data-type="homestatus" data-device="Heiles_States" data-get="SJ_State"  data-get-on='["auto_work","away","auto_home","party"]' data-set="SJ_State" data-alias='["Auto Arbeit","Ausser Haus","Auto Zuhause","Party"]' data-icons='["fa-building","fa-walking","fa-home","fa-cocktail"]' class=""></div>
                        </div>
                    </div>
               </div>
            </li>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
                <header>Knob</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
				<div data-type="knob" data-device="HZ_test1" data-get="measured-temp" data-set="desired-temp"></div>
                        </div>
                    </div>
               </div>
            </li>
        </ul>
    </div>
</body>

In Chrome konnte ich den Fehler mit den Debuggertools eingrenzen:
In der function drawDial des Moduls homestatus gibt es den folgenden Code zum Erstellen eines Arrays mit den Icons:

Code Auswählen


        if (!this.$.data('iconIDs')) {
            this.$.data('iconIDs', $.map(this.$.data('icons'), function (icon) {
                return ftui.getIconId(icon);
            }));
        }
        var icons = this.$.data('iconIDs');

Beim Aufruf von ftui.getIconId (in der fhem-tablet-ui.js wird mit

Code Auswählen


    var cssFile = $('link[href$="lib/font-awesome.min.css"]')[0];
    if (cssFile && cssFile.sheet && cssFile.sheet.cssRules) {
      var rules = cssFile.sheet.cssRules;
      for (var rule in rules) { ...

das font-awesome css nach dem Code für den entsprechenden Iconname durchsucht. Beim fehlerhaften Verhalten ist der css.File.sheet Eintrag aber leer (sheet:null).

Hat jemand eine Idee woran das liegen kann?
Homestatus basiert ja auf Knob. Kann hier etwas bei der Initialisierung durcheinander kommen?

jayjay · 12 Februar 2020, 17:11:32

So ich habe das Problem genauer eingegrenzt. Es ist ein Timingproblem beim dynamische Laden des font-awesome.min.css Files.
Ohne Knob Widget oder wenn es erst nach dem Homestatus Widget im HTML verwendet wird, wird zuerst das widget_homestatus.js geladen, dann font-awesome.min.css, danach widget_knob.js und jquery.knob.mod.min.js. Bis zum Zugriff auf font-awesome.min.cssin ftui.getIconId ist anscheinend genügend Zeit für font-awesome.min.css vollständig zu laden.
Im Fehlerfall, wenn das Knob Widget vor dem Homestatus Widget im HTML verwendet wird, wird zuerst widget_knob.js und jquery.knob.mod.min.js geladen. Danach homestatus.js und font-awesome.min.css. Das Laden von widget_knob.js und jquery.knob.mod.min.js wird zwar auch nochmal angefordert, aber da sie schon geladen sind ist dies nicht mehr notwendig. Damit scheint die Zeit zum vollständigen Laden von font-awesome.min.css nicht auszureichen.
Wenn die font-awesome.min.css schon im HTML Header einfüge funktioniert es.

Ich habe jetzt mal in der dynamicload Function der fhem-tablet-ui.js (Zeile 1702) auch für das Laden von CSS Files ein onload Event Function für defered.resolve() eingefügt. Beim Laden von Script Files gibt es dies schon. Danach funktionierts es, aber eventuell gibt es damit andere Effekte.

Code Auswählen


var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = url;
        link.media = 'all';
// neuer Code
        link.onload = function () {
          ftui.log(3, 'dynamidynamic load done:' + url);
          deferred.resolve();
        };
// bis hier
// gelöscht        deferred.resolve();
        document.getElementsByTagName('head')[0].appendChild(link);

FHEM Forum

Probleme wenn Homestatus und Knob gemeinsam benutzt

jayjay

jayjay