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
    925

  • 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.
  • Hermanito33H Offline
    Hermanito33H Offline
    Hermanito33
    wrote on last edited by
    #89

    Hey,

    kann mir jemand kurz erklären wie ich das ganze erstelle? Mit der alten Top app Bar ging das ja ganz einfach. Mit dem View 8 Widget verstehe ich das leider überhaupt nicht.

    Die Test Seiten zum anschauen Laden bei mir leider überhaupt nicht.

    1 Reply Last reply
    0
    • K Kuddel

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

      Wurden die Daten der Aufnahmen per Enigma2 Adapter ausgelesen ?

      Wie kann ich Daten so darstellen?

      Edit: verschoben, da keine Frage zu TopAppBar Widget Einstellung

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

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

      Wurden die Daten der Aufnahmen per Enigma2 Adapter ausgelesen ?

      https://forum.iobroker.net/topic/25112/test-adapter-enigma2-v1-2-x/134

      @Hermanito33
      Lies dir bitte den Thread hier durch, da wurde es mehrfacha beschrieben.
      Oder hier https://www.smarthome-tricks.de/software-iobroker/vis-material-design-widgets-teil-2-top-app-bar-navigation/

      K Hermanito33H Damrak2022D 3 Replies Last reply
      0
      • ScroungerS Scrounger

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

        Wurden die Daten der Aufnahmen per Enigma2 Adapter ausgelesen ?

        https://forum.iobroker.net/topic/25112/test-adapter-enigma2-v1-2-x/134

        @Hermanito33
        Lies dir bitte den Thread hier durch, da wurde es mehrfacha beschrieben.
        Oder hier https://www.smarthome-tricks.de/software-iobroker/vis-material-design-widgets-teil-2-top-app-bar-navigation/

        Hermanito33H Offline
        Hermanito33H Offline
        Hermanito33
        wrote on last edited by
        #91

        @Scrounger Ah supper, soetwas habe ich gesucht. Funktioniert. Danke dir!

        1 Reply Last reply
        0
        • BostilB Offline
          BostilB Offline
          Bostil
          wrote on last edited by
          #92

          Hallo @Scrounger , hast du eine Idee, ob / wie man in deinem tollen Widget der Top App Bar die Schriftart ändern könnte? Über CSS links im Menü funktioniert es leider nicht ...

          Danke dir!

          ScroungerS 1 Reply Last reply
          0
          • BostilB Bostil

            Hallo @Scrounger , hast du eine Idee, ob / wie man in deinem tollen Widget der Top App Bar die Schriftart ändern könnte? Über CSS links im Menü funktioniert es leider nicht ...

            Danke dir!

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

            @Bostil
            3. Beitrag ff.

            BostilB 1 Reply Last reply
            0
            • ScroungerS Scrounger

              @Bostil
              3. Beitrag ff.

              BostilB Offline
              BostilB Offline
              Bostil
              wrote on last edited by
              #94

              @Scrounger Vielen Dank für die erste Hilfe!

              Habe es nun bei mir ebenfalls anhand des Beispiels als globale CSS definiert:

              .materialdesign-widget *| {
              font-family: Akrobat !important
              }

              Dennoch erscheint die Navigationsleiste noch nicht im gewünschten Font. Dieser liegt natürlich in der VIS und wird generell schon als Schriftart verwendet. Muss man im Widget selber noch eine CSS-Klasse definieren ?

              Danke euch.

              1 Reply Last reply
              0
              • etvE Offline
                etvE Offline
                etv
                wrote on last edited by
                #95

                Hallo Scrounger,

                wie kann ich die Schriftgröße im Title ändern? Es lassen sich zwar die Menüpunkte vergrößern aber der Titel nicht.....

                Liebe Grüße
                Tom

                …ist schon sehr lange begeisterter ioBroker Nutzer! 1x zu Hause und 1x auf der Alm. ioBroker ist das 'Hirn' des Smarthome und steuert HomeMatic und Shellys, loggt was so passiert, zeigt es auf Tabletts schön an und ermöglicht mir via Cloud Adapter den Fernzugriff...

                BostilB 1 Reply Last reply
                0
                • etvE etv

                  Hallo Scrounger,

                  wie kann ich die Schriftgröße im Title ändern? Es lassen sich zwar die Menüpunkte vergrößern aber der Titel nicht.....

                  Liebe Grüße
                  Tom

                  BostilB Offline
                  BostilB Offline
                  Bostil
                  wrote on last edited by
                  #96

                  @etv Habe auch noch dasselbe Problem...

                  1 Reply Last reply
                  1
                  • K Offline
                    K Offline
                    Kuddel
                    wrote on last edited by Kuddel
                    #97

                    Thema: Icons von Subitems

                    Laut Doku soll man die Icons der Subitems wie folgt eintragen:
                    660fa96f-33c0-4f27-a2de-421f6f9d4c19-grafik.png

                    Wenn ich das richtig verstehe, funktioniert das aber nur bei dem Widget
                    730c3409-3b6d-4e88-9f57-5b05c99f84a8-grafik.png

                    Wie aber stelle ich die Subitems bei dem neuere Widget ein:
                    ebe7b140-55c5-478a-9270-ecd25a64f087-grafik.png

                    Ich habe es wie folgt versucht:

                    {"itemImage": "/icons-mfd-png/edit_settings.png", "subItems": ["/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png", "/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png,"/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png"]}
                    

                    Ergebnis:
                    36153e4d-776b-4e83-8419-f9cec573f9d2-grafik.png

                    GlasfaserG 1 Reply Last reply
                    0
                    • K Kuddel

                      Thema: Icons von Subitems

                      Laut Doku soll man die Icons der Subitems wie folgt eintragen:
                      660fa96f-33c0-4f27-a2de-421f6f9d4c19-grafik.png

                      Wenn ich das richtig verstehe, funktioniert das aber nur bei dem Widget
                      730c3409-3b6d-4e88-9f57-5b05c99f84a8-grafik.png

                      Wie aber stelle ich die Subitems bei dem neuere Widget ein:
                      ebe7b140-55c5-478a-9270-ecd25a64f087-grafik.png

                      Ich habe es wie folgt versucht:

                      {"itemImage": "/icons-mfd-png/edit_settings.png", "subItems": ["/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png", "/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png,"/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png"]}
                      

                      Ergebnis:
                      36153e4d-776b-4e83-8419-f9cec573f9d2-grafik.png

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

                      @Kuddel

                      Kann gerade nicht Testen . du hast ein " vergessen

                      habe es eingefügt ... ob es daran liegt !?

                      {"itemImage": "/icons-mfd-png/edit_settings.png", "subItems": ["/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png", "/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png"]}
                      

                      Edit : es liegt am fehlenden "

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

                      K 1 Reply Last reply
                      0
                      • GlasfaserG Glasfaser

                        @Kuddel

                        Kann gerade nicht Testen . du hast ein " vergessen

                        habe es eingefügt ... ob es daran liegt !?

                        {"itemImage": "/icons-mfd-png/edit_settings.png", "subItems": ["/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png", "/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png","/vis.0/VIS_v3/Meine_Icons/Sonstige/iobroker.png"]}
                        

                        Edit : es liegt am fehlenden "

                        K Offline
                        K Offline
                        Kuddel
                        wrote on last edited by
                        #99

                        @Glasfaser jap das wars. vielen dank

                        bef70588-43ea-4a10-af25-f7f9abc6db98-grafik.png

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

                          Hi ich weiss nicht ob meine Frage hier richtig plaziert ist, wenn nicht kann ich gerne einen neuen Thread aufmachen.
                          Ich habe meine Visu auf 3 Tablets am laufen und habe für jedes Tablet einen eigenen DP für Widget8 und Top App Bar angelegt.
                          Das funktioniert auch wunderbar, nur habe ich das Problem, dass wenn ich eine Seite auf einem 2. Tablet ebenfalls öffne auf dem ersten die Seite verschwindet.
                          Ist das normal oder muss ich was einstellen damit ich auf 2 Tablets die selbe Seite geöffnet haben kann?

                          1 Reply Last reply
                          0
                          • D Offline
                            D Offline
                            dos1973
                            wrote on last edited by
                            #101

                            @Scrounger
                            ich nutze die Top AppBar Navigation erfolgreich in meinem Menü, alles funktioniert.

                            Jetzt habe ich auf einer Seite ein weiteres "view in widget8" in mein Vis eingebaut, das funktioniert auch solange bis ich die Top AppBar Navigation aufrufe. sobald ich die via Menü navigiere und danach wieder auf die Ursprungsseite zurückkomme geht das darin enthalten "view in widget8" nicht mehr, es wird nichts angezeigt. ich muss ein Reload durchführen, dann gehts wieder bis ich wieder im Menü eine Seite ändere.

                            ich habe sozusagen ein "view in widget8" in deinem "view in widget8" aus der Top AppBar

                            ich hoffe es ist einigermaßen verständlich?! ;-)
                            mache ich etwas falsch oder geht diese Kombination einfach nicht?

                            ScroungerS 1 Reply Last reply
                            -1
                            • D dos1973

                              @Scrounger
                              ich nutze die Top AppBar Navigation erfolgreich in meinem Menü, alles funktioniert.

                              Jetzt habe ich auf einer Seite ein weiteres "view in widget8" in mein Vis eingebaut, das funktioniert auch solange bis ich die Top AppBar Navigation aufrufe. sobald ich die via Menü navigiere und danach wieder auf die Ursprungsseite zurückkomme geht das darin enthalten "view in widget8" nicht mehr, es wird nichts angezeigt. ich muss ein Reload durchführen, dann gehts wieder bis ich wieder im Menü eine Seite ändere.

                              ich habe sozusagen ein "view in widget8" in deinem "view in widget8" aus der Top AppBar

                              ich hoffe es ist einigermaßen verständlich?! ;-)
                              mache ich etwas falsch oder geht diese Kombination einfach nicht?

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

                              @dos1973
                              Die TopAppBar hat kein integriertes view in widget8 mehr?
                              Kann ich leider nix zu sagen, da ich das view in widget8 noch nie mit einem weiteren view in widget8 verschachtel habe.
                              Grundsätzlich ist das view in widget8 nicht client safe, d.h. du müsstest für jedes Endgerät eine eigene Seite mit einem eigenen view in widget8 machen.

                              D S 2 Replies Last reply
                              0
                              • ScroungerS Scrounger

                                @dos1973
                                Die TopAppBar hat kein integriertes view in widget8 mehr?
                                Kann ich leider nix zu sagen, da ich das view in widget8 noch nie mit einem weiteren view in widget8 verschachtel habe.
                                Grundsätzlich ist das view in widget8 nicht client safe, d.h. du müsstest für jedes Endgerät eine eigene Seite mit einem eigenen view in widget8 machen.

                                D Offline
                                D Offline
                                dos1973
                                wrote on last edited by
                                #103

                                @Scrounger
                                ich habe mich wahrscheinlich viel zu kompliziert ausgedrückt. Sorry.
                                anders herum gefragt. i

                                Ich habe ein Widget8 welche leer anzeigt, sobald im Menü umgeschaltet wird.
                                kann ich das irgendwie nutzen oder funktioniert das Widget nicht mit Materialdesign?

                                1 Reply Last reply
                                0
                                • S Offline
                                  S Offline
                                  seppel786
                                  wrote on last edited by seppel786
                                  #104

                                  Hallo zusammen,

                                  ganz bescheidene Frage:
                                  Ich versuche in VIS ein SimpleDate bzw. SimpleClock Widget auf/über die Top App Bar einzufügen.
                                  Wenn ich mir nun die View in der Runtime anzeigen lasse, sehe ich die Widgets nicht sondern nur die Top App Bar.

                                  VIS Editor:
                                  83664730-899d-4874-b40d-85ffd1d17e35-grafik.png

                                  VIS Runtime:
                                  646e27fd-67a8-4b96-9342-e418bc4c0eb7-grafik.png

                                  Mache ich irgendwas falsch?

                                  Danke für Eure Hilfe,
                                  Seppel

                                  GlasfaserG 1 Reply Last reply
                                  0
                                  • S seppel786

                                    Hallo zusammen,

                                    ganz bescheidene Frage:
                                    Ich versuche in VIS ein SimpleDate bzw. SimpleClock Widget auf/über die Top App Bar einzufügen.
                                    Wenn ich mir nun die View in der Runtime anzeigen lasse, sehe ich die Widgets nicht sondern nur die Top App Bar.

                                    VIS Editor:
                                    83664730-899d-4874-b40d-85ffd1d17e35-grafik.png

                                    VIS Runtime:
                                    646e27fd-67a8-4b96-9342-e418bc4c0eb7-grafik.png

                                    Mache ich irgendwas falsch?

                                    Danke für Eure Hilfe,
                                    Seppel

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

                                    @seppel786

                                    Hast du die SimpleDate Widget .... im View "view in widget8 " hinterlegt !?

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

                                    S 1 Reply Last reply
                                    0
                                    • GlasfaserG Glasfaser

                                      @seppel786

                                      Hast du die SimpleDate Widget .... im View "view in widget8 " hinterlegt !?

                                      S Offline
                                      S Offline
                                      seppel786
                                      wrote on last edited by
                                      #106

                                      @Glasfaser

                                      Ahm nein...wie mache ich das? Hättest du mir vlt einen Screenshot?

                                      Danke und Gruß,
                                      Seppel

                                      GlasfaserG 1 Reply Last reply
                                      0
                                      • S seppel786

                                        @Glasfaser

                                        Ahm nein...wie mache ich das? Hättest du mir vlt einen Screenshot?

                                        Danke und Gruß,
                                        Seppel

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

                                        @seppel786

                                        ?????

                                        Du hast doch ein Hauptview als Startseite erstellt ...!!?
                                        dort ist nur das Widget Top App Bar und das view in widget8 enthalten und dort die Uhr mit einem hohen Z-index einfügen .

                                        Link Text

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

                                        S GlasfaserG 2 Replies Last reply
                                        0
                                        • GlasfaserG Glasfaser

                                          @seppel786

                                          ?????

                                          Du hast doch ein Hauptview als Startseite erstellt ...!!?
                                          dort ist nur das Widget Top App Bar und das view in widget8 enthalten und dort die Uhr mit einem hohen Z-index einfügen .

                                          Link Text

                                          S Offline
                                          S Offline
                                          seppel786
                                          wrote on last edited by
                                          #108

                                          @Glasfaser

                                          Danke...Der hohe Z-Index hat das Problem gelöst.
                                          Sry, ich habe deinen Post davor irgendwie falsch interpretiert.

                                          Gruß Seppel

                                          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

                                          322

                                          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