Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[sigi234]

@Oli sagte in [Neuer VIS-Adpater] Material Design Widgets:

Wo ändere ich die Hintergrundfarbe, für den Bereich der momentan Blau ist?

Navigationsleiste: Farben
Kopfzeile Hintergrund

[Scrounger]

@Oli sagte in [Neuer VIS-Adpater] Material Design Widgets:

Hallo @Scrounger ,

ich finde den Adapter genial, danke für die Arbeit die du da hinein steckst.

Allerdings hätte ich da noch ein paar Fragen dazu:

1. Wenn ich aus der Navigation eine Seite aufrufe, wird sie mir angezeigt, aber nach ca 1 Minute verschwindet sie, woran könnte das liegen?

kästchen bei persitent (dauernd) aktivieren, steht auch schon in der Doku ;)

3. Wie muss ich die verschiedenen Seiten bei einem Untermenü eintragen? Momentan habe ich es, wie auf dem Bild bei Tab[5], leider wird mir da nichts angezeigt.

Welche Version nutzt du? Falls ein Leerzeichen vor dem '|' das mal entfernen.
Falls das nicht hilft das widget nochmal komplett neu aufbauen, hab da zur letzten Version ziemlich was geändert.

[Oli]

@Scrounger

ich habe zur Zeit die Version 01.1, Leerzeichen sind keine vorhanden.

[Scrounger]

@Oli
Aktualisier mal auf Versio 0.1.2, danach Widget löschen und neu aufbauen.

[sigi234]

@Scrounger

Hallo, schön langsam begreife ich das System, was ich noch nicht verstehe sind die Bilder für die SubItems wo diese hingehören?

Zitat:
To change the image of the items, you have to a json object into the image filed with the index of the view field, example:

{"itemImage": "/icons-material-svg/hardware/ic_computer_48px.svg", "subItems": ["/vis/widgets/materialdesign/img/IoBroker_Logo.png", "/icons-material-svg/action/ic_android_48px.svg"]}

[Oli]

@sigi234

das gehört in den Bilder hinterlegt


[sigi234]

@Oli

Auch für SubItems?

[Oli]

@Scrounger

Super funktioniert mit der neuen Version.

[Oli]

@sigi234

ja, alles in die Zeile des entsprechenden Bildes

[Scrounger]

@sigi234
Ja auch für die Bilder:

Bei Bild[1] habe ich folgendes hinterlegt
{"itemImage": "/icons-material-svg/hardware/ic_computer_48px.svg", "subItems": ["/vis/widgets/materialdesign/img/IoBroker_Logo.png", "/icons-material-svg/action/ic_android_48px.svg"]}

was zu folgendem Ergebnis führt:

Für das Objekt 'itemImage' wird das Bild für das "MenuItem" angegeben, im Array 'subItems' dann die Bilder für die einzelnen Unterpunkte, jeweils durch ein Komma getrennt

[sigi234]

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

im Array 'subItems' dann die Bilder für die einzelnen Unterpunkte, jeweils durch ein Komma getrennt

Aha, habe ich 6 Unterpunkte muss ich es 6 mal einfügen durch Komma getrennt.

[Scrounger]

@sigi234 sagte in [Neuer VIS-Adpater] Material Design Widgets:

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

im Array 'subItems' dann die Bilder für die einzelnen Unterpunkte, jeweils durch ein Komma getrennt

Aha, habe ich 6 Unterpunkte muss ich es 6 mal einfügen durch Komma getrennt.

Korrekt.
Wenn du z.B. bei Unterpunkt 3 kein Bild haben willst, müsstest da dann "" eingeben.

[Oli]

@Scrounger

kann ich auch dem Hauptitem eine Seite zuweisen oder nur den Subitems?

Möchte mir folgende Struktur aufbauen:

1. System1 = System Seite 1

   • Gerät1 = 1. Gerät von Seite 1
   • Gerät2 = 2. Gerät von Seite 1
   • usw.

2. System2 = System Seite 2

   • Gerät20 = 1. Gerät von Seite 2
   • Gerät21 = 1. Gerät von Seite 2
   • usw.

[Scrounger]

@Oli
Nee geht leider nicht, nur den SubItems.

[sigi234]

@Scrounger

Kann man links im Menü die Icon Größe ändern?

[Scrounger]

@sigi234 sagte in [Neuer VIS-Adpater] Material Design Widgets:

@Scrounger

Kann man links im Menü die Icon Größe ändern?

Es gibt keine Einstellung dafür, müsste aber mit CSS überschreiben gehen. Das Icon ist Google Font Icon, d.h. mit css fontsize müsste man es ändern, hab ich aber noch nicht ausprobiert.

[calliou1234]

Hallo,

ich verwende für meine VIS auch den Adapter.
Super Arbeit, vielen Dank dafür!

Aktuell habe ich ein Problem und komme einfach nicht weiter.

Ich muss noch dazusagen, dass ich das Material Design CSS für ioBroker.vis von Uhula nutze.

Ich möchte eigentlich den kompletten Hintergrund schwarz haben.
Das klappt für die Navigationsleisten super, nur der Viewbereich im VIS bleibt immer weiss.

Im VIS Editor ist dieser immer schwarz.

Egal was ich bisher probiert habe, es ändert sich nichts.

Irgendjemand ne Idee?

Grüße
Thomas

[Oli]

@calliou1234

hast du den Hintergrund auf deiner verknüpften Seite schwarz?

[sigi234]

@calliou1234

rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box

[Scrounger]

Hab eine vernünftige offline lib gefunden - chartjs.

Wer das BarChart testen möchte, kann sich den aktuellen Master ziehen. Viel Spaß beim konfigurieren, gibt ein paar Einstellungsmöglichkeiten ;)