Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Material Design Widgets: Top App Bar Widget

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    22
    1
    999

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.1k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.4k

Material Design Widgets: Top App Bar Widget

Scheduled Pinned Locked Moved Visualisierung
vis
412 Posts 74 Posters 90.2k Views 79 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • NegaleinN Negalein

    @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

    Nimm mal das Widget in einem anderen Projekt , ist es auch dort so das man es nicht verändern kann , bzw. nimm mal Testweise alle CSS Anweisungen raus . Global / Projekt

    auch keine Änderung

    Ich verstehs nicht

    GlasfaserG Offline
    GlasfaserG Offline
    Glasfaser
    wrote on last edited by
    #301

    @negalein

    Im Admin ... Adapter ... Upload durchführen bei
    Material Design und VIS

    Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

    NegaleinN 1 Reply Last reply
    0
    • GlasfaserG Glasfaser

      @negalein

      Im Admin ... Adapter ... Upload durchführen bei
      Material Design und VIS

      NegaleinN Offline
      NegaleinN Offline
      Negalein
      Global Moderator
      wrote on last edited by
      #302

      @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

      m Admin ... Adapter ... Upload durchführen bei
      Material Design und VIS

      Nichts

      Hab auch gerade den Vis-Adapter aktualisiert, Upload VIS, Upload Material (wie immer) brachte keine Änderung.

      ° Node.js: 20.17.0 NPM: 10.8.2
      ° Proxmox, Ubuntu 22.04.3 LTS
      ° Fixer ---> iob fix

      GlasfaserG 1 Reply Last reply
      0
      • NegaleinN Negalein

        @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

        m Admin ... Adapter ... Upload durchführen bei
        Material Design und VIS

        Nichts

        Hab auch gerade den Vis-Adapter aktualisiert, Upload VIS, Upload Material (wie immer) brachte keine Änderung.

        GlasfaserG Offline
        GlasfaserG Offline
        Glasfaser
        wrote on last edited by
        #303

        @negalein

        schicke mir mal dein Widget zu

        Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

        NegaleinN 1 Reply Last reply
        0
        • GlasfaserG Glasfaser

          @negalein

          schicke mir mal dein Widget zu

          NegaleinN Offline
          NegaleinN Offline
          Negalein
          Global Moderator
          wrote on last edited by
          #304

          @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

          schicke mir mal dein Widget zu

          du hast Post

          ° Node.js: 20.17.0 NPM: 10.8.2
          ° Proxmox, Ubuntu 22.04.3 LTS
          ° Fixer ---> iob fix

          GlasfaserG 1 Reply Last reply
          0
          • NegaleinN Negalein

            @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

            schicke mir mal dein Widget zu

            du hast Post

            GlasfaserG Offline
            GlasfaserG Offline
            Glasfaser
            wrote on last edited by Glasfaser
            #305

            @negalein

            Stelle um auf :

            1.JPG

            danach werden die Werte im CSS Ränder übernommen

            Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

            NegaleinN 1 Reply Last reply
            1
            • GlasfaserG Glasfaser

              @negalein

              Stelle um auf :

              1.JPG

              danach werden die Werte im CSS Ränder übernommen

              NegaleinN Offline
              NegaleinN Offline
              Negalein
              Global Moderator
              wrote on last edited by
              #306

              @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

              Stelle um auf :

              Merci, das wars.
              Hatte ich nicht mehr im Blick.

              ° Node.js: 20.17.0 NPM: 10.8.2
              ° Proxmox, Ubuntu 22.04.3 LTS
              ° Fixer ---> iob fix

              1 Reply Last reply
              0
              • dQeLseD Offline
                dQeLseD Offline
                dQeLse
                wrote on last edited by
                #307

                hat jemand von Euch die 0.5.5 mit dem ipad4 ans laufen bekommen?
                Die TopAppBar wird mir nicht mehr angezeigt über die iobrokerApp, auf dem Rechner funktioniert Sie allerdings ohne Probleme.

                ScroungerS 1 Reply Last reply
                0
                • dQeLseD dQeLse

                  hat jemand von Euch die 0.5.5 mit dem ipad4 ans laufen bekommen?
                  Die TopAppBar wird mir nicht mehr angezeigt über die iobrokerApp, auf dem Rechner funktioniert Sie allerdings ohne Probleme.

                  ScroungerS Offline
                  ScroungerS Offline
                  Scrounger
                  Developer
                  wrote on last edited by
                  #308

                  @dqelse sagte in Material Design Widgets: Top App Bar Widget:

                  hat jemand von Euch die 0.5.5 mit dem ipad4 ans laufen bekommen?
                  ...nicht mehr angezeigt über die iobrokerApp ...

                  siehe https://github.com/Scrounger/ioBroker.vis-materialdesign#iobroker-vis-app, muss erst seitens app implementiert werden.

                  dQeLseD 1 Reply Last reply
                  0
                  • ScroungerS Scrounger

                    @dqelse sagte in Material Design Widgets: Top App Bar Widget:

                    hat jemand von Euch die 0.5.5 mit dem ipad4 ans laufen bekommen?
                    ...nicht mehr angezeigt über die iobrokerApp ...

                    siehe https://github.com/Scrounger/ioBroker.vis-materialdesign#iobroker-vis-app, muss erst seitens app implementiert werden.

                    dQeLseD Offline
                    dQeLseD Offline
                    dQeLse
                    wrote on last edited by
                    #309

                    @scrounger vielen dank :) dann warte ich mal ab

                    1 Reply Last reply
                    0
                    • ice987I Offline
                      ice987I Offline
                      ice987
                      wrote on last edited by ice987
                      #310

                      ich möchte die Farbe des "Hamburgers" (drei weisse, horizontale Linien" 6f6dca11-6932-4ba6-8995-720e15ff0ad3-image.png ändern. Habe ich die entsprechende Option in den Einstellungen übersehen oder geht dies nur mittels dem CSS Befehl

                      .mdc-top-app-bar .mdc-top-app-bar__navigation-icon {
                          color: #ff0000;
                      }
                      

                      Adapter: ioBroker.vis-materialdesign v0.5.6
                      Widget: materialdesign Widget - Top App Bar

                      https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/171

                      husqvarna-automower, meteoblue, wiserbyfeller, spritmonitor

                      GlasfaserG 1 Reply Last reply
                      0
                      • ice987I ice987

                        ich möchte die Farbe des "Hamburgers" (drei weisse, horizontale Linien" 6f6dca11-6932-4ba6-8995-720e15ff0ad3-image.png ändern. Habe ich die entsprechende Option in den Einstellungen übersehen oder geht dies nur mittels dem CSS Befehl

                        .mdc-top-app-bar .mdc-top-app-bar__navigation-icon {
                            color: #ff0000;
                        }
                        

                        Adapter: ioBroker.vis-materialdesign v0.5.6
                        Widget: materialdesign Widget - Top App Bar

                        https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/171

                        GlasfaserG Offline
                        GlasfaserG Offline
                        Glasfaser
                        wrote on last edited by Glasfaser
                        #311

                        @ice987

                        Nur per CSS

                        1.JPG

                        du mußt noch ein !important hinter setzen , damit er auch im Runtime sichtbar ist .

                        .mdc-top-app-bar .mdc-top-app-bar__navigation-icon {
                        color:  #2E9AFE !important;
                        }
                        

                        Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                        1 Reply Last reply
                        1
                        • K Kuddel

                          Hallo zusammen,

                          ich habe gestern angefangen das Design meiner VIS Link Text ein bisschen zu verbessern.

                          Als ersten Schritt woltte ich mir ein neues Menü bauen. Dazu habe ich das Widget "Top Add Bar Navigation Drawer" ausgewählt:

                          a34f8d36-8573-4a42-b7ed-48371a66a161-grafik.png

                          Jetzt stellt sich mir die Frage, ob sich die Menüpunkte (in meinem Beispiel "System") irgenwie wieder automatisch schließen lassen.
                          Aktuell werden die Unterpunkte nach dem Aufblättern immer angezeogt und müssen per erneutem klick wiede rzugeblättert werden.

                          Des Weiteren frage ich mich, wie man jetzt die einezelnen Seiten über den FullyBrowser ansteuern kann, da ja alle Seiten per View in Widget 8 angezeigt werden sich bei mir dann der Seitenlink nicht ändert.

                          Im Moment übergebe ich bei Ereignis XY immer die Adresse der jeweiligen Seiten an mein Tablet per FullyKioskBrowser.

                          M Offline
                          M Offline
                          MaikelR2000
                          wrote on last edited by
                          #312

                          @kuddel
                          Wieso kann ich in der Top App den Punkt Untermenü nicht sehen? So kann es mir nichts bringen oder?
                          menü-top-app.PNG

                          Bin dankbar für jede Hilfe!

                          GlasfaserG 1 Reply Last reply
                          0
                          • M MaikelR2000

                            @kuddel
                            Wieso kann ich in der Top App den Punkt Untermenü nicht sehen? So kann es mir nichts bringen oder?
                            menü-top-app.PNG

                            Bin dankbar für jede Hilfe!

                            GlasfaserG Offline
                            GlasfaserG Offline
                            Glasfaser
                            wrote on last edited by Glasfaser
                            #313

                            @maikelr2000 sagte in Material Design Widgets: Top App Bar Widget:

                            @kuddel
                            Wieso kann ich in der Top App den Punkt Untermenü nicht sehen?

                            Du mußt es auf die neue Struktur ändern .

                            So kann es mir nichts bringen oder?

                            Schau mal in seinem Thread ... da haben wir es mehrmals geschrieben !!

                            https://forum.iobroker.net/topic/30497/vorstellung-meine-dritte-vis/465

                            Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                            M 1 Reply Last reply
                            0
                            • GlasfaserG Glasfaser

                              @maikelr2000 sagte in Material Design Widgets: Top App Bar Widget:

                              @kuddel
                              Wieso kann ich in der Top App den Punkt Untermenü nicht sehen?

                              Du mußt es auf die neue Struktur ändern .

                              So kann es mir nichts bringen oder?

                              Schau mal in seinem Thread ... da haben wir es mehrmals geschrieben !!

                              https://forum.iobroker.net/topic/30497/vorstellung-meine-dritte-vis/465

                              M Offline
                              M Offline
                              MaikelR2000
                              wrote on last edited by
                              #314

                              @glasfaser Ja super hab mir schon nen Wolf gesucht! Danke.

                              Wie setze ich jetzt noch meine eigene Icons ein?

                              GlasfaserG ScroungerS 2 Replies Last reply
                              0
                              • M MaikelR2000

                                @glasfaser Ja super hab mir schon nen Wolf gesucht! Danke.

                                Wie setze ich jetzt noch meine eigene Icons ein?

                                GlasfaserG Offline
                                GlasfaserG Offline
                                Glasfaser
                                wrote on last edited by
                                #315

                                @maikelr2000 sagte in Material Design Widgets: Top App Bar Widget:

                                Wie setze ich jetzt noch meine eigene Icons ein?

                                Für Submenu :
                                in icon dein Pfad reinsetzen

                                {
                                		"text": "PV SolarForecast Ost / West",
                                		"icon": "/icons-mfd-png/fts_shutter_automatic.png",
                                		"divider": "true",
                                		"userGroups": ["administrator", "user"],
                                		"behaviorNotInUserGroup": "disabled"
                                	},
                                

                                Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                                1 Reply Last reply
                                0
                                • M MaikelR2000

                                  @glasfaser Ja super hab mir schon nen Wolf gesucht! Danke.

                                  Wie setze ich jetzt noch meine eigene Icons ein?

                                  ScroungerS Offline
                                  ScroungerS Offline
                                  Scrounger
                                  Developer
                                  wrote on last edited by Scrounger
                                  #316

                                  @maikelr2000 sagte in Material Design Widgets: Top App Bar Widget:

                                  @glasfaser Ja super hab mir schon nen Wolf gesucht! Danke.

                                  Nur mal so als Tipp ;-) steht alles in der doku, sollte immer die erste anlaufstation sein, danach dann der thread zum entsprechenden widget.
                                  doku kann man doch super schnell vom vis editor aus öffnen und direkt zum entsorechenden widget springen.

                                  1 Reply Last reply
                                  0
                                  • NegaleinN Offline
                                    NegaleinN Offline
                                    Negalein
                                    Global Moderator
                                    wrote on last edited by Negalein
                                    #317

                                    @Scrounger

                                    Ich kann Material Design nicht höher als 0.5.5 updaten, da sonst die Top App Bar in der View verschwindet.
                                    Hab 0.5.6, 0.5.7, 0.5.8 und 0.5.9 probiert. Ab 0.5.6 verschwindet sie.

                                    Upload von Vis, Material und Web hat nicht geholfen.

                                    Admin: 5.1.10
                                    JS-Controller: 3.3.14
                                    Vis: 1.4.3
                                    Web: 3.4.4

                                    Was könnte ich noch machen?

                                    ° Node.js: 20.17.0 NPM: 10.8.2
                                    ° Proxmox, Ubuntu 22.04.3 LTS
                                    ° Fixer ---> iob fix

                                    GlasfaserG liv-in-skyL 2 Replies Last reply
                                    0
                                    • NegaleinN Negalein

                                      @Scrounger

                                      Ich kann Material Design nicht höher als 0.5.5 updaten, da sonst die Top App Bar in der View verschwindet.
                                      Hab 0.5.6, 0.5.7, 0.5.8 und 0.5.9 probiert. Ab 0.5.6 verschwindet sie.

                                      Upload von Vis, Material und Web hat nicht geholfen.

                                      Admin: 5.1.10
                                      JS-Controller: 3.3.14
                                      Vis: 1.4.3
                                      Web: 3.4.4

                                      Was könnte ich noch machen?

                                      GlasfaserG Offline
                                      GlasfaserG Offline
                                      Glasfaser
                                      wrote on last edited by Glasfaser
                                      #318

                                      @negalein sagte in Material Design Widgets: Top App Bar Widget:

                                      Was könnte ich noch machen?

                                      Teste mal:
                                      Eine neue View in deinem Projekt erstellen und dort ein neues Top App Bar Widget einfügen ,
                                      was ist dann ?

                                      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                                      1 Reply Last reply
                                      0
                                      • NegaleinN Negalein

                                        @Scrounger

                                        Ich kann Material Design nicht höher als 0.5.5 updaten, da sonst die Top App Bar in der View verschwindet.
                                        Hab 0.5.6, 0.5.7, 0.5.8 und 0.5.9 probiert. Ab 0.5.6 verschwindet sie.

                                        Upload von Vis, Material und Web hat nicht geholfen.

                                        Admin: 5.1.10
                                        JS-Controller: 3.3.14
                                        Vis: 1.4.3
                                        Web: 3.4.4

                                        Was könnte ich noch machen?

                                        liv-in-skyL Offline
                                        liv-in-skyL Offline
                                        liv-in-sky
                                        wrote on last edited by
                                        #319

                                        @negalein es gab mal eine änderung im setting des widgets - ab einer bestimmten version - hast du das geändert bzw angeglichen.

                                        man mußte die menupunkte dann in einem json angeben

                                        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                        1 Reply Last reply
                                        0
                                        • NegaleinN Offline
                                          NegaleinN Offline
                                          Negalein
                                          Global Moderator
                                          wrote on last edited by Negalein
                                          #320

                                          @glasfaser sagte in Material Design Widgets: Top App Bar Widget:

                                          Eine neue View in deinem Projekt erstellen und dort ein neues Top App Bar Widget einfügen ,
                                          was ist dann ?

                                          wird immer komischer. Ich glaub die TopAppBar mag mich nicht.

                                          Auf 0.5.9 aktualisiert.
                                          TopAppBar wieder weg
                                          Vis-Edit geöffnet; TopAppBar ist da
                                          neuer View erstellt; TopAppBar eingefügt
                                          Runtime gestartet; TopAppBar ist da (im neuen View und im Hauptview)
                                          Aber, Untermenüs lassen sich nicht aufklappen; Menüs lassen sich nicht öffnen; Schrift plötzlich schwarz obwohl nichts geändert.

                                          vis.png

                                          @liv-in-sky sagte in Material Design Widgets: Top App Bar Widget:

                                          es gab mal eine änderung im setting des widgets - ab einer bestimmten version - hast du das geändert bzw angeglichen.
                                          man mußte die menupunkte dann in einem json angeben

                                          Ja, das hab ich zB bei Untermenüs

                                          [
                                          
                                          	{
                                          
                                          		"text": "Erdgeschoß",
                                          
                                          		"icon": "/vis.0/Buchenweg/light_light_dim_00.png"
                                          
                                          		
                                          
                                          	
                                          
                                          	}, 
                                          
                                          	{
                                          
                                          		"text": "Obergeschoß",
                                          
                                          		"icon": "/vis.0/Buchenweg/light_light_dim_00.png"
                                          
                                          
                                          	} 
                                          
                                          	
                                          
                                          ]
                                          

                                          ° Node.js: 20.17.0 NPM: 10.8.2
                                          ° Proxmox, Ubuntu 22.04.3 LTS
                                          ° Fixer ---> iob fix

                                          GlasfaserG 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          585

                                          Online

                                          32.5k

                                          Users

                                          81.6k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe