KWL Widget

[Cannon]

Ich habe schon ein wenig im Forum gesucht, aber hat sich jemand schon ein WIdget für eine KWL gebastelt? Es gab mehrere Ansätze im Forum, aber nichts finales. Wie macht ihr das?

[Cannon]

Ich baue jetzt dann doch ein eigenes, zumindest versuche ich das.

Dazu hätte ich aber eine Frage. Ich binde dort ein Bild ein, was ich beschreiben möchte. Das Bild wir die KWL-Einheit darstellen. Allerdings komme ich mit den CSS-Stylen nicht so hin. Ich kann zwar den Text, der die Temperaturen auf dem Bild anzeigt ganz genau positionieren, allerdings möchte ich das rechtsbündig ausgeben UND wenn ich im Browser ranzomme, soll es an der gleichen Stelle im Bild bleiben. Kann mir da jemand helfen?

.kwl_outdoor_temp {
	position: absolute;
	margin-top: -92px;
	margin-left: 288px;
}

.kwl_supply_temp {
	position: absolute;
	margin-top: -52px; 
	margin-left: 160px;
}

.kwl_extract_temp {
	position: absolute;
	margin-top: -92px;
	margin-left: 160px;
}

.kwl_exhaust_temp {
	position: absolute;
	margin-top: -52px;
	margin-left: 288px;
}

Das Problem ist eben, der Text wird größer und da sHintergrund-Bild wird größer, aber die Position des Textes verschiebt sich. Kann man das irgendwo fixieren bzw. anders formatieren?

[Bonze]

wie wärs mit position: relative?
dann sollte es bezogen aufs bild sein, wenn die im gleichen container sind..

[Tom Bombadil]

hat sich jemand schon ein WIdget für eine KWL gebastelt?

Sowas hier?

kwl1.png

UZSU, Umschaltung Lüfterstufe, Infos, diverse Einstellungen usw sind über die Buttons erreichbar.
Läuft hier so seit Ende 2014. Quellen sind auf git unter sv_widgets zu finden.

/tom

[Cannon]

wie wärs mit position: relative?
dann sollte es bezogen aufs bild sein, wenn die im gleichen container sind..

Danke probiere ich mal.

UZSU, Umschaltung Lüfterstufe, Infos, diverse Einstellungen usw sind über die Buttons erreichbar.
Läuft hier so seit Ende 2014. Quellen sind auf git unter sv_widgets zu finden.

Ja habe ich dann auch gefunden. Passt nur nicht ganz so, da es sich gezielt auf dein Haus bezieht. Ich möchte da flexibler sein. Ich habe mir das Bild von pluggit genommen und bastele das dran darum.... Aber ich bediene mich auch deines Widgets, denn von css und auch html verstehe ich nicht sonderlich viel.

Dein Widget ist übrigens "fest verdrahtet", sprich die Parameter kann man nicht übergeben...

Hier mein erstes Bild. :-)

kwl.png

[Tom Bombadil]

Sieht doch schon ganz gut aus!

Wenn Du dieselben Itemnamen / -pfade verwendest, die vom Widget verwendet werden, sollte es 'out-of-the-box' gehen. Zielstellung war damals nicht, ein universelles Plugin zu schreiben, dafür sind die von den KWL's gelieferten Daten zu unterschiedlich. Mit viel Aufwand kann man sich sowas sicher zusammenklauben, damit es universeller ist, aber eine volle Abdeckung aller Hersteller / Modelle wird man wohl nicht erreichen.

Die Visu ist übrigens allgemein gehalten und nicht für 'mein konkretes Haus', das würde anders aussehen (ist in Arbeit, aber auch noch Baustelle).

kwl2.png

/tom

[Cannon]

Hallo Tom, womöglich geht universell nicht. Ich probiere es dennoch mal. Denn man muss ja nicht wirklich alles anzeigen. Ich hoffe mal das passt. Zumindest schon mal 4 Sachen können angezeigt werden und auch über die Parameter angegeben werden. Und das Problem mit dem verschieben ist auch gelöst.

kwl.png

Wenn Du dieselben Itemnamen / -pfade verwendest, die vom Widget verwendet werden, sollte es 'out-of-the-box' gehen.

Realistisch ist das aber nicht. Da die Items aus einem Item-Struct kommen aus dem SmartHomeNG plugin "pluggit" von mir. Da passe ich nichts mehr an.

[Tom Bombadil]

Realistisch ist das aber nicht. Da die Items aus einem Item-Struct kommen aus dem SmartHomeNG plugin "pluggit" von mir. Da passe ich nichts mehr an.

Ich hätte einfach die Item-Struktur für die im Helios-Widget verwendeten Items *zusätzlich* nachgebaut, fertig - eval und eval_trigger sind Dir ein Begriff? Aber passt schon, so geht's ja auch, ist halt nur mehr Arbeit ...
/tom

[Cannon]

zusätzlich* nachgebaut, fertig - eval und eval_trigger

Ja stimmt. :-)

Ich habe mal noch eine Frage. Vielleicht kann jemand helfen. Das führt dazu, dass abhängig vom Speed sich das Rädchen schneller dreht:

{{ basic.shifter(id~'kwl_fanspeedlevel_symbol', '', fanspeedlevel, 'icon.ventilation', 'icon.ventilation', fanspeedlevel_min|default(0), fanspeedlevel_max|default(4)) }}

Nun soll basic.shifter nicht mehr verwendet werden. Ich kriege es aber mit der Alternativ basic.symbol nicht hin:

{{ basic.symbol(id~'kwl_fanspeedlevel_symbol', fanspeedlevel, '', ['icon.ventilation', 'icon.ventilation'], [fanspeedlevel_min|default(0), fanspeedlevel_max|default(4)]) }}

Auch den VOC kriege ich an Hand von 4 Bildchen nicht abgebildet. Beides zeigt nichts an:

{{ basic.symbol(id~'voc_value_symbol', voc_value, ['best', 'good', 'bad', 'worst'], ['{{kwl_pic_dir}}/voc_best.svg', '{{kwl_pic_dir}}/voc_good.svg', '{{kwl_pic_dir}}/voc_bad.svg', '{{kwl_pic_dir}}/voc_worst.svg'], [voc_goodlevel|default(500), voc_badlevel|default(800), voc_worstlevel|default(1000)], '>') }}

Wo liegt mein Fehler?

[Cannon]

Ich komme doch langsam voran und ich bin schon recht zufirieden. Einzig allein basic-shifter kann ich irgendwie nicht ersetzen, dam mir nicht klar ist, wie ich die Geschwindigkeit ändern kann. Sogar die Anzeige für den VOC-Senssort geht und auch der Filter wird angezeigt.


pluggit.png

[Tom Bombadil]

Ein Beispiel für die Verwendung mehrerer interaktiver Icons an derselben Stelle findest Du ab hier.
Das zugehörige Popup für die Umschaltung gleich darunter.
/tom

[Cannon]

Ein Beispiel für die Verwendung mehrerer interaktiver Icons an derselben Stelle findest Du ab

Das geht aber auch ohne Schleife. Das habe ich inzwischen hinbekommen:

{{ basic.symbol(id~'filter_icon', [filter_lifetime, filter_remaining_lifetime], '', [kwl_pic_dir~'/filter1.svg', kwl_pic_dir~'/filter2.svg', kwl_pic_dir~'/filter3.svg', kwl_pic_dir~'/filter4.svg'], [33, 66, 99], '>(VAR2/VAR1*100)', '', '', '', 'midi') }}

Das macht quasi basic.symbol ganz alleine. Allerdings, kriege ich das dynamische Icon noch nicht so recht hin. Mit basic.shifter geht es, aber das ist veraltet und laut Doku sollte es damit gehen:

{{ icon.ventilation('id', 'item_switch', 'item_value', 'min', 'max', 'color') }}

Bei mir zeigt es aber nichts an ...:

{{ icon.ventilation(id~'kwl_fanspeedlevel_icon', '', fanspeedlevel, fanspeedlevel_min|default(0), fanspeedlevel_max|default(4)) }}

[Tom Bombadil]

Das macht quasi basic.symbol ganz alleine.

Der Code stammt aus einer Zeit, als basic.symbol das (noch) nicht konnte.
Da es funktionierender Code ist, gibt es für mich keinen Grund, ihn zu ändern.
Viel Erfolg mit basic.symbol.
/tom

[wvhn]

basic.shifter fliegt im nächsten Release raus. In v3.2 hab ich das schlicht vergessen. basic.symbol bietet dieselbe Funktion und zusätzlich hatte ich die dynamischen icons vervollständigt, so dass alle icon-Serien auch stufenlos abgedeckt sind.

Cannon die Syntax bei icon.ventilation ist OK. Hast Du die icon.html im Widget importiert?
Lass zum Test mal die min und max Werte weg bzw. setze die fest auf 0 und 4. Geht es dann?

Gruß
Wolfram

[Cannon]

Hast Du die icon.html im Widget importiert?

Danke!!!!