Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[sascha.ruckzuck]

@spampunk Moin, Ich finde die View ausgesprochen gut :)
Magst du die View vielleicht zur Verfügung stellen?
habe den ganzen Tag versucht mithilfe des CSS Krimskrams etwas nachzubauen (Farben etc) ohne Erfolg :/

VG

[manner666]

Ich wäre auch sehr interessiert an deinen Views, wäre echt cool, wenn du die bereit stellen könntest.

[sunny9999]

@Darkmann2000
Guten Morgen , ich hätte auch Interesse an Deinem Projekt...könntest du das zur Verfügung stellen als ZIP Export ?
Vielen Dank !
Grüße
Sunny

[lustig29]

@hills8 Die Musikwidgets finde ich sehr gelungen. Würdest du sie mir zur Verfügung stellen, mir verraten, wie du sie realisiert hast?

[Darkmann2000]

Sorry, habe die Nachrichten jetzt erst gelesen

hier der Export für das VIS.

Der Export ist leider zu groß, deswegen habe ich die Datei auf File-Upload hochgeladen

Link

Gruß Mike

[spike2]

@darkmann2000
Zur Info, der Download bzw. die Datei existiert nicht ;)

[Thomas Jansen]

@en1ac Der Post ist zwar schon älter aber ich poste trotzdem mal mein Dashboard...!

[Codierknecht]

@thomas-jansen sagte in Zeigt her eure Dashboards:

@en1ac Der Post ist zwar schon älter aber ich poste trotzdem mal mein Dashboard...!

Sehr stylish ... und dazu noch aus der Nachbarschaft (Neersen) :wave: :blush:

[Thomas Jansen]

@codierknecht ;) Na dann mal LG an die Nachbarschaft....

[topsurfer]

Sorry, wenn ich diesen Thread wiederbelebe,
aber ich habe zum "designen" von Dashboards eine Frage bzw. Fragen, die ich auch nach 3 Monaten mit iobroker mir noch nicht richtig beantworten kann.
Nutze vis-2, Lovelance ist nicht installiert (oder sollte man das auf jedem Fall installieren?).

Oben sind Dashboards, dazu hier meine 3 Fragen (A, B, C):
A) Dieses "Gruppieren" wie macht man das? Ist das ein Widget, oder HTML-Code?
Gibt es keine Option auf einem Dashboard "Linien" zu ziehen um "Unterteilungen" (Gruppen) darzustellen; Werte und Icons etwas zu trennen bzw. zu gruppieren ?

B) Dass ist ja unter Navigation => Anwendungsleiste zu finden,
aber wie kann man dort so ein Übersicht anzeigen? Ich sehe im vis2-Designer nur "Untertitel" und "Icon", aber keine Option, mehrere (anklickbare) Texte bzw. Buttons dort zu hinterlegen.

C) Für die einzelne Titel der Navigation kann man verschiedene Farben festlegen, aber wie geht so ein (blauer) Trennstrich zwischen den einzelnen Titeln?

[Darkmann2000]

@topsurfer

Hi.
ich habe dir meine Vis per We Transfer Hochgeladen. https://we.tl/t-xFl5SCDjjk

Nicht wundern die Alarmview sieht anders aus. bzw. es fehlen Elemente. Habe mich für eine Ajax Alarmsystem entschieden, deswegen nicht mehr über die VIS. Sonst ist aber alles geblieben. Anbei die passenden Widget. Kannst du direkt als Widget impotieren

A)

[{"tpl":"tplVis-materialdesign-Card","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","titleLayout":"22","subtitleLayout":"","cardLayout":"Basic","cardStyle":"default","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"title":"<center>Meldungen","subtitle":" ","html":"","colorBackground":"#212121","colorTitleSectionBackground":"black","colorTitle":"white","colorSubtitle":"","colorTextSectionBackground":"","labelTextHeight":"","labelSubTextHeight":"20","class":"","showTitle":"true","titleFontFamily":"{vis-materialdesign.0.fonts.card.title}","showSubTitle":"true","subTitleFontFamily":"{vis-materialdesign.0.fonts.card.subTitle}","showText":"true","textFontSize":"{vis-materialdesign.0.fontSizes.card.text}","textFontFamily":"{vis-materialdesign.0.fonts.card.text}","refresh_oid_delay":"100","refresh_animation_duration":"150","colorBody":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.card.text;dark:vis-materialdesign.0.colors.dark.card.text; mode === \"true\" ? dark : light}","clickType":"none","controlType":"link","listItemDataMethod":"inputPerEditor","showScrollbar":"true"},"style":{"left":"1034px","top":"166px","width":"317px","height":"450px","z-index":"1","border-radius":"5px","border-width":"2px","border-style":"none","border-color":"#7b7b8a","box-shadow":"0px 0px 20px 5px black"},"widgetSet":"materialdesign"}]

B)

[{"tpl":"tplVis-materialdesign-Button-Navigation-vertical","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","buttonStyle":"raised","vibrateOnMobilDevices":"50","textFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.button.vertical.text","textFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.button.vertical.text","alignment":"center","mdwButtonPrimaryColor":"#mdwTheme:vis-materialdesign.0.colors.button.vertical.primary","mdwButtonSecondaryColor":"#mdwTheme:vis-materialdesign.0.colors.button.vertical.secondary","iconPosition":"top","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"nav_view":"Auto","buttontext":"Auto","image":"car","iconHeight":"30","distanceBetweenTextAndImage":"8","imageColor":"#f09514","views":["3D_Drucker","Adapter","Alarmanlage","Anwesenheit","Außenbereich","Auto","Badezimmer","Bastelzimmer","Energieverbrauch","Flur","Fritz_Box","Garage","Home","HWR","Kalender","Kinderzimmer","Küche","Programme","Schlafzimmer","Server","Staubsauger","Verkehr","Weihnachten","Wetter","Wohnzimmer"]},"style":{"left":"437px","top":"8px","z-index":"49","background":"#29292e","width":"101px","height":"86px","border-style":"","border-width":"","border-color":"","border-radius":"10px"},"widgetSet":"materialdesign"}]

C)

[{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"views":["3D_Drucker","Adapter","Alarmanlage","Anwesenheit","Außenbereich","Auto","Badezimmer","Bastelzimmer","Energieverbrauch","Flur","Fritz_Box","Garage","HWR","Kameras","Kinderzimmer","Küche","Programme","Schlafzimmer","Server","Staubsauger","Verkehr","Weihnachten","Wetter","Wohnzimmer"]},"style":{"left":"11px","top":"419px","width":"190px","height":"5px","background":"blue","z-index":"50"},"widgetSet":"basic"}]