New FHEM Tablet UI

[viegener]

Gibt es eigentlich noch andere, die auch noch ReadingGroups haben, die sie auch auf dem Tablet UI recyclen wollen?

Ich habe dazu ein Quick&Dirty-Widget gebaut, dass solche Readings direkt auf dem Tablet zeigen kann:

Code Auswählen Erweitern


        <div class="cell">
          <div data-type="dynamiclabel" data-device="showThermoLars" data-get="dummy" data-max-update="10" class="readings"></div>
        </div>


Anbei ein Beispiel mit einer Readingsgroup aus dem fhemwiki zu einem Thermostatventil:

Das Modul findet sich ebenfalls anbei, zu beachten ist, dass man auch die fhemWeb-CSS-Infos benötigt, also z.B.  so:

Code Auswählen Erweitern

<link rel="stylesheet" href="/fhem/pgm2/darkstyle.css" />
man sollte dann aber BG-Image etc wieder in einem anderen CSS überschreiben...

Die Readingsgroup wird aber normalerweise NICHT über den update vom tablet UI upgedated, dazu ist eine Änderung in fhem-tablet-ui.js erforderlich. In function longPoll muss das if statement (zweitletzte Zeile) 

Code Auswählen Erweitern


  var paraname = 'STATE';
  var val = parname_val;
}
if ( (paraname in readings) && (key in devices) ){
  var value = {"date": date,


durch folgende 2 Zeilen ersetzt werden, aber NUR die if-Zeile ersetzen,d er Rest bleibt unverändert.

Code Auswählen Erweitern


// Special hack for readingsGroups (all params will be accepted)
if ( ( ( room == 'readingsGroup' ) && (key in devices) ) ||
     ( (paraname in readings) && (key in devices) ) ) {


Da aber bei jedem Update der Readingsgroup das HTML wieder erzeugt und abgefragt werden muss, gibt es den Parameter data-max-update="10" um die Abfragehäufigkeit auf einmal in x Sekunden (im Beispiel 10) zu begrenzen.

Gruss,
Johannes

[setstate]

Beim ersten Aufruf der Seite stimmen die angezeigten Stati (Play in off-color; Stop in on-color). Klicke ich nun auf Start, wird korrekt <set Wohnzimmer.MPD play> an FHEM geschickt. Nun sind aber beide Icons in on-color. Eigentlich sollte Stop in den off-color wechseln. Erst ein erneuter Refresh lässt die Stati korrekt erscheinen.

Das Problem liegt eher im MPD Modul. Ich merke es auch gerade, als ich den Play-Schalter bei mir einbauen wollte.
Das MPD Modul sendet kein state oder STATUS mit beim longpoll update, deswegen kann man den aktuellen Player-Zustand nicht empfangen. Es kommen zwar Daten beim Song-Wechsel, aber das sind nur die Song-Metadaten, nicht der Playerstatus.

Deshalb breche ich hier erst einmal ab für heute ...

[tomster]

Hab's grad auch im MPD-Thread von Dir gelesen. Auf das wäre ich ehrlich gesagt nicht gekommen (liegt aber wohl mehrheitlich daran, dass ich keine Ahnung von den syntaktischen Abläufen in FHEM habe). Dadurch klingt aber das beschriebene Phänomen plausibel. Bisher dachte ich, ein vom UI (oder FHEMWeb) gesetztes "set <name> play" reicht aus, um FHEM-intern alles Notwendige zu veranlassen.

BTW, hab gestern noch ein Script gefunden, welches angeblich eine Art "Album Art Fetcher" für MPD sein soll. Auf Grund abermaliger syntaktischer Unzulänglichkeiten meinerseits kann ich aber dessen "Wert" für Dich im Bezug auf den Einbau in's UI nicht beurteilen:
https://pypi.python.org/pypi/MPD-Album-Art

Setzt jedoch anscheinend ein Last-FM-Account voraus...

Das hier setzt auf Perl:
http://www.sveinbjorn.org/get-album-artwork-id3-using-perl

[Phil__]

Hallo,

hat jemand eine Lösung der Darstellung der Müllabfuhrtermine in FTUI und kann seine Lösung hier posten??

zB. wie in diesem Screenshot in einem früheren Post.

http://forum.fhem.de/index.php/topic,34233.msg295460.html#msg295460

Viele Grüße

[Phil__]

Hallo ich nochmal,

@setsate, nesges aber auch alle anderen 

Ich wurde in den letzten Tagen häufig wegen der Umsetzung meines FTUI's in den Screenshots auf den vorherigen Seiten angeschrieben.
Deshalb würde ich gerne allen den html Code zur verfügung stellen und nicht immer einzeln verschicken oder den Thread damit "zuspamen".

Hat von euch (vorallem setsate, nesges) jemand eine Idee wie man den Code hier am besten zum Download bereit stellt.
Meine Gedanken dazu, es sollte:
- übersichtlich sein
- nicht immer wieder auf zahlreichen Seiten verteilt, sondern gesammelt an einem definierten Ort sein
- Ich habe weiterhin die Hoffnung das es hier noch viele Leute gibt die Ihren html Code am besten auch mit Screenshots hier zur verfügung stellen wollen und somit möglichst viele profitieren. (und niemand das Rad zweimal erfinden muss  )

--> hier ein extra Thread aufmachen dafür oder ein GIT oder oder oder???

PS: Ich würde mich auch bereit erklären eine entsprechende Lösung zu verwalten und zu pflegen!

Viele Grüße

Phil

[setstate]

Gute Idee mit den Demos.
Ich würde vorschlagen, die Files und Screenshots bei github speichern

Im Fhem Wiki könnte man dann FTUI Unterseiten anlegen, mit Anzeige der Screenshots, Erklärungen und Links zum Download der entsprechenden Seiten passend zum Screenshot.

[Phil__]

@setstate
Hast du meine PN bekommen? in meinem Postausgang wird nämlich nichts angezeigt 

[nesges]

Find ich prima! Bin auch der Meinung: Am besten eigenes Repository bei Github und nen eigenen Thread. Dieser hier wird schon merklich träger und übersichtlich ist halt auch anders

[tomster]

Hallo,

hat jemand eine Lösung der Darstellung der Müllabfuhrtermine in FTUI und kann seine Lösung hier posten??

zB. wie in diesem Screenshot in einem früheren Post.

http://forum.fhem.de/index.php/topic,34233.msg295460.html#msg295460

Viele Grüße

Klar!

Ich vermute, dass bei den meisten  Abfallkalender-Lösungen das Script von Hexenmeister zu Grunde liegt (zumindest bei mir):
http://forum.fhem.de/index.php/topic,32382.0.html

Da ich jedoch entgegen der von Dir geposteten Lösung die Anzeige innerhalb nur 1 Widgets haben wollte, habe ich mir ein DOIF + zugehörigem Dummy definiert, der die entsprechenden Stati (Restabfall, Bioabfall, etc.) einnimmt. 
DOIF:

Code Auswählen Erweitern


([abfallkalender:tomorrow] eq "Papier") (set du_abfallkalender Papier) DOELSEIF ([abfallkalender:tomorrow] eq "Restabfall") (set du_abfallkalender Restabfall) DOELSEIF ([abfallkalender:tomorrow] eq "Bioabfall") (set du_abfallkalender Bioabfall) DOELSEIF ([abfallkalender:tomorrow] eq "Leichtverpackungen") (set du_abfallkalender Leichtverpackungen) DOELSEIF ([abfallkalender:tomorrow] eq "Leichtverpackungen" && [abfallkalender:tomorrow] eq "Papier") (set du_abfallkalender PapGeS) DOELSE (set du_abfallkalender Nichts)

Diese Stati lasse ich mir dann im UI mit folgendem Code anzeigen:

Code Auswählen Erweitern


<div data-type="symbol"
                        data-device="du_abfallkalender"
                        data-icons='["fs-dustbin","fs-dustbin","fs-dustbin","fs-bag","fa-thumbs-o-up","fs-bag warn"]'
                        data-get-on='["Papier","Restabfall","Bioabfall","Leichtverpackungen","Nichts","PapGeS"]'
                        data-on-colors='["#01A3F5","#FFFFFF","#82550C","#FFFF00","#505050","#FFFF00"]'
                        class="narrow small">
                </div>


Dabei wird an den Tagen -1, an denen keine Abholung erfolgt ein "Daumen-hoch"-Icon angezeigt. Am Vortag der Abholung dann das entsprechende Icon. Da ich dummerweise auch Tage habe, an denen 2 Abholungen (Papier/ Gelber Sack) erfolgen, hab ich für diesen Fall ein Sack-Icon mit Ausrufezeichen definiert. Diese Lösung gefällt mir zwar noch nicht so richtig, aber bis mir eine bessere Idee kommt, muss es halt so gehen.

Simpel und ohne viel Schnick-Schnack.

[Phil__]

Also ein eigenes Repository (in einem vorhanden GIT oder einem neuen?) und eine Thread.
Wie sollte der Thread aussehen? Nur Screenshots mit htmls oder auch die entsprechenden Fragen dazu?

[nesges]

Bei der Demoinstallation und meinen Widgets versuche ich auch die Fragen dazu in den separaten Threads zu bündeln. Aber du hast da natürlich freie Hand.

[tomster]

Ich bin Mal wieder auf Hilfesuche. Diesmal zu einem 3-State-Reading-Switch (geiles Wort).

Szenario:
Ich wollte einen Switch anlegen, der mir den aktuellen Status des Netzwerkplayers meines Sohns anzeigt und mir die Möglichkeit bietet, vom Tablet aus einen "mute"-Befehl an den Player zu schicken, um lautes Durchs-Haus-Gebrülle bei meist vorliegender sohn'schen Terrorlautstärke zu vermeiden.

Der Netzwerkplayer stellt innerhalb zweier Device-Readings "power" (on/off) und "mute" (on/off) bereit. Also habe ich mir ein UserReading angelegt, welches die beiden Stati in einem Reading (currentStatus) zusammenfasst:

Code Auswählen Erweitern


attr <device name Netzwerkplayer> userReadings currentStatus:(power|mute) { ((ReadingsVal("<device name Netzwerkplayer>","mute",0) eq "off")? ReadingsVal("<device name Netzwerkplayer>","power",""):"mute on")}

Damit erhalte ich, je nach Player-Status folgende Readings:
Player "mute" -> currentStatus = "mute on"
Player "on" && Mute "off" -> currentStatus = "on"
Player "off" -> currentStatus ="off"

Im UI hab ich folgendes definiert:

Code Auswählen Erweitern


<div class="cell right">
                <div data-type="label" class="small">Multimedia</div>
                <div data-type="switch"
                data-device="<device name Netzwerkplayer>"
                data-get="currentStatus"
                data-set-on="mute on"
                data-set-off="mute off"
                data-background-icon="-"
                data-get-on='["off","on","mute on"]'
                data-icons='["fa-music","fa-music","fa-music fa-blink"]'
                data-on-colors='["#505050","#aa6900","#aa6900"]'
                class="small"></div>
        </div>

Prinzipiell ist die gewünschte Funktion gegeben. Die Icons werden richtig angezeigt und ich kann zwischen mute on/off togglen. Nur kann passieren, wenn der Player auf "mute on" steht und ich dann das UI aufrufe, dass das Icon (in meinem Fall) zwar richtigerweise blinkt, aber ein Klick den Befehl "set <device name Netzwerplayer> mute on" setzt. Der Player war aber bereits ge-mutet. Ich hatte eigentlich gedacht, dass der von meinem userReading übergebene Wert "mute on" das Widget bereits erkennen lässt, dass Mute schon gesetzt ist und deshalb als quasi nächster Toggle-Befehl logischerweise nur "mute off"  in Frage käme (Drum habe ich absichtlich als Wert in currentStatus "mute on" gewählt und nicht nur "mute"). Hat jemand eine Erklärung für mich, warum der tatsächliche "Mute-Status" nicht auch in der toggle-Funktion gleich richtig erkannt wird?

[nesges]

Das switch-Widget ist nicht dafür geeignet mit mehreren get-on Status umzugehen. Es kann sie war anzeigen, aber es kann nicht korrekt dazu senden. Nimm dafür den multistatebutton: https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton

[tomster]

Das switch-Widget ist nicht dafür geeignet mit mehreren get-on Status umzugehen. Es kann sie war anzeigen, aber es kann nicht korrekt dazu senden. Nimm dafür den multistatebutton: https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton

Damit geht's. Danke!

[setstate]

Hab's grad auch im MPD-Thread von Dir gelesen. Auf das wäre ich ehrlich gesagt nicht gekommen (liegt aber wohl mehrheitlich daran, dass ich keine Ahnung von den syntaktischen Abläufen in FHEM habe). Dadurch klingt aber das beschriebene Phänomen plausibel. Bisher dachte ich, ein vom UI (oder FHEMWeb) gesetztes "set <name> play" reicht aus, um FHEM-intern alles Notwendige zu veranlassen.

Ich habe in der longpoll Funktion noch etwas gefeilt, jetzt scheint es zu gehen mit dem Start / Stop Status beim MPD

Ich benutze zu testen diese Buttons:

Code Auswählen Erweitern


<div class="left wider">
              <div data-type="push" data-device="MPD1"
                   data-icon="fa-step-backward" data-background-icon="-"
                   data-set="previous" class="inline">
              </div>
              <div data-type="push" data-device="MPD1"
                   data-icon="fa-stop" data-background-icon="-"
                   data-set="stop" class="inline">
              </div>
              <div data-type="switch" data-device="MPD1"
                   data-get-on="play"
                   data-get-off="!on"
                   data-set-on="play"
                   data-on-color="#999"
                   data-off-color="#555"
                   data-background-icon="-"
                   data-icon="fa-play" class="inline">
              </div>
              <div data-type="push" data-device="MPD1"
                   data-icon="fa-step-forward" data-background-icon="-"
                   data-set="next" class="inline">
              </div>
              <div data-type="label" data-device="MPD1"
                    class="inline">
              </div>
          </div>