New FHEM Tablet UI

[Achim]

Hallo,

ich habe jetzt angefangen, mit Tablet UI eine Oberfläche zu gestalten, um den Gesamtstatus meiner FHEM Installation besser darzustellen. Und ich habe noch jede Menge offener Punkte die nicht funktionieren. Ist noch viel zu lesen und zu testen.

Mit einem komme ich aber nicht weiter. Wieso sind in dem folgenden Bild die beiden Batteriesymbole nebeneinander und nicht untereinander?

Code Auswählen Erweitern

  <div class="cell">
    <div class="left">
      <div data-type="label" class="small narrow">Schlafzimmer</div>
      <div data-type="symbol"
        data-device="Schlafzimmer_Heizung"
data-get="battery"
        data-get-on='["ok","low"]'
        data-icons='["fa-battery-full","fa-battery-1"]'
        data-on-colors='["Green","Red"]'>
      </div>
      <div data-type="symbol"
        data-device="Schlafzimmer_Fenster"
data-get="Battery"
        data-get-on='["ok","low"]'
        data-icons='["fa-battery-full","fa-battery-1"]'
        data-on-colors='["Green","Red"]'>
      </div>
    </div>
  <

Es ist doch nirgends ein class="inline" vorhanden. Und wenn in den Label in die "Mitte" mache, sind die drei Teile untereinander.

Mit den "Left-Blöcken" habe ich mehrere Zimmer mit dem Batteriestatus nebeneinander. Das "Gerüst" habe ich aus der Userdemo von "Phil_"

Viele Grüße
Achim

PS.: ich kenne mich in HTML Programmierung nicht aus, momentan bin ich noch komplett bei "Copy/Paste" Programmierung

[setstate]

Durch Erzwingen zur Nutzung von nur 1/4 der Breite, erreicht man ein Untereinander der Symbole

Code Auswählen Erweitern


  <div class="cell">
    <div class="left col-1-4">
      <div class="small narrow">Schlafzimmer</div>
      <div data-type="symbol"
...


Aber ich werde noch eine newline Class anlegen, damit wird das dann auch gehen.

Code Auswählen Erweitern


.newline{
    display: block !important;
}


Code Auswählen Erweitern


  <div class="cell">
    <div class="left">
      <div class="small narrow">Schlafzimmer</div>
      <div data-type="symbol"
        data-device="Schlafzimmer_Heizung"
        data-get="battery"
        data-get-on='["ok","low"]'
        data-icons='["fa-battery-full","fa-battery-1"]'
        data-on-colors='["Green","Red"]'
        class="newline">
      </div>
      <div data-type="symbol"
        data-device="Schlafzimmer_Fenster"
        data-get="Battery"
        data-get-on='["ok","low"]'
        data-icons='["fa-battery-full","fa-battery-1"]'
        data-on-colors='["Green","Red"]'
        class="newline">
      </div>
    </div>
  </div>


[Da_Erdinga]

Hallo zusammen,

ich bin heute zufällig auf diesen Thread gestossen und muss sagen, das mir das optisch gefällt, was Ihr da macht.
Also wollte ich mir ebenfalls diese GUI installieren.
Ich bin die Schritte wie in #1 durchgegangen und bekomme nun die "Fehlermeldung"

Code Auswählen Erweitern

File not found: ./www/tablet/index.html

Ich habe fhem auf einem RasPi2 mit Raspbian installiert.
Dies ist die einzige Anwendung, die auf dem Pi läuft.

Muss ich da noch etwas nachinstallieren?

TfH

[rvideobaer]

Hallo,

@Da_Erdinga

Hast Du auf dem Raspi im Ordner FHEM/www/Tablet die Datei index-example.html umbenannt oder eine Index.html erstellt?

Gruß Rolf

[rvideobaer]

Hallo,

ich versuche mich gerade an "class col" habe bis jetzt mit Tabellen gearbeitet.
Aber leider komme ich hier zu keinem Ergebnis.
Ich habe das das Beispiel aus einem früheren Beitrag benutzt, aber die Elemente werden nicht so wie angegeben geordnet.

Code Auswählen Erweitern

<li data-row="1" data-col="4" data-sizex="5" data-sizey="3">
   <header>EXAMPLE3</header>
   <div class="container top-space">
        <div class="col-1-2">
            <div class="container top-space">
                <div class="col-1-3">
                    <div data-type="switch" data-device="Switch1" data-icon="fa-music"></div>
                    <div data-type="label" class="">Station1</div>
                </div>
                <div class="col-1-3">
                    <div data-type="switch" data-device="Switch2" data-icon="fa-music"></div>
                    <div data-type="label" class="">Station2</div>
                </div>
                <div class="col-1-3">
                    <div data-type="switch" data-device="Switch3" data-icon="fa-music"></div>
                    <div data-type="label" class="">Station3</div>
                </div>
             </div>
             <div class="container top-space">
                 <div class="col-1-2">
                     <div data-type="symbol" data-device="Switch1" data-icon="fa-battery-4"></div>
                     <div data-type="label" class="">Value1</div>
                 </div>
                 <div class="col-1-2">
                     <div data-type="symbol" data-device="Switch1" data-icon="fa-battery-4"></div>
                     <div data-type="label" class="">Value2</div>
                 </div>
              </div>
        </div>
        <div class="col-1-2">
            <div data-type="volume" data-device='Volume1' class="" ></div>
        </div>
   </div>
</li>

und auch das Beispiel weiter oben zeigt die Symbole nur nebeneinander an.
FHEM und Tablet UI sind aktuell.

Gruß Rolf

[Achim]

Hallo,

vielen Dank. Mit der neuen class="newline" funktioniert das "Untereinandersetzen" der Symbole. Ich habe die neue Class mal vorab selbst in die fhem-tablet-ui.css Datei eingebaut. Ergebnis ist "Batterieanzeige.png"

Mit class="newline" sind dann aber die Batteriesymbole nicht mehr mittig. Und mir sind die Symbole zu weit auseinander. Daher habe ich mal mit weiteren Attributen (nennt man das so?) herumgetestet. Dabei habe ich (für mich) seltsame Verhaltensweisen festgestellt. Die angehängten Bilden sind nach der class-Definition benannt.

"center newline" bewirkt kein zentrieren
"centered newline" zentriert die Symbole
"center narrow newline" setzt das untere Symbol näher an das obere. Die Zentrierung ist aber nicht so "mittig" wie bei "centered newline"
"centered narrow newline" ergibt dasselbe Ergebnis wie "center narrow newline"

zum besseren Vergleich sind die Symbole beim Schlafzimmer mit "centered narrow newline" auf den Bildern. Habe ich da einen Denk- und Programmierfehler? Oder ist das Verhalten so vorgesehen oder evtl. ein Fehler in den Class Definitionen?

Viele Grüße
Achim

[Da_Erdinga]

Hallo rvideobaer,

die index-example.html habe ich nicht geändert.
Eine index.html war in

Code Auswählen Erweitern

/opt/fhem/www/tablet
nicht vorhanden, diese habe ich jetzt angelegt.

Jetzt habe ich zumindest eine weisse Seite, wenn ich die GUI öffnen will.

Jetzt muss ich noch rausfinden, was ich wo eingeben muss, damit ich meine Geräte angezeigt bekomme.

[DanHard]

Hallo Zusammen

Teilweise wird im Safaribrowser auf dem iPhone6 vermutlich die CSS nicht korrekt geladen. Dann erscheinen nur die Header Balken oder nur eine weisse Seite einer Liste.

Woran kann das liegen? Auf dem zweiten Bild sieht man wie es aussehen sollte!

Im Chrome auf dem Windows PC funktioniert alles wie es sollte.

Gruss

[bert]

rename doch mal die example Datei nach index.html

Bert

[chris1284]

kann man im symbol widget mit operatoren arbeiten?
so in etwa:

Code Auswählen Erweitern


<div data-type="symbol" data-device="bz_hz" data-get="batteryLevel"
                                        data-get-on='[>=2.2, >=2.5, >=2.7, >=3.0]'
                                        data-icons='["fa-battery-empty","fa-battery-quarter","fa-battery-half","fa-battery-three-quarters","fa-battery-full"]'
                                        data-on-colors='["red","orange","yellow","green"]'
                                        class="cell">
</div>


[Da_Erdinga]

Hallo bert,

ich habe die index-example.html in die index.html renamed, habe aber immer noch eine leere Seite beim Aufruf der GUI.

[chris1284]

wie hast du den die tui definiert in fhem? mach mal ein list. hast du auch vorher alles runtergeladen per

Code Auswählen Erweitern

update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt

[setstate]

Wenn man reine numerische Werte angibt, wird automatisch der größer/gleich Vergleich vorgezogen.

Code Auswählen Erweitern


<div data-type="label"
     data-device="OutTemp"
     data-limits='[-73,10,23]'
     data-colors='["#6699FF","#AA6900","#FF0000"]'
     data-unit="%B0C%0A"
     class="cell big">
</div>


[setstate]

Hallo Zusammen

Teilweise wird im Safaribrowser auf dem iPhone6 vermutlich die CSS nicht korrekt geladen. Dann erscheinen nur die Header Balken oder nur eine weisse Seite einer Liste.

Woran kann das liegen? Auf dem zweiten Bild sieht man wie es aussehen sollte!

Im Chrome auf dem Windows PC funktioniert alles wie es sollte.

Gruss

Wie hast du die Scripts in die HTML Seite eingebaut? Ich empfehle es genau so, wie im mobilen Beispiel von mir angegeben, anzugeben. https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil_2.html
Wichtig ist eventuell auch die longpoll_delay Angabe. Damit startet das longpoll x Millisekunden später, damit die Seite in Ruhe aufgebaut werden kann.

[DanHard]

Wie hast du die Scripts in die HTML Seite eingebaut? Ich empfehle es genau so, wie im mobilen Beispiel von mir angegeben, anzugeben. https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil_2.html
Wichtig ist eventuell auch die longpoll_delay Angabe. Damit startet das longpoll x Millisekunden später, damit die Seite in Ruhe aufgebaut werden kann.

Versuche es später! Habe als Vorlage die Exemple Datei genommen!
Melde mich wieder!