[FHEM-Tablet-UI] Widgets for fhem-tablet-ui

[nesges]

Im Repository Widgets-for-fhem-tablet-ui stelle ich einige zusätzliche Widgets für fhem-tablet-ui (Thread im Forum) zur Verfügung. Aktuell enthält es die Widgets:

• klimatrend
• kodinowplaying
• button
• clock
• wind_direction
• settimer
• iframe

Installation:

1. Fhem
Der Update-Mechanismus von Fhem wird unterstützt. Mit folgendem Befehl in der Fhem-Eingabe werden die Widgets installiert/upgedatet:

Code Auswählen Erweitern

update all https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt

In New FHEM Tablet UI#968 ist eine Möglichkeit zur Implementierung von Updatebenachrichtigungen beschrieben.

2. Nicht Fhem
Wird FTUI ausserhalb von Fhem betrieben, sollte das Github-Repository geclont werden:

Code Auswählen Erweitern

git clone https://github.com/nesges/Widgets-for-fhem-tablet-ui.git

Ich empfehle in dieser Konstellation die Widgets ins js-Verzeichnis von fhem-tablet-ui-js zu symlinken:

Code Auswählen Erweitern

cd <fhem-tablet-ui>/www/tablet/js/
ln -s <Widgets-for-fhem/tablet-ui>/www/tablet/js/*.js .


Testing:

Das Repository enthält ein Verzeichnis "testing" das in Entwicklung befindliche Widgets und Testversionen enthält. Diese Widgets können gerne ausprobiert werden, ihr solltet allerdings nicht davon ausgehen, dass sie ohne weiteres funktionieren. Sie werden daher idR auch nicht supported.


Näheres ist im Repository dokumentiert. Fragen und Diskussionen dazu bitte hier.



Demos

Viele Demos anderer Anwender werden im Repository Github: fhem-ftui-user-demos gesammelt. Diskussion dazu in diesem Thread im Forum.

[nesges]

Änderungen an wind_direction:

widget_wind_direction versucht in der neusten Version auch das Reading "wind_speed" auszuwerten. Ist es vorhanden und hat den Wert "0" wird im Textfeld in der Mitte "-" angezeigt. Ist es nicht vorhanden ändert sich nichts (Anzeige "N"). Ausserdem wurde das Standardreading für die Windrichtung von "STATE" auf "wind_direction" (Standard im Modul Weather) geändert und das Attribut "data-get" in "data-direction" umbenannt ("data-get" kann weiterhin verwendet werden). Neu sind die beiden Attribute "data-speed" für das Reading mit der Windgeschwindigkeit (Default "wind_speed"; "data-part" wird nicht auf dieses Reading angewendet) und das Attribut "data-calm" für die Anzeige für Windstille (Default: "-").

Ich habe versucht die Änderungen abwärtskompatibel zu halten, d.h. es sollten keine Änderungen im HTML Code notwendig sein. Ausnahme: Falls STATE ausgewertet wird, muss das jetzt explizit als data-direction="STATE" angegeben werden.

Todo: Bei Windstille sollte der grafische Richtungsanzeiger nicht angezeigt werden. Ich bin vorerst daran gescheitert den Wert "speed" in die Funktion drawDial zu übernehmen.

Update 14:14: Neue Version mit Bugfix (Zeiger wurde nicht gedreht) verfügbar

[nesges]

Neues Widget: settimer

Controll zum Anzeigen/Einstellen einer Uhrzeit. Die Einstellung der Uhrzeit wird mit zwei Knob-Elementen vorgenommen (links Stunde, rechts Minute) und mit dem oberen Button abgesendet. Dazu werden Stunde und Uhrzeit mit Doppelpunkt verbunden und ggf. mit führender Null versehen (9+13 = 09:13). Der untere Button sendet ein "off" Kommando.

Code Auswählen Erweitern

<div data-type="settimer"
    data-device="WECKER"></div>

Liest und sendet die Uhrzeit aus STATE des Device WECKER.

Code Auswählen Erweitern

<div data-type="settimer"
    data-device="WECKER"
    data-reading="time">

Liest und sendet die Uhrzeit aus dem Reading "time" des Device WECKER.

Weiterführende Doku unter Widgets-for-fhem-tablet-ui#settimer. Download unter widget_settimer.js.

PS: Die veröffentlichte Version ist noch in einem sehr frühen Stadium. Änderungen sind sehr wahrscheinlich, Anregungen dazu sind sehr willkommen.

[setstate]

Nice:-)
Wichtig wäre vllt. noch mo-fr, mo-so oder ein bestimmter Tag. Nicht an Feiertagen...

[hotwebnet]

Hallo, super mit dem Wecker....bekomme es aber im moment noch nicht so 100% hin.....
deine Code habe ich genommen wie die Ihn geschrieben hast, aber dann bekomme ich so ein Bild.....

[nesges]

Wichtig wäre vllt. noch mo-fr, mo-so oder ein bestimmter Tag. Nicht an Feiertagen...

Könnte ich mir als von settimer abgeleitetes Widget vorstellen, das einen WeekdayTimer bedient. "Nicht an Feiertagen" dürfte herausfordernd werden; die Abhängigkeiten zu anderen fhem-Komponenten (holiday/Calendar) sind da für meinen Geschmack zu speziell und individuell für ein generisches Widget. Aber mal schauen

[nesges]

deine Code habe ich genommen wie die Ihn geschrieben hast, aber dann bekomme ich so ein Bild.....

Daran ist eigentlich alles richtig. Du hast das Widget nur in einen zu großen Container gesteckt, es breitet sich standardmässig bis zu beiden Rändern aus. D.h.: Nimm einen kleineren Container oder beschränke die Größe per CSS (Abschnitt "Styling" in der Doku). "NaN" = "Not a Number" steht da, weil du bei einem unitialisierten Dummy auf den Set-Button gedrückt hast ohne einen Wert auszuwählen. Sollte verschwinden, sobald du eine Uhrzeit speicherst.

[nesges]

es breitet sich standardmässig bis zu beiden Rändern aus

Ich habe grade diesbez. noch eine Änderung eingecheckt: Das Widget hat jetzt eine Standardbreite von 380px. Das alte Verhalten kann mit data-width="auto" wieder hergestellt werden. Mit data-width="#" wird das Widget auf eine Breite von # Pixeln gesetzt. Ausserdem habe ich einige Standardmargins hinzugefügt, die die Knobs und Buttons von den Rändern absetzen.

[Phil__]

Hallo, super mit dem Wecker....bekomme es aber im moment noch nicht so 100% hin.....
deine Code habe ich genommen wie die Ihn geschrieben hast, aber dann bekomme ich so ein Bild.....

Hallo hotwebnet,

Oh, waow!
Dein Screenshot sieht ja klasse aus!
Wärst du evtl bereit den Quellcode dazu hier zu posten oder mir per PN zukommen zu lassen?
Bin da nicht ganz so fit und ein solches Bsp wäre klasse!

Viele Grüße

[tomster]

Servus!

Gibt es irgendeinen speziellen Trick, um das Wind-Direction-Widget zur Zusammenarbeit mit einer Homematic Wetterstation WDS-100 zu bewegen? Irgendwie bekomm ich's nicht hin...

[nesges]

Gibt es irgendeinen speziellen Trick, um das Wind-Direction-Widget zur Zusammenarbeit mit einer Homematic Wetterstation WDS-100 zu bewegen? Irgendwie bekomm ich's nicht hin...

Ich kenne die WDS-100 nicht, aber wenn sie zumindest ein direction-Reading in Grad oder als Text liefert, dann sollte es keine Probleme geben. Woran hängt's denn?

[tomster]

Ich vermute daran, dass ich folgendes Reading vom Device in FHEM bekomme:

state        T: 8.2 H: 55 W: 21.2 R: 56.64 IR: 0 WD: 310 WDR: 67.5 S: 174 B: 9

Ich kann zwar das JS des Widgets nicht lesen, vermute aber, dass das Widget nur eine 3-stellige Zahl erwartet und nicht noch weiteres Gesumms nach dem WD: 310

[nesges]

Der Wert ist ja dreistellig, das passt schon. Du hast per data-part angegeben, an welcher Stelle der Windrichtungswert zu finden ist? Deine Definition müsste in etwa so aussehen:

Code Auswählen Erweitern

<div data-type="wind_direction"
    data-device="WDS100"
    data-reading="STATE"
    data-part="12"></div>

Die Windgeschwindigkeit bekommt man in der aktuellen Implementierung nicht aus dem STATE raus, weil data-part dafür nicht implementiert ist. Könnte ich aber noch einbauen, wenn's grundsätzlich läuft.

Update: Ich hab die Änderung für speed-part kurzerhand in der neuen Version (https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/js/widget_wind_direction.js) eingebaut. Du kannst jetzt direction-part und speed-part verwenden.

[tomster]

Hab gerade alles zwischen 10 und 23 durchprobiert mit dem data-part. Leider kein Erfolg
Ich dachte, dass es so hinhauen müsste. Tut's aber auch nicht...

Code Auswählen Erweitern


<div data-type="wind_direction" data-device="Wetterstation" data-reading="STATE" direction-part="WD: " data-speed="wind_speed" speed-part="W: " data-calm="~" data-tickstep="3" data-size="120" class="cell">


[nesges]

Sorry, data-reading war Blödsinn, ich sollte meine eigene Doku lesen: https://github.com/nesges/Widgets-for-fhem-tablet-ui#wind_direction