Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Buchi]

Hallo zusammen,

tja, wie fange ich an...
ioBroker nutze ich jetzt schon längere Zeit und bin super zufrieden damit. Mit der Zeit ist alles gewachsen und mittlerweile ist vieles im Haus automatisiert und die verschiedensten Systeme arbeiten über den ioBroker super zusammen. Bei allem Automatismus bleibt es allerdings nicht aus auch eine Oberfläche zu haben, mit der man

• kontrollieren kann was die Automatik macht
• manuell eingreifen kann
• Randbedingungen setzen kann (Partymodus usw)

Vor kurzem Stand ich dann vor dem Problem dass ich gerne die Heizung, Klimaanlage und Luftreiniger mit ein und demselben "Control" steuern können wollte. Bei der Recherche bin ich auf die Gruppen in VIS und den "groupAttr" (zu meiner Schande kannte ich die vorher noch gar nicht) gestoßen. Damit ist zwar schon viel machbar aber wenn ich diese Gruppe dann 10x einsetze und eine Änderung mache, muss ich die Gruppe wieder 10x kopieren und alle Einstellungen ändern. Mühsam.

Was also liegt näher als selbst ein Widget zu schreiben, dass genau das macht und es dann keine Rolle mehr spielt wie oft man dieses einsetzt :)

Also bin ich auf die Suche gegangen. Adapter Template usw. alles gefunden. Hmmm, ok. Unter Proxmox schnell eine Ubuntu VM hochgezogen, VS Code, Git, Github AddOn installiert, ein Github Projekt angelegt und... da waren sie die Fragezeichen. Wie beginnen? Entweder habe ich falsch gesucht oder es gibt tatsächlich für die Widget Programmierung relativ wenig an Doku. Also ein einfaches Widget gesucht und dieses zerlegt. Langsam stellten sich erste Erfolge ein und umso mehr ich gemacht hatte, umso schneller ging es dann auch. Das Widget ist fertig, funktioniert und deckt erst einmal alles ab was ich benötige.

Das zur Vorgeschichte und um die Hintergründe zu verstehen. Jetzt aber kommt ihr ins Spiel. Bevor ich jetzt noch weiter mache bzw. das Widget zum Test bereit stelle, würde ich euch bitten mal drüber zu schauen. Kann ja sein dass ich noch einen groben Fehler drin habe den ich noch beheben kann. Auch ist mir noch nicht klar wie ich am besten mit den CSS Styles / - Klassen arbeiten soll, damit andere User das Design einfach an ihre Bedürfnisse anpassen können.

Deswegen wäre ich euch sehr dankbar wenn ihr mal ein Auge auf mein Widget werfen könntet und mir Fehler zeigen, Tipps oder einfach nur ein Feedback geben könntet :)

Zu finden ist es unter https://github.com/gerbuchner/ioBroker.vis-owl (der Name könnte sich noch ändern). Die Readme usw. ist noch nicht angepasst, da ich erst einmal die Funktionalität haben wollte um sicher zu gehen dass ich überhaupt mit der Programmierung zurecht komme.

Besten Dank im Voraus
Gerhard

[StefanP 1]

Hi Gerhard,

ich bin ebenfalls gerade an der Entwicklung eines Widgets. Bei der Recherche wegen eines Fehlers bin ich auf dein Widget aufmerksam geworden. Darin sind auch einige Infos enthalten die ich bei mir gut weiter verwenden kann.

CSS Klassen:
Du kannst deinen <div> Containern Klassen zuweisen, was du auch schon gemacht hast:

        text += '<!-- istWert -->';
        text += '<div class="vis-widget" style="top: 8px; left: 110px; width: 50px; height: 14px; color: rgb(255, 255, 255); z-index: 3; text-align: right; font-size: small; color: rgb(255, 255, 255);">';
        text += '    <div class="vis-widget-body">';
        text += '        <div class="istWert" style="color: rgb(255, 255, 255);">';
        text += '             ' + vis.states[data.oidValIst + '.val'] + ' ' + data.valEinheitIst;
        text += '        </div>';
        text += '    </div>';
        text += '</div>';

Nun könntest du zum Beispiel der Klasse "vis-widget" in der CSS Datei Eigenschaften vorgeben und damit dein HTML Code kleiner machen. Dies würde dann so aussehen:

CSS:

.vis-widget {
	top: 8px;
	left: 110px; 
	width: 50px; 
	height: 14px; 
	color: rgb(255, 255, 255); 
	z-index: 3; 
	text-align: right; 
	font-size: small; 
	color: rgb(255, 255, 255)
}

JS:

        text += '<!-- istWert -->';
        text += '<div class="vis-widget">';
        text += '    <div class="vis-widget-body">';
        text += '        <div class="istWert" style="color: rgb(255, 255, 255);">';
        text += '             ' + vis.states[data.oidValIst + '.val'] + ' ' + data.valEinheitIst;
        text += '        </div>';
        text += '    </div>';
        text += '</div>';

Nun könntest du auch schnell CSS Dateien austauschen um verschiedene styles zu erhalten.

Bitte rücke auch deinen Code korrekt ein. Momentan ist er sehr schwer lesbar. VS Code kann das automatisch mittels der Tastenkombination: Strg+K → Strg+D (Dokument) / Strg+K → Strg+F (Auswahl)

Grüße

Stefan

[Buchi]

@stefanp-1 sagte in [Frage] Erstes eigenes Widget - Bitte um Feedback:

CSS Klassen:
Du kannst deinen <div> Containern Klassen zuweisen, was du auch schon gemacht hast:
...
Nun könntest du auch schnell CSS Dateien austauschen um verschiedene styles zu erhalten.

Da bin ich dabei das nach und nach umzustellen ;)

Bitte rücke auch deinen Code korrekt ein. Momentan ist er sehr schwer lesbar. VS Code kann das automatisch mittels der Tastenkombination: Strg+K → Strg+D (Dokument) / Strg+K → Strg+F (Auswahl)

Hast mal bitte ein Beispiel wo das falsch formatiert ist?
Dachte eigentlich das sollte bereits passen. Die Tastenkombi bewirkt bei mir keine Textformatierung :thinking_face:

[StefanP 1]

@buchi said in [Frage] Erstes eigenes Widget - Bitte um Feedback:

Hast mal bitte ein Beispiel wo das falsch formatiert ist?
Dachte eigentlich das sollte bereits passen. Die Tastenkombi bewirkt bei mir keine Textformatierung

Davor:

STRG + A / Strg+K → Strg+F

Danach:

[Buchi]

@stefanp-1
Du musst eine sehr alte Version haben. Magst mal bitte die aktuelle laden?

[StefanP 1]

@buchi

Ah, ich habe die Version vom Github. Anscheinend hast du den Namen geändert. Das neue Repo ist jetzt https://github.com/gerbuchner/ioBroker.vis-owl ?

[Buchi]

@stefanp-1 sagte in [Frage] Erstes eigenes Widget - Bitte um Feedback:

@buchi

Ah, ich habe die Version vom Github. Anscheinend hast du den Namen geändert. Das neue Repo ist jetzt https://github.com/gerbuchner/ioBroker.vis-owl ?

Ja, richtig :)
Ich ändere mal den Link oben....