New FHEM Tablet UI

[setstate]

Wird es da auch ein Example geben?

'türlich! Mind. das, womit ich jetzt experimentiert habe

[mc-hollin]

Also meine Lösung, so wie ich sie mir vorstelle, ist heute Morgen fertig geworden. Es gab einige Hürden zu nehmen, damit es so funktioniert, wie ich es mir vorstelle. Mit Ajax nur Teile austauschen, fadeOut, fadeIn und Back-Button Support.
Ich mache ein commit heute Abend fertig.

Ich hab gerade auch mal was in der Testumgebung probiert.

Code Auswählen Erweitern


// event page is loaded
$(document).on('ready readyAgain', function() {
    var total = $('li[data-template]').length;
    if (total>0){
        $('li[data-template]').each(function (index) {
            $(this).load($(this).data('template'), function() {
                if (index === total - 1) {
                    $(document).trigger('templatesInitialized');
                }
            });
        });
    }
    else{
        //continue immediately with templatesInitialized
        $(document).trigger('templatesInitialized');
    }
});

$(document).on('templatesInitialized', function() {
// der alte on ready Bereich



Durch den eigenen Event sind zumindest die Timingprobleme behoben und die Widgets werden initialisiert.

Freu mich auf deine Lösung !!!

[selfarian]

Warnungen in der Art können immer wieder vorkommen, weil das Zusammenspiel zwischen Github und Fhem-Update ein bisschen hakelig ist. Die gute Nachricht daran ist: Es sind nur Warnungen, keine Fehler

Leider hatte er danach immer abgebrochen. Aber jetzt hat es funktioniert Danke!

[tomster]

Also meine Lösung, so wie ich sie mir vorstelle, ist heute Morgen fertig geworden. Es gab einige Hürden zu nehmen, damit es so funktioniert, wie ich es mir vorstelle. Mit Ajax nur Teile austauschen, fadeOut, fadeIn und Back-Button Support.
Ich mache ein commit heute Abend fertig.

Saugeil! Und das Beste: ich spar mir die Arbeit, die ich mir eigentlich machen wolte ;-6

[setstate]

Aber bitte die Erwartungen nicht so hoch hängen, nicht das ihr dann enttäuscht seid.
Ist ja eh Bananen-Software, reift beim Kunden.

@mc-hollin: was ist der Unterschied zwischen Trigger und normalen Functions-Call? Ist das besser?

[mc-hollin]

@mc-hollin: was ist der Unterschied zwischen Trigger und normalen Functions-Call? Ist das besser?

Kann ich dir leider auch nicht sagen.
Wollte halt möglichst wenig an deinem Code ändern.
Wie gesagt, dein Projekt hat mich dazu gebracht mich tiefer mit jquery zu beschäftigen.
Dabei habe ich bei Tante Google diesen Ansatz gefunden und ausprobiert..

Normalerweise programmiere ich mit vb.net und VisualWebGUI

Hab noch was gefunden: http://jsperf.com/jquery-trigger-vs-function-call

[nesges]

Ich habe im Wiki mal zusammen geschrieben, wie man eigene Icons in FTUI einbinden kann: FAQ: Wie kann ich eigene Icons verwenden?

(bin mir noch nicht sicher, ob die FAQ der richtige Platz dafür ist, evtl. verschiebe ich noch)

[nesges]

Hab noch was gefunden: http://jsperf.com/jquery-trigger-vs-function-call

Demnach sollte man trigger und triggerHandler vermeiden wie der Teufel das Weihwasser

[rretsiem]

Hallo,

hat jemand einen Tipp wie ich die Lesbarkeit der aktuellen Temperatur im Thermostat-Widget etwas verbessern kann?

Im Moment sieht das bei mir bei ca. 22°C nämlich nicht sehr leserlich aus. Bzw schwer zu erkenn ob nun 21,5 oder 22,5°C herrschen...

[setstate]

Hallo,

hat jemand einen Tipp wie ich die Lesbarkeit der aktuellen Temperatur im Thermostat-Widget etwas verbessern kann?

Im Moment sieht das bei mir bei ca. 22°C nämlich nicht sehr leserlich aus. Bzw schwer zu erkenn ob nun 21,5 oder 22,5°C herrschen...

Noch nicht bequem, du musst im JS-Code rum-editieren -> widget_thermostat.js
Zeile 121 bzw. 123

Code Auswählen Erweitern

cfont="18px sans-serif";

Wenn du die Buchstaben dynamisch bunt haben willst, Zeile 93/94 reinnehmen, oder fix, indem du Zeile 82 änderst.

Code Auswählen Erweitern

    var destcolor = this.o.tkColor;

[setstate]

Soooo, ein Update ist bei Github gelandet: data-template und data-type="pagetab"

Mit data-template kann man bestimmte HTML Teile auslagern und wiederverwendbar in mehreren Seiten einbinden.

Mit folgendem HTML-Code kann lagert man zum Beispiel ein ganzes Gridster Element kpl. wiederverwendbar aus:

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li>


Mit data-type="pagetab" kann man auf eine andere Seite wechseln
Diese Beispiel ist der kpl. Inhalt der menu.html, welche man mit data-template="menu.html" in jeder index_*.html Seite einbinden könnte:

Code Auswählen Erweitern


<html>
<body>
    <header>MENU</header>
    <div class="cell">
        <div data-type="pagetab" data-url="index.html"  data-icon="fa-home" class="cell"></div>
        <div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div>
        <div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div>
        <div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div>
        <div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div>
        <div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div>
        <div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div>
    </div>
</body>
</html>


(http://knowthelist.github.io/fhem-tablet-ui/menu.png)

[mc-hollin]

Super, hat ja doch noch gestern geklappt 
In der Testumgebung funktioniert es!
Jetzt werde ich mal dein PageTab ausprobieren.
Implementierst du denn auch noch das Verzeichnis "Templates"?

Muss denn im Menutemplate der HTML und Body Tag vorhanden sein?
Eigentlich braucht man doch nur den Header und das Div-Konstrukt.

Hab ich das richtig gesehen, dass du "data-include" heraus genommen hast?
Sollte vielleicht kommuniziert werden.

Wenn jetzt noch über "<meta name="theme">" das Aussehen gesteuert werden kann,... 
Echt Klasse Arbeit!

[setstate]

Muss denn im Menutemplate der HTML und Body Tag vorhanden sein?
Eigentlich braucht man doch nur den Header und das Div-Konstrukt.

Hab ich das richtig gesehen, dass du "data-include" heraus genommen hast?
Sollte vielleicht kommuniziert werden.

Es müsste auch ohne gehen, aber mit ist es valides HTML z.B. für Standalone-Tests oder falls ein Editor darüber meckern würde.
"data-include" habe ich nie richtig angepriesen oder dokumentiert, von daher habe ich es stillschweigend verschwinden lassen. Aber ja, "data-include" geht ab sofort nicht mehr.

[mc-hollin]

Es müsste auch ohne gehen, aber mit ist es valides HTML z.B. für Standalone-Tests oder falls ein Editor darüber meckern würde.

Ok, ich hab gedacht, dass die Load-Funktion das komplette Html einbettet.
Macht es aber gar nicht. Somit ist das valide HTML klar der bessere Ansatz.
Man lernt nie aus.

[mw_fhem]

Ich wollte die Neuerungen testen und musste feststellen, dass der Update-Mechanismus nicht mehr geht (zumindest bei mir...). Den tablet-Ordner habe ich komplett gelöscht, aber ich bekomme folgende Meldung:

Code Auswählen Erweitern

2015-04-20 02:22:36 Global global nothing to do...