New FHEM Tablet UI

[bmwfan]

Hallo Setstate und Viewgener,

sorry für die späte Antwort, war wieder einmal verreist.
Genau so hatte ich es mir vorgestellt. Ich werde mal versuchen, so einen Slider mit Tasten einzubauen.

Besten Dank.

[bjoernbo]

kann bestätigen, ohne "int" sind sogar die "Zacken" erkennbar!

<li data-row="1" data-col="6" data-sizex="4" data-sizey="2">
    <header>Kinderzimmer-Julia</header>
   <div data-type="simplechart"
          data-logdevice="FileLog_Julia.Wandthermostat"
        data-logfile="Julia.Wandthermostat-2015.log"
        data-columnspec="4:measured-temp:.*1"
        data-minvalue="10"
        data-maxvalue="30"
        data-yticks="4"
        data-daysago="0"
        data-caption="Temperaturverlauf">
</li>

Aber was mir nicht gefällt ist, dass die Kurve bei "Außentemperatur", optisch noch hinten wegfällt!

Ps.: Damit die Zacken deutlicher sind, müsste die Linie ggf. dünner sein, oder?
Aber das ist ja jetzt erst der Anfang vom widget-simplechart. Ich bin mir sicher das hier noch das ein oder andere nachkommt

[bendim]

Danke Nobby1805.

Verwende jetzt 4:LaCr.Thermo03.*:0: und in der Konsole kommt auch das an.
Parameter

Code Auswählen Erweitern

get FileLog_LaCr.Thermo03 LaCr.Thermo03-2015.log - 2015-06-11_00:00:00 2015-06-12_00:00:00 4:LaCr.Thermo03
.*:0:

Antwort

Code Auswählen Erweitern

...
2015-06-11_20:25:02 21.7
2015-06-11_20:30:02 21.5
2015-06-11_20:34:08 21.4
2015-06-11_20:42:00 21.2
2015-06-11_20:46:27 21.1
2015-06-11_20:49:51 21.1
#4:LaCr.Thermo03.*:0:

Aber es wird kein Diagramm angezeigt.

Code Auswählen Erweitern


<li data-row="1" data-col="1" data-sizex="4" data-sizey="2">
<header>CHARTS</header>
    <div data-type="simplechart"
        data-logdevice="FileLog_LaCr.Thermo03"
        data-logfile="LaCr.Thermo03-2015.log"
        data-columnspec="4:LaCr.Thermo03.*:0:"
        data-minvalue="10"
        data-maxvalue="30"
        data-yticks="4"
        data-daysago="0"
        data-caption="Wohnzimmer" class="inline cell top-space-2x">
    </div>
</li>


Hab das Problem gefunden. Es liegt an Firefox am Mac. Im Safari und Chrome wird das Diagramm angezeigt.

[bjoernbo]

echt? Also mein erster Versuch war auch ein LaCrosse-File. Da hatte ich auch die Probleme. Nachdem ich dann erstmal andere verwendet habe, funktionierte es dann auch! Beim Versuch mit LCrosse hatte ich mir das nie auf dem Android-Tablet angeschaut.

[bmwfan]

@Viewgener,
Einbau hat auf Anhieb geklappt. Leider zeigt der Slider geschlossen an, wenn die Jalousie offen ist. Reicht es, wenn ich Data-min auf 100 und data-max auf 0 setze, um die Richtung zu drehen?

Noch ne Anfängerfrage: Wenn ich meine eg.html ändere, muss ich mehrmals den Raspi neu starten bis irgendwann einmal meine Änderungen tatsächlich in der Web-Oberfläche angezeigt werden. Habe keine Systematik gefunden, wann es soweit ist und ändere deswegen immer einen Text mit, damit ich sehe wann tatsächlich das aktualisierte Programm geladen wurde. Als ich die Oberfläche erstellt hatte, lief FHEM noch auf der Fritzbox. Da war das nicht so und die Änderungen wurden sofort beim Neuaufruf der Oberfläche angezeigt.

Kennt jemand das Problem oder wie erzwingt Ihr eine Aktualisierung, wenn ihr eine Änderung gemacht habt.

Gruß Jürgen

[setstate]

Das mit der fehlenden Texten bei Simplechart habe ich gelöst, das sollte jetzt bei jedem Browser funktionieren.

Bei data-columnspec habt ihr Recht, das 'int' liefert nur die Ganzzahlen. Wenn man es weglässt, zappelt der Graph etwas mehr.
data-logfile kann man auch weglassen, dann greift der Defaultwert "-". Damit wird das neuste Logfile gelesen.

Code Auswählen Erweitern


    <div data-type="simplechart"
            data-logdevice="FileLog_KuecheHeizung"
            data-columnspec="4:meas.*:1"
            data-minvalue="12"
            data-maxvalue="30"
            data-width="250px"
            data-height="120px"
            data-yticks="6"
            data-daysago="2"
            data-caption="Küche" class="inline cell  top-space-2x">


[Nobby1805]

caption und X-Beschriftung ist jetzt vorhanden

[bjoernbo]

Das mit der fehlenden Texten bei Simplechart habe ich gelöst, das sollte jetzt bei jedem Browser funktionieren.

Bei data-columnspec habt ihr Recht, das 'int' liefert nur die Ganzzahlen. Wenn man es weglässt, zappelt der Graph etwas mehr.
data-logfile kann man auch weglassen, dann greift der Defaultwert "-". Damit wird das neuste Logfile gelesen.

Kann ich alles bestätigen! Läuft nun auch auf dem Mac unterm Safari und Firefox!

[Haecksler]

Ich brauche den Link in der fhem-Oberfläche links oben eigentlich nicht. Mir reicht es, das UI über die Adresszeile einzugeben. Der Aufruf http://<IP>:8083/fehm/tablet/home_eg.html hatte bis vorgestern immer funktioniert.

Ich verwende das Widget pagetab nur wegen des "sanften" Übergangs (vorher hatte ich das Button-Widget benutzt). Mein UI besteht aus einzelnen Seiten, die ich mit pagetab untereinander aufrufe. Also ohne template-Funktion. Also brauche ich den "Umweg" über index.html und menu.html wie update71 gepostet hat nicht!? Oder doch?

Wir sollten das auf jeden Fall mal klären und ausfürhlich im Wiki erklären! Ich helfe natürlich gerne mein dokumentieren!

Ich stehe hier auch auf dem Schlauch, kann vielleicht nochmals jemand zusammenfassend erklären wie das pagetab widget korrekt angewendet wird.

Danke!

[bendim]

@bmwfan ich starte FHEM nur neu. Danach werden die Änderungen angezeigt.

Code Auswählen Erweitern

shutdown+restart
in das Eingabefeld/Komando Feld eingeben und Enter.

[nojo0812]

Hallo, ich bin jetzt gerade dabei, mein eigenes Tablet UI zusammenzubauen. Dabei möchte ich z.B. die Icon-Vordergrundfarbe immer weiß haben. Soweit ich das sehe, wird es in jedem einzelnen div mit data-on-color gesetzt, z.B. Home-Button mit fa-home.

Schöner fände ich es, wenn ich das zentral ändern könnte, entweder als neue Standardwerte oder alternativ auch als (neue) Klasse. Die Standards scheinen allerdings nur in den js-Dateien gesetzt zu werden, die man wahrscheinlich nicht editieren sollte.

Wie setze ich das am besten um?

[setstate]

Hallo nojo0812,
Schaue dir mal im github unter examples mobil2.html an.
Da habe ich erste Versuche in Richtung anderes Theme gemacht.
Dabei wird zusätzlich eine
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-mobil-ui.css"

eingebunden. Darin sind die Standards überschrieben. Es sind aber noch nicht alle Widget dahingehend erweitert worden.

[viegener]

Ich stehe hier auch auf dem Schlauch, kann vielleicht nochmals jemand zusammenfassend erklären wie das pagetab widget korrekt angewendet wird.

Danke!

Hallo Haecksler,
hier nochmal ein bisschen Erklärung und auch 3 Beispieldateien etwas ausgedünnt aus meiner Installation:

index.html ist die Basis-Seite,die auch als erste geladen wird. Diese enthält aber selbst keine speziellen widgets (ausser den pagetabs --> per Verweis auf menu.templ). Dafür ist index.html die einzige Seite, die alle includes für javascript und css enthält.
Achtung: Ich habe in meiner Index.html ein paar Anpassungen z.B: für Gridster gemacht, die so vermutlich bei anderen nicht passen.

menu.templ enthält nur die pagetabs und ist als template angelegt, da bei mir alle verschiedenen Detailseiten daselbe Menu haben und ich dann nur die eine Zeile

Code Auswählen Erweitern


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

in jeder Datei brauche um das Menu ganz links in Breite 1 über die ganze Höhe zu nutzen.

room_home.html ist eine sehr einfache Beispielseite für einen pagetab, der über Auswahl im Menu geladen wird und die gesamte Seite ersetzt. Hier sollte das Menu (also die pagetabs enthalten sein) und die Widgets für die entsprechende Seite. Es wird aber kein Include für JS und css benötigt. Die Seite besteht eigentlich nur aus den widgets im Gridster.

Hoffe das hilft, bei Fragen einfach melden, ich habe das nämlich gerade nur mal schnell zusammengestellt,
Johannes

[kleing]

Hallo zusammen,
zu den simplecharts habe ich auch noch eine Frage.
Ich versuche mit der Tablet UI eine Anzeige auf einem kleinen Display direkt am Raspberry zu realisieren, als Browser läuft dort Kweb und Midori und die Diagramme werden nicht angezeigt, siehe angehängtes Bild

Betrachte ich die gleiche Seite am PC mit Firefox wird alle korrekt dargestellt. Woran kann das liegen, ist das ein Browserprobelm?

Die Definition ist folgende:

Code Auswählen Erweitern

<li data-row="2" data-col="2" data-sizex="3" data-sizey="1">
       <div data-type="simplechart"
data-logdevice="FileLog_fht"
data-logfile="-"
data-columnspec="4:fht.measured-temp:1"
data-minvalue="15"
data-maxvalue="25"
data-yticks="2"
data-daysago="0"
data-caption="Temp."
class="fullsize">
</div> 
</li>

Ich bin für jeden Hinweis dankbar.

Gruß
Gerald

[bendim]

Hallo,
großen Dank an die Entwickler von Tablet UI.
Ich habe ein Anfänger Tutorial geschrieben wie man FHEM Tablet UI Installiert/Einrichtet. Weitere werden folgen.

http://www.benjaminroesner.com/blog/fhem-tablet-ui-1/