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.
    • Damrak2022
      Damrak2022 @liv-in-sky last edited by

      @liv-in-sky Ich habe nochmal ganz neu angefangen, da ich befürchte das ich zuviel verstellt habe.
      Also Top App Bar ist da und das view in widget 8
      Ich habe erstmal nur 3 Views angelegt, weil ich denke das ich das später noch erweitern kann
      Nun möchte ich unter dem Menüpunkt "Beleuchtung" 6 Untermenüs für meine vorhandenen Räume einbinden. Das geht aber wenn ich das richtig verstanden habe nur noch per "json" was mich trotz der Dokumentation völlig überfordert.
      Bildschirmfoto 2022-02-15 um 08.25.36.png

      Dann verwiirt mich immer noch die Übersicht Seite auf der ja auch ein View in Widget 8 vorhanden ist. Wenn ich unter den später anzulegenden Views meiner Räume die Beleuchtung einbinde, wird die dann auch auf der Übersichtsseite angezeigt? Ich hoffe, Ihr wißt was ich meine.

      Aber zuerst öchte ich einmal die funktionierende Navigation hinbekommen und dann das Ganze vorsichtig erweitern.

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

        @damrak2022 nee - ganz verstehe ich nicht

        du hast eine view - deine hauptview oder übersichtsview - darin ist normalerweise (um es einfach zu halten - das app menu widget links oben und das view 8 widget ist über die ganze seite gezogen (von der größe her).

        wählst du etwas im menu aus, wird die ausgewählte view in das view 8 widget "gespiegelt". dein browser ist also immer auf der hauptseite (hauptview)

        es gibt 2 nachteile:

        • auf jedem gerät (pc, tablet, handy) wird die hauptview geöffnet. egal im welchen gerät du dir eine bestimmte view durch das app menu widget ansiehst, werden auf allen anderen geräten die selbe seite angezeigt. du schaust dir auf dem pc die beleuchtungsview der küche an - dann wird auch auf dem tablet im wohnzimmer, die küchenbeleuchtung angezeigt

        • durch die nutzung des json's für untermenus ist das spätere einfügen von neuen views etwas aufwendig, denn jeder eintrag im json ist ja eine weitere view. dadurch stimmt die reihenfolge im view 8 widget nicht mehr und muss angepasst werden.

        mehr: siehe chat

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

          @liv-in-sky Habe Dir gerade im Chat geantwotet

          1 Reply Last reply Reply Quote 1
          • D3ltoroxp
            D3ltoroxp @D3ltoroxp last edited by

            @d3ltoroxp said in Material Design Widgets: Top App Bar Widget:

            Gibt es eine Möglichkeit, das hier

            fully://launcher
            

            mit in die App Bar zu packen, sprich als Menu Punkt z.B. Apps und wenn ich drauf klick, öffnet sich der App Launcher von Fully ? Ich versuche das grad irgendwie ein zu bauen, aber will nicht.

            Hier einer eine Idee, wie ich das sonst lösen könnte ? Ich hätte das irgendwie gern mit als Menu Punkt.

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

              @d3ltoroxp damit ein menu punkt einen befeh ausführen könnte, müßte das wohl im widget programmiert werden - vermute ich mal

              was aber geht:

              der button kann auch anders gemacht werden - das er zum layout paßt

              Animation (10).gif

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

                @liv-in-sky Hm das sieht auch nicht schlecht aus. Hättest du mir da den Code dazu ? Oder machst du das über Sichtbar ? Wenn ich das Menu öffne, das der Button sichtbar wird ?
                Und wie hast du die Icons da bekommen oder ist das dann einfach die Fully Launch Seite ?

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

                  @d3ltoroxp

                  hier kannst du jeden beliebigen html code eintragem - also einen buttton oder ein bild

                  Image 7.png

                  z.b

                  <br>
                  
                  <style>
                  .button-73 {
                   appearance: none;
                   background-color: #FFFFFF;
                   border-radius: 40em;
                   border-style: none;
                   box-shadow: #ADCFFF 0 -12px 6px inset;
                   box-sizing: border-box;
                   color: #000000;
                   cursor: pointer;
                   display: inline-block;
                   font-family: -apple-system,sans-serif;
                   font-size: 1.2rem;
                   font-weight: 700;
                   letter-spacing: -.24px;
                   margin: 0;
                   outline: none;
                   padding: 1rem 1.3rem;
                   quotes: auto;
                   text-align: center;
                   text-decoration: none;
                   transition: all .15s;
                   user-select: none;
                   -webkit-user-select: none;
                   touch-action: manipulation;
                  }
                  
                  .button-73:hover {
                   background-color: #FFC229;
                   box-shadow: #FF6314 0 -6px 8px inset;
                   transform: scale(1.125);
                  }
                  
                  .button-73:active {
                   transform: scale(1.025);
                  }
                  
                  @media (min-width: 768px) {
                   .button-73 {
                     font-size: 1.5rem;
                     padding: .75rem 2rem;
                   }
                  }   
                     
                     
                  </style>
                  <button class="button-73" role="button">Button 73</button>
                  

                  dann dieses script im script tab im vis editor

                  setTimeout(function() {   
                  $(".button-73").on('click', function(event){
                    console.log("click")
                    window.location.href = "fully://launcher"
                   /*  window.location.href   = "https://www.fully-kiosk.com/samples/universal-launcher.html"*/
                    
                  });
                  }, 5000);
                  

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

                    @d3ltoroxp

                    was du auch machen kannst - finde ich besser - wenn man fully browser nutzt

                    mit diesen einträgen steuerst du den startapplication dp in den objecten und öffnest direkt die app -ohne den fully launcher

                    Image 1.png

                    auch das kann durch css schöner gemacht werden

                    <br>
                    
                    <span class="mdc-list-item mdc-ripple-upgraded" onclick="vis.setValue('fullybrowser.0.192_168_178_44.Commands.startApplication', 'com.rhmsoft.fm.hd')">FILE MANAGER</span>
                    
                    <span class="mdc-list-item mdc-ripple-upgraded" onclick="vis.setValue('fullybrowser.0.192_168_178_44.Commands.startApplication', 'com.google.android.youtube')">YOUTUBE</span>
                    
                    <br>
                    

                    um den aufruf zu finden : zb. com.google.android.youtube gehst du in das setting des fully launcher im fully browser und wählst deine app aus - danach steht dieser pfad im setting des fully launchers

                    D3ltoroxp 1 Reply Last reply Reply Quote 1
                    • 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
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            876
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            74
                                            412
                                            68464
                                            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