Die besten ioBroker VIS Vorlagen
Elegant und optisch ansprechend. So stellt man sich seine Steuerung für das Smart Home vor. Dabei vergessen viele, dass die Erstellung einer passenden Steuerung oft ein langer Prozess ist. Viele Elemente müssen immer wieder geändert und angepasst werden, da sich die Anforderungen im Laufe der Zeit ändern. Problematisch daran ist häufig, dass uns schlichtweg die Zeit fehlt.
Um diesen Prozess zu verkürzen, kann man auf ioBroker VIS Vorlagen zurückgreifen. Sie werden von anderen Nutzern bereitgestellt und stehen oft kostenlos zum Download bereit. Der große Vorteil hierbei ist, dass du dich nicht mehr um das Design kümmern musst. Neue Elemente kannst du basierend auf alten Elementen schnell in dein Design integrieren.
In diesem Artikel möchte ich mir gemeinsam mit dir verschiedene Quellen ansehen, die dir ioBroker VIS Vorlagen zum Download anbieten. Wir blicken außerdem darauf, wie du ganz einfach eigene Vorlagen importieren kannst. Zum Abschluss habe ich dir noch ein paar Quellen zusammengetragen, die dir Icons zur freien Nutzung zur Verfügung stellen. So erreichst du einen hohen Grad an Individualität und kannst deine smarte Steuerung perfekt an die eigenen Bedürfnisse und Vorstellungen anpassen.
Vorab möchte ich jedoch noch eine Kleinigkeit anmerken. Im Laufe der Zeit können sich die Bedingungen der einzelnen Plattformen ändern. Daher musst du vor dem Einsatz überprüfen, ob du die entsprechenden Elemente wirklich für den Zweck nutzen darfst, der dir vorschwebt. Ich übernehme dafür an dieser Stelle keine Garantie. Zumal die einzelnen Anwendungsfälle sehr individuell sein können. Besonders aufpassen solltest du außerdem im kommerziellen Bereich. Hier unterscheiden sich die Bedingungen sehr häufig.
So können ioBroker VIS Vorlagen aussehen
Wenn du dich schon einmal auf die Suche nach optisch ansprechenden Vorlagen begeben hast weißt du, dass gerade im Open Source Bereich die Bereitstellung von Elementen immer wieder anders sein kann. Das bedeutet konkret, dass du nicht jede Vorlage zur Installation bekommst. Wir müssen daher zwei wichtige Arten von Vorlagen unterscheiden, die im Allgemeinen oft vermischt werden.
Auf der einen Seite findest du ein VIS Template als rein Grafik. Das bedeutet, dass du Screenshots von diversen Oberflächen zu sehen bekommst. Anhand dieser Vorlagen kannst du dir eine eigene Steuerung nachbauen, was jedoch oft zeitintensiver ist. Um die richtigen Farben herauszufinden sind dazu nicht selten auch entsprechende Bildbearbeitungsprogramme notwendig. Mit diesen kannst du die einzelnen Farbcodes von Elementen auslesen und sie in deiner eigenen Oberfläche verwenden.
Betrachtet man die andere Seite, so findet man wirkliche Vorlagen. Diese lassen sich in ioBroker importieren und sofort an die eigenen Bedürfnisse anpassen. In diesen Vorlagen enthalten sind sowohl alle Elemente, als auch die entsprechenden Farbcodes für einzelne Buttons und Co.
Auch wenn nun die zweite Art von Vorlagen deutlich attraktiver erscheint, so helfen reine Screenshots bei der Erstellung trotzdem weiter. Sie geben dir Inspirationen anderer Nutzer, die mit unter ihren Fokus auf völlig andere Elemente legen. So kannst du diese Inspiration nutzen und eine importierte Vorlage an entsprechend andere Designs anpassen.
Hier gilt es, ein wenig zu experimentieren. Du wirst sehen, dass du vermutlich an der einen oder anderen Stelle auch im Laufe der Zeit noch etwas feilen musst. Denn selten ist von Beginn an alles perfekt.
- Smartes Stromzählerauslesegerät (poweropti) und Energiemanagementsystem powerfox PA201902
- Kompatibel mit einer Vielzahl moderner, digitaler Zähler - Kompatibilitätsübersicht auf...
- Smart Home fähig, kompatibel zu Smart Home Systemen wie SmartThings, Home Connect Plus, OpenHAB3,...
Zuletzt aktualisiert 2024-12-03 / (*) Affiliate Links / (**) Affiliate Links, Preis kann abweichen (andere Plattform) / Bilder von der Amazon Product Advertising API / Der angegebene Preis kann seit der letzten Aktualisierung gestiegen sein.
Vorlagen in ioBroker importieren
Bevor es nun in der Euphorie untergeht, möchte ich dir gerne erklären, wie du Vorlagen in ioBroker importieren kannst. Hierzu rufst du den VIS-Editor in deinem Webbrowser auf. In diesem Editor kannst du eigene Oberflächen erstellen und Elemente nach deinen Vorstellungen anpassen.
Um nun eine Vorlage zu importieren, wählst du im oberen Menü den Punkt Setup aus. Es erscheinen mehrere Menüpunkte, von denen wir nun wiederum den Punkt Projekt-Export/Import auswählen. Auch hier erscheint ein Untermenü, in dem wir nun auf Import klicken.
Du wirst nun von der Software darum gebeten, eine Datei von deinem Computer auszuwählen, die du importieren möchtest. In diesem Fall ist das die heruntergeladene Vorlage. Sobald du deine Datei ausgewählt hast, klickst du auf Import Projekt und startest so den Import in ioBroker.
Nach Abschluss des Imports steht die gewünschte Vorlage zur Verfügung und kann von dir nach Belieben genutzt und angepasst werden. Hierzu solltest du dich mit dem VIS-Editor vertraut machen, der dir eine hohe Flexibilität bei der Erstellung deiner Steuerung erlaubt.
Die besten ioBroker VIS Vorlagen
Kommen wir nun zu den Vorlagen, die ich dir im Netz rausgesucht habe. Übrigens nicht für die VIS 2, denn diese ist etwas anders geworden.
Starten möchte ich gerne mit der Art von Vorlage, die sich nicht importieren lässt. Der Grund hierfür ist sehr banal. Es handelt sich um visuelle Eindrücke verschiedener Nutzer im offiziellen ioBroker Forum. Dort wurde bereits im Jahr 2015 ein Thread eröffnet, in dem es genau um dieses Thema geht.
Dass das Thema auch heute noch Nutzer interessiert zeigt, dass der aktuellste Beitrag noch aus dem Jahr 2020 ist. Damals stellte ein Nutzer sehr umfassend Eindrücke seiner eigenen Steuerung zur Verfügung. Anhand dieser Beispiele können eigene Oberflächen recht einfach erstellt werden.
Innerhalb des Threads wird außerdem von einer Seite gesprochen, auf der du viele weitere Designs findest. Diese Designs sind tatsächlich auch ausführbar und können direkt in der VIS-Runtime angesehen werden. Dein Browser ist dann dazu in der Lage, die entsprechenden Farbcodes auszulesen, so dass du diese Oberfläche recht einfach nachbauen kannst.
Zum Thread im Forum geht’s hier: VIS Sammlung von Views – gibt’s das schon wo?
Zu den Designs geht’s hier: iobroker.click
Vorlage von machs-smart.de
Lass uns nun einen Blick auf die erste Vorlage werfen, die tatsächlich über den Import in ioBroker hinzugefügt werden kann. Hierbei handelt es sich um eine selbst erstellte Vorlage von machs-smart.de. Diese ist – wie man bereits vermuten kann – angelehnt an das Design des Blogs und wirkt sehr ansprechend.
Farben werden sehr sparsam eingesetzt und verleihen der Oberfläche definitiv ein paar Akzente, auch wenn der Rest des Designs sehr schlicht wirkt. Was übrigens keinesfalls schlecht ist!
Mir persönlich gefällt das Design jedenfalls ziemlich gut und es hat mich auf die Idee gebracht, eventuell mal in Richtung eines Designs zu gehen, das ebenfalls an meinen Blog angelehnt ist. Inspirierend finde ich auch die Statuszeile ganz oben am Bildschirmrand, die wohl die wichtigsten Informationen immer parat hält. So musst du nicht lange nach der aktuellen Temperatur suchen, sondern kannst sie direkt mit einem Blick finden.
Ansonsten besteht das Design aus verschiedenen Kacheln, so wie man sie bereits von unterschiedlichen Betriebssystemen kennt. Das macht es für dich als Nutzer natürlich leicht, dich sofort zurecht zu finden und dein Smart Home stets im Blick zu haben.
Zur machs-smart.de Vorlage gelangst du hier: Smart Home-Dashboard mit der machs-smart.de-iPad-Visualisierung
Vorlagen von smarthome-tricks.de
Gleich mehrere Vorlagen liefert Matthias in seinem Blog. Wie er selbst angibt, hat er diese Visualisierungen im Rahmen von Test- und Lehrzwecken erstellt. Damit sie nicht unnötig in seinem ioBroker verstauben, bietet er sie auf seiner Website kostenlos zum Download an.
Dabei stehen bei seinen Vorlagen primär Steuerungen im Vordergrund, die ein Wechseln auf verschiedene Seiten ermöglichen. Durch den Einsatz von mehreren Seiten in der Steuerung, lassen sich einzelne Gruppierungen von Buttons und Informationen schaffen. Diese Gruppierungen können zum Beispiel Räume oder Gerätegruppen betreffen.
Jede der Vorlagen bietet ein anderes Design und kann nach Belieben erweitert und angepasst werden. Die Designs sind dabei eher schlicht gehalten, können aber durchaus als Basis zu einer außergewöhnlichen Steuerung genutzt werden. Hier sind deiner Kreativität keine Grenzen gesetzt.
Wer sich bedanken möchte, kann Matthias übrigens einen Kommentar hinterlassen oder – etwas persönlicher – eine Mail zukommen lassen. Alle Infos dazu findest du in seinem Blog.
Zu den smarthome-tricks.de Vorlagen kommst du hier: ioBroker Beispiel Visualisierungen als Download
Widgets und Icon Set von inventwo
Begeben wir uns so langsam in Richtung von Icons. Hierzu gibt es eine tolle Veröffentlichung von inventwo.
Erstellt wurden auf der einen Seite Adapter für Icons, die innerhalb deiner eigenen Visualisierung genutzt werden können. Sie werten damit die Steuerung nochmals auf eine besondere Weise auf, indem sie deinen Buttons und Elementen einen starken visuellen Ausdruck verleihen. Darüber hinaus können die Icons natürlich auch zur Darstellung von verschiedenen Zuständen genutzt werden.
Auf der anderen Seite gibt es ganze Widgets, die ebenfalls per Adapter installiert werden können. Diese Widgets erlauben es dir, schnell und unkompliziert Informationen in deiner Haussteuerung anzuzeigen. Dafür musst du noch nicht einmal selbst ein guter Designer sein. Alles was du tun musst, ist den Adapter zu installieren und mit Freude loszulegen. Das ist wirklich leicht.
Bei inventwo beschäftigt man sich inzwischen seit Dezember 2018 mit dem Thema ioBroker und Visualisierung. Anfang 2020 hat man sich dazu entschieden, eigene Adapter zu schreiben und diese zu veröffentlichen. Bleibt nur zu hoffen, dass die Freude an ioBroker weiter anhält und auch künftig mit solch nützlichen Erweiterungen zu rechnen ist.
Zu Informationen gelangst du hier: ioBroker Visualisierung (inventwo)
Icons für deine smarte Steuerung
Bevor wir nun zum Schluss kommen, habe ich wie versprochen noch ein paar interessante Quellen für Icons. Dabei eigenen sich die Icons insbesondere zur Hervorhebung bestimmter Elemente oder zur besseren Strukturierung deiner Haussteuerung. Icons können außerdem gerade dann hilfreich sein, wenn du wichtige Informationen mit möglichst wenig Platz und ohne Text anzeigen willst.
Die erste Quelle hierzu ist Icons8. Dort findest du diverse Icons zur Nutzung für dein ioBroker. Beachte dabei jedoch die Einzelheiten in Hinblick auf die Nutzungsbedingungen. Mehr Informationen zu den Bedingungen findest du in den Lizenzbestimmungen von Icons8. Mit über 179.100 kostenlosen Icons ist diese Plattform definitiv ein Versuch wert. Eine Registrierung ist dabei nicht notwendig.
Eine weitere Quelle für kostenlose Grafiken ist freepik. Es lassen sich dort explizit Icons finden, die kostenlos verwendbar sind. Wie auch bei Icons8 wird von dir jedoch verlangt, dass du eine entsprechende Verlinkung zur Quelle beziehungsweise zum Autor des Bilds angibst. Das klingt fair, kann in einer Haussteuerung jedoch möglicherweise schwierig sein. Auch hier gilt es, sich die Lizenzbedingungen genau anzusehen und dann eine Entscheidung zu treffen.
Meine letzte Quelle (und wohl die bekannteste) sind die Google Fonts. Genauer gesagt sprechen wir hier von den sogenannten Material Icons, die in diversen Webprojekten verwendet und von Google kostenlos zur Verfügung gestellt werden. Wer den Look von Android mag und schätzt, wird mit diesen Icons definitiv eine große Freude haben. Sie können entweder als SVG oder PNG heruntergeladen werden.
Mein Fazit
Bevor ich mich ausgiebig mit dem Thema Design beschäftigt habe, war mir oft auch nicht so ganz bewusst, was man doch schönes aus seiner Haussteuerung machen kann. Mit der Zeit hat sich allerdings gezeigt, dass einige Nutzer durchaus tolle Steuerungen erstellt haben. Dass man darüber hinaus teils wirklich großartige Vorlagen kostenlos herunterladen kann, ist wirklich super. So bekommt jeder eine coole VIS.
Wenn dir die Individualität dabei noch nicht weit genug geht, kannst du deine Steuerung mit zusätzliche Icons weiter aufpeppen. Wie meine Recherchen zeigen, gibt es durchaus viele (und gute!) Quellen für kostenlose Icons. Ich denke diese Anpassbarkeit macht ioBroker genau zu dem, was es ist. Ein wirklich gutes Smart Home System, das Spaß macht und sich bis ins kleinste Detail anpassen lässt.
Vorausgesetzt natürlich, dass du genug Kreativität mitbringst. Aber das tust du doch, oder? 😉
0 Kommentare