Einfache Frage zu ioBroker VIS - Bereiche

[SKB]

Hallo,
da ich nicht weiss, wie ich das nennen soll,w as ich suche, hänge ich einfach ein Bild an

Wer kann mir sagen, wie man so einen "Bereich" in VIS definiert?

iobroker_Bereich.png (77.19 KiB) 3884 mal betrachtet

Mir geht es um den Tabellenkopf "Anwesenheit" oder "Müllabfuhr" und dann den Rahmen.

Vielen Dank!

[dondaik]

das ist eine frage für das iobroker forum .... da sind auch zu diesem kalender beispiele in den vis - demos ( wenn ich mich richtig erinnere )

[SKB]

Den Kalender ansich meine ich nicht.
Nur diese tabellarische Ansicht.

[dondaik]

da wird dir geholfen

[robbi77]

https://forum.iobroker.net/

[Black]

IOBroker forum wäre zwar das richtige, aber hier trotzdem mal eine schnelle Antwort

das wirdget selber in etwa so aufbauen

Code: Alles auswählen

[{"tpl":"tplFrame","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"title":"Müllkalender","title_color":"white","title_top":"2","title_left":"10","header_height":"24","header_color":"#647687","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,"name":"Rahmen Müllkalender","visibility-groups-action":"hide","class":"tTable","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},"style":{"left":"672px","top":"9px","width":"319px","height":"139px","z-index":"3","border-radius":"5px","line-height":"1.2","box-shadow":"8px 8px 8px rgba(40, 40, 40, 40)"},"widgetSet":"basic"}]

danne in normales HTML Widget, in das du per Binding den HTML Code darstellen lässt, den du vorher per Script in eine String variable geschrieben hast

Code: Alles auswählen

[{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":false,"g_gestures":false,"g_signals":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,"class":"tTableEng","html":"{0_userdata.0.VISU.MuellHTML}","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},"style":{"left":"675px","top":"39px","width":"314px","height":"107px","z-index":"3","color":"#aaaaaa","line-height":"1.2","box-shadow":""},"widgetSet":"basic"}]

Das script setzt mir da eine HTML Table mit etsprechenden classes für die Einfärbungen (grün, rot, für müll morgen, müll heute) zusammen

Code: Alles auswählen

<table><tr class="left"><td class= "pv-color">Restmüll:</td><td >In 1 Woche</td></tr><tr class="left"><td class= "pv-color">Gelbe Tonne:</td><td >In 2 Wochen</td></tr><tr class="left"><td class= "pv-color">Papierabfuhr:</td><td >In 2 Wochen</td></tr><tr class="left"><td class= "pv-color">Glasabfuhr:</td><td >In 1 Woche</td></tr><tr class="left"><td class= "pv-color">Gartenabfall:</td><td >In 6 Wochen</td></tr></table>

Wie du es gestaltest liegt dann dir und deinem HTML Code

Black

[Feuersturm]

Sehr schicker Rahmen @black. Gefällt mir

@SKB:
Wenn du für den Anfang einen einfachen Rahmen mit Titel haben möchtest wähle einfach links in der Widgetauswahl den Eintrag "border" aus.
Bei den Einstellungen kannst du dann deinen Rahmen formatieren

[SKB]

IOBroker forum wäre zwar das richtige, aber hier trotzdem mal eine schnelle Antwort

Wie du es gestaltest liegt dann dir und deinem HTML Code

Black

Super. Vielen Dank. Ich habe mir mal den Bereich für die Bereiche kopiert und eingefügt. Das ist genau das, was ich gesucht habe.

Ganz herzlichen Dank!

[SKB]

Sehr schicker Rahmen @black. Gefällt mir

@SKB:
Wenn du für den Anfang einen einfachen Rahmen mit Titel haben möchtest wähle einfach links in der Widgetauswahl den Eintrag "border" aus.
Bei den Einstellungen kannst du dann deinen Rahmen formatieren
Unbenannt.JPG

Vielen Dank. Ich hatte immer den Fehler gemacht und den Titel nicht in das Feld schieben lassen, sodass es einen Hintergrund bekommt

[dtp]

Es gibt zig verschiedene Möglichkeiten, so was zu realisieren. Ich lege mir z.B. auch gerne mehrere verschiedene Widgets übereinander.

Dann kann ich die Texte sehr frei positionieren. Der Nachteil ist jedoch, dass es bis heute keinen Layer-Manager für den ioBroker.vis Editor gibt, mit dem man einfach auf die Widgets unterschiedlicher z-Ebenen zugreifen kann. Obwohl das mal vor Jahren als guter Vorschlag angesehen wurde, kam es bis jetzt leider zu keiner entsprechenden Umsetzung. Aber das ist ein anderes Thema.