New FHEM Tablet UI

[setstate]

By the Way. Den Farbregler habe ich jetzt auch drin für Lightify, jetzt suche noch die Farbwerte für die "WEIßE Lampe". Hat da jemand MIN und MAX Werte??

Hallo Bjoern,
meine Lightify war heute in der Post, ich hoffe am WE komme ich zum Einbinden ins System. Leider kann ich dir jetzt noch nicht helfen. Aber bestimmt die Poweruser hier im Forum ...

[setstate]

@Damian: Sieht erst mal gut aus. Jetzt müssen wir unter die Haube schauen 
Was sagt die Webconsole? Gibt es da Fehler, oder was kommt vom longpoll an?
Verwenden der Konsole zum Anzeigen von Fehlern und zum Debuggen

Achtung, bitte

<meta name="debug" content="1">

setzen

[nesges]

Den Farbregler habe ich jetzt auch drin für Lightify, jetzt suche noch die Farbwerte für die "WEIßE Lampe". Hat da jemand MIN und MAX Werte??

Bei Milight wird "Weiss" per set <device> saturation 0 gesetzt (zurück zur Farbe gehts mit set <device> saturation 100). Evtl. ist das bei Lightify genauso.

[bjoernbo]

Danke für den Tipp nesges! In der Tat, bei lightify heißt es

sat

[bjoernbo]

es war doch nicht SAT :-/ aber egal.

So schaut es derweilen in meiner Testumgebung aus:

OBEN: ein/aus mit Zimmerfunktion
RECHTS: RGB Farbraum
LINKS:Der Weißbereich (und dieser gefällt mir noch nicht) Hier hätte ich es auch gerne wie beim RGB jedoch nur für den Weißbereich!

@setstate: Wenn Du deins am laufen hast, weißt du was ich meine :-D

<div class="container">
    <div class="cell">&nbsp;</div>
            <div class="center"><div data-type="dimmer" data-device="lightify_julia"
                data-get-on="[0-9]{1,3}|on"
                data-get-off="off"
                class="cell"></div></div>
        <div class="left">
        <div data-type="volume" data-device='lightify_julia'
             data-min='0'
             data-max='65535'
             data-get='hue'
             data-set='hue'
             class="cell hue-tick hue-front"><div class="cell">&nbsp;</div>
         </div>
    </div><div class="cell">&nbsp;</div>
          <div class="right">
            <dic class="cell">&nbsp;</div>
            <div data-type="volume" data-device="lightify_julia" data-get="ct" data-set="ct" data-min="154" data-max="500" class="cell"></div>
        </div>
</div>             

[schnibberle]

(http://knowthelist.github.io/fhem-tablet-ui/volume_big.png)

Gibts ne Möglichkeit den HUE Wert in RGB zu bekommen ?
Möchte das für WifiLight nutzen.

[nesges]

Neues Widget: button

Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen Fhem-Befehl absetzen kann.

Code Auswählen Erweitern

<div data-type="button" data-url="wohnzimmer.html"></div>

Wechselt zu der Seite wohnzimmer.html.

Code Auswählen Erweitern

<div data-type="button" data-fhem-cmd="set+MILIGHT_Zone1_Wohnzimmer+hue+50" data-icon="fa-paint-brush" data-color="hsl(50,100%,50%)" class="cell"></div>
   
Sendet den Befehl "set MILIGHT_Zone1_Wohnzimmer hue 50" an fhem. Als Icon wird ein Malpinsel auf gelbem (HUE 50) Hintergrund angezeigt. Der Fhem-Befehl muss urlencoded notiert werden. Fhem wird über den Metatag fhemweb_url lokalisiert, ist der Metatag nicht gesetzt wird "/fhem" als Default angenommen.
   
Download und weitere Doku unter https://github.com/nesges/Widgets-for-fhem-tablet-ui

[bjoernbo]

Respekt! Das muss ich mal loswerden, wie viel in so kurzer Zeit zusammengekommen ist und was noch alles in der Pipe ist :-D
Da macht das HTML programmieren wieder Spaß und Sinn

[setstate]

Von mir gibt es heute das verbesserte contact Widget: symbol widget

Es kann jetzt nicht nur mit einem Icon den Status eines Devices anzeigen, sondern kann optional auch mehrere Status anzeigen.

Dafür gibt es zwei neue Array Attribute

data-icons und data-on-colors

Beispiel:

Code Auswählen Erweitern

<div data-type="symbol" data-device="dummy1"
  data-get-on='["Wert1","Wert2","Wert3"]'
  data-icons='["fa-arrow-up","fa-arrow-right","fa-arrow-down"]'
  data-on-colors='["#32a054","#6666cc","#ad3333"]' >
</div>

Das bedeutet, wenn STATUS='Wert1', dann zeige 'arrow-up'-Icon in grün, wenn STATUS='Wert2', dann zeige 'arrow-right'-Icon in blau usw.

Das symbol Widget löst das contact Widget vollständig ab!!! In der index.html müssen alle data-type='contact' durch data-type='symbol' ersetzt werden.

Danke an dancatt für den Vorschlag für die Umsetzung

[setstate]

es war doch nicht SAT :-/ aber egal.

So schaut es derweilen in meiner Testumgebung aus:

OBEN: ein/aus mit Zimmerfunktion
RECHTS: RGB Farbraum
LINKS:Der Weißbereich (und dieser gefällt mir noch nicht) Hier hätte ich es auch gerne wie beim RGB jedoch nur für den Weißbereich!

@setstate: Wenn Du deins am laufen hast, weißt du was ich meine :-D

Es gab ein Update für das Volume Widget. Jetzt kannst du mit data-tickstep die Abstände kleiner machen.

Code Auswählen Erweitern

data-tickstep='4'

Update: Von nesges gab es noch eine Erweiterung für das volume Widget.

Nach dem Vorbild der hue-Klassen färben die dim-Klassen den jeweiligen Bereich in Graustufen zwischen rgb(0,0,0) und rgb(255,255,255).

Gemeint sind die CSS Klassen, die man optional setzen kann: HUE: hue-back|hue-ticks|hue-front SATURATION: dim-back|dim-ticks|dim-front

[setstate]

es gibt mehrere möglichkeiten, je nach dem was besser umsetzbar ist.
"off" ist im rt intern die temperatur 4.5, auf dem display und den readings zeigt er aber off.
es wäre natürlich super wenn das widget "Off" anzeigt, "4.5" würde aber auch gehen (genau so wie "-" oder "--" da man das selbst als off interpretieren könnte. nur 10 ist dann ganz verwirrend

zum schalten würde ich einfach die möglichen werte im widget auf 4.5 bis 30 setzen. wird dann ein set name desired-temp 4.5 gesendet geht der rt auf 0ff
um das noch ein wenig auf die spitze zu treiben: der rt kann auch den wert on als desired-temp bekommen  hier weiss ich aber auch nciht was er da intern für eine temp fährt, das kann martin sicher sagen.

ich gehe mal davon aus dass aktuell "off" als falscher wert / nicht numerisch erkannt wird und das widget dann seinen default wert nimmt -> 10.
das macht es auch wenn man den namen des devices falsch schreibt und keine werte kommen. hier sollte man zur besseren fehlerfindung evtl sowas wie n.A. nehmen

Nesges hat heute gleich eine gute Lösung dafür geliefert. Vielen Dank.

Zwei neue Attribute data-off und data-boost, die beliebige Temperatur-Kommandos setzen (zB data-off="off"). Wenn gesetzt wird data-off gesetzt, wenn die Mindesttemperatur gewählt wurde. data-boost entsprechend bei der Maximaltemperatur.

[nesges]

Zu der Thermostat-Lösung noch eine Anmerkung:
4.5 in die Skala aufzunehmen war nicht möglich ohne data-step=0.5 zu setzen. Das wollte ich nicht erzwingen. Wenn man aber nicht auf die normalen Min- und Max-Werte verzichten möchte kann man zB data-min="4" und data-max="31" setzen. Ein vollständiges Beispiel:

Code Auswählen Erweitern

<div data-type="thermostat" data-device="W_HEIZUNG" data-min="4" data-off="off" data-max="31" data-boost="boost"></div>

Wenn man damit den Regler auf 4 zieht, wird "off" gesendet, wenn man auf 31 zieht wird "boost" gesendet. Auf dem Rückweg funktioniert's übrigens genauso: Wenn fhem "off" meldet, zeigt der Regler im Beispiel "4" an und bei boost wird "31" angezeigt. Ich persönlich setze übrigens min=5 und max=30 - sieht chicker aus und diese Temperaturen werde ich ansonsten niemals ernsthaft brauchen. Wenn man die Attribute data-off und data-boost werden off und boost übrigens nicht ausgewertet, d.h. es sind keine Defaults für "off" und "boost" vorgesehen.

Danke für's übernehmen des Vorschlags!

[bjoernbo]

Suppi! Werde ich heute Nachmittag ausprobieren!

Kann mir hem. sagen wie groß ein "CONTAINER" ist wenn data-sizex="1" und data-sizey="1" ist?

Ich hatte das irgendwo im Code mal gelesen :-/

[bjoernbo]

  wenn man an der richtigen Stelle guckt .....

<meta name="widget_base_width" content="116">
    <meta name="widget_base_height" content="131">

[chris1284]

@setstate: danke für's umsetzen im thermostat widget!

kann mir evtl jemand sagen wie man per java-script ein img (zb http://schierke-am-brocken.de/webcam/schierke01.jpg) neu lädt ohne die seite zu refreshen? ich habe es auf basis des fronthem widgets "multimedia.image" versucht nachzubauen aber bekomme es nicht hin.
hier haben ja einige einen snapshot ihrer webcam eingebaut.  optimal wäre ja ein widget dem man den pfad zum pic und den intervall mitgeben könnte so daas man stehts ein aktuelles bild hat