Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

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

NEWS

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.1k

Material Design Widgets: Top App Bar Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
412 Beiträge 74 Kommentatoren 89.0k Aufrufe 79 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • D3ltoroxpD D3ltoroxp

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

    filemanger

    Ich war zu langsam, ich hab noch nen Post über dir. Welchen File Manager meinst du ? Ich kann das nur über CSS machen ?

    liv-in-skyL Offline
    liv-in-skyL Offline
    liv-in-sky
    schrieb am zuletzt editiert von
    #390

    @d3ltoroxp

    dein beispiel bild müßte auch funktionieren

    ich meinte
    in der vis-editor heißt der Dateimanager - damit lädt man die bilder hoch

    willst du immer noch den fully launcher nutzen ? - bei mir kann ich den aufrufen, dann eine app öffnen aber ich komme nicht mehr zurück in den fully browser, nachdem ich die app genutzt habe

    nur bilder sieht so aus:

    Image 4.png

    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 Antwort Letzte Antwort
    0
    • liv-in-skyL liv-in-sky

      @d3ltoroxp

      dein beispiel bild müßte auch funktionieren

      ich meinte
      in der vis-editor heißt der Dateimanager - damit lädt man die bilder hoch

      willst du immer noch den fully launcher nutzen ? - bei mir kann ich den aufrufen, dann eine app öffnen aber ich komme nicht mehr zurück in den fully browser, nachdem ich die app genutzt habe

      nur bilder sieht so aus:

      Image 4.png

      D3ltoroxpD Online
      D3ltoroxpD Online
      D3ltoroxp
      schrieb am zuletzt editiert von
      #391

      @liv-in-sky Ich würde auch gern direkt in die App, so ist es nicht. Wusste bisher nur wie man über den Fully Launcher da rein kommt. Raus komm ich so direkt auch nicht, muss dann immer die Leiste vom Tablet hochziehen und zurück drücken oder ich ziehe das Fully Menu raus und dort auf Start Url.

      liv-in-skyL 1 Antwort Letzte Antwort
      0
      • D3ltoroxpD D3ltoroxp

        @liv-in-sky Ich würde auch gern direkt in die App, so ist es nicht. Wusste bisher nur wie man über den Fully Launcher da rein kommt. Raus komm ich so direkt auch nicht, muss dann immer die Leiste vom Tablet hochziehen und zurück drücken oder ich ziehe das Fully Menu raus und dort auf Start Url.

        liv-in-skyL Offline
        liv-in-skyL Offline
        liv-in-sky
        schrieb am zuletzt editiert von
        #392

        @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

        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 Antwort Letzte Antwort
        0
        • 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
          schrieb am zuletzt editiert von
          #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 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #397

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

                  1 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    0
                    • I Offline
                      I Offline
                      it00x32
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      0
                      • Martin BlankM Offline
                        Martin BlankM Offline
                        Martin Blank
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        0
                        • P Offline
                          P Offline
                          prorun
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            0
                            • frank2604F Offline
                              frank2604F Offline
                              frank2604
                              schrieb am zuletzt editiert von
                              #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 Antwort Letzte Antwort
                              0
                              • A Offline
                                A Offline
                                aproxxo
                                schrieb am zuletzt editiert von
                                #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 Antwort Letzte Antwort
                                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
                                  schrieb am zuletzt editiert von
                                  #405

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

                                  Gruß
                                  Oliver

                                  A 1 Antwort Letzte Antwort
                                  0
                                  • O Oli

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

                                    A Offline
                                    A Offline
                                    aproxxo
                                    schrieb am zuletzt editiert von
                                    #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 Antwort Letzte Antwort
                                    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
                                      schrieb am zuletzt editiert von
                                      #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 Antwort Letzte Antwort
                                      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
                                        schrieb am zuletzt editiert von
                                        #408

                                        @sigi234 oh okay vielen Dank.

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

                                        1 Antwort Letzte Antwort
                                        0
                                        • A Offline
                                          A Offline
                                          aproxxo
                                          schrieb am zuletzt editiert von
                                          #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 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          908

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe