New FHEM Tablet UI

[setstate]

Hallo Bejamin,
super Sache, das!!!
Gefällt mir sehr gut, besonders das Titelbild. Sieht sehr professionell aus.
Danke fürs Tutorial. 

[kleing]

Noch einmal hallo,

ich habe den Tag über noch ein wenig experimentiert: mein in unten genanntem Post beschriebenes Problem ist ein Browserproblem.
Ich habe zum einen auf einem Linux Pc ebenfalls Midori installiert und auch dort werden die Grafiken dann nicht dargestellt.
Ferner habe ich auf dem Raspberry Chromium installiert und siehe da, die Grafiken werden korrekt angezeigt.

Es gibt also wohl noch eine Einschränkung bei den simplecharts was die möglcihen Browser angeht.

Gruß
Gerald

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

[setstate]

Hallo Gerald,
Danke für den Hinweis. Das werde ich mir heute Abend mal ansehen.

[uniqueck]

Das Simplechart Widget sieht sehr schön aus.

Ist es auch möglich es mit einem DBLog zu versorgen?

[bjoernbo]

Ich denke mal, neben simplechart wird es bald auch ein komplexchart geben, oder?
Das wäre für meine Wetterstation sehr gut. Damit man neben Temperatur auch Luftfeuchtigkeit, Niederschlag etc einblenden kann. 

@benjamin: TOP! Toller blog!

[nojo0812]

Schaue dir mal im github unter examples mobil2.html an.
Da habe ich erste Versuche in Richtung anderes Theme gemacht.

Danke, werde ich machen.

Momentan knabbere ich gerade stark an einem Switch für den Anwesenheitsstatus.

home.Status ist ein Dummy mit den möglichen Werten [1-4]. Zur Darstellung orientiere ich mich an http://www.fhemwiki.de/wiki/FHEM_Tablet_UI#Beispiel_switch, d.h. eine Gruppe von vier Schaltern für den home.Status.

Code Auswählen Erweitern


<div data-type="switch" data-device="home.Status"
      data-get-off="!1"
      data-get-on="1"
      data-icon="fa-home"
      class="cell" >
</div>
<div data-type="label" class="cell">Zuhause</div>
<div data-type="switch" data-device="home.Status"
      data-get-off="!2"
      data-get-on="2"
      data-set-on="2"
      data-icon="fa-bed"
      class="cell" >
</div>
<div data-type="label" class="cell">Schlafen</div>
[...]


Wenn jetzt z.B. home.Status = 1 ist und ich auf den zweiten Schalter klicke, wird der Befehl "set home.Status" (d.h. ohne <value>) abgesetzt und hinterher sind sowohl Schalter 1 und 2 optisch on, der home.Status ist weiterhin 1. Ein zusätzliches data-set-on="2" macht keinen Unterschied.

Nach viel Rumprobieren habe ich mal data-set-on="on" probiert, und siehe da, jetzt wird der Befehl "set home.Status on" abgesetzt.

Warum funktioniert data-set-on nur mit "on"? In diesem Fall wäre der Parameter doch überflüssig. Und wie bekomme ich das in meinem Fall zum Laufen?

[setstate]

upps, das war ein Bug.

Mit dem data-get-on mit einem reinen Zahlenwert gab es Probleme, Strings funktionieren.

Nach dem Update geht jetzt auch dein Code, aber ein Problem sehe ich noch.
Die beabsichtigte Negation kann so nicht klappen. Entweder man nimmt einen RegEx Ausdruck

Code Auswählen Erweitern

data-get-off="((?!Wert1).)*"
Das bedeutet: alle außer 'Wert1'
Eine built-in Funktion gibt es aber doch, die muss aber so aussehen

Code Auswählen Erweitern

data-get-off='!on'
Das bedeutet: alles aber nicht der Wert, der bei data-get-on definiert ist. Eine falsche Interpretation ist: nicht der Wert 'on'

So sollte es klappen:

Code Auswählen Erweitern


              <div data-type="switch" data-device="home.Status"
                    data-get-off='!on'
                    data-get-on='1'
                    data-icon="fa-home"
                    class="cell" >
              </div>
              <div data-type="label" class="cell">Zuhause</div>
              <div data-type="switch" data-device="home.Status"
                    data-get-off='!on'
                    data-get-on='2'
                    data-icon="fa-bed"
                    class="cell" >
              </div>


[setstate]

Das Simplechart Widget sieht sehr schön aus.

Ist es auch möglich es mit einem DBLog zu versorgen?

Gleich Frage hier: http://forum.fhem.de/index.php/topic,34233.msg302515.html#msg302515
Meine Antwort ist immer noch aktuell ...
Aber kann das jemand bestätigen, ob ich da richtig liege?

[nojo0812]

upps, das war ein Bug.

Mit dem data-get-on mit einem reinen Zahlenwert gab es Probleme, Strings funktionieren.

Nach dem Update geht jetzt auch dein Code, aber ein Problem sehe ich noch.
Die beabsichtigte Negation kann so nicht klappen. Entweder man nimmt einen RegEx Ausdruck

Danke für den schnellen Fix und den Hinweis, jetzt klappt alles. Ich bin begeistert von Tablet UI und dem Support!

[Haecksler]

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

Hallo viegener,
Danke das klappt soweit ganz gut.
Ist es vielleicht noch möglich für pagetab die Klassen "large" und "big" einzuführen?
Ich finde einfach die normale größe zu klein und "bigger" ist zu groß.

Gruß,
Haecksler

[Haecksler]

Hallo zusammen,
habe nochmals ein kleines Problem.
Ich habe von viegener die Rolladensteuerung mit Slider und Triplebox übernommen.
Leider bokomme ich die Triplebox nicht zentriert, habe schon alle möglichen varianten getestet. Try and Error.. blieb leider beim Error...vielleicht kann mir ja jemand helfen.
Hier mein Code wie er im Augenblick ist:

Code Auswählen Erweitern

    <header>Schlafzimmer</header>
<div class="centered cell">
  <div data-type="label" class="">Jalousie</div>
       <div data-type="slider" data-device='Jalousie_Schlafzimmer_EG' data-get="STATE" data-min="0"  data-max="100" data-on='(ZU|0)' data-off='(AUF|100)' data-value=true  class="small negated"></div>
        <div class="triplebox-v top-space-2x">
          <div data-type="push" data-device="Jalousie_Schlafzimmer_EG" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set="AUF" class=""></div>
          <div data-type="push" data-device="Jalousie_Schlafzimmer_EG" data-icon="fa-minus" data-background-icon="fa-square-o" data-set="STOP" class=""></div>
          <div data-type="push" data-device="Jalousie_Schlafzimmer_EG" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set="ZU" class=""></div>
        </div>
</div>

Und ein Screenshot vom Ergebnis findet ihr im Anhang.

Danke!

[setstate]

So klappt das

Code Auswählen Erweitern


<li data-row="4" data-col="4" data-sizex="1" data-sizey="8">
  <header>Schlafzimmer</header>
  <div data-type="label" class="">Jalousie</div>
  <div data-type="slider" data-device='Jalousie_Schlafzimmer_EG' data-get="STATE" data-min="0"  data-max="100" data-on='(ZU|0)' data-off='(AUF|100)' data-value=true  class="small negated"></div>
  <div class="triplebox-v top-space-2x centered">
   <div data-type="push" data-device="Jalousie_Schlafzimmer_EG" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set="AUF" class=""></div>
   <div data-type="push" data-device="Jalousie_Schlafzimmer_EG" data-icon="fa-minus" data-background-icon="fa-square-o" data-set="STOP" class=""></div>
   <div data-type="push" data-device="Jalousie_Schlafzimmer_EG" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set="ZU" class=""></div>
  </div>
</li>


Aber nur mit einer kleinen Optimierung in der fhem-tablelt-ui.css (Zeile 244) -> ist im Update jetzt mit dabei

Code Auswählen Erweitern


.gridster > * {
  margin:0;
  padding:0;
}

[viegener]

So klappt das
...

Aber nur mit einer kleinen Optimierung in der fhem-tablelt-ui.css (Zeile 244) -> ist im Update jetzt mit dabei

Code Auswählen Erweitern


.gridster > * {
  margin:0;
  padding:0;
}

Das muss ich doch glatt bei mir noch mal schauen, denn ich hatte auch einige Schwierigkeiten die Teile einigermassen ausgerichtet zu bekommen.

Danke,
Johannes

[hyper2910]

Hallo zusammen,


ich würde gerne eine Seite der FTUI als "Fernbedienung" auf dem Mobil/Phablet nutzen um den TV zu steuern.  Lautstärke/ Ein/aus / Programmwechsel.


Ich stelle mir vor statt den Zahlen 1 bis 9 die Icons der Programme auf dem Display zu haben. Dies bekomme ich hin mit dem Widget Image, nur ist meine Frage wie ich diesem Widget eine Funktion zuweisen kann, z.b. ein Kreis drüberlegen, welcher dann auf dieses Programm umschaltet.

Ich werde mal im Laufe des Tages mal ein erstes Bild zeigen, wie weit ich bin!

[setstate]

Hallo hyper2910,
Da kannst du mit <img> und onClick="setFhemStatus ... arbeiten

Björn hat damit schon eine FB gebaut. Vllt. kannst du hiervon einiges abschauen.
http://forum.fhem.de/index.php/topic,34233.msg296147.html#msg296147