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
    16
    1
    1.8k

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

  • 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.0k 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.
  • liv-in-skyL liv-in-sky

    @d3ltoroxp

    <br>
    <span  onclick="vis.setValue('fullybrowser.0.192_168_178_44.Commands.startApplication', 'com.google.android.youtube')"><img src="/vis.0/armin/img/Werkzeug.gif" width="30px" height="30px"></span>
    <span  onclick="vis.setValue('fullybrowser.0.192_168_178_44.Commands.startApplication', 'com.google.android.youtube')"><img src="/vis.0/armin/img/cyberghost-sicher_1.jpg" width="30px" height="30px"></span>
    <span  onclick="vis.setValue('fullybrowser.0.192_168_178_44.Commands.startApplication', 'com.google.android.youtube')"><img src="/vis.0/armin/img/iconfinder_youtube_834723.png" width="30px" height="30px"></span>
    
    

    das kopierst du in das app menu widget

    du musst nur die dp des fully adapters angleichen, die apps eingeben und die bilder angleichen

    funktioniert aber nur mit einem tablet - bei unterschiedlichen tablets wird es um einiges komplizierter

    D3ltoroxpD Online
    D3ltoroxpD Online
    D3ltoroxp
    wrote on last edited by
    #393

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

    fullybrowser.0.192_168_178_44.Commands.startApplication', 'com.google.android.youtube

    Kann ich auch nur mit diesem Teil arbeiten ?

    fullybrowser.0.192_168_178_44.Commands.startApplication', 'com.google.android.youtube
    

    Das ganze im html Widget z.b. ? Ich würde dann gern eine eigene view machen, in der ich dann Icons oder Grafiken hinterlege und da drüber dann das html widget und beim klicken öffnet sich die app.

    Mit http: Adressen klappt das wunderbar, es wird direkt aus der Vis raus die Seite geöffnet.

    Im Menu habe ich da leider nicht viel Platz um dort in der TopApp Bar die Icons zu platzieren.

    liv-in-skyL 1 Reply Last reply
    0
    • D3ltoroxpD D3ltoroxp

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

      fullybrowser.0.192_168_178_44.Commands.startApplication', 'com.google.android.youtube

      Kann ich auch nur mit diesem Teil arbeiten ?

      fullybrowser.0.192_168_178_44.Commands.startApplication', 'com.google.android.youtube
      

      Das ganze im html Widget z.b. ? Ich würde dann gern eine eigene view machen, in der ich dann Icons oder Grafiken hinterlege und da drüber dann das html widget und beim klicken öffnet sich die app.

      Mit http: Adressen klappt das wunderbar, es wird direkt aus der Vis raus die Seite geöffnet.

      Im Menu habe ich da leider nicht viel Platz um dort in der TopApp Bar die Icons zu platzieren.

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

      @d3ltoroxp

      du kannst irgendein widget nehmen, das dir den dp mit dem richtigen inhalt setzt

      z.b material design oder inventwo widgets können einen text in einen dp schreiben

      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

      D3ltoroxpD 1 Reply Last reply
      0
      • liv-in-skyL liv-in-sky

        @d3ltoroxp

        du kannst irgendein widget nehmen, das dir den dp mit dem richtigen inhalt setzt

        z.b material design oder inventwo widgets können einen text in einen dp schreiben

        D3ltoroxpD Online
        D3ltoroxpD Online
        D3ltoroxp
        wrote on last edited by
        #395

        @liv-in-sky Sorry irgendwie stehe ich auf dem Schlauch, in welchen DP soll ich was schreiben ? Das war ja jetzt alles html und css integriert in die TopAppBar... Ich dachte das wird halt direkt an den Fully geschickt und eben auf dem Tablet ausgeführt.

        liv-in-skyL 1 Reply Last reply
        0
        • D3ltoroxpD D3ltoroxp

          @liv-in-sky Sorry irgendwie stehe ich auf dem Schlauch, in welchen DP soll ich was schreiben ? Das war ja jetzt alles html und css integriert in die TopAppBar... Ich dachte das wird halt direkt an den Fully geschickt und eben auf dem Tablet ausgeführt.

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

          @d3ltoroxp

          nee - ich habe versucht auch andere apps direkt zu öffnen - hat leider nicht geklappt

          fullybrowser.0.192_168_178_44.Commands.startApplication 
          

          ist ein dp des fully browser adapters - dort wird die app gestartet

          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

          D3ltoroxpD 1 Reply Last reply
          1
          • liv-in-skyL liv-in-sky

            @d3ltoroxp

            nee - ich habe versucht auch andere apps direkt zu öffnen - hat leider nicht geklappt

            fullybrowser.0.192_168_178_44.Commands.startApplication 
            

            ist ein dp des fully browser adapters - dort wird die app gestartet

            D3ltoroxpD Online
            D3ltoroxpD Online
            D3ltoroxp
            wrote on last edited by
            #397

            @liv-in-sky Klappt nun wunderbar wie gewünscht. Vielen Dank !!!

            1 Reply Last reply
            1
            • Chris TailorC Chris Tailor

              Das letzte "Problem", was ich mit der Top App Bar habe ist die Höhe der Menüpunkte. Kann man diese unabhängig von der Grösse des Symbols definieren? Mit den Chrome Entwickler Tools konnte ich die Höhe ohne Probleme manipulieren:
              3eaddab7-99d8-4163-bf06-9cf16114cb8a-image.png

              <div class="mdc-list-item mdc-ripple-upgraded" tabindex="-1" id="listItem_3" style="height: 120px !important;" data-value=""><span class="mdi mdi-train materialdesign-icon-image mdc-list-item__graphic" style="width: 20px !important;; height: 20px !important;; font-size: 20px !important;; color: #ffffff; padding-top: 8px; padding-bottom: 8px;;"></span><span class="mdc-list-item__text mdc-typography--headline5" id="listItem_3" style="width: 100%; text-align: left; ">
                                                      SBB
                                              </span></div>
              

              Global über einen CSS Eintrag habe ich das nicht hinbekommen, bzw. die Höhe ändert sich nicht:

              .mdc-list-item .mdc-ripple-upgraded { 
                  height: 120px !important;
              }
              

              Jemand eine Idee?

              DickenD Offline
              DickenD Offline
              Dicken
              wrote on last edited by
              #398

              @chris-tailor said in Material Design Widgets: Top App Bar Widget:

              Das letzte "Problem", was ich mit der Top App Bar habe ist die Höhe der Menüpunkte. Kann man diese unabhängig von der Grösse des Symbols definieren? Mit den Chrome Entwickler Tools konnte ich die Höhe ohne Probleme manipulieren:
              3eaddab7-99d8-4163-bf06-9cf16114cb8a-image.png

              <div class="mdc-list-item mdc-ripple-upgraded" tabindex="-1" id="listItem_3" style="height: 120px !important;" data-value=""><span class="mdi mdi-train materialdesign-icon-image mdc-list-item__graphic" style="width: 20px !important;; height: 20px !important;; font-size: 20px !important;; color: #ffffff; padding-top: 8px; padding-bottom: 8px;;"></span><span class="mdc-list-item__text mdc-typography--headline5" id="listItem_3" style="width: 100%; text-align: left; ">
                                                      SBB
                                              </span></div>
              

              Global über einen CSS Eintrag habe ich das nicht hinbekommen, bzw. die Höhe ändert sich nicht:

              .mdc-list-item .mdc-ripple-upgraded { 
                  height: 120px !important;
              }
              

              Jemand eine Idee?

              Hey, ich weiß das der Beitrag hier schon uralt ist, aber hab in dem Thread hier keine Antwort dazu gefunden.
              Habe das selbe Problem und würde die Höhe auch gern ändern, hat da jemand ne Möglichkeit für mich?

              1 Reply Last reply
              0
              • I Offline
                I Offline
                it00x32
                wrote on last edited by
                #399

                Höhe von Top Titel

                ich steh etwas auf der Leitung. Wie kann ich das Fenster des Kopfzeilentext kleiner machen (schwarze Box wo Titel und Subtitel drinnen steht, Nav ist Permanent)?

                Der CSS Eintrag .mdc-top-app-bar__row giltet ja nur für die Leiste neben dem Menü

                Bildschirmfoto 2022-04-11 um 10.52.04.png

                Danke

                1 Reply Last reply
                0
                • Martin BlankM Offline
                  Martin BlankM Offline
                  Martin Blank
                  wrote on last edited by
                  #400

                  Guten Abend zusammen.

                  ist es in der neuen Version irgendwie möglich ein 2 Faches Untermenü zu machen?
                  Bsp.:

                  • EG
                    • Küche
                    • Wohnzimmer
                      - Licht
                      - Rolladen
                      - usw.
                    • Büro

                  Wäre dankbar für Tipps.

                  1 Reply Last reply
                  0
                  • P Offline
                    P Offline
                    prorun
                    wrote on last edited by
                    #401

                    Hallo Zusammen,

                    ich würde gerne meine Top App Bar auf eine Höhe von 30px verkleinern. Also ungefähr halb so groß wie die dense-Variante die man über das Layout einstellen kann.

                    Bei einer höhe von nur 30px müsste jedoch auch der Menu-button (Navigation icon) entsprechend kleiner werden. Gibt es eine Möglichkeit das umzusetzen.

                    Hintergrund: vis wird auf einem iPhone 13 Mini dargestellt und da verschlingt selbst die dense-Variante viel zu viel Platz.

                    Vielen Dank schon mal vorab!

                    T 1 Reply Last reply
                    0
                    • P prorun

                      Hallo Zusammen,

                      ich würde gerne meine Top App Bar auf eine Höhe von 30px verkleinern. Also ungefähr halb so groß wie die dense-Variante die man über das Layout einstellen kann.

                      Bei einer höhe von nur 30px müsste jedoch auch der Menu-button (Navigation icon) entsprechend kleiner werden. Gibt es eine Möglichkeit das umzusetzen.

                      Hintergrund: vis wird auf einem iPhone 13 Mini dargestellt und da verschlingt selbst die dense-Variante viel zu viel Platz.

                      Vielen Dank schon mal vorab!

                      T Offline
                      T Offline
                      Trikolon
                      wrote on last edited by
                      #402

                      Hallo zusammen,
                      ich würde gerne die TopBar im Strandart verwenden und in dem "blauen" Bereich der TopBar, also rechts Neben dem Namen des MenuItems ein paar Infos anzeigen lassen. Leider scrollen dies mit nach oben, wenn ich scrolle:
                      Soll Zustand der beiden weißen Zahlen oben rechts:
                      49ae10d8-f459-4dc9-9f2c-39a64598721c-image.png

                      Nach etwas Scrollen nach unten:
                      163010b1-351a-4161-a4e2-974a0deb61ee-image.png

                      Wie kann ich die Zahlen denn persistent in der Position machen?

                      Danke und Gruß
                      Ben

                      1 Reply Last reply
                      0
                      • frank2604F Offline
                        frank2604F Offline
                        frank2604
                        wrote on last edited by
                        #403

                        Hier kurz mein Workaround für den Github-Issue #212 "Top Bar App: Objekt ID wird ab Element 9 wieder auf 0 gesetzt"

                        Ich verwende zwei Datenpunkte:

                        2023-01-22_09-25-00.jpg

                        und ein Skript:

                        2023-01-22_09-24-15.jpg

                        Datenpunkt in Top App Bar:

                        2023-01-22_09-26-15.jpg

                        Datenpunkt in View in Widget8:

                        2023-01-22_09-26-40.jpg

                        Intel NUC8 i3, Proxmox, VM Ubuntu, ioBroker
                        Philips HUE, Homematic CCU3, Zigbee, Yamaha MusicCast, Vorwerk ...

                        1 Reply Last reply
                        0
                        • A Offline
                          A Offline
                          aproxxo
                          wrote on last edited by
                          #404

                          Guten Tag,
                          ich bin noch ganz neu in ioBroker.
                          Ich würde gerne mit dem Menü anfangen. Leider wird mir das gar nicht angezeigt. Nur in der Runtime. Finde leider nicht die Lösung.
                          Und wie machen die Profis die Auflösung. Schön wäre es, wenn es sich an die Geräte anpassen würde.
                          Vielen Dank

                          b054594d-629a-44ed-825b-aec7e383a210-Bildschirmfoto 2025-04-19 um 09.22.28.png Bildschirmfoto 2025-04-19 um 09.22.28

                          O 1 Reply Last reply
                          0
                          • A aproxxo

                            Guten Tag,
                            ich bin noch ganz neu in ioBroker.
                            Ich würde gerne mit dem Menü anfangen. Leider wird mir das gar nicht angezeigt. Nur in der Runtime. Finde leider nicht die Lösung.
                            Und wie machen die Profis die Auflösung. Schön wäre es, wenn es sich an die Geräte anpassen würde.
                            Vielen Dank

                            b054594d-629a-44ed-825b-aec7e383a210-Bildschirmfoto 2025-04-19 um 09.22.28.png Bildschirmfoto 2025-04-19 um 09.22.28

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

                            @aproxxo
                            Benutzt du VIS 1, oder VIS 2? In der VIS 2 funktionieren die Widgets nicht

                            Gruß
                            Oliver

                            A 1 Reply Last reply
                            0
                            • O Oli

                              @aproxxo
                              Benutzt du VIS 1, oder VIS 2? In der VIS 2 funktionieren die Widgets nicht

                              A Offline
                              A Offline
                              aproxxo
                              wrote on last edited by
                              #406

                              @oli ich benutze die Vis2.
                              Ach dann gibt es auch ein Sinn. Mir wird das Widget nur im Runtime angezeigt.

                              Welchen Möglichkeiten würdest du mir vorschlagen? Ich würde gerne ein Menü haben das sich aufklappt. Und dann zusätzlich noch ein Untermenü.

                              sigi234S 1 Reply Last reply
                              0
                              • A aproxxo

                                @oli ich benutze die Vis2.
                                Ach dann gibt es auch ein Sinn. Mir wird das Widget nur im Runtime angezeigt.

                                Welchen Möglichkeiten würdest du mir vorschlagen? Ich würde gerne ein Menü haben das sich aufklappt. Und dann zusätzlich noch ein Untermenü.

                                sigi234S Online
                                sigi234S Online
                                sigi234
                                Forum Testing Most Active
                                wrote on last edited by
                                #407

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

                                Welchen Möglichkeiten würdest du mir vorschlagen? Ich würde gerne ein Menü haben das sich aufklappt. Und dann zusätzlich noch ein Untermenü.

                                https://github.com/ioBroker/ioBroker.vis-2/issues/253

                                Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                Immer Daten sichern!

                                A 1 Reply Last reply
                                0
                                • sigi234S sigi234

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

                                  Welchen Möglichkeiten würdest du mir vorschlagen? Ich würde gerne ein Menü haben das sich aufklappt. Und dann zusätzlich noch ein Untermenü.

                                  https://github.com/ioBroker/ioBroker.vis-2/issues/253

                                  A Offline
                                  A Offline
                                  aproxxo
                                  wrote on last edited by
                                  #408

                                  @sigi234 oh okay vielen Dank.

                                  Gibt es dann eine alternative zu diesem Widget? Wie machen das hier die Profis denn?

                                  1 Reply Last reply
                                  0
                                  • A Offline
                                    A Offline
                                    aproxxo
                                    wrote on last edited by
                                    #409

                                    Leider werden mir nicht mal die Basis Widgets im Editor angezeigt. Ich glaube ich habe ein ganz anderes Problem.

                                    55d9cbfb-0be6-4275-b00f-8b6ff7e756e4-Bildschirmfoto 2025-04-19 um 10.45.41.png Bildschirmfoto 2025-04-19 um 10.45.41

                                    sigi234S 1 Reply Last reply
                                    0
                                    • A aproxxo

                                      Leider werden mir nicht mal die Basis Widgets im Editor angezeigt. Ich glaube ich habe ein ganz anderes Problem.

                                      55d9cbfb-0be6-4275-b00f-8b6ff7e756e4-Bildschirmfoto 2025-04-19 um 10.45.41.png Bildschirmfoto 2025-04-19 um 10.45.41

                                      sigi234S Online
                                      sigi234S Online
                                      sigi234
                                      Forum Testing Most Active
                                      wrote on last edited by sigi234
                                      #410

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

                                      Leider werden mir nicht mal die Basis Widgets im Editor angezeigt. Ich glaube ich habe ein ganz anderes Problem.

                                      VIS2 Version?

                                      Screenshot (1156).png

                                      Schon mal einen upload vis-2 gemacht?

                                      Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                      Immer Daten sichern!

                                      1 Reply Last reply
                                      0
                                      • A Offline
                                        A Offline
                                        aproxxo
                                        wrote on last edited by
                                        #411

                                        @sigi234 ich hab die Lösung.
                                        Habe auf Beta umgestellt und jetzt wird alles angezeigt. Danke!

                                        K 1 Reply Last reply
                                        0
                                        • A aproxxo

                                          @sigi234 ich hab die Lösung.
                                          Habe auf Beta umgestellt und jetzt wird alles angezeigt. Danke!

                                          K Offline
                                          K Offline
                                          Kippe
                                          wrote on last edited by Kippe
                                          #412

                                          Hallo
                                          Ich habe das Problem, das ich auf meinem Tablett unter Fully die Materaldesign Bar nich nach unten scrollen kann. Auf dem Pc mit dem Chrom Brouser geht es auch nicht. Was mache ich da Falsch?

                                          IMG_0632.jpeg

                                          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

                                          716

                                          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