Monatsrückblick Januar/Februar 2026 ist online!

[smartin23]

Hallo zusammen,

ich bin ganz neu bei IOBroker und versuche gerade, meine erste Visualisierung in VIS zu erstellen. Leider gefällt mir die grafische Gestaltung der Widgets nicht - auch nicht die der zusätzlich installierten Widgets.

Ich bin ziemlich fit in Webdesign und programmiere normalerweise ganz Webseiten in HTML, PHP, Javascript und CSS. Bei VIS stoße ich aber an meine Grenzen, weil es ja so eine Mischung aus Webseiten-Programmierung und dem Einsatz fester Widgets ist - was die Möglichkeiten (zumindest nach meiner ersten Erfahrung) begrenzt: Auf der einen Seite lassen sich vorhandene Widgets nicht unendlich verbiegen, um sie genau an meine Vorstellung anzupassen und auf der anderen Seite kann ich nicht alles frei programmieren, weil mir die Funktionalitäten der Widgets fehlen.

Ich hatte auch schon mal probiert, eigene Widgets nach meinen grafischen Vorstellungen zu programmieren - aber das scheint mir dann doch zu komplex.

Lange Rede, kurzes Anliegen - zwei Fragen also:

• Gibt es irgendwie die Möglichkeit, eine Visualisierung komplett frei zu programmieren, wie eine Webseite? So dass ich in der grafischen Gestaltung völlig freie Hand habe und die Webseite voll responsiv bauen kann - aber eben gleichzeitig auf alle Gerätedaten zugreifen kann?
• Oder kann ich mir irgendwie recht einfach eine Art Gestaltungsvorlagen bauen? Ein Beispiel: Ich möchte ein Widget haben, dass ich immer wieder einsetzen kann. Es soll links ein frei zu wählendes Icon haben, daneben Überschrift und Unterzeile und rechts dann in größerer Schrift den aktuellen Wert mit einer frei wählbaren Einheit. Der Wert soll sich abhängig von der Höhe unterschiedlich einfärben. Alles soll natürlich immer perfekt ausgerichtet und mit einheitlichen Abständen und Rändern sein. Bisher habe ich das mühselig in VIS zusammengeschoben und mit CSS gestylt. Wenn ich so etwas nun aber 15 Mal in ähnlicher Form benötige, ist das super aufwändig. Und wenn ich dann noch eine Version für ein kleineres Display brauche, fange ich (fast) von vorne an.

Sorry für die lange Anfängerfrage. Aber vielleicht könnt Ihr mir ja helfen.

[arteck]

@smartin23 was ist mit dem html widget ..da kannst du dich frei austoben.. oder reicht der nicht ??

[smartin23]

@arteck Das habe ich mir auch schon mal angeschaut. Das kommt meinem Wunsch wohl am nächsten. Aber kann man in diesem Widget dann auch auf sämtliche Gerätedaten zugreifen? Also etwa auf den Zustand von Lampen oder der aktuellen Temperatur eines Sensors?

[smartin23]

Nachtrag: Ich habe gerade durch Zufall entdeckt, dass ich Elemente, die ich gruppiere, auch als Template ablegen kann. Anscheinend kann ich dann auch veränderbare Attribute definieren. Aber weiter komme ich gerade nicht - und per Google finde ich auche keine Anleitung zu solchen Templates. Hat da jemand irgendwo eine Quelle mit mehr Infos?

[arteck]

@smartin23 ja per binding...

[smartin23]

@arteck Ah, danke für das Stichwort. Da finde ich bei Google direkt Beispiele - das hilft mir!!!

[arteck]

@smartin23 wenn du komplett alles auslagern willst kannst du auch die simpleAPI nutzen.
damit kommst du an die objekte dran die du lesen und auch ändern kannst. ist aber ne heiden arbeit

wenn du mal was fertig hast.. zeig her..will mal sehen

[smartin23]

@arteck Alles klar, ich beschäftige mich mal detaillierter mit Binding und den Templates - ich glaube, damit komme ich schon weiter. Wenn ich was habe, zeige ich es mal. Kann aber etwas dauern. :-)

[liv-in-sky]

@smartin23

datenpunkte abfragen:

Self.servConn.getStates(['0_userdata.0.CONTROL-OWN.ECHO8.Echo2Player-PP',
                      'javascript.0.YouTube.whichDevice'], (error, states) => {
                          console.log(states['0_userdata.0.CONTROL-OWN.ECHO8.Echo2Player-PP'].val);                                         
                          console.log(states['javascript.0.YouTube.whichDevice'].val)})

// über simple-api: 
$.get( "http://192.168.178.59:8087/get/0_userdata.0.CONTROL-OWN.AAATEST.TestLogic3", function( data ) {
  console.log( "Data Loaded: " + data.val );
  console.log( "Data Loaded: " + data.lc )
});  

datenpunkt setzen:

 vis.setValue('0_userdata.0.CONTROL-OWN.AAATEST.ATESTBildUpload',myvalue);

[liv-in-sky]

@smartin23

falls man auf ein widget mal warten muss, bis es geladen ist und mit z.b. jquery arbeiten will:

https://forum.iobroker.net/topic/48663/howto-skripte-im-vis-editor-mit-jquery