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

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    2.0k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    924

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

Material Design Widgets: Top App Bar Widget

Scheduled Pinned Locked Moved Visualisierung
vis
412 Posts 74 Posters 94.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.
  • GlasfaserG Glasfaser

    @ckmartens

    Mhh ... funktioniert.

    Habe auch das VIS Projekt von dos1973 importiert ,
    gemeinsamen Datenpunkt in TopAppBar und im View in Widget 8 eingetragen , funktioniert.

    CKMartensC Offline
    CKMartensC Offline
    CKMartens
    wrote on last edited by CKMartens
    #247

    @glasfaser sehr seltsam. Ich schau morgen mal was der Debuger vom Browser ausgibt

    GlasfaserG ScroungerS 2 Replies Last reply
    0
    • CKMartensC CKMartens

      @glasfaser sehr seltsam. Ich schau morgen mal was der Debuger vom Browser ausgibt

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

      @ckmartens

      Schau mal nach , wie sich der gemeinsame Datenpunkt verändert , beim umschalten und dann wenn der Fehler kommt auf welchen Wert er springt .

      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 ..

      CKMartensC 1 Reply Last reply
      0
      • CKMartensC CKMartens

        @glasfaser sehr seltsam. Ich schau morgen mal was der Debuger vom Browser ausgibt

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

        @ckmartens
        Welche Version vom vis Adapter hast du?

        CKMartensC 1 Reply Last reply
        0
        • ScroungerS Scrounger

          @ckmartens
          Welche Version vom vis Adapter hast du?

          CKMartensC Offline
          CKMartensC Offline
          CKMartens
          wrote on last edited by
          #250

          @scrounger
          VIS ist 1.3.7
          Und Web 3.3.0

          1 Reply Last reply
          0
          • GlasfaserG Glasfaser

            @ckmartens

            Schau mal nach , wie sich der gemeinsame Datenpunkt verändert , beim umschalten und dann wenn der Fehler kommt auf welchen Wert er springt .

            CKMartensC Offline
            CKMartensC Offline
            CKMartens
            wrote on last edited by
            #251

            @glasfaser er springt immer auf 0 zurück. Auch wenn ich den Wert händisch eingebe. Im Fallback ist egal was steht. Kann da z. B. 2 eintragen und es geht trotzdem auf 0

            ScroungerS 1 Reply Last reply
            0
            • CKMartensC CKMartens

              @glasfaser er springt immer auf 0 zurück. Auch wenn ich den Wert händisch eingebe. Im Fallback ist egal was steht. Kann da z. B. 2 eintragen und es geht trotzdem auf 0

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

              @ckmartens

              beim view in widget 8 ist
              e46d5af5-ddc6-4f92-8177-64e06187909b-grafik.png
              aktiviert?

              brauch das consolen log (F12) zur runtime, wenn das phänomen auftritt.

              CKMartensC 1 Reply Last reply
              0
              • ScroungerS Scrounger

                @ckmartens

                beim view in widget 8 ist
                e46d5af5-ddc6-4f92-8177-64e06187909b-grafik.png
                aktiviert?

                brauch das consolen log (F12) zur runtime, wenn das phänomen auftritt.

                CKMartensC Offline
                CKMartensC Offline
                CKMartens
                wrote on last edited by
                #253

                @scrounger
                Ja, ist aktiviert.
                Ich stelle das Log Montage rein, am Wochenende komme ich nicht dazu. GöGa hat Aufgaben verteilt 🤷‍♂️

                ScroungerS GlasfaserG 2 Replies Last reply
                0
                • CKMartensC CKMartens

                  @scrounger
                  Ja, ist aktiviert.
                  Ich stelle das Log Montage rein, am Wochenende komme ich nicht dazu. GöGa hat Aufgaben verteilt 🤷‍♂️

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

                  @ckmartens
                  Versuch davor Mal noch das Widget komplett neu zu erstellen

                  CKMartensC 1 Reply Last reply
                  0
                  • CKMartensC CKMartens

                    @scrounger
                    Ja, ist aktiviert.
                    Ich stelle das Log Montage rein, am Wochenende komme ich nicht dazu. GöGa hat Aufgaben verteilt 🤷‍♂️

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

                    @ckmartens

                    Ich habe noch mal getestet ... ich finde kein Fehler .

                    Ich habe mal ein Test Projekt erstellt .

                    Teste es mal bei dir :

                    ( den gemeinsamen Datenpunkt bei beiden Widgets ergänzen )

                    2021-02-06-zumBasteln.zip

                    1.JPG

                    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
                    • GlasfaserG Glasfaser

                      @ckmartens

                      Sehr komisch das hier so viele damit Probleme haben !??

                      Funktioniert seit Anfang an Super die TopAppBar, eingerichtet / geändert nach der Github Anleitung .

                      Hier mal meine Einstellungen :

                      1.JPG
                      .
                      2.JPG
                      .
                      und im Submenue

                      [
                      	{
                      		"text": "Rollladen Erdgeschoß",
                      		"icon": "/icons-mfd-png/fts_shutter_automatic.png",
                      		"userGroups": ["administrator", "user"],
                      		"behaviorNotInUserGroup": "disabled"
                      	
                      	}, 
                      	{
                      		"text": "Rollladen Obergeschoß",
                      		"icon": "/icons-mfd-png/fts_shutter_automatic.png",
                      		"divider": "true",
                      		"userGroups": ["administrator", "user"],
                      		"behaviorNotInUserGroup": "disabled"
                      	}, 
                      	{
                      		"text": "Timer",
                      		"divider": "true",
                      		"icon": "/icons-mfd-png/fts_shutter_automatic.png",
                      		"userGroups": ["administrator", "user"],
                      		"behaviorNotInUserGroup": "disabled"
                      		
                      	}
                      ]
                      

                      .
                      111111111111111111111111111111111111111.JPG

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

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

                      111111111111111111111111111111111111111.JPG

                      Servus

                      Wie schaffst du im Widget den Verlauf für den Hintergrund?

                      Trag ich es so ein, wird der Hintergrund transparent.
                      Screenshot 2021-02-12 173249.png

                      ° Node.js & System Update ---> sudo apt update, iob stop, sudo apt full-upgrade
                      ° Node.js Fixer ---> iob nodejs-update
                      ° Fixer ---> iob fix

                      GlasfaserG 1 Reply Last reply
                      0
                      • NegaleinN Negalein

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

                        111111111111111111111111111111111111111.JPG

                        Servus

                        Wie schaffst du im Widget den Verlauf für den Hintergrund?

                        Trag ich es so ein, wird der Hintergrund transparent.
                        Screenshot 2021-02-12 173249.png

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

                        @negalein

                        Bitteschön ;)

                        /**Top App Bar Hintergrund und Auswahlbutton @Glasfaser**/
                        .mdc-drawer {
                        
                            background: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !important;
                        }
                        
                        .mdc-top-app-bar {
                              background: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !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 ..

                        NegaleinN 1 Reply Last reply
                        0
                        • GlasfaserG Glasfaser

                          @negalein

                          Bitteschön ;)

                          /**Top App Bar Hintergrund und Auswahlbutton @Glasfaser**/
                          .mdc-drawer {
                          
                              background: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !important;
                          }
                          
                          .mdc-top-app-bar {
                                background: linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f) !important;
                          }
                          
                          
                          NegaleinN Offline
                          NegaleinN Offline
                          Negalein
                          Global Moderator
                          wrote on last edited by
                          #258

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

                          Bitteschön

                          Dankeschön :)

                          Und lässt du dann das Feld "Hintergrund" einfach leer?

                          ° Node.js & System Update ---> sudo apt update, iob stop, sudo apt full-upgrade
                          ° Node.js Fixer ---> iob nodejs-update
                          ° Fixer ---> iob fix

                          GlasfaserG 1 Reply Last reply
                          0
                          • NegaleinN Negalein

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

                            Bitteschön

                            Dankeschön :)

                            Und lässt du dann das Feld "Hintergrund" einfach leer?

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

                            @negalein
                            Ja , lasse alles bei dem "Widget CSS Hintergrund Einstellungen " alles leer.

                            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
                              Ja , lasse alles bei dem "Widget CSS Hintergrund Einstellungen " alles leer.

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

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

                              Ja , lasse alles bei dem "Widget CSS Hintergrund Einstellungen " alles leer.

                              bräuchte nochmal deine Hilfe :)

                              Ich würde gern den Hintergrund in zB Schwarz haben.
                              Finde aber nicht den passenden Menüpunkt.
                              Screenshot 2021-02-13 000607.png

                              Und ist das normal? Version ist aktuell. Das steht bei jedem Feld für Schriftart und Farbe.


                              Screenshot_2021-02-13 Edit vis.png
                              Screenshot_2021-02-13 Edit vis(1).png
                              Screenshot_2021-02-13 Edit vis(2).png
                              Screenshot_2021-02-13 Edit vis(3).png
                              Screenshot_2021-02-13 Edit vis(4).png
                              Screenshot_2021-02-13 Edit vis(5).png

                              ° Node.js & System Update ---> sudo apt update, iob stop, sudo apt full-upgrade
                              ° Node.js Fixer ---> iob nodejs-update
                              ° Fixer ---> iob fix

                              ScroungerS 1 Reply Last reply
                              0
                              • NegaleinN Negalein

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

                                Ja , lasse alles bei dem "Widget CSS Hintergrund Einstellungen " alles leer.

                                bräuchte nochmal deine Hilfe :)

                                Ich würde gern den Hintergrund in zB Schwarz haben.
                                Finde aber nicht den passenden Menüpunkt.
                                Screenshot 2021-02-13 000607.png

                                Und ist das normal? Version ist aktuell. Das steht bei jedem Feld für Schriftart und Farbe.


                                Screenshot_2021-02-13 Edit vis.png
                                Screenshot_2021-02-13 Edit vis(1).png
                                Screenshot_2021-02-13 Edit vis(2).png
                                Screenshot_2021-02-13 Edit vis(3).png
                                Screenshot_2021-02-13 Edit vis(4).png
                                Screenshot_2021-02-13 Edit vis(5).png

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

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

                                Und ist das normal? Version ist aktuell. Das steht bei jedem Feld für Schriftart und Farbe.

                                Ja das sind die Bindings für die themes die du über Adapter settings konfigurieren kannst.
                                Einfach nach Top App Bar Filtern und dort dann Farben, Schriftart und Schriftgröße einstellen:

                                cc1ef8f2-12f3-4a2d-b5f3-c3fb749e5859-grafik.png

                                1 Reply Last reply
                                0
                                • Horst BöttcherH Offline
                                  Horst BöttcherH Offline
                                  Horst Böttcher
                                  wrote on last edited by
                                  #262

                                  Wie kann ich das lösen View schaut durchs Menü
                                  wnn ich den den Z-indedx verändere kann ich nicht mehr schalten aber dann wird es Richtig angezeigt
                                  4164c8c359e83cde281dee8f75190a68.png

                                  NegaleinN 1 Reply Last reply
                                  0
                                  • Horst BöttcherH Horst Böttcher

                                    Wie kann ich das lösen View schaut durchs Menü
                                    wnn ich den den Z-indedx verändere kann ich nicht mehr schalten aber dann wird es Richtig angezeigt
                                    4164c8c359e83cde281dee8f75190a68.png

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

                                    @horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

                                    Wie kann ich das lösen View schaut durchs Menü

                                    wie ist der Z-Index vom Menü und von dem was durchscheint?
                                    Du musst mit dem Menü höher gehen.

                                    ° Node.js & System Update ---> sudo apt update, iob stop, sudo apt full-upgrade
                                    ° Node.js Fixer ---> iob nodejs-update
                                    ° Fixer ---> iob fix

                                    Horst BöttcherH 1 Reply Last reply
                                    0
                                    • NegaleinN Negalein

                                      @horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

                                      Wie kann ich das lösen View schaut durchs Menü

                                      wie ist der Z-Index vom Menü und von dem was durchscheint?
                                      Du musst mit dem Menü höher gehen.

                                      Horst BöttcherH Offline
                                      Horst BöttcherH Offline
                                      Horst Böttcher
                                      wrote on last edited by
                                      #264

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

                                      @horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

                                      Wie kann ich das lösen View schaut durchs Menü

                                      wie ist der Z-Index vom Menü und von dem was durchscheint?
                                      Du musst mit dem Menü höher gehen.

                                      Wenn ich den Z index erhöhe kann ich in den views nicht mehr schalten

                                      NegaleinN 1 Reply Last reply
                                      0
                                      • Horst BöttcherH Horst Böttcher

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

                                        @horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

                                        Wie kann ich das lösen View schaut durchs Menü

                                        wie ist der Z-Index vom Menü und von dem was durchscheint?
                                        Du musst mit dem Menü höher gehen.

                                        Wenn ich den Z index erhöhe kann ich in den views nicht mehr schalten

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

                                        @horst-böttcher sagte in Material Design Widgets: Top App Bar Widget:

                                        Wenn ich den Z index erhöhe kann ich in den views nicht mehr schalten

                                        schick mir mal einen Export der View oder des ganzen Projekts.

                                        ° Node.js & System Update ---> sudo apt update, iob stop, sudo apt full-upgrade
                                        ° Node.js Fixer ---> iob nodejs-update
                                        ° Fixer ---> iob fix

                                        Horst BöttcherH 1 Reply Last reply
                                        0
                                        • O Oli

                                          @Scrounger

                                          das habe ich auch gemacht

                                          58be143d-7822-4669-b1d2-c4535bd4937c-image.png

                                          Mit folgenden Ergebiss
                                          7f63290c-57cb-49b8-87dd-7d91495bc0d8-image.png

                                          C Offline
                                          C Offline
                                          Chilihead
                                          wrote on last edited by
                                          #266

                                          @oli darf ich fragen wie du die Warnungsbuttons "beleuchtet" hast? Danke

                                          O 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

                                          706

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          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