Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[Spampunk]

Hallo Leute,

ich bin mit den meisten Punkten meiner Aufgabenliste durch und kann nun auch meine VISU zeigen. Eine wesentliche Stütze ist der Code MDUI von @Uhula - ein herzliches Dankeschön an dieser Stelle für die wirklich fantastische Arbeit!

Als Letztes steht noch die Visualisierung unserer Heizungsanlage in SVG an. Das ist noch einmal ein größerer Brocken, aber in den Zeiten des Lockdowns eine schöne Aufgabe. Also, genug geschwafelt, es geht los:

[Darkmann2000]

Hallo zusammen,

ich bin gerade dabei meine zweite Vis zu erstellen. Ich bin noch nicht fertig, aber der größte Teil ist erledigt:+1:

[heinhan]

@darkmann2000 Hallo, das View mit der Krypthowährung interessiert mich. Wie hast Du das gelöst? Müsste doch auch mit Aktien etc. umsetzbar sein oder ?
Kannst Du das View bereitstellen? Danke

[Darkmann2000]

@heinhan

Das sind einfaches basic HTML Widget welches ich über folgende Webseite erstellt habe. https://nomics.com/assets/btc-bitcoin/widget

Denke das wird es auch für Aktien geben.

Anbei das Widget

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"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,"html":"<div class=\"nomics-ticker-widget\" data-name=\"Bitcoin\" data-base=\"BTC\" data-quote=\"USD\"></div><script src=\"https://widget.nomics.com/embed.js\"></script>"},"style":{"left":"295px","top":"205px","z-index":"50","width":"281px","height":"277px"},"widgetSet":"basic"}]

[heinhan]

@darkmann2000 Danke, dann gehe ich mal auf die Suche nach einer entsprechenden Seite für Aktien etc.

[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"}]