Hauptmenü

New FHEM Tablet UI

Begonnen von setstate, 22 Februar 2015, 23:37:24

Vorheriges Thema - Nächstes Thema

nesges

Zitat von: chris1284 am 09 April 2015, 18:31:34
EDIT: es ist ein fhem zu viel wenn der pfad generiert wird. das icon weist auf http://srv01.fritz.box:8083/fhem/fhem/images/default/weather/partly_cloudy.png
richtig wäre http://srv01.fritz.box:8083/fhem/images/default/weather/partly_cloudy.png

Frage mich wo das her kommt. Zumal es dann auch überall in fhem-tablet-ui.js krachen müsste, da der fhem-Pfad dort genauso ermittelt wird.

Screenshot mit Readings: Du vergleichst grade die Readings "icons" und "condition" und hast festgestellt, dass sie nicht den gleichen Inhalt haben.

chris1284

ich habs im widget geändert und nun funktioniert's einwandfrei mit den original-symbolen vom modul...
da die icon-readings immer gleich und immer english sind sollte man die ggf bevorzugen da man sich so auch nicht um yahoo de/en/nl kümmern muss

nesges

Zitat von: chris1284 am 09 April 2015, 19:17:21ich habs im widget geändert und nun funktioniert's einwandfrei mit den original-symbolen vom modul...

Du hast aber keine Standardinstallation, oder? Irgendwas passt da nicht zusammen. Ich hab jetzt mal eine neue Standardinstallation angelegt und ich schaff's nicht den Fehler nachzustellen.

Zitatda die icon-readings immer gleich und immer english sind sollte man die ggf bevorzugen da man sich so auch nicht um yahoo de/en/nl kümmern muss

Die einzige Begründung die mir dafür einfallen würde, wäre Bequemlichkeit des Entwicklers. Von daher: Nö :) Wir können das aber gerne PM weiter diskutieren.

chris1284

nö  ;) geht ja, wäre halt evtl nur einfacher für den entwickler...

und nein es ist alles standard!

aber eine frag zu deinem button wigdet wäre da noch bzw allegmein zu data-icon. die fa-icons gehen ja simpel einzubinden. toll wäre die fhem-svg's inkl. farbangabe mit einzubinden. zb www/images/openautomation/scene_livingroom.svg in rot.

jual

Wie versprochen gibt es hier nun meine aktuelle Umsetzung eines "Weckers". In ein paar Beiträgen vorher hatte ich ja grundsätzlich das Konzept beschrieben. Nun gibt es den kompletten Code.

Ich nutze den Wecker für das Stellen eines WeekdayTimer Moduls mit dem ich dann weitere Aktionen zu den definierten Weckzeiten starte.

Der WeekdayTimer sieht bei mir so aus:

define Aufstehen WeekdayTimer gr_Bewohner 1|08:50|awoken 2|06:45|awoken 3|07:35|awoken 4|07:20|awoken 5|06:45|awoken 6|08:00|awoken 7|08:50|awoken (ReadingsVal('Urlaub_dummy','state','nein') ne 'ja')

Ich nutze hierbei u.a. das Residents Modul und einen Dummy für die Urlaubsschaltung, die ich hier nicht weiter ausführe. An Stelle von gr_Bewohner und "awoken" muss man seine persönlichen Devices bzw. Aktionen eintragen.

Für das Modifizieren des Weekday Timers habe ich nochmal ein Dummy angelegt, welches quasi den Profilinfos des Weekday Timer entspricht:

define Dummy Weckzeit

In diesem Dummy habe ich die Readings wzMontag bis wzSonntag angelegt (z.B. setreading Weckzeit wzMontag 09:00).

Basis für den Wecker, den ich im TabUI umgesetzt habe ist ein Dummy, mit dem ich die einzelnen Komponenten wie Tag, Stunde und Minute abbilde.

define duWeckerTabUI dummy
attr duWeckerTabUI setList stellen


Funktionen zum Ändern der Werte bzw. zum Stellen der Dummys habe ich in myutils ausgelagert:

sub WeckerStellen()
{
   fhem("setreading Weckzeit wz".ReadingsVal("duWeckerTabUI","WochentagName","Montag")." ".ReadingsVal("duWeckerTabUI","Stunde","09").":".ReadingsVal("duWeckerTabUI","Minute","00"));
}

sub WeckerDummyAktualisieren($$)
{
   my ($reading, $wert) = @_;
   my @TagNamen = ("Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag","Sonntag");

   #Wochentag ermitteln und im Dummy setzen
   if($reading eq "Tag")
   {
      fhem("setreading duWeckerTabUI WochentagName $TagNamen[$wert-1]");
   }

   fhem("set duWeckerTabUI ".ReadingsVal("duWeckerTabUI","WochentagName","").":".ReadingsVal("duWeckerTabUI","Stunde","").":".ReadingsVal("duWeckerTabUI","Minute",""));

}


Mittels notify wird der WeekdayTimer modifiziert, wenn sich die Weckzeit von einem Tag ändert:

define Weckzeit_Aendern notify Weckzeit:.* {fhem("setreading Weckzeit ".ReadingsVal("Weckzeit","state","")); fhem("modify Aufstehen gr_Bewohner 1|".ReadingsVal("Weckzeit","wzMontag","09:00")."|awoken 2|".ReadingsVal("Weckzeit","wzDienstag","09:00")."|awoken 3|".ReadingsVal("Weckzeit","wzMittwoch","09:00")."|awoken 4|".ReadingsVal("Weckzeit","wzDonnerstag","09:00")."|awoken 5|".ReadingsVal("Weckzeit","wzFreitag","09:00")."|awoken 6|".ReadingsVal("Weckzeit","wzSamstag","09:00")."|awoken 7|".ReadingsVal("Weckzeit","wzSonntag","09:00")."|awoken (ReadingsVal('Urlaub_dummy','state','nein') ne 'ja')")}


Die TabUI Definition für den Wecker habe ich mittels Volume Widgets erstellt und sieht wie folgt aus:

<li data-row="1" data-col="2" data-sizex="5" data-sizey="5">
    <div style="border-style:solid; margin:2px">
<header>Weckzeit stellen</header>

<div>
<div class="container inline" style="padding:1em">
   <div data-type="volume" data-device="duWeckerTabUI" data-get="Tag" data-set="Tag" data-cmd="setreading" data-min="1" data-max="7"></div>
   <div data-type="label" class="big">Wochentag</div>
</div>
<div class="container inline">
   <div data-type="volume" data-device="duWeckerTabUI" data-get="Stunde" data-set="Stunde" data-cmd="setreading" data-min="0" data-max="24"></div>
   <div data-type="label" class="big">Stunde</div>
</div>
<div class="container inline">
<div data-type="volume" data-device="duWeckerTabUI" data-get="Minute" data-set="Minute" data-cmd="setreading" data-min="0" data-max="60"></div>
<div data-type="label" class="big">Minute</div>
</div>
</div>
<div data-type="label">Wochentag:1=Mo | 2=Di | 3=Mi | 4=Do | 5=Fr | 6=Sa | 7=So</div>

<div data-type="push" data-device="duWeckerTabUI" data-cmd="set" data-set="stellen" class="cell"></div>
<div data-type="label" class="big">Stellen</div>
    </div>
</li>


So, ich hoffe ihr kommt damit klar. Wahrscheinlich kann man noch einige Dinge vereinfachen, aber bei mir funktioniert das aktuell recht gut. Ich habe zwar noch versucht, die eingestellte Uhrzeit jedesmal im Wecker anzuzeigen, sobald man einen Wert verändert hat. Das hat aber bisher leider nicht funktioniert.


tomster

Zitat von: setstate am 09 April 2015, 18:24:07
Dann nimm ein Symbol Widget, das benutzt das gleiche Control nur readonly. Eventuell musst du das Background-Icon Attribut benutzen, um einen Kreis um das Symbol zu zaubern. Das Symbol Widget hat default nur das Vordergrund-Icon.

"symbol" funzt leider nicht. Das Icon ändert sich nicht mit dem Zustand. Es bleibt immer "aus".
Zudem ist die "Farb-Logik" beim Type "symbol" genau anders rum...

setstate

Hallo tomster,

so geht es, das macht aus einem Symbol ein Switch, nur als Readonly:


<div data-type="symbol" data-device="dummy1"
   data-icon="fa-lightbulb-o"
   data-on="on"
   data-off="off"
   data-background-icon="fa-circle"
   data-on-background-color="#aa6900"
   data-off-color="#2A2A2A"
   data-on-color="#2A2A2A">
</div>

Ich muss zugeben, etwas aufwendiger, als nur ein readonly in class einzutragen.

nesges

Zitat von: setstate am 09 April 2015, 23:00:00
Ich muss zugeben, etwas aufwendiger, als nur ein readonly in class einzutragen.

Bin grade auf das gleiche Problem gestossen worden: ich hab an ziemlich vielen Stellen switches statt symbols verwendet und bin jetzt zu faul die alle umzuschreiben ;) Spricht etwas gegen eine Implementierung von class "readonly" im Switch?

mode:$(this).hasClass('readonly')?'signal':'toggle',

sollte dazu reichen, oder?

tomster

Danke ihr beiden! Zwischenzeitlich hab ich aber "symbol" auch verstanden ;-)

setstate

:-) ich hatte auch gerade mit data-mode="signal" experimentiert, aber die Init vs. Bind Reihenfolge passt hier nicht, darum greift das nicht mehr.
Nö, können wir gerne einbauen. Ich finde es auch besser, wenn man sich nur merken muss: da gibt es diese Eigenschaft und nicht noch wann gilt diese und wann nicht. Einfacher und nachvollziehbarer geht hier vor Vermeidung von Dopplungen.

bjoernbo

Falls jem. meinen Code im Bezug auf die Windrichtung übernommen hat muss dieser angepasst werden. Die Windrichtung wurde nicht richtig angezeigt. Der Eintrag muss wie folgt aussehen!

Zitat<td><center><div data-type="wind_direction"
                            data-device="MyWeather"
                            data-get="windDir"
                            data-part="2"
                           
                            data-size="75"
                            data-tickstep="45"></div>   
    </center></td>
Raspberry Pi 3 - FB6490C - Synology NAS DS916+ - NETATMO - HUE - SIEMENS G-Tag'S - FTUI - EchoDOT -

nesges

Neue Version von wind_direction. Bitte hier entlang! :)

(Diskussionen zu Widgets aus dem Repository Widgets-for-fhem-tablet-ui bitte in diesem Thread)

setstate

Zitat von: jual am 09 April 2015, 21:38:50
Wie versprochen gibt es hier nun meine aktuelle Umsetzung eines "Weckers". In ein paar Beiträgen vorher hatte ich ja grundsätzlich das Konzept beschrieben. Nun gibt es den kompletten Code.
Hallo jual,

vielen Dank für das Bereitstellen deiner Lösung und die detaillierte Beschreibung.
Sehr kreativ gelöst, Hut ab!!

mw_fhem

Ich habe eine grundsätzliche Frage zur Anrodnung der Widgets (per data-col="..." und data-row="...")
Ich möchte ein Widget rechts unten in die Ecke legen. Ohne dass zwischendrin welche liegen. Das scheint nicht zu funktionieren. Ein Hinschieben über das Frontend geht auch nicht. Rechts oben geht alelrdings. Ist das grundsätzlich nicht möglich, oder muss ich das irgendwo einstellen?
RasPi mit FHEM, Wettersensoren über WDE1, UP-Schalter und Thermostate über CUL

setstate

Zitat von: mw_fhem am 10 April 2015, 13:55:52
Ich habe eine grundsätzliche Frage zur Anrodnung der Widgets (per data-col="..." und data-row="...")
Ich möchte ein Widget rechts unten in die Ecke legen. Ohne dass zwischendrin welche liegen. Das scheint nicht zu funktionieren. Ein Hinschieben über das Frontend geht auch nicht. Rechts oben geht alelrdings. Ist das grundsätzlich nicht möglich, oder muss ich das irgendwo einstellen?
Das kann diese Version von gridster nicht. Es gab mal Forks von gridster, die das konnten

Du musst aber nicht mit gridster arbeiten. Man kann auch mit div Elementen arbeiten und deren Position auf fix oder absolute. Andere Grid Plugins können das vllt. auch. Aber wie nesges schon schrieb: zur Zeit sind andere Dinge interessanter.  :D