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
    922

  • 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.1k 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.
  • O Oli

    @Scrounger

    wenn ich den Z-Index in der Top App Bar und im View im Widget 8 lösche, ist die Top App Bar hinterm View im Widget 8, oder habe ich dich falsch verstanden?

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

    @Oli
    Deshlab musst du ja auch wie im zweiten Screenshot zu sehen ist, z-index für die TopAppBar einstellen.

    O 1 Reply Last reply
    0
    • ScroungerS Scrounger

      @Oli
      Deshlab musst du ja auch wie im zweiten Screenshot zu sehen ist, z-index für die TopAppBar einstellen.

      O Online
      O Online
      Oli
      wrote on last edited by
      #8

      @Scrounger

      das habe ich auch gemacht

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

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

      Gruß
      Oliver

      ScroungerS C 2 Replies 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

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

        @Oli
        Dann hast noch irgendwo z-indizies die höher sind.

        1 Reply Last reply
        0
        • Stephan SchleichS Offline
          Stephan SchleichS Offline
          Stephan Schleich
          wrote on last edited by Stephan Schleich
          #10

          Ich habe ein Problem mit der Top App Bar in Kombi mit dem View 8.

          ich leg in der Top Bar App eine Menü mit Subitems an ({"itemText": "Bus / Bahn", "subItems": ["Bus", "Bahn"]}) und weise diese danach im View 8 dementsprechend zu, jedoch bleibt die View immer leer.
          Weiß jemand warum?

          App Bar:
          4cf778d7-81c0-42ac-ba30-d59d664429a4-image.png

          View8:
          47b95db0-6e00-48fa-825d-aca2a81a0abc-image.png

          ScroungerS 1 Reply Last reply
          0
          • Stephan SchleichS Stephan Schleich

            Ich habe ein Problem mit der Top App Bar in Kombi mit dem View 8.

            ich leg in der Top Bar App eine Menü mit Subitems an ({"itemText": "Bus / Bahn", "subItems": ["Bus", "Bahn"]}) und weise diese danach im View 8 dementsprechend zu, jedoch bleibt die View immer leer.
            Weiß jemand warum?

            App Bar:
            4cf778d7-81c0-42ac-ba30-d59d664429a4-image.png

            View8:
            47b95db0-6e00-48fa-825d-aca2a81a0abc-image.png

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

            @Stephan-Schleich
            Ist beiden widgets die gleiche Objekt ID eingetragen? Der Datenpunkt muss vom Typ Numbers sein.

            Stephan SchleichS 1 Reply Last reply
            0
            • ScroungerS Scrounger

              @Stephan-Schleich
              Ist beiden widgets die gleiche Objekt ID eingetragen? Der Datenpunkt muss vom Typ Numbers sein.

              Stephan SchleichS Offline
              Stephan SchleichS Offline
              Stephan Schleich
              wrote on last edited by Stephan Schleich
              #12

              @Scrounger "Gleiche ID" ist nur für Testzwecke, unterschiedliche wurden auch getestet.
              Datenpunkt sollte auch passen, sonst würden die anderen Navi Punkte nicht gehen, oder wird für Submenüs ein eigener DP benötigt, dann liegt dort der Fehler und ich hab das übersehen?

              Der Datenpunkt bekommt auch den richtigen Wert, nur die View wird nicht gezeigt.

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

                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.

                K M 2 Replies Last reply
                0
                • Stephan SchleichS Offline
                  Stephan SchleichS Offline
                  Stephan Schleich
                  wrote on last edited by
                  #14

                  @Kuddel klappen bei dir die Submenü links?

                  K 1 Reply Last reply
                  0
                  • Stephan SchleichS Stephan Schleich

                    @Kuddel klappen bei dir die Submenü links?

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

                    @Stephan-Schleich was meinst du mit klappen ?

                    Ob die Navigation funktioniert ? Ja in Verbindung mit dem "View in Widget 8" Widget

                    Stephan SchleichS 1 Reply Last reply
                    0
                    • K Kuddel

                      @Stephan-Schleich was meinst du mit klappen ?

                      Ob die Navigation funktioniert ? Ja in Verbindung mit dem "View in Widget 8" Widget

                      Stephan SchleichS Offline
                      Stephan SchleichS Offline
                      Stephan Schleich
                      wrote on last edited by
                      #16

                      @Kuddel Ob sich das Submenü in der View verlinken lässt, da dies bei mir stetzt ohne Funktion bleibt trotz Verlinkung (Post über dir). Bin langsam echt ratlos.

                      K 1 Reply Last reply
                      0
                      • Stephan SchleichS Stephan Schleich

                        @Kuddel Ob sich das Submenü in der View verlinken lässt, da dies bei mir stetzt ohne Funktion bleibt trotz Verlinkung (Post über dir). Bin langsam echt ratlos.

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

                        @Stephan-Schleich ja bei mir funtionieren die Untermenüs wie sie sollen

                        1 Reply Last reply
                        0
                        • M Offline
                          M Offline
                          mctom
                          wrote on last edited by mctom
                          #18

                          Hallo zusammen,

                          ich versuche gerade auf das Menü in meine neuen Views einzubauen.
                          Leider bekomme ich das Menü nicht auf 100%.

                          So sieht es aktuelle aus:
                          2020-02-14 15_03_56-Window.png

                          Hier meine Einstellungen dazu:
                          2020-02-14 15_01_16-Window.png

                          Woran kann dies liegen? Was kann ich noch probieren ?

                          Gruß

                          Michael


                          Lösung: 15.02.2020
                          Habe es gefunden. Wenn ich bei den Standard Einstellungen des Widgets auf 100% gehe funktioniert es.

                          1 Reply Last reply
                          0
                          • Stephan SchleichS Offline
                            Stephan SchleichS Offline
                            Stephan Schleich
                            wrote on last edited by Stephan Schleich
                            #19

                            delete me

                            1 Reply Last reply
                            0
                            • 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.

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

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

                              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.

                              @Scrounger was sagt der Experte ? Möchte ungern das neue Menü erstllen und dann feststellen, dass ich die Seiten auf dem Tablet nicht mehr steuern kann.

                              ScroungerS 1 Reply Last reply
                              0
                              • K Kuddel

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

                                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.

                                @Scrounger was sagt der Experte ? Möchte ungern das neue Menü erstllen und dann feststellen, dass ich die Seiten auf dem Tablet nicht mehr steuern kann.

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

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

                                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.

                                Geht nicht, müssen manuell zugeklappt 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.

                                @Scrounger was sagt der Experte ? Möchte ungern das neue Menü erstllen und dann feststellen, dass ich die Seiten auf dem Tablet nicht mehr steuern kann.

                                Ich versteh die Frage nicht. Wieso sollte die Steuerung auf dem Tablet nicht mehr funktionieren?
                                Falls du damit meinst, dass du für Desktop und Tablet verschiedene Views erstellt hast, gibt es zwei möglichkeiten. Je für Desktop und Tablet verschiedene Startseiten erstellen mit TopAppBar + View in Widget 8. Alternativ kannst auch das Masnory oder Grid Widget verwenden, damit kann man ein responsiv layout erstellen - also ein Layout für Dekstop Handy und Tablet.

                                K 1 Reply Last reply
                                0
                                • ScroungerS Scrounger

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

                                  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.

                                  Geht nicht, müssen manuell zugeklappt 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.

                                  @Scrounger was sagt der Experte ? Möchte ungern das neue Menü erstllen und dann feststellen, dass ich die Seiten auf dem Tablet nicht mehr steuern kann.

                                  Ich versteh die Frage nicht. Wieso sollte die Steuerung auf dem Tablet nicht mehr funktionieren?
                                  Falls du damit meinst, dass du für Desktop und Tablet verschiedene Views erstellt hast, gibt es zwei möglichkeiten. Je für Desktop und Tablet verschiedene Startseiten erstellen mit TopAppBar + View in Widget 8. Alternativ kannst auch das Masnory oder Grid Widget verwenden, damit kann man ein responsiv layout erstellen - also ein Layout für Dekstop Handy und Tablet.

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

                                  @Scrounger das mit dem Zuklappen ist nicht schlimm.

                                  Ist das evtl. noch geplant ?

                                  Zu meiner Frage mit der Tablet Steuerung:

                                  Link zur Startseite in meiner jetzigen VIS: http://192.168.4.30:8082/vis/index.html?VIS#100_Startseite
                                  Link zur Startseite in meiner neuen VIS: http://192.168.4.30:8082/vis/index.html?VIS_Neu#100_Startseite

                                  Jetzt registriet ein BWM draußen eine Bewegung. Per Fully Kiosk Brwoser sage ich meinem Tablte, dass er auf folgende Seite wechseln soll:

                                  http://192.168.4.30:8082/vis/index.html?VIS#470_Kameras

                                  Wenn ich in meiner neuen VIS die Seiten wechsle, ändert sich aber leider nie der link. Das liegt wohl iwie am View in Widget 8.

                                  Somit weiß ich jetzt nicht, wie ich in der neuen VIS auf dem Tablet die Seite ändern soll, wenn eine Bedingung eintritt.

                                  Ich hoffe das war jetzt einigermapen versetändlich.

                                  ScroungerS 1 Reply Last reply
                                  0
                                  • K Kuddel

                                    @Scrounger das mit dem Zuklappen ist nicht schlimm.

                                    Ist das evtl. noch geplant ?

                                    Zu meiner Frage mit der Tablet Steuerung:

                                    Link zur Startseite in meiner jetzigen VIS: http://192.168.4.30:8082/vis/index.html?VIS#100_Startseite
                                    Link zur Startseite in meiner neuen VIS: http://192.168.4.30:8082/vis/index.html?VIS_Neu#100_Startseite

                                    Jetzt registriet ein BWM draußen eine Bewegung. Per Fully Kiosk Brwoser sage ich meinem Tablte, dass er auf folgende Seite wechseln soll:

                                    http://192.168.4.30:8082/vis/index.html?VIS#470_Kameras

                                    Wenn ich in meiner neuen VIS die Seiten wechsle, ändert sich aber leider nie der link. Das liegt wohl iwie am View in Widget 8.

                                    Somit weiß ich jetzt nicht, wie ich in der neuen VIS auf dem Tablet die Seite ändern soll, wenn eine Bedingung eintritt.

                                    Ich hoffe das war jetzt einigermapen versetändlich.

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

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

                                    Jetzt registriet ein BWM draußen eine Bewegung. Per Fully Kiosk Brwoser sage ich meinem Tablte, dass er auf folgende Seite wechseln soll:

                                    http://192.168.4.30:8082/vis/index.html?VIS#470_Kameras

                                    Grundsätzlich geht das schon. Nachteil allerdings ist, dass du die 'Zurück' Taste deines Browser verwenden musst um wieder zur View mit der TopAppBar zur gelangen.

                                    Ich würde an deiner Stelle mit dem Simple API Adapter den Datenpunkt der TopAppBar und View in Widget 8 auf die Nummer der View zu deiner Cam setzen. Also wenn du z.B. die View mit der Cam auf Position 5 hast, setzt du per Simple API (http Befehl, siehe Doku des Adapters) den Datenpunkt auf den Wert 5. Dann schaltet die View in Widget 8 auf die View an Position 5 und die TopAppBar ist nach wie vor sichtbar.

                                    K 1 Reply Last reply
                                    0
                                    • ScroungerS Scrounger

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

                                      Jetzt registriet ein BWM draußen eine Bewegung. Per Fully Kiosk Brwoser sage ich meinem Tablte, dass er auf folgende Seite wechseln soll:

                                      http://192.168.4.30:8082/vis/index.html?VIS#470_Kameras

                                      Grundsätzlich geht das schon. Nachteil allerdings ist, dass du die 'Zurück' Taste deines Browser verwenden musst um wieder zur View mit der TopAppBar zur gelangen.

                                      Ich würde an deiner Stelle mit dem Simple API Adapter den Datenpunkt der TopAppBar und View in Widget 8 auf die Nummer der View zu deiner Cam setzen. Also wenn du z.B. die View mit der Cam auf Position 5 hast, setzt du per Simple API (http Befehl, siehe Doku des Adapters) den Datenpunkt auf den Wert 5. Dann schaltet die View in Widget 8 auf die View an Position 5 und die TopAppBar ist nach wie vor sichtbar.

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

                                      @Scrounger den simple API Adapter verwende ich bereits.

                                      werde ich mir mal anschauen.

                                      vielen Dank

                                      EDIT: Wo genau finde ich den DP den ich schalten muss ?

                                      ScroungerS 1 Reply Last reply
                                      0
                                      • K Kuddel

                                        @Scrounger den simple API Adapter verwende ich bereits.

                                        werde ich mir mal anschauen.

                                        vielen Dank

                                        EDIT: Wo genau finde ich den DP den ich schalten muss ?

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

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

                                        EDIT: Wo genau finde ich den DP den ich schalten muss ?

                                        Na den den du bei der Objekt Id der TopAppBar und View in Widget 8 eingetragen hast. Sonst würde die kombi ja nicht gehen ;-)

                                        K 1 Reply Last reply
                                        0
                                        • ScroungerS Scrounger

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

                                          EDIT: Wo genau finde ich den DP den ich schalten muss ?

                                          Na den den du bei der Objekt Id der TopAppBar und View in Widget 8 eingetragen hast. Sonst würde die kombi ja nicht gehen ;-)

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

                                          @Scrounger entweder stehe ich gerade voll auf dem Schlauch, oder ich habe einen Fehler gemacht.

                                          Bei der TopAppBar unter Allgemein/Schalter habe ich auf jeden Fall nichts hinterlegt.

                                          N 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

                                          729

                                          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