New FHEM Tablet UI

[setstate]

Alles in einer Zelle. Also

"12:00:00 bis 18:00:00"

<t001_btime> bis <t001_etime>

Die breite sollte nicht das Problem sein. Habe die Werte einfach mal so eingetragen und es passte.
Hast Du schon einen Zeitpunkt in Aussicht?

Sooo, gehts:

Code Auswählen Erweitern

<div class="">
   <div type="label" device="OnSunrise" class="inline"></div>bis
   <div type="label" device="OnSunset" class="inline"></div>
</div>


Class 'inline' ist nun neu im CSS Files.

Einen schönen Tag noch
Mario

[bjoernbo]

DANKE! Funktioniert hervorragend!

[jual]

Hallo Jual,

mich interessieren deine Einträge "Spritpreise" und die "Pollenvorhersage". Kannst du dazu entsprechenden Output liefern, sprich wie hast Du das in FHEM umgesetzt? Danke.

Die Spritpreise, Polleninfo und die Fahrzeiten auf meiner Übersichtseite hole ich mir direkt von entsprechenden Webseiten mittels httpmod Modul. Damit lassen sich Internetseiten abrufen und die entsprechenden Infos mittels regulärer Ausdrücke ermitteln. Ist nicht immer ganz einfach, funktionniert aber recht gut. Da das für  diesen Thread wahrscheinlich zu OffTopic ist, einfach mal nach httpmod in diesem Forum suchen. Daher habe ich auch meine Infos und sollte ein für ein paar erste Ideen ausreichen.

Bei Bedarf kann ich aber auch gerne konkrete Programmbeispiele darstellen - gerne auch als private Nachricht, wenn gewünscht.

[bjoernbo]

Danke! Die Spritpreise habe ich schon. Ich versuche mich dann mal an die Pollenvorhersage und werde mich ggf. bei dir mal melden.

[jual]

Ich hatte ja gestern bei der Vorstellung meines neuen UIs die Umsetzung eines Weckers angesprochen. Das Grundprinzip meines Weckers steht mittlerweile und ich muss nur noch die eigentliche Umsetzung in die Oberfläche erstellen. Nachfolgend möchte ich nur kurz meinen Ansatz weiter geben. Vielleicht gibt es ja noch weitere Ideen. Sobald der Wecker bzw. das Stellen von Weckzeiten fertig ist, werde ich dann geren den ganzen Code hier präsentieren.

Basis für meinen Ansatz ist mein bisheriger "Wecker" innerhalb meines Dashboards. Der eigentliche Wecker wird mittels dem Modul WeekdayTimer realisiert. Diesen habe ich einmal definiert und ändere ihn mittes "modify" jedesmal, wenn eine neue Weckzeit eingestellt wird. Für das Stellen habe ich ein Dummy definiert, welches für jeden Wochentag ein Reading mit der jeweiligen Weckzeit enthält. Im Dashboard habe ich dann eine Readingsgroup verwendet, wo mittel time-widget die Weckzeit eingestellt werden kann.

Für das Tablet UI verwende ich weiterhin meinen Ansatz mit dem Dummy und dem WeekdayTimer. Auf Grund eines fehlenden "Timer-Widgets" habe ich nach einer geschickten Verwendung der aktuell vorhandenen Widgets gesucht. Grundsätzlich kämen hier wohl auch dimmer und slider in Frage. Auf Grund der besseren Bedienbarkeit habe ich mich aber für das Volume Widget entschieden. Ich habe im Prinzip 3 widgets genutzt und einen zusätzliches push-widget für das Stellen der eingestellten Zeit.

Der Rest ist dann eigentlich relativ einfach. Die widgets wurden begrenzt auf 1-7 für Tage, 0-24 für Stunden und 0-60 für Minuten. Zum Stellen der Zeiten habe ich ein zusätzliches Dummy mit den Readings Tag, Stunde, Minute erstellt und als devices für die Volume Widgets genutzt. Sobald der "Stellen-Knopf" gedrückt wird, rufe ich eine Funktion auf, die dann mein eigentliches Dummy mit den einzelnen Weckzeiten ändert.  Über ein notify dieses dummys wird dann das modify für die WeekdayTimer Definition geändert.

Vielleicht hilft die Anleitung euch schon, wenn ihr ähnliche Funktionen benötigt. In den nächsten Tagen ergänze ich dann gerne die vollständige "Doku". Eventuell hat aber jemand noch bessere Ideen.

Übrigens hätte ich da auch noch einen kleinen Wunsch, sofern umsetzbar. Interessant wäre für mich noch ein Dropdown Widget, bei dem ich die Werte aus der Info eines Devices eintragen kann und bei Auswahl eines Wertes eine Aktion ausführen kann. In meinem bisherigen Dashboard habe ich auf diese Weise die Favoriten und Playlists meiner Sonos Geräte ermittelt und als Auswahl zum direkten Abspielen zur Verfügung gestellt.

[setstate]

Wäre es zum Beispiel möglich, die Formatierung von Icons mittels der vordefinierten Klassen (z.B. "fa-rotate-90") zu nutzen. Idealerweise sogar in Abhängigkeit von den Werten. Also so etwas wie data-css oder data-css-array. Ein Hinweis auch noch zur Doku auf der Projektseite. Hier ist bei "label" tatsächlich auch "Icon" als Einstellung angegeben. Ähnlich, wie bei einem vorherigen Beitra hier, habe ich eine Weile damit gekämpft, in der Hoffnung über das Icon den Text legen zu können .

Ansonsten erstmal VIELEN DANK!!!!!

Hallo alle,

das funktioniert schon, zumindest fa-rotate-90 oder fa-spin. In der fhem-tablet-ui.css habe ich auch noch fa-blink und blink ergänzt.

Damit kann kann man Symbole zum Beispiel rot blinken lassen beim Wert 'Alarm' und gelb bei 'Warnung' und grün drehen lassen bei 'Running'

Tipp: blinkende Symbole in Abhängigkeit zum Status

Code Auswählen Erweitern


<div data-type="symbol" data-device="dummy1"
  data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]'
  data-on-colors='["Crimson","GoldenRod","SeaGreen"]'
  data-get-on='["Wert1","Wert2","Wert3"]' >
</div>


[ronmue]

Hallo,
nachdem ich nun jeden Beitrag gelesen habe, bin ich mittlerweile verzweifelt.
Es geht um das widget-weather.
Ich nutze hier Yahoo Deutsch. Es funktioniert soweit so gut und auch die Icons werden dargestellt. Nur wenn Umlaute in dem Rückgabwert von Yahoo vorhanden sind, dann wird kein Icon (meteocons) dargestellt.
Beispiel: "überwiegend wolkig"
Werte wie "klar" oder "sonnig" werden dagegen einwandfrei dargestellt.
Ich habe auch schon im widget-weather.js mal "überwiegend wolkig" eingetragen anstatt der Sonderzeichen.
Das hat aber auch nichts gebracht.
Hier mal mein Codesnipsel:

            <div data-type="weather"
               data-device="Wetter"
               data-get="condition"
               style="font-size:250%"
               class="cell big"></div>
            <div data-type="label"
               data-device="Wetter"
               data-get="condition"></div>

Falls jemand hier eine Lösung weiss, wäre ich dafür recht dankbar.

[nesges]

Nur wenn Umlaute in dem Rückgabwert von Yahoo vorhanden sind, dann wird kein Icon (meteocons) dargestellt.

Probier bitte mal die Version aus https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/js/widget_weather.js und gib mir eine Rückmeldung ob's bei Umlaut-Wetter damit funktioniert.

[ronmue]

@nesges
Super, hat einwandfrei funktioniert.
Danke für die schnelle Hilfe!

[bjoernbo]

Hey Nesges ! Warum wird mir die Windrose 2x angezeigt obwohl ich diese nur 1x definiert habe 

<td><div data-type="wind_direction"
                            data-device="MeinWetter"
                            data-get="wind_condition"
                            data-part="2"
                            data-angleoffset="1"
                            data-size="75"
    data-tickstep="45"></div>   
    </td>

[bjoernbo]

hat sich erledigt! Fehler gefunden.

[DJ_SAMMY190]

Update zu "weather": Kann jetzt alternatives Imageset benutzen, Screenshot in http://forum.fhem.de/index.php/topic,34233.msg280440.html#msg280440

Sobald ich das imageset definiere wird das leider nix.
oder geb ich es an der falschen Stelle ein? Danke für Tipps.

Code Auswählen Erweitern


<div data-type="weather" data-device="OnlineWetter" data-get="condition" data-imageset="kleinklima"></div>


MfG

Andy

[nesges]

Sobald ich das imageset definiere wird das leider nix.

Das ist ein bisschen wenig Info um zu helfen Ohne imageset geht's, mit aber nicht? "geht nicht" heisst, es wird nichts mehr angezeigt? Oder ein Fehler? Was steht in der Javascript-Console? Und das wichtigste: Hast du die aktuellste Version?

[DJ_SAMMY190]

Jo xD mein Fail^^.
Also ohne bekomm ich die Standardicons (01) . Setze ich den Imageset wird nichts angezeigt und zwar für alle folgenden Bilder schon (02). Imageset nur bei Freitag gesetzt. Samstag wieder Standard.

Hoffe das hilft dir ?^^

Ps alles aktuell

[bjoernbo]

meine Wetteransicht ist auch bald fertig, allerdings will ich nun, dass die Temperatur abhängig von der Gradzahl eine andere Farbe hat. Die Umsetzung ist nicht mein Problem, aber ich finde bei Mr.Guugle keine Definition mit den Farbwerten.

Jem .eine Idee wo ich das herbekommen könnte??