New FHEM Tablet UI

[aeronaut]

@nesges: Habe die Updatefunktion übernommen, funktioniert. Danke.

lg
aeronaut

[nesges]

loadplugin_async wird nicht aufgerufen oder?

Ich bin grade dabei eine Vererbungshierarchie einzuführen. Die Funktion wird zum dynamischen laden von Widgets benötigt.

[setstate]

Das ist aber ein guter Hinweis von Michael gewesen. Ich habe nicht mehr darauf  geachtet, ob ich asynchron oder synchron aufrufe. Ich wollte async benutzen, durch die Aufteilung mit der zweiten Funktion nahm ich das falsche. Muss ich noch ändern.
Wenn die Optimierung von gestern funktioniert, dann ist das schön. Das Update jetzt sehr oft aufgerufen wird, ist nicht schlimm. Die Widgets haben einen Filter, um nur für sie bestimmte Daten zu benutzen. Dieser zusätzliche Aufruf des Updates war ein Kompromiss, um die jetzige Art und Weise nicht völlig ändern zu müssen, aber auch mit den nebenläufigen Aufrufen fertig zu werden.

Update: bitte jetzt noch mal die fhem-tablet-ui.js von GIThub laden, ich habe das true für async gesetzt.

[Brockmann]

Eine Frage:
Ich habe bei mir zwei kleine Änderungen in der fhem-tablet-ui.js vorgenommen, um das Aussehen (nach meinem Geschmack) zu optimieren:

gridster = $(".gridster > ul").gridster({
          widget_base_dimensions: [wx, wy],
          widget_margins: [1, 1],
          extra_cols: 1,
          draggable: {
            handle: 'header'
          }

Das muss ich nun natürlich nach jedem Update wieder nachziehen.
Irgendwo hier im Thread stand schon mal, wie man gridster-Funktionen direkt aus dem HTML-Datei per script aufrufen kann:
<script data-type="text/javascript">$(document).ready(function() { gridster.disable() })</script>

Aber wie muss das aussehen, wenn ich Eigenschaften wie widget_margins per Skriptbefehl überschreiben möchte?

[stromer-12]

Beim Thermostat werden keine Werte < 10 dargestellt.
Ebenso taucht bei  den FHTs für den "actuator" ein doppeltes "%"-Zeichen auf.

Ich habe in der "widget_thermostat.js" folgende Zeilen angepasst:

Code Auswählen Erweitern

getClimaValues: function (device) {

        var state = getDeviceValue( device, '');
    var val_desired = getDeviceValue( device, 'get');
    var val_desired = ( state && state.indexOf('set_') < 0 ) ? val_desired : getPart(state,2);
    var val_temp = getDeviceValue( device, 'temp');
+    var val_valve = getDeviceValue( device, 'valve');

        return {
-        temp: getPart(val_temp,'(\\d+[.,]?\\d+).*'),
-        desired: getPart(val_desired,'(\\d+[.,]?\\d+).*'),
-        valve: getDeviceValue( device, 'valve')
+        temp: getPart(val_temp,'(\\d+[.,]?\\d*).*'),
+        desired: getPart(val_desired,'(\\d+[.,]?\\d*).*'),
+        valve: getPart(val_valve,'(\\d+[.,]?\\d*).*')
        };
},


[chris1284]

die min / max (default 10/30), sowie die steps kannst du selbst festelegen

data-min : minimal value to set (default 10)
data-max : maximal value to set (default 30)
data-step : step size for value adjustment e.g. 0.5 (default 1)

zum doppelten % : kann es sein dass das fht-modul ein % mitliefert beim wert (also im reading slebst auch ein % enthalten ist) ? das sollte dann im modul gefixed werden, so das es, fhem-standard, nur den wert liefert (ohne einheit)

[schka17]

Ja, das FHT Modul liefert leider das % Zeichen mit, das stört auch bei anderen Funtkionen.


Sent from my iPad using Tapatalk

[chris1284]

dann sollte man den maintainer kontaktieren

[setstate]

Eine Frage:
Ich habe bei mir zwei kleine Änderungen in der fhem-tablet-ui.js vorgenommen, um das Aussehen (nach meinem Geschmack) zu optimieren:

gridster = $(".gridster > ul").gridster({
          widget_base_dimensions: [wx, wy],
          widget_margins: [1, 1],
          extra_cols: 1,
          draggable: {
            handle: 'header'
          }

Das muss ich nun natürlich nach jedem Update wieder nachziehen.
Irgendwo hier im Thread stand schon mal, wie man gridster-Funktionen direkt aus dem HTML-Datei per script aufrufen kann:
<script data-type="text/javascript">$(document).ready(function() { gridster.disable() })</script>

Aber wie muss das aussehen, wenn ich Eigenschaften wie widget_margins per Skriptbefehl überschreiben möchte?

Nach etwas probieren habe ich es nun rausgefunden:

Code Auswählen Erweitern


    gridster.options.widget_margins=[1, 1];
    gridster.options.extra_cols=1;
    gridster.generate_grid_and_stylesheet();

Oder komplett als HTML Tag einfach an die letzte Stelle innerhalb des HEAD-Tags einfügen:

Code Auswählen Erweitern

<script type="text/javascript">$(window).load(function() {
    gridster.options.widget_margins=[1, 1];
    gridster.options.extra_cols=1;
    gridster.generate_grid_and_stylesheet();
})</script>


[Hermann]

Hallo,
Eigentlich funktioniert alles. Aber da ich das Update über fhem wollte, habe ich alles unter /tablet gelöscht und mit "update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt" sozusagen ein frisches System aufspielen wollen.

Irgendwo mache ich aber einen Denkfehler, da immer folgender Abruch kommt: UPD www/tablet/js/fhem-tablet-ui.js
Got 13719 bytes for www/tablet/js/fhem-tablet-ui.js, not 13659 as expected,
aborting.

Kann mir jemand auf die Sprünge helfen wo ich falsch denke. Funktioniert ein frisches aufsetzen so nicht ? Habe vorher auch noch einen Neustart von fhem gemacht.

Hermann

[Phil__]

Bitte jetzt nochmal probieren. Mit dem Update Control File stehe ich noch etwas auf Kriegsfuß. Local Commit, Remote Pull Request Commit und Prepare Controlfile, da kommt man schnell durcheinander und in die falsche Reihenfolge.

Sorry
Mario

Schau mal hier, denke setstate behebt das Problem gleich.

[setstate]

Hallo,
Eigentlich funktioniert alles. Aber da ich das Update über fhem wollte, habe ich alles unter /tablet gelöscht und mit "update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt" sozusagen ein frisches System aufspielen wollen.

Irgendwo mache ich aber einen Denkfehler, da immer folgender Abruch kommt: UPD www/tablet/js/fhem-tablet-ui.js
Got 13719 bytes for www/tablet/js/fhem-tablet-ui.js, not 13659 as expected,
aborting.

Kann mir jemand auf die Sprünge helfen wo ich falsch denke. Funktioniert ein frisches aufsetzen so nicht ? Habe vorher auch noch einen Neustart von fhem gemacht.

Hermann

Hallo Hermann, du machst nix falsch. Ich habe nur das fhem-tablet-ui.js ausgetausch, aber das Controlfile nicht ge-updated, weil wir noch ein Fehler finden wollten. Machte aber keinen Sinn. Das Controlfile sollte immer aktuell sein.
Sorry, geht gleich wieder

[chris1284]

Echt klasse wie schnell die Implementierung hier von statten geht.

Ich habe mir mal die Fonts angeschaut und bemerkt dass bei der Erstellung der Font und CSS Dateien sich ein Fehler eingeschlichen hat.

Dadurch sind nicht alle SVGs importiert worden.
Bin mir auch ziemlich sicher woher der Fehler kommt, das müsste ein Bug in IcoMoon sein.
Sobald eine andere Datei, (in diesem Fall höchstwahrscheinlich die *.txt) die nicht von IcoMoon als Fontvorlage unterstützt wird, vorkommt, bricht das Programm den Import ab und importiert den Rest nicht mehr.

Die Zips sollten nun vollständig sein. Die Präfixe habe ich bei oa- und fs- gelassen. Ich hoffe der Rest passt.

die ist leider auch nicht vollständig musste ich feststellen. sani_heating_boost fehlt zum beispiel

[Brockmann]

Nach etwas probieren habe ich es nun rausgefunden:

Vielen Dank! Funktioniert perfekt! 

[mc-hollin]

Hallo,
erst mal auch von mir ein riesengroßes Lob für das Projekt.
Dies ist genau die Oberfläche für FHEM die ich schon immer gesucht habe.

Man hat schon das Gefühl man hat etwas verpasst, wenn man einen Tag nicht in den Beitrag hier schaut.

Mittlerweile ist bei mir die index.html sehr gewachsen und unübersichtlich geworden.
Daher habe ich die einzelnen Gridsterbereiche in Templates ausgelagert.
Vielleicht ist dies ja für den einen oder anderen eine neue Anregung!

Hier der Teil meiner index.html

Code Auswählen Erweitern


<div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="12" data-template="/fhem/tablet/templates/tmp_HomeMenu.htm"></li>
            <li data-row="1" data-col="16" data-sizex="3" data-sizey="3" data-template="/fhem/tablet/templates/tmp_Clock.htm"></li>
            <li data-row="1" data-col="2" data-sizex="6" data-sizey="3" data-template="/fhem/tablet/templates/tmp_HomeOG.htm"></li>
            <li data-row="4" data-col="2" data-sizex="6" data-sizey="3" data-template="/fhem/tablet/templates/tmp_HomeEG.htm"></li>
            <li data-row="7" data-col="2" data-sizex="6" data-sizey="3" data-template="/fhem/tablet/templates/tmp_HomeKG.htm"></li>
            <li data-row="10" data-col="2" data-sizex="6" data-sizey="3" data-template="/fhem/tablet/templates/tmp_Leer.htm"></li>
            <li data-row="4" data-col="8" data-sizex="6" data-sizey="9" data-template="/fhem/tablet/templates/tmp_Leer.htm"></li>
            <li data-row="4" data-col="14" data-sizex="5" data-sizey="4" data-template="/fhem/tablet/templates/tmp_HomeWetter.htm"></li>
            <li data-row="1" data-col="8" data-sizex="8" data-sizey="3" data-template="/fhem/tablet/templates/tmp_HomeAnrufe.htm"></li>
            <li data-row="8" data-col="14" data-sizex="5" data-sizey="5" data-template="/fhem/tablet/templates/tmp_Kamera.htm"></li>
        </ul>
    </div>
    <script>
        $('li[data-template]').each(function (index) {
            $(this).load($(this).data('template'));
        });
    </script>


Weiter so