Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: Top App Bar Widget

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Material Design Widgets: Top App Bar Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • D3ltoroxp
      D3ltoroxp @liv-in-sky last edited by D3ltoroxp

      @liv-in-sky Das heißt ich könnte mir auch eine neue view erstellen und dort Images und einen Link drüber legen ?

      Das man das einfach hier einbaut ?

      d22ea740-e552-45c3-a031-07df873d496c-grafik.png

      liv-in-sky 1 Reply Last reply Reply Quote 0
      • liv-in-sky
        liv-in-sky @D3ltoroxp last edited by

        @d3ltoroxp ja du kannst aber direkt ein bild als link machen

        https://www.html-seminar.de/bild-verlinken.htm

        das bild legst du über den filemanger in die vis
        in einem img tag kannst du auch die größe des bildes festlegen

        z.b.

        <span  onclick="vis.setValue('fullybrowser.0.192_168_178_44.Commands.startApplication', 'com.google.android.youtube')"><img src="/vis.0/armin/img/youtube.gif" width="30px" height="30px"></span>
        
        D3ltoroxp 1 Reply Last reply Reply Quote 0
        • D3ltoroxp
          D3ltoroxp @liv-in-sky last edited by

          @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-sky 1 Reply Last reply Reply Quote 0
          • liv-in-sky
            liv-in-sky @D3ltoroxp last edited by

            @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

            D3ltoroxp 1 Reply Last reply Reply Quote 0
            • D3ltoroxp
              D3ltoroxp @liv-in-sky last edited by

              @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-sky 1 Reply Last reply Reply Quote 0
              • liv-in-sky
                liv-in-sky @D3ltoroxp last edited by

                @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

                D3ltoroxp 1 Reply Last reply Reply Quote 0
                • D3ltoroxp
                  D3ltoroxp @liv-in-sky last edited by

                  @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-sky 1 Reply Last reply Reply Quote 0
                  • liv-in-sky
                    liv-in-sky @D3ltoroxp last edited by

                    @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

                    D3ltoroxp 1 Reply Last reply Reply Quote 0
                    • D3ltoroxp
                      D3ltoroxp @liv-in-sky last edited by

                      @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-sky 1 Reply Last reply Reply Quote 0
                      • liv-in-sky
                        liv-in-sky @D3ltoroxp last edited by

                        @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

                        D3ltoroxp 1 Reply Last reply Reply Quote 1
                        • D3ltoroxp
                          D3ltoroxp @liv-in-sky last edited by

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

                          1 Reply Last reply Reply Quote 1
                          • Dicken
                            Dicken @Chris Tailor last edited by

                            @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 Reply Quote 0
                            • I
                              it00x32 last edited by

                              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 Reply Quote 0
                              • Martin Blank
                                Martin Blank last edited by

                                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 Reply Quote 0
                                • P
                                  prorun last edited by

                                  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 Reply Quote 0
                                  • T
                                    Trikolon @prorun last edited by

                                    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 Reply Quote 0
                                    • frank2604
                                      frank2604 last edited by

                                      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

                                      1 Reply Last reply Reply Quote 0
                                      • A
                                        aproxxo last edited by

                                        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 Reply Quote 0
                                        • O
                                          Oli @aproxxo last edited by

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

                                          A 1 Reply Last reply Reply Quote 0
                                          • A
                                            aproxxo @Oli last edited by

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

                                            sigi234 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            423
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            74
                                            412
                                            67039
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo