[FHEM-Tablet-UI] User-Demos

[moonsorrox]

@moonsorrox

Bezüglich Anzahl der Updates (Warn)

so data-warn="UPDATE:ALL"  funktioniert es.

das habe ich so drin..!
Folgendes Problem bei mir, wenn ich in Fhem nach Updates schaue, sehe ich grad diese..!

Code Auswählen Erweitern

List of new / modified files since last update:
UPD ./CHANGED
UPD ./configDB.pm
UPD FHEM/52_I2C_PCA9685.pm
UPD FHEM/55_InfoPanel.pm
UPD FHEM/98_RandomTimer.pm
UPD FHEM/98_Text2Speech.pm
UPD FHEM/98_configdb.pm

Wenn ich jetzt im FTUI schaue, zeigt mir das Icon "0", wenn ich drauf klicke "rödeln/drehen" die 3 Updatezeichen im PopUp dazu zeigt mir das Icon mit FHEM ein Ausrufezeichen, FTUI zeigt noch nicht einmal ein Warnkringel und ALL zeigt wieder ein Ausrufezeichen, irgend etwas ist da noch faul, ich weiß nur grad nicht wonach ich suchen soll..!

In Fhem zeigt mir mein Custom reading UPDATE.status im STATE folgende Zahl - 5229685.55 

[Eisix]

Hallo,

UPDATE.status ist bei meinem htmlcode nicht relevant für die Warn Anzeige. Geht alles über den CustomReading.
Habe die Readings manuell gesetzt (siehe screenshot) was mir aufgefallen ist, wenn der Wert 0 ist zeigt das Popup keinen Warnkreis an, auf der Hauptseite schon (zweiter screenshot)

Code Auswählen Erweitern


Internals:
   NAME       UPDATE
   NR         264
   STATE      OK
   TYPE       CustomReadings
   Helper:
     Dblog:
       All:
         Logdb:
           TIME       1486558220.58875
           VALUE      10
       Fhem:
         Logdb:
           TIME       1486558269.2569
           VALUE      10
       Ftui:
         Logdb:
           TIME       1486558312.73494
           VALUE      3
   Readings:
     2017-02-08 13:50:20   ALL             10
     2017-02-08 13:51:09   FHEM            10
     2017-02-08 13:51:52   FTUI            3
     2017-02-08 12:01:22   state           OK
Attributes:
   event-on-update-reading FHEM,FTUI,ALL
   interval   10800
   readingDefinitions FHEM:qx(curl -sS http://fhem.de/fhemupdate/controls_fhem.txt| diff - /opt/fhem/FHEM/controls_fhem.txt |grep ">"|grep "UPD"|wc -l),FTUI:qx(wget -qO - https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt| diff - /opt/fhem/FHEM/controls_fhemtabletui.txt |grep ">" |grep "UPD"|wc -l),ALL:{ReadingsNum($name, "FHEM", 0) + ReadingsNum($name, "FTUI", 0)}


[Zage]

Hier der HTML-Part zur Tv-Liste:

Code Auswählen Erweitern

<div class="pagetab" id="content4">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="8" data-sizey="4" class="whitebox">
<header>TV Programm</header>
  <table border="0" width="100%">
<colgroup>
<col width="50">
<col width="20">
<col width="400">
<col width="20">
<col width="400">
</colgroup>
  <tr>
<th><div data-type="label">Sender</th>
<th><div data-type="label">Anfang</th>
<th><div data-type="label">Sendung</th>
<th><div data-type="label">N&auml;chstes</th>
<th><div data-type="label">Sendung</th>
  </tr>
  <tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\ard.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ARD_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ARD"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ARD_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ARD_next"></div></th>
  </tr>
  <tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\zdf.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="ZDF_next"></div></th>
  </tr>
  <tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\pro7.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Pro7_next"></div></th>
  </tr>
  <tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\rtl.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL_next"></div></th>
  </tr>
  <tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\rtl2.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL2_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL2"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL2_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="RTL2_next"></div></th>
  </tr>
  <tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\sat1.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="Sat1_next"></div></th>
  </tr>
  <tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\vox.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="VOX_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="VOX"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="VOX_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="VOX_next"></div></th>
  </tr>
  <tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\super-rtl.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SuperRTL_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SuperRTL"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SuperRTL_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SuperRTL_next"></div></th>
  </tr>
  <tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\sky-cinema.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinema_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinema"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinema_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinema_next"></div></th>
  </tr>
  <tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\sky-cinema-1.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap1_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap1"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap1_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap1_next"></div></th>
  </tr>
  <tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\sky-cinema-24.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap24_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap24"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap24_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyCinemap24_next"></div></th>
  </tr>
  <tr>
<th><div data-type="image" data-url="..\images\default\tvmovie\sky_atlantic.png" data-size="60%"</div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyAtlantic_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyAtlantic"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyAtlantic_next_time"></div></th>
<th><div data-type="label" data-device="mod_TV_Programme" data-get="SkyAtlantic_next"></div></th>
  </tr>
</table>
</li>

</ul>
</div>
</div>

VG
Zage

[moonsorrox]

UPDATE.status ist bei meinem htmlcode nicht relevant für die Warn Anzeige.

aus deinem Teil deines FHEM Monitors habe ich aber diese Update Prozedur entnommen und hier steht in der Tabelle alles mit UPDATE.status drin, jetzt bin ich etwas verwirrt...!! 

Code Auswählen Erweitern

<table align="center" style="border:1px solid grey; width:80%">
<tr>
    <td style="border:2px solid grey;" class="A1"><center><div data-type="label" class="inline"><big>FHEM uptime<br></big></div>
</br>
<div data-type="label" data-device="sysmon" data-get="fhemuptime_text" class="small"></div>
</td>
    <td style="border:2px solid grey;" class="B1"><center>
<div data-type="popup" data-width="120px" data-height="105px">
<div data-type="button" data-icon="fs-system_fhem_reboot" data-on-background-color="orange" data-off-background-color="orange" class=""></div>
        <div class="dialog">
                <header>Neustart FHEM</header>
<div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fs-system_fhem"></div>
        <div data-type="label" class="top">sicher?</div>
</div>
</div>
</td>
</tr>
<tr>
    <td style="border:2px solid grey;" class="A2"><center><div data-type="label" class="inline"><big>FHEM updates<br></big></div>
</td>
    <td style="border:2px solid grey;" class="B2"><center>
<div data-type="popup" data-width="260px" data-height="120px">
<div data-type="symbol" data-device="UPDATE" data-get="ALL" data-background-icon="fa-circle" data-on-background-color="orange" data-off-background-color="orange" data-get-warn="(\d+)" data-icon="fs-system_fhem_update warn" class="inline warn"></div>
        <div class="dialog">
                <header>Update</header>
</br>
<div class="inline">
<div data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.FHEM"
data-warn="UPDATE:FHEM"
data-fhem-cmd="setreading UPDATE.status UPDATE.FHEM run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn"
class="warn"
></div>
<div data-type="label"><small>FHEM</small></div>
</div>
<div class="inline">
                                <div data-type="button"
                                                data-device="UPDATE.status"
                                                data-get="UPDATE.FTUI"
                                                data-warn="UPDATE:FTUI"
                                                data-fhem-cmd="setreading UPDATE.status UPDATE.FTUI run"
                                                data-states='["idle","update","run","done"]'
                                                data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
                                                data-on-colors='["darkgrey","red","white","green"]'
                                                data-background-icon="fa-circle"
                                                data-on-background-color="orange"
                                                data-off-background-color="orange"
                                                data-icon="fa-refresh warn"
                                                class="warn"
                                ></div>
<div data-type="label"><small>FTUI</small></div>
</div>
<div class="inline">
                                <div data-type="button"
                                                data-device="UPDATE.status"
                                                data-get="UPDATE.ALL"
                                                data-warn="UPDATE:ALL"
                                                data-fhem-cmd="setreading UPDATE.status UPDATE.ALL run"
                                                data-states='["idle","update","run","done"]'
                                                data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
                                                data-on-colors='["darkgrey","red","white","green"]'
                                                data-background-icon="fa-circle"
                                                data-on-background-color="orange"
                                                data-off-background-color="orange"
                                                data-icon="fa-refresh warn"
                                                class="warn"
                                ></div>
                                <div data-type="label"><small>All</small></div>
</div>
</div>
</div>
</td>
</tr>
</table>

[Eisix]

Ok, denke jetzt habe ich verstanden wo das Problem ist.

Es gibt einmal das CustomReading mit der curl Abfrage und der Anzahl der Updates und es gibt ein Dummy das den Status des Update-Verlaufs abbildet.

Code Auswählen Erweitern


  NAME       UPDATE.status
   NR         267
   STATE      pending
   TYPE       dummy
   Helper:
     Dblog:
       Update.all:
         Logdb:
           TIME       1486573286.21692
           VALUE      idle
       Update.fhem:
         Logdb:
           TIME       1486573286.23327
           VALUE      idle
       Update.ftui:
         Logdb:
           TIME       1486573286.24805
           VALUE      idle
       State:
         Logdb:
           TIME       1486558748.52494
           VALUE      pending
   Readings:
     2017-02-08 18:01:26   UPDATE.ALL      idle
     2017-02-08 18:01:26   UPDATE.FHEM     idle
     2017-02-08 18:01:26   UPDATE.FTUI     idle
     2017-02-08 13:59:08   state           pending
Attributes:
   setList    done pending


Das Warn kommt aus dem CustomReading(UPDATE) die Farben und verschiedenen Icons kommen aus dem dummy (UPDATE.status). Deshalb meinte ich UPDATE.status ist für die Warn-message nicht relevant.
Hoffe ich habe mich verständlich ausgedrückt 

Gruß
Eisix

[andreas_r]

Hier im Thread verlinkt, falls es jemand interessiert: Eine meiner Meinung nach elegante Methode, FTUI auf verschiedenen Displaygrößen ohne doppelte Seitendefinition anzuzeigen.

https://forum.fhem.de/index.php/topic,66246.0.html

[moonsorrox]

Ok, denke jetzt habe ich verstanden wo das Problem ist.

OK, also das habe ich jetzt auch so eingebaut, nun zeigt er mir auch die Update Zahlen..! 
Was mich aber irritiert, warum drehen die Teile im PopUp immer..? hast du das auch.. ist jetzt im screenshot nicht so zu sehen..!

Ich dachte das oder die Update werden damit auch angesprochen.

[Eisix]

Der jeweilige Button zeigt den Update Verlauf an.

Code Auswählen Erweitern


data-states='["idle","update","run","done"]'

Ich habe es so gemacht das ich FTUI, FHEM oder ALL per klick im popup updaten kann.

Jeweils ein DOIF das den Status setzt und mit einem readingsproxy hole ich mir den Log Eintrag "shutdown restart" der das ganze dann auf done setzt. Denke noch über einen automatischen Neustart nach dem patchen nach.

Gruß
Eisix

[moonsorrox]

Code Auswählen Erweitern


data-states='["idle","update","run","done"]'

Ich habe es so gemacht das ich FTUI, FHEM oder ALL per klick im popup updaten kann.

das habe ich ja auch 1 zu 1 von dir übernommen, aber das da noch mehr dran hängt wusste ich nicht, deshalb funktioniert das bei mir auch nicht richtig... OK das wird dann wohl noch eine Baustelle mehr und ich habe so einige in FTUI

[Eisix]

Mache morgen noch einen finalen Test. Dann kann ich dir die DOIFS schicken. Wenn die devices gleich sind sollte es dann direkt funktionieren.
Gruß
Eisix

[moonsorrox]

OK super..!
Meine Teile drehen im übrigen immer noch 

So sieht dieser Teil aus, ohne deine Datenbank, habe noch ein paar Farbvarianten (Rahmen, 1. Updatespinner) drin, aber nur erst einmal zum probieren

Code Auswählen Erweitern

<table align="center" style="border:1px solid royalblue; width:80%">
<tr>
    <td style="border:2px solid royalblue;" class="A1"><center><div data-type="label" class="inline"><big>FHEM uptime<br></big></div>
</br>
<div data-type="label" data-device="sysmon" data-get="fhemuptime_text" class="small"></div>
</td>
<td style="border:2px solid royalblue;" class="B1"><center>
<div data-type="popup" data-width="120px" data-height="105px">
<div class=""
data-type="button"
data-icon="fs-system_fhem_reboot"
data-background-icon="fa-circle-thin"
data-off-background-color="#DC143C"
data-off-color="#DC143C"
data-on-background-color="#E6FF57"
data-on-color="#A6BF17">
</div>

        <div class="dialog">
<header>Neustart</header>
<div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fs-system_fhem"></div>
        <div data-type="label" class="top">sicher?</div>
</div>

</div>
</td>
</tr>

<tr>
    <td style="border:2px solid royalblue;" class="A1"><center><div data-type="label" class="inline"><big>Ubuntu Pakete<br></big></div>
</br>
<div data-type="label" data-device="sysmon" data-get="sys_updates" class="small"></div>
</td>
    <td style="border:2px solid royalblue;" class="B1"><center>

<div data-type="popup" data-width="120px" data-height="105px">
<div data-type="button"
data-icon="fa-linux"
data-background-icon="fa-circle-thin"
data-off-background-color="#DC143C"
data-off-color="#DC143C"
data-on-background-color="#E6FF57"
data-on-color="#A6BF17" class="">
</div>
       
<div class="dialog">
                <header>???</header>
<div data-type="button" data-fhem-cmd="shutdown restart" data-icon="fs-system_fhem"></div>
        <div data-type="label" class="top">sicher?</div>
</div>
</div>
</td>
</tr>
<tr>
    <td style="border:2px solid royalblue;" class="A2"><center><div data-type="label" class="inline"><big>FHEM updates<br></big></div>
</td>
    <td style="border:2px solid royalblue;" class="B2"><center>
<div data-type="popup" data-width="260px" data-height="120px">
<div data-type="symbol"
data-device="UPDATE"
data-get="ALL"
data-get-warn="(\d+)"
data-background-icon="fa-circle-thin"
data-off-background-color="#E6FF57"
data-off-color="#A6BF17"
data-on-background-color="#DC143C"
data-on-color="#A6BF17"
data-icon="fs-system_fhem_update warn"
class="inline warn">
</div>

<div class="dialog">
                <header>Update</header>
</br>
<div class="inline">
<div class="warn"
data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.FHEM"
data-warn="UPDATE:FHEM"
data-fhem-cmd="setreading UPDATE.status UPDATE.FHEM run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle-thin"
data-off-background-color="#DC143C"
data-off-color="#DC143C"
data-on-background-color="#E6FF57"
data-on-color="#A6BF17"
data-icon="fa-refresh warn">
</div>
<div data-type="label"><small>FHEM</small></div>
</div>
<div class="inline">
<div class="warn"
data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.FTUI"
data-warn="UPDATE:FTUI"
data-fhem-cmd="setreading UPDATE.status UPDATE.FTUI run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn">
</div>
<div data-type="label"><small>FTUI</small></div>
</div>
<div class="inline">
<div class="warn"
data-type="button"
data-device="UPDATE.status"
data-get="UPDATE.ALL"
data-warn="UPDATE:ALL"
data-fhem-cmd="setreading UPDATE.status UPDATE.ALL run"
data-states='["idle","update","run","done"]'
data-icons='["fa-refresh","fa-refresh fa-blink","fa-refresh fa-spin","fa-refresh"]'
data-on-colors='["darkgrey","red","white","green"]'
data-background-icon="fa-circle"
data-on-background-color="orange"
data-off-background-color="orange"
data-icon="fa-refresh warn">
</div>
<div data-type="label"><small>All</small></div>
</div>
</div>
</div>
</td>
</tr>
</table>

[Thyraz]

Stelle hier auch mal meine noch etwas unfertige Konfiguration vor.

Ich hab in letzter Zeit versucht mich aus dem typischen TabletUI-Beispiel-Korsett zu lösen und mir erst ein Layout auszudenken das mir gefallen würde,
danach dann zu schauen wie ich es mit den bestehenden Widgets umsetzen kann und was man dazu alles per User CSS File verbiegen muss.

Grund für die Geschichte war, dass ich eine typisch (völlig) überladene Seite mit unendlich vielen Infos hatte.
Besucher denen man das zeigte, waren von der Informationsflut total erschlagen anstatt das Ding intuitiv bedienen zu können.

Also fliegt jetzt alles raus was ich eh nie verwendet habe:
- Kalender + Müllkalender hab ich in iCal mit Erinnerungen auf dem Handy und sehe das somit Morgens schon beim Aufstehen lang bevor ich FTUI verwende
  Fantastical an iPhone/iPad/Mac schlägt ein Webwidget in Sachen Übersichtlichkeit / Bedienung sowieso um Längen.
- TV Programm lässt sich über eine native App oder dem Plugin auf meiner VU Box viel angenehmer lesen / bedienen
- Viele Infos müssen nicht dauerhaft angezeigt werden. Fensteranzeige interessiert nur wenn wirklich was offen ist.
  Ob (und wie lang) Waschmaschine oder Trockner laufen muss auch nicht angezeigt werden wenn sie aus sind.
  Das wird jetzt alles über data-hide geregelt
- usw usf...

Dafür mehr Einstellmöglichkeiten für die Familie wie z.B. Lichtautomatiken (Bewegungsmelder) ein-/ausschalten zu können,
oder die Dauer bis zum automatischen Abschalten zu konfigurieren.

Außerdem wird das "Mehr" an Platz auf größeren Geräten nicht mehr verwendet um mehr Infos darzustellen nur weil mans kann / der Platz da ist.
Stattdessen eben ein Responsive Design, dass auf allen Geräten läuft und sich an die Bildschirmgröße anpasst.
Look and Feel kommen dadurch einer nativen App IMO sehr nahe.

Beim Aufbau des Codes versuch ich möglichst viel wiederverwendbar zu machen.
Vieles ist in parametrierbaren Templates ausgelagert, Besutzerdefinierte Farben sind als CSS Variablen festgelegt usw.


Ein wenig mehr als bisher drin ist, ist aber schon noch geplant.
Buttons für die Lichtszenen fehlen noch, Rolladensteuerug, etc...
Icons welche das Aussehen der jeweiligen Lampen wiederspiegeln will ich auch noch zeichnen.
Sensoren mit niedrigem Batteriestand sollen ähnlich den offenen Fenstern nur dargestellt werden wenn es welche gibt.

Charts (per Default ausgeblendet aber in den Raumanzeigen dann ausklappbar) will ich auch wieder integrieren.
Aber das Chart Widget in den Stil der restlichen Elemente zu bringen dürfte noch einige CSS-Hacks benötigen.

[Ban-ya]

Das gefällt mir mal richtig gut.
Da hast Du aber viel verbiegen müssen. Gut gemacht

Ich werde mein altbackenes Design sowieso verwerfen.
Aber Frau hats gefallen und ich habe viel gelernt.

[SirMarco]

Stelle hier auch mal meine noch etwas unfertige Konfiguration vor.

Ich hab in letzter Zeit versucht mich aus dem typischen TabletUI-Beispiel-Korsett zu lösen und mir erst ein Layout auszudenken das mir gefallen würde,
danach dann zu schauen wie ich es mit den bestehenden Widgets umsetzen kann und was man dazu alles per User CSS File verbiegen muss.

Grund für die Geschichte war, dass ich eine typisch (völlig) überladene Seite mit unendlich vielen Infos hatte.
Besucher denen man das zeigte, waren von der Informationsflut total erschlagen anstatt das Ding intuitiv bedienen zu können.

Also fliegt jetzt alles raus was ich eh nie verwendet habe:
- Kalender + Müllkalender hab ich in iCal mit Erinnerungen auf dem Handy und sehe das somit Morgens schon beim Aufstehen lang bevor ich FTUI verwende
  Fantastical an iPhone/iPad/Mac schlägt ein Webwidget in Sachen Übersichtlichkeit / Bedienung sowieso um Längen.
- TV Programm lässt sich über eine native App oder dem Plugin auf meiner VU Box viel angenehmer lesen / bedienen
- Viele Infos müssen nicht dauerhaft angezeigt werden. Fensteranzeige interessiert nur wenn wirklich was offen ist.
  Ob (und wie lang) Waschmaschine oder Trockner laufen muss auch nicht angezeigt werden wenn sie aus sind.
  Das wird jetzt alles über data-hide geregelt
- usw usf...

Dafür mehr Einstellmöglichkeiten für die Familie wie z.B. Lichtautomatiken (Bewegungsmelder) ein-/ausschalten zu können,
oder die Dauer bis zum automatischen Abschalten zu konfigurieren.

Außerdem wird das "Mehr" an Platz auf größeren Geräten nicht mehr verwendet um mehr Infos darzustellen nur weil mans kann / der Platz da ist.
Stattdessen eben ein Responsive Design, dass auf allen Geräten läuft und sich an die Bildschirmgröße anpasst.
Look and Feel kommen dadurch einer nativen App IMO sehr nahe.

Beim Aufbau des Codes versuch ich möglichst viel wiederverwendbar zu machen.
Vieles ist in parametrierbaren Templates ausgelagert, Besutzerdefinierte Farben sind als CSS Variablen festgelegt usw.


Ein wenig mehr als bisher drin ist, ist aber schon noch geplant.
Buttons für die Lichtszenen fehlen noch, Rolladensteuerug, etc...
Icons welche das Aussehen der jeweiligen Lampen wiederspiegeln will ich auch noch zeichnen.
Sensoren mit niedrigem Batteriestand sollen ähnlich den offenen Fenstern nur dargestellt werden wenn es welche gibt.

Charts (per Default ausgeblendet aber in den Raumanzeigen dann ausklappbar) will ich auch wieder integrieren.
Aber das Chart Widget in den Stil der restlichen Elemente zu bringen dürfte noch einige CSS-Hacks benötigen.

Gefällt mir sehr gut. Wie hast du die Schriftart geändert?

Langt das so?

index.html

Code Auswählen Erweitern


<!--FONTS-->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">


und in der fhem-tablet-ui-user.css

Code Auswählen Erweitern


body {
    background-color: white;
    font-family: Roboto, Arial;
    font-weight: 500;
    font-size: 16px;
}



[Thyraz]

Ich denke das sollte reichen.
Zumindest für normalen Text.

Einzelne Widgets könnten natürlich immer noch intern andere Fonts wählen,
da müsste man sich in Chrome mit Entwicklertools dann mal durchklicken.