ioBroker User Interface Kit für VIS (download)

[darkiop]

@pat3195 Das sieht sehr gut aus!! Würdest du mal deinen Export hier reinstellen?

[gravidi]

@pat3195

Sieht sehr gut aus. Vielen Dank!

Welche VIS Elemente hast du dafür genommen?

[pat3195]

@darkiop @dos1973 Unter dem Downloadlink ist findet ihr jetzt auch ein Demoprojekt.

@gravidi Habe eigentlich nur zwei Widgets verwendet. Das Image8 Widget für die schaltbaren Flächen und normale Slider für die Steuerung des Dimmers. Ansonsten sind es einfach nur Textfelder, in die Daten geschrieben werden.

[pat3195]

Update:
Es gibt nun verschiedene neue Icons darunter auch ein Set der gängigsten Sprachassistenten.

[Thorsten91]

Sieht wirklich klasse aus! Habe mir daraus mein Vis zusammengebaut. Falls du noch Inspirationen für weitere Objekte brauchst: Eine Musikanlage und eine Lichterkette hätte ich noch hier...
Das CSS hat mir sehr geholfen für die Slider.

[thobastian]

Das sind wirklich klasse Bilder ! Hut ab! Als Iobroker-Vis-Anfänger weiß ich allerdings nicht, wie ich das importieren soll. Inklusive der Bilder etc....
Ich möchte gerne etwas für ein IPhone bauen.

[Georg Bachmann]

Super schön!!! Gefällt mir sehr gut! Danke @pat3195
Würde mich sehr freuen wenn du immer mal wieder Updates da lässt. Ich denk da sprech ich für einige hier

P.s.: bin auch ein Anfänger und habs jetzt mal bei mir importiert. Aber noch check ich nicht so recht, wie ich zb. beim Planzenwidget meine eigene Xiaomi Mi Flower Care, oder einfach einen meiner Dimmer dranhängen kann...

Hat da jemand ein gutes Tutorial für mich wie man mit so einem Template arbeitet?

[NukNuk]

Die Idee ist echt super. Was mich allerdings erstmal stört ist, dass du alles als Grafik umsetzt und dann dementsprechend einbindest. Sprich du bindest eine Hintergrundgrafik ein und legst das Icon drüber. Es ist halt wesentlich einfacher solch Dinge mit CSS zu lösen und bedarf eigentlich nur minimale Programmierkenntnisse. In dem Fall wären das nur paar kurze Befehle in CSS, die genau das bewirken, was du erzielen möchtest.

Du sparst dir dann auch viel Rechenpower ein.

[pat3195]

@thobastian Vielleicht kommt die Antwort jetzt etwas zu spät, aber schau mal im VIS oben in der Leiste unter „Setup -> Projekt-Export/import -> Import“ Dort kannst du das Demoprojekt importieren.

[pat3195]

@Georg-Bachmann Danke für das Feedback. Schön zu hören. Das nächste Update kommt demnächst.

Zur Flower Care Anzeige: Du kannst ganz einfach das Textfeld, in das ein Wert geschrieben werden soll anklicken und oben rechts in den Eigenschaften eines Textfeldes bei „Object ID“ aus der Liste den gewünschten Datenpunkt deiner Pflanze auswählen.
Leider muss man die Werte des Flower Care Sensors manuell in vier Textfelder verlinken.

Hoffe das hat deine Frage beantwortet.

[pat3195]

@NukNuk Danke für die Tipps! Ich benutze den ioBroker jetzt ca. einen Monat. Als ich mir das Design gebaut habe, war das für mich die einfachste/schnellste Lösung und wusste auch nicht, wie man das anders umsetzten kann, da ich mich in der Thematik noch nicht so auskenne. Vielleicht werde ich es in Zukunft anders lösen, aber für Einsteiger wie mich und vermutlich auch andere ohne große CSS Kenntnisse ist das eine gute Möglichkeit schnell eine kleine VIS zusammen zu basteln.

[AlexAtHome]

Das sieht ja mal richtig klasse aus !! Da ich meine VIS auch endlich mal von "schnell mit Hausmitteln gebaut" zu "kann man so lassen" umbauen will, werde ich ganz sicher auf Dein Material zurückgreifen! Vielen Dank dafür!

[s.bormann]

@pat3195 Hi, sehr schönes Design-Kit!

@eMd hat mich darauf aufmerksam gemacht.

Das würde glaube ich auch ganz gut mit iQontrol zusammen passen:

https://forum.iobroker.net/topic/22039/neuer-adapter-visualisierung-iqontrol

https://github.com/sbormann/iobroker.iqontrol

Mit der neuen Version kann man Hintergründe und Icons selbst anpassen und mann kommt ziemlich schnell zu einem Ergebnis.

Ihr könnt ja mal schauen.

LG!

[crunchip]

@s-bormann hat da noch niemand drauf geklickt oder ist das nur bei mir so.
github link

[Homoran]

@crunchip

da fehlt nur ein .iqontrol

https://github.com/sbormann/ioBroker -> https://github.com/sbormann/ioBroker.iqontrol

[crunchip]

@Homoran jetzt wo du´s geschrieben hast...hab ich auch die ganze Zeile gelesen

[s.bormann]

@Homoran sorry, hab den link korrigiert

[Spegeli]

@pat3195 sehr sehr schönes VIS Kit.

Sind da zufällig noch weitere Icons geplant? Hätte da ein paar Icons die ich für die Umsetzung meiner VIS noch benötigen würde. PC, Heizung usw.

[eMd]

@pat3195
Kann ich iwo selber die Icons finden oder sind die alle selbst gemacht?
Hatte da bald noch ne Menge Wünsche

Als erstes wären das:

Person abwesend/anwesend
Steckdose an/aus
Symbol Temperatursensor/Bewegungsmelder/Rauchmelder
Tür offen/zu

MfG
eMd

[pat3195]

Update

Es gibt nun Icons, um verschiedene Werte von Netatmo darzustellen. Außerdem konnte ich schon einige gewünschte Icons/Hintergründe umsetzen. @Spegeli @eMd Ihr könnt mir gerne euere Wünsche für die nächsten Updates auch per Direktnachricht schicken.