New FHEM Tablet UI

[uniqueck]

achso bevor ich es vergesse, da es auf dem screenshot nicht ersichtlich war, aller termine welche nicht heute bzw. in den nächsten 7 tagen statt finden, werde in ganz normalen weiß dargestellt, oder was auch immer bei dir in der css definiert ist.

[charly166]

Hallo setstate,

vielen Dank für deine schnelle Antwort. Leider habe ich es mit deinem Lösungsvorschlag nicht hinbekommen - da auch in den Sendernamen immerzu Zahlen vorkommen (z.B. SWR3 ...). Habe daraufhin eine Readingsgroup gebastelt, welche nun auch aus dem Sendernamen gleich ein Logo anzeigt (an den Logos muss ich jedoch noch arbeiten):
Viele Grüße

Charly

[skuggy]

Vielen Dank für die schnelle Hilfe...

[ManOki]

Hallo,

ich habe schon etwas gesucht, aber leider nichts passendes gefunden: Gibt es für "data-template" eine Möglichkeit, Parameter zu konfigurieren?

Meine aktuelle Situation ist, dass ich in der index.html mehrere gleichaussehende Element-Gruppen habe, die ich in Templates ausgelagert habe:

Code Auswählen Erweitern


<div data-template="/fhem/ftui/sz_heizung.tmpl"></div>
<div data-template="/fhem/ftui/k_heizung.tmpl"></div>


(http://forum.fhem.de/index.php?action=dlattach;topic=34233.0;attach=39366)

Die Templates sehen dabei komplett identisch aus, bis auf die Angaben zu "data-device". Ziel wäre also, ein generisches Template "heizung.tmpl" zu schreiben, dass dann per Parameter in der index.html eine eigene Konfiguration hat.

Code Auswählen Erweitern


<div data-template="/fhem/ftui/heizung.tmpl" template-param="thermostat=sz_heizung,window=sz_fenster"></div>
<div data-template="/fhem/ftui/heizung.tmpl" template-param="thermostat=k_heizung,window=k_fenster""></div>


Gibt es diese Möglichkeit bereits?

Viele Grüße
ManOki

[setstate]

Parameter für Templates habe ich mir auch schon überlegt und auch schon auf der Angenda

Aber leider mehr auch noch nicht.

[viegener]

Hallo,

ich habe schon etwas gesucht, aber leider nichts passendes gefunden: Gibt es für "data-template" eine Möglichkeit, Parameter zu konfigurieren?

Meine aktuelle Situation ist, dass ich in der index.html mehrere gleichaussehende Element-Gruppen habe, die ich in Templates ausgelagert habe:

Code Auswählen Erweitern


<div data-template="/fhem/ftui/sz_heizung.tmpl"></div>
<div data-template="/fhem/ftui/k_heizung.tmpl"></div>


(http://forum.fhem.de/index.php?action=dlattach;topic=34233.0;attach=39366)

Die Templates sehen dabei komplett identisch aus, bis auf die Angaben zu "data-device". Ziel wäre also, ein generisches Template "heizung.tmpl" zu schreiben, dass dann per Parameter in der index.html eine eigene Konfiguration hat.

Code Auswählen Erweitern


<div data-template="/fhem/ftui/heizung.tmpl" template-param="thermostat=sz_heizung,window=sz_fenster"></div>
<div data-template="/fhem/ftui/heizung.tmpl" template-param="thermostat=k_heizung,window=k_fenster""></div>


Gibt es diese Möglichkeit bereits?

Viele Grüße
ManOki

Wenn jemand interessiert ist, ich habe dazu ein Server-Modul geschrieben, dass die Includes abhandelt. Ich habe nämlich sehr viele Einträge, die sich nur in device, icon, text und ähnlichem unterscheiden aber aus mehreren Widgets bestehen.

Die Idee ist, dass dann im HTML nur soetwas steht wie:

Code Auswählen Erweitern

<?ftui-inc="somfy.ftui.part" device="roll_wz_1" label="Terasse" ?>

Auf der Serverseite wird dann das entsprechende Template in das HTML eingemischt und die Variablen ersetzt. Das Template seiht dann ungefähr so aus:

Code Auswählen Erweitern


<!--  SOMFY left - keys - device label-->
    <div class="left centered">
      <div data-type="label" class=""><?ftui-key=label ?></div>
      <div data-type="slider" data-device='<?ftui-key=device ?>' data-get="STATE" data-min="0"  data-max="100"
        data-on='(down|closed)' data-off='(open|off)' data-value=true  class="mini negated textvalue small">
      </div>
      <div class="triplebox-v small top-space-2x">
        <div data-type="push" data-device="<?ftui-key=device ?>" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set="off" class=""> </div>
        <div data-type="push" data-device="<?ftui-key=device ?>" data-icon="fa-minus" data-background-icon="fa-square-o" data-set="stop" class=""> </div>
        <div data-type="push" data-device="<?ftui-key=device ?>" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set="on" class=""> </div>
      </div>
    </div>


Ich habe vor, dass hier in einem separaten Thread vorzustellen, denn insbesondere wenn ich am Design oder an den Namen herumfeile, muss ich nur noch eine Stelle ändern und nicht für 15 Rollände, 4 Sonos-Devices, etc

[viegener]

Achso, ein Vorteil der Serverlösung ist, dass man auch noch weitere Funktionalität in Abhängigkeit von Deviceinfos einbauen könnte, so hatte ich gehofft, dass man dynamisch Seiten zusammenbauen kann, durch Auswahl mehrerer devices oder gar Elemente ausblenden basierend auf dem Status und und und...

[Bootscreen]

Moin,

hab dazu grad nichts gefunden daher Frag ich einfach mal nach: ist es möglich im Homestatus Widget nur 3 States zu definieren? Weil mir reicht Away, Night und Home. Holiday brauch ich an der stelle nicht und stört eher nur..

[ManOki]

Hallo nochmal,

der Klassiker...einmal das ganze aufgeschrieben, nochmal in Ruhe drüber nachgedacht, direkt eine Lösung gefunden:

Es gibt ein JQuery-Plugin für Templates: http://codepb.github.io/jquery-template/

Hier eine kleine Anleitung, was ich gemacht habe:

1. jquery.loadTemplate-1.5.0.min.js aus dem Git-Repo in mein FHEM-Ordner "/fhem/www/tablet/lib/" kopiert.

2. index.html am Ende (nach den anderen JQuery-Plugins) um die folgende Zeile ergänzt:

Code Auswählen Erweitern

<script type="text/javascript" src="/fhem/tablet/lib/jquery.loadTemplate-1.5.0.min.js"></script>

3. Das Template wird jetzt per Java-Script geladen, also statt data-template braucht das <div> eine id.

Code Auswählen Erweitern

<div id="az_heizung"></div>

4. Nach dem Skript aus Schritt 2 kommt der folgende Code:

Code Auswählen Erweitern

<script>
$("#az_heizung").loadTemplate("/fhem/ftui/heizung.tmpl",
{
heizung: 'az_heizung',
fenster: 'az_fenster'
});
</script>

5. Hier kommt der ganze Trick: das Template (Auszug) mit dem speziellen "data-template-bind"-Attribut:

Code Auswählen Erweitern

<div data-template-bind='[{"attribute": "data-device", "value": "heizung"}]' data-type="thermostat" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature" data-min="5" class="narrow darker right"></div>
Mit dem Attribut "data-template-bind" weise ich dem JQuery-Plugin an, auf das entsprechende <div> das 'attribute' mit Namen 'data-device' auf den Wert ('value') zu setzen, der vorher in Schritt 4 als Paramter übergeben wurde, also in meinem Fall heizung: 'az_heizung'.

EDIT: Noch etwas universeller: Mein Template ist in der Datei "heizung.tmpl", mit dem folgenden Code können die Template beliebig heißen und beliebige Parameter übergeben.

Code Auswählen Erweitern

<div template="heizung" param='{"heizung": "az_heizung", "fenster": "az_fenster"}'></div>

Code Auswählen Erweitern

<script>
$("[template]").each(function(e) {
var template = $(this).attr('template');
var param = $(this).attr('param');
var paramJSON = $.parseJSON(param);
$(this).loadTemplate("/fhem/ftui/"+template+".tmpl", paramJSON);
});
</script>

Ich hoffe, die Anleitung hilft. Mein Problem scheint damit erstmal gelöst.

Vielen Dank trotzdem für die Antworten
ManOki

[gibacht]

Hallo,

ich versuche gerade das UI in Betrieb zu nehmen. Mein Gridster hat 6 Spalten. (Aktuell 6 einfache Widgets). Leider ist die Breite der Seite zu groß so, dass diese ca. 5mm (links/rechts) an meinem 7" verschiebbar ist. Also müsste ich entweder die Widgets schmaler machen oder den Abstand zwischen den Widgets verkleinern... allerdings finde ich den relevanten Eintrag nicht. Könnt ihr mir bitte sagen was ich machen muß/kann...

Grüße Dirk

[setstate]

Hallo,

ich versuche gerade das UI in Betrieb zu nehmen. Mein Gridster hat 6 Spalten. (Aktuell 6 einfache Widgets). Leider ist die Breite der Seite zu groß so, dass diese ca. 5mm (links/rechts) an meinem 7" verschiebbar ist. Also müsste ich entweder die Widgets schmaler machen oder den Abstand zwischen den Widgets verkleinern... allerdings finde ich den relevanten Eintrag nicht. Könnt ihr mir bitte sagen was ich machen muß/kann...

Grüße Dirk

Hallo Dirk

In der Readme.md gibt es dazu ein paar Sätze:
Change this to adjust the size of a Gridster base (data-sizey=1/data-sizex=1)

<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">
Add this to adjust the size of the Gridster margin

<meta name="widget_margin" content="4">

Dieses Meta Daten sind in der Index.html zu finden bzw. müssen dort rein.

[gibacht]

<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">

Die base-Werte habe ich variiert (in beide Richtungen), wobei sich keine Anzeigenänderung zeigte...
der nachfolgende Eintrag fehlte bei mir. Jedoch ändert sich die Anzeige dadurch auch nicht, obwohl ich 1,2 und 4 getestet habe...

<meta name="widget_margin" content="4">

Hast Du noch eine Idee?

[xxsteffenxx]

Hallo zusammen,
ich habe heute versucht das Modul Klimatrend von nesges einzubauen.

meine fhem.cfg

Code Auswählen Erweitern

define STATISTICS_WZ statistics WZ_Thermostat
define STATISTICS_EZ statistics EZ_Thermostat
define STATISTICS_SZ statistics SZ_Thermostat
define STATISTICS_BD statistics BD_Thermostat
define STATISTICS_AZ statistics AZ_Thermostat

als html habe ich folgendes

Code Auswählen Erweitern

<div data-type="klimatrend"
    data-device="SZ_Thermostat"
    data-get="statTemperatureTendency"
    data-refperiod="1"
    data-stagnating-color="rgb(80,80,80)"
    data-icon="fa-angle"
    data-rising-color="rgb(180,80,80)"
    data-falling-color="rgb(80,80,180)"
    data-highmark="2"
    data-highmark-icon="fa-angle-double"
    data-highmark-rising-color="rgb(255,80,80)"
    data-highmark-falling-color="rgb(80,80,255)"
    ></div>

Das komische ist, beim device WZ-Thermostat bekomme ich mit "list" folgende Ausgabe

Code Auswählen Erweitern

2015-10-27 19:55:35   statTemperatureDay Min: 19.2 Avg: 19.2 Max: 19.2 (since: 2015-10-27_19:45:51 )
     2015-10-27 19:55:35   statTemperatureMonth Min: 19.2 Avg: 19.2 Max: 19.2 (since: 2015-10-27_19:45:51 )
     2015-10-27 18:59:55   statTemperatureTendency 1h: +0.5 2h: +0.4 3h: +0.8 6h: +0.5
     2015-10-27 19:55:35   statTemperatureYear Min: 19.2 Avg: 19.2 Max: 19.2 (since: 2015-10-27_19:45:51 )

bei EZ_Thermostat bekomme ich nur folgendes, da fehlt genau statTemperaturTendency

Code Auswählen Erweitern

     2015-10-27 19:56:35   statTemperatureDay Min: 19.8 Avg: 19.8 Max: 19.8 (since: 2015-10-27_19:50:50 )
     2015-10-27 19:56:35   statTemperatureMonth Min: 19.8 Avg: 19.8 Max: 19.8 (since: 2015-10-27_19:50:50 )
     2015-10-27 19:56:35   statTemperatureYear Min: 19.8 Avg: 19.8 Max: 19.8 (since: 2015-10-27_19:50:50 ) [code][/code]

[danieljo]

Folgende frage die vielleicht nicht ganz hier rein passt.

Ich habe diverse Sensoren die ich mir in TabletUI anzeigen lasse. Die Sensoren sind hautpsächlich 433Mhz Temp/Hum Sensoren sowie einige Ds18B20 usw. Die Sensoren liefern mir alle 30sek neue Werte. Jetzt hatte ich folgendes Problem das der ein oder andere Sensor mal ausgefallen ist dies habe ich aber nach 2 - 3 Tagen festgestellt.

Wie kann ich jetzt eine funktion erstellen. die prüft ob z.B. innerhalb eines Zeitfenster von 5minuten einen Wert empfangen hat. Das ganze wollte ich als "Symbol" in TabletUI angzeigt bekommen. Soll heißen wenn alles ok ist soll das Icon Grün sein. Sollte nach 5 Minuten kein Wert empfangen worden sein soll das Icon Rot sein.

Die Funktion des eigentlichen Symbols mit Farbändernung ist kein Problem. Nur wie kann ich die Funktion realisieren?

[viegener]

Folgende frage die vielleicht nicht ganz hier rein passt.

Ich habe diverse Sensoren die ich mir in TabletUI anzeigen lasse. Die Sensoren sind hautpsächlich 433Mhz Temp/Hum Sensoren sowie einige Ds18B20 usw. Die Sensoren liefern mir alle 30sek neue Werte. Jetzt hatte ich folgendes Problem das der ein oder andere Sensor mal ausgefallen ist dies habe ich aber nach 2 - 3 Tagen festgestellt.

Wie kann ich jetzt eine funktion erstellen. die prüft ob z.B. innerhalb eines Zeitfenster von 5minuten einen Wert empfangen hat. Das ganze wollte ich als "Symbol" in TabletUI angzeigt bekommen. Soll heißen wenn alles ok ist soll das Icon Grün sein. Sollte nach 5 Minuten kein Wert empfangen worden sein soll das Icon Rot sein.

Die Funktion des eigentlichen Symbols mit Farbändernung ist kein Problem. Nur wie kann ich die Funktion realisieren?

Ich habe bei mir das Label unter der Temperaturanzeige farblich eingefärbt:

Code Auswählen Erweitern

<div data-type="label" data-device="temp_gb" data-get="lastupdate" data-limits='[".*d",".*h",".*"]' data-colors='["#C00000","#aa6900","#eeeeee"]' class="cell narrow fixedlabel">Temperatur</div>

Dazu habe ich ein userreading definiert, dass wiederum auf Myutils-Funktionen basiert:

Code Auswählen Erweitern

userReadings lastupdate {getTimeDiffDesc( getNewestTimestamp("temp_gb", "battery", "temperature","humidity" ) )}

getTimeDiffDesc berechnet einen Text für die Differenz zwischen jetzt und dem neuesten Timestamp. Dieser neueste Timestamp wird von getNewestTimestamp berechnet...

Die Myutils-Funktionen sind unten.