New FHEM Tablet UI

[jehu]

Hallo Mario,

klasse, das Label-Widget mit den METEOCONS-Icons probiere ich heute Abend.

Grüße
Jens

[onkeltom]

Hallo onkeltom,
das sieht nicht gut aus. Bitte lade alle widgets noch mal neu von github, ich hab gerade etwas aufgeräumt im Code.
Ciao
Mario

Hallo Mario,

klasse, vielen Dank. Jetzt funktioniert's.

Gruß,
onkeltom

[jehu]

Hallo Mario,

Tolle Arbeit. Die Wettericon sehen toll in der Oberfläche aus und das Label-Widget funktioniert tadellos.
So langsam wächst mein UI.Ich bin total begeistert.

Wäre es evtl. noch möglich Möglichkeit zum kürzen von Textfeldern vorzusehen ?
Dann könnte ich das Datum und die Uhrzeit in meinem Kalender auf TT.MM oder HH:MM kürzen.
Dabei würde es ja reichen wenn man die Felder einfach auf x-Zeichen abschneidet. In meinem Fall auf 5 Zeichen.
Meinst Du das wäre möglich ?

Schöne Grüße
Jens

[bjoernbo]

JEHU ! WOHER KOMMT DER KALENDER DEN WILL ICH AUCH 

Du hast in FHEM als Wetter PROPLANTA, richtig? Wie kann ich das einbinden?

[jehu]

Hi bjoernbo,

Die Daten kommen aus CALVIEW Modul, welches ich dann ala nesges-Callview in einer Tabelle per Label-Widget darstelle.
Was noch fehlt ist die css-Anpassung dazu und die Anpassung der Uhrzeiten/Datum (Code siehe unten)

Infos zu PROPLANTA: http://fhem.de/commandref_DE.html#PROPLANTA

Irgendwie habe ich immer mehr Lust mich intensiver mit JS zu beschäftigen. Hat jemand ein gutes Einsteiger-TODO?

Grüße
Jens

Code Auswählen Erweitern

<li data-row="2" data-col="6" data-sizex="4" data-sizey="2">
<header>KALENDER</header>
        <table class="calls" width="100%">
        <tr>
            <td>
            <div type="label" device="myView" data-get="t_001_bdate"></div>
                <!--<div type="label" device="myView" data-get="t_001_edate"></div>-->
            </td>
            <td>
                <div type="label" device="myView" data-get="t_001_btime"></div>
                <!--<div type="label" device="myView" data-get="t_001_etime"></div>-->
            </td>
            <td class="r"><div type="label" device="myView" data-get="t_001_summary" style="font-size:large;color:#aa6900;"></div></td>
        </tr>
        <tr>
            <td>
            <div type="label" device="myView" data-get="t_002_bdate"></div>
                <!--<div type="label" device="myView" data-get="t_002_edate"></div>-->
            </td>
            <td>
                <div type="label" device="myView" data-get="t_002_btime"></div>
                <!--<div type="label" device="myView" data-get="t_002_etime"></div>-->
            </td>
            <td class="r"><div type="label" device="myView" data-get="t_002_summary" style="font-size:large;color:#aa6900;"></div></td>
        </tr>
        <tr>
            <td>
            <div type="label" device="myView" data-get="t_003_bdate"></div>
                <!--<div type="label" device="myView" data-get="t_003_edate"></div>-->
            </td>
            <td>
                <div type="label" device="myView" data-get="t_003_btime"></div>
                <!--<div type="label" device="myView" data-get="t_003_etime"></div>-->
            </td>
            <td class="r"><div type="label" device="myView" data-get="t_003_summary" style="font-size:large;color:#aa6900;"></div></td>
        </tr>       
        <tr>
            <td>
            <div type="label" device="myView" data-get="t_004_bdate"></div>
                <!--<div type="label" device="myView" data-get="t_004_edate"></div>-->
            </td>
            <td>
                <div type="label" device="myView" data-get="t_004_btime"></div>
                <!--<div type="label" device="myView" data-get="t_004_etime"></div>-->
            </td>
            <td class="r"><div type="label" device="myView" data-get="t_004_summary" style="font-size:large;color:#aa6900;"></div></td>
        </tr>       
        <tr>
            <td>
            <div type="label" device="myView" data-get="t_005_bdate"></div>
                <!--<div type="label" device="myView" data-get="t_005_edate"></div>-->
            </td>
            <td>
                <div type="label" device="myView" data-get="t_005_btime"></div>
                <!--<div type="label" device="myView" data-get="t_005_etime"></div>-->
            </td>
            <td class="r"><div type="label" device="myView" data-get="t_005_summary" style="font-size:large;color:#aa6900;"></div></td>
        </tr>
     [...]
    </table>
</li>


[bjoernbo]

ok thx, das mit dem Wetter hat sich erübrigt, habe ich jetzt auch hinbekommen.

Danke

[bjoernbo]

Du willst ein Einsteiger ToDo?, ok....

Ich frage alle 5 Minuten diverse IP-Adressen ab und lasse mir anzeigen ob die Geräte erreichbar sind und lasse dies über ein Icon anzeigen.

Anbei der Code aus FHEM:

#CAM Ben 5 min
define CAM_Ben PRESENCE lan-ping xxx.xxx.xxx.xxx 300
attr CAM_Ben alias Ben
attr CAM_Ben devStateIcon ONLINE:WLAN_Status.1 OFFLINE:WLAN_Status.0
attr CAM_Ben eventMap present:ONLINE absent:OFFLINE
attr CAM_Ben group Status
attr CAM_Ben icon it_camera
attr CAM_Ben room Status

[setstate]

Irgendwie habe ich immer mehr Lust mich intensiver mit JS zu beschäftigen. Hat jemand ein gutes Einsteiger-TODO?

Hallo jehu,

ich habe Javascript erst durch jQuery lieben gelernt. Macht so vieles einfacher und man kann sich auf das konzentrieren, was man erreichen will.
http://jquery.com/
http://learn.jquery.com/

[bjoernbo]

"Wer hat an der Uhr gedreht ..."

Wer Interesse hat ..... :-D

<li data-row="5" data-col="5" data-size="2" data-sizey="1">
    <div style="text-align:center;width:350px;padding:0.5em 0;"> <h2><a style="text-decoration:none;" href="http://www.zeitverschiebung.net/de/city/2947416"></h2> <iframe src="http://www.zeitverschiebung.net/clock-widget-iframe?language=de&timezone=Europe%2FBerlin" width="100%" height="130" frameborder="0" seamless></iframe>
    </div>
</li>

ihr müsst nur data-row und data-col für eure Bedürfnisse anpassen

[nesges]

Großes Lob @setstate, die Umstellung auf die neue Version hat keinerlei Probleme bereitet - abgesehen von denen, die ich mir selber eingebaut hatte natürlich

Ich hab dann auch gleichmal ausprobiert ein Widget zu schreiben. "klimatrend" wandelt Daten aus dem statistics-Modul (http://fhem.de/commandref.html#statistics) in einen Pfeil um, der den aktuellen Trend anzeigt. Steigender Wert: Pfeil nach oben; Fallender Wert: Pfeil nach unten. Dazu noch farbcodiert und mit Extra-Icon versehene Marken für steile Bewegungen im Trend. Das Bild im Anhang sagt wahrscheinlich mehr als tausend Worte.

Voraussetzung: statistics Modul

Code Auswählen Erweitern

define STATISTICS statistics W_HUMID
attr STATISTICS ignoreDefaultAssignments 1
attr STATISTICS tendencyReadings temperature,humidity

Dadurch werden u.a. Readings in folgender Form erzeugt (die einzelnen Werte stehen natürlich erst nach Ablauf der Zeiten zur Verfügung):

Code Auswählen Erweitern

statTemperatureTendency 1h: +1.3 2h: +0.3 3h: +0.1 6h: +1.4
statHumidityTendency 1h: +1 2h: -2 3h: -1 6h: -1

HTML-Code:

Code Auswählen Erweitern

<div data-type="klimatrend" data-device="W_HUMID" data-get="statTemperatureTendency"></div>

Dadurch wird (mit den Beispieldaten) ein leuchtend roter Doppelpfeil nach oben erzeugt, der einen steilen Anstieg der Temperatur in der letzten Stunde symbolisiert. Ein vollständiger HTML-Code mit allen möglichen Attributen:

Code Auswählen Erweitern

<div data-type="klimatrend"
    data-device="W_HUMID"
    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="1"
    data-highmark-icon="fa-angle-double"
    data-highmark-rising-color="rgb(255,80,80)"
    data-highmark-falling-color="rgb(80,80,255)"
    ></div>

device: Name eines Devices mit statistics-Werten. Kein Default.
get: Name des Readings mit statistics-Werten. Default ist "statTemperatureTendency" (funktioniert nur bedingt, s.u.)
refperiod: Referenzzeitraum mit dem der aktuelle Wert verglichen werden soll. statistics liefert die Werte für 1h, 2h, 3h und 6h. refperiod wird entsprechend mit 1,2,3,6 angegeben. Alternativ kann auch data-part 2,4,6,8 verwendet werden. Default ist 1
stagnating-color: Farbcode für unveränderten Wert. Default ist rgb(80,80,80)
icon: Font-Awesome-Icon das zur Darstellung benutzt werden soll. Default ist: "fa-angle"
rising-color: Farbcode für ansteigenden Trend. Default ist rgb(180,80,80)
falling-color: Farbcode für fallenden Trend. Default ist rgb(80,80,180)
highmark: Wertunterschied ab der der Trend als "steil" gilt und entsprechend gekennzeichnet ist. Default ist "1" für Temperaturwerte und "5" für Humidity-Werte.
highmark-icon: Font-Awesome-Icon das zur Darstellung oberhalb der highmark benutzt werden soll. Default ist: "fa-angle-double"
highmark-rising-color: Farbcode für steil ansteigenden Trend. Default ist rgb(255,80,80)
highmark-falling-color: Farbcode für steil fallenden Trend. Default ist rgb(80,80,255)

Auf ein Problem bin ich dabei gestoßen: Die Standardbelegung für data-get funktioniert nur, wenn ein gleichnamiges Reading auch einmal explizit im HTML-Code notiert wird. Verantwortlich dafür dürfte fhem-tablet-ui.js Zeile 104ff sein. Eine Lösung dafür ist mir jetzt allerdings auch nicht eingefallen. Ansonsten ist das Widget-Schreiben eine Freude!

Zusatzfrage für Javascript-Erfahrenere: Wäre es möglich die Standardwidgets zu vererben? Meine Versuche mit widget_klimatrend.prototype=new widget_label() scheiterten im Endeffekt daran, dass ich nicht wusste, wie ich die init-Funktion überschreiben kann. Im Endeffekt war's für dieses Widget aber auch egal, da's ohnehin nichts mehr mit dem label-Widget zu tun hat.

PS: Der Code für's Widget ist auch auf github - https://github.com/nesges/Widgets-for-fhem-tablet-ui

[setstate]

Hallo nesges, herzlich willkommen zurück
Das ist ja Wahnsinn, gleich am Anfang so eine coole Granate vor dir. Sieht sehr gut und super dokumentiert.  Weiter so!!

Kannst du aber bitte noch ein Beispiel für eine Minimal-Variante für den HTML-Code hinzufügen? Also was muss ein User einfügen, um das Widget im 'FHEM Tablet UI'-Standard-Style zu bekommen, ohne von den vielen Parametern erschlagen zu werden. Ich versuche per Class-Attribut ein paar einfache Presets anzubieten, so was wie dunkel, hell, big, small. Das ist für erste Individualisierung gedacht, die anderen data-Attribute sind dann was für Profis.

Mit dem Volume Widget mache ich es auch gerade so. Man muss dann einfach nur eine zusätzliche Class 'hue-back' oder 'hue-tick' oder 'hue-front' hinzufügen, um eine andere Variante zu bekommen. Im Code frage ich per .hasClass() ab, und switche die entsprechenden Stellen um.

Aber ich bin nicht so schnell wie du   Ist noch nicht fertig. Ist eben kontra-produktiv, wenn man nebenbei fernsieht...
Vielen Dank
setstate

update:ich sehe gerade, die Minimal Konfuguration ist doch schon dabei, sorry, habe ich vorhin übersehen. Evtl. noch das data-get mit rein. Dann ist es schön

[setstate]

Hallo Mario,

Tolle Arbeit. Die Wettericon sehen toll in der Oberfläche aus und das Label-Widget funktioniert tadellos.
So langsam wächst mein UI.Ich bin total begeistert.

Wäre es evtl. noch möglich Möglichkeit zum kürzen von Textfeldern vorzusehen ?
Dann könnte ich das Datum und die Uhrzeit in meinem Kalender auf TT.MM oder HH:MM kürzen.
Dabei würde es ja reichen wenn man die Felder einfach auf x-Zeichen abschneidet. In meinem Fall auf 5 Zeichen.
Meinst Du das wäre möglich ?

Schöne Grüße
Jens

Sehr, sehr schön!
Ja, Label kürzen baue ich noch ein. Ich bin nur am grübeln. Ich wäre in 2 Minuten fertig, wenn ich dir den RegEx zum Festlegen als Data-Parameter nach außen gebe. Aber das ist ganz schön technisch. Man könnte auch den data-part Teil aufbohren und mit Trenner und Anzahl Angabe etwas bereitstellen. Überlege ich mir noch im Laufe des Tages.
Auch beim Label grüble ich schon seit gestern, ob es nicht schöner wäre, ein eigenes Wetter-Widgets draus zu machen und noch Temperatur und Zeitpunkt zusätzlich daneben anzuzeigen. Das nimmt natürlich die individuelle Gestaltungsmöglichkeit, aber das Label wäre sauber "nur Text". Was sagt ihr dazu?

[nesges]

Evtl. noch das data-get mit rein. Dann ist es schön

Hab's mit rein genommen, wobei ich's schön fände da auch nen Default vergeben zu können. Glaubst du das wäre sinnvoll lösbar? "sinnvoll" = nicht zuviel Aufwand, weil wirklich wichtig ist's nicht. Klassen für Presets muss ich heute abend mal überlegen, da fällt mir grade nichts ein

[jehu]

Hi setstate,

ich fände auch ein Formatieren der Felder mit RegEx gut. Zwar bin ich kein wirklicher RegEx-Experte, aber letzlich muss man sich bei FHEM sowieso damit beschäftigen. Außerdem wäre die Nutzung damit wahrscheinlich flexibler. Ist die Nutzung von RegEx (außer beim switch z.B. bei data-get-on oder -off) jetzt schon möglich?
Bezüglich der Wetter-Widget gebe ich dir insofern recht, das die Ersetzung der Wetter-Condition durch WetterFonts das Label-Widget etwas überfrachtet. Ich selbst bräuchte kein richtiges Wetter-Widget sondern würde auch hier die Flexibilität vorziehen. Für andere Nutzer mag das anders sein, die dann mit fertigen Widget vielleicht schneller eine UI erstellen könnten.

Ideal wäre es sicher (wie von nesges schon erwähnt) die Standard-Widget einfach zu vererben und damit ein auf Wetter-spezialisiertes Label-Widget zu erstellen. Falls das möglich wäre.

Grüße
Jens

[nesges]

Hab's mit rein genommen, wobei ich's schön fände da auch nen Default vergeben zu können.

Eigentlich war's simpel: Ich setze jetzt in der init-Function readings[$(this).data('get')] = true;

https://github.com/nesges/Widgets-for-fhem-tablet-ui/commit/ccb098670a4a7ae69f4aeb84c208120763b416f8