Test Widget vis-owl v0.1.x GitHub

[Buchi]

Aktuelle Test Version	0.1.x
Veröffentlichungsdatum	04.02.2022
Github Link	https://github.com/gerbuchner/ioBroker.vis-owl

owl - Odd Widget Library
Aktuell gibt es nur ein Widget aber ein paar Ideen für weitere Widgets existieren bereits.

Flexible Control

Widget zur Steuerung von Klimaanlagen, Luftreinigern, Heizungen, Motoren usw.

Ich nutze es um unsere Fußbodenheizung (3 Steuerungen), die Klimaanlage (3 Steuerungen) und die Luftreiniger (4 Steuerungen) in der VIS regeln und steuern zu können. Anfänglich über Gruppen realisiert, wurde schnell klar dass es bei Updates keinen Sinn mehr macht und ein Widget der wesentlich bessere Weg ist. Deswegen entstand das "Flexible Control". Sicher kann da noch wesentlich mehr damit gesteuert werden, da sind der Phantasie wenig Grenzen gesetzt.

Aktuell noch in einem sehr frühen aber (bei mir) stabilen Zustand. Über Feedback und gerne auch Änderungswünsche würde ich mich freuen.

Installation
Aktuell ist die Widget Library nur über die Katze als Benutzerdefiniert mit der Github URL zu installieren.

Beispiel meiner VIS

[Buchi]

Im vis Editor entweder scrollen oder die "vis-owl" auswählen:

Das Widget per Drag & Drop in die View ziehen:

Die Einstellungen können ganz einfach über die Eigenschaften gesetzt werden:

[sigi234]

@buchi

Hallo, Bericht:

Installation alles ok, Web und Vis Adapter musste neu gestartet werden damit es in Vis sichtbar ist.

Icons werden nicht mitgeliefert?

• Hintergrund Farbe änderbar

• Größe Schriftart

[Buchi]

@sigi234
Danke für das Feedback. Bin schon erleichtert das es funktioniert, da es mein erstes Widget ist
Bilder habe ich nicht mit dabei, da diese ja sehr auf den Einsatzzweck ausgelegt sind. Ich weiß das es schwierig ist passende zu finden aber die Geschmäcker sind da ja auch sehr unterschiedlich.

Farben sind per CSS veränderbar. Beispiel:

.vis-owl-control-header {
    background: #330000 !important;
    border-style: solid;
    border-width: 1px 1px 0px 1px !important;
    border-color: #00ff66 !important;
    border-radius: 0px 0px 0px 0px;
    box-shadow: 0 3px 5px 0px rgba(114, 114, 000, 0.7);
}

.vis-owl-main {
    background: #aaaaaa !important;
    border-style: solid;
    border-width: 1px 1px 0px 1px !important;
    border-color: #00ff66 !important;
    border-radius: 0px 0px 10px 10px;
    ;
}

Schriftgröße habe ich gerade kontrolliert. Da fehlt noch eine passende CSS Definition. Baue ich in die nächste Version ein.

[sigi234]

@buchi

Ok, bei Heizung fehlt mir der

Batterie state und Valve state

[Buchi]

@sigi234
Batterie wüsste ich jetzt nicht wofür. Magst mir das bitte erklären wo hier eine Batterie zum Einsatz kommt?
Valve wird die Stellung des Ventiles sein, richtig? Da haben meine nur auf oder zu.

Beides kann man sicher einbauen, nur dazu muss ich wissen wozu die Werte genau dienen, dann kann ich schauen wie und wo man das am besten unterbringt.

[sigi234]

@buchi sagte in Test Widget vis-owl v0.1.0 GitHub:

@sigi234
Batterie wüsste ich jetzt nicht wofür. Magst mir das bitte erklären wo hier eine Batterie zum Einsatz kommt?

Vom Thermostat am Heizkörper 2,8 V

Valve wird die Stellung des Ventiles sein, richtig? Da haben meine nur auf oder zu.

Bei mir 29 % siehe Screenshot

Beides kann man sicher einbauen, nur dazu muss ich wissen wozu die Werte genau dienen, dann kann ich schauen wie und wo man das am besten unterbringt.

Beispiel View:

[Buchi]

@sigi234
Ok, verstanden. Ich habe derzeit nur die Fußbodenheizung smart, die Heizkörper fehlen noch. Die beiden Werte sind aber nur zur Information und müssen nicht gesteuert werden, richtig? Dann würde mir rechts oder unten noch eine Art "Infopanel" vorschweben wo man solche Informationen anzeigen könnte. Das größte Problem dabei ist, dass das Widget nicht zu groß werden soll. Ich probier mal paar Sachen aus

Ich könnte mir auch vorstellen ein 2tes größeres Widget zu machen. Dann würde es eine "kompakte" und eine "ausführliche" Variante geben.

Da ich die Heizkörper wie gesagt auch noch machen muss wäre das gleich eine gute Gelegenheit. Welche Thermostate verwendest Du, wie hast Du sie in ioBroker eingebunden und bist Du zufrieden damit? Evtl bestell ich mir einfach mal welche und dann kann ich die auch gleich mit dem Widget testen bzw. das Widget daran anpassen.

[sigi234]

@buchi sagte in Test Widget vis-owl v0.1.0 GitHub:

Ich könnte mir auch vorstellen ein 2tes größeres Widget zu machen. Dann würde es eine "kompakte" und eine "ausführliche" Variante geben.

Da ich die Heizkörper wie gesagt auch noch machen muss wäre das gleich eine gute Gelegenheit. Welche Thermostate verwendest Du, wie hast Du sie in ioBroker eingebunden und bist Du zufrieden damit?

Ja, Alle von Homematic eingebunden via HM-Adapter und CCU 3

https://github.com/ioBroker/ioBroker.hm-rega
https://github.com/ioBroker/ioBroker.hm-rpc

HM-CC-RT-DN
HmIP-eTRV-2

[Buchi]

@sigi234
Danke für die Info. Habe mir jetzt mal die CCU3 und 2 von den HmIP-eTFV-2 bestellt. Dann kann ich da gleich richtig weiter entwickeln und testen

Als erstes werde ich mal schauen wie ich die Programmierung der Widget Logik so machen kann, dass diese von beiden Widgets genutzt wird. Da das noch Neuland ist, kann es ein wenig dauern. Aber es macht wohl am meisten Sinn 2 Widgets zu machen:

• Flex Control full
• Flex Control compact

Dadurch wird sich allerdings auch sicher nochmal was an den CSS Namen ändern.

[Buchi]

Habe einige Optimierungen am HTML und CSS vorgenommen.
Die CSS Klassen sind jetzt in der Readme beschrieben.

Aktuelle Version: 0.1.1

[Buchi]

@sigi234
So, CCU und Thermostat sind gekommen, bereits installiert und in ioBroker per Adapter bekannt. Jetzt schau ich mir mal die ganzen Datenpunkte an und wie sich dies sinnvoll und vor allem produktunabhängig in ein Widget packen lässt

[Buchi]

@sigi234
Ich habe mir jetzt verschiedene Szenarien überlegt und ich denke es reicht doch das derzeitige Widget um ein Infopanel am unteren Rand zu erweitern. Die Funktionalität kann ja derzeit schon abgebildet werden und es geht lediglich um die zusätzlichen Informationen. Die kann man auch bei den anderen Einsatzzwecken sicher gut verwenden, so dass ich mal eine ganz einfache Version gebastelt habe. Die muss vom Code dann noch "hübsch" gemacht werden aber so würde es aussehen (Bilder sind nicht sinnvoll):

Was meinst?
Reicht Dir das so?

[sigi234]

@buchi sagte in Test Widget vis-owl v0.1.x GitHub:

Was meinst?
Reicht Dir das so?

Schon Online? Ok, Beta installiert.

Cool wäre noch eine Farbe für die group_Modes , würde dann sehen welcher Mode aktiv ist.

[Buchi]

@sigi234
Ganz so schnell geht es dann doch nicht

Was meinst mit der Farbe?
Welcher Modus aktiv ist wird ja über die beiden Bilder angezeigt. Gesteuert über den Datenpunkt und den Wert den er haben soll bei click.

[Buchi]

@sigi234
Hab die 0.1.3 gerade hochgeladen. Das Infopanel ist jetzt eingebaut und funktioniert soweit.

Die Steuerung für die HM Thermostate habe ich allerdings noch nicht gemacht, da für die ganzen Zustände (Automatik, Ein / Aus, Manuell usw.) noch ein paar Blockly Logiken eingebaut werden wollen. Das Widget selbst aber funktioniert und die Werte für die Batterie und den Level lasse ich mir schon anzeigen

Wenn alles klappt werde ich das morgen fertig machen, dann kann ich da helfen falls nötig.

[sigi234]

@buchi
Super, teste ich später.
Man muss bei den HM Thermostat aufpassen, die DP unterscheiden sich. HM IP Thermostate haben teilweise andere DP.

[Ritschy2000]

@buchi sieht sehr gut aus. Kannst du eventuell noch eine Anzeige für die Luftfeuchtigkeit abbilden?
dann könnte man das komplette Wandthermostat (z.B. von HM IP ) abbilden..

[Buchi]

@ritschy2000
Danke. Dazu wäre das Infopanel gedacht. Vom Platz gehen da aber nur 2 Werte rein.

Ich bin gedanklich aber schon bei der "extended" Version. Da wäre das Widget selbst nur zur Anzeige von Informationen und vlt. zum Ein- / Ausschalten. Das könnte dann sehr klein gehalten werden und hätte trotzdem mehr Platz zur Anzeige. Die Steuerung würde dann über ein Popup realisiert werden. Da hätte man dann auch wieder mehr Platz das ordentlich darzustellen. Die "extended" Version wird aber sicher noch dauern, da ich mich mit der Technik erst auseinander setzen muss.

Bis dahin muss man wohl oder über entscheiden welche Infos man anzeigen will. Ich selbst würde wohl die Batterie weg lassen, denn da ändert sich nicht wirklich was

[Buchi]

So sieht es mit dem aktuellen Stand bei mir aus
Es wird so langsam...