Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Material Design Widgets: Masonry Views 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: Masonry Views Widget

    This topic has been deleted. Only users with topic management privileges can see it.
    • Scrounger
      Scrounger Developer @brain last edited by

      @brain
      Was ist genau das Problem, abgeschnitten oder das du nicht scollen kannst.
      Ich schätze du nutzt das Masnory Widget im view in widget 8?
      Falls ja musst du beim Masnory Widget overflow-y auf auto stellen, dann geht das scrollen. Schau dir das Online Beispiel an, das ist der Fall genau so umgesetzt.

      B 1 Reply Last reply Reply Quote 1
      • B
        brain @Scrounger last edited by

        @Scrounger Vielen Dank. Genau das wars!

        1 Reply Last reply Reply Quote 0
        • M
          Mottimuc last edited by Mottimuc

          Hallo @Scrounger,

          vielleicht mal was für die nächste Version zum überlegen. Wenn man die Views aufgebaut hat und später einem einfällt, dass man die Sortierung anders haben möchte, muss man entweder im Code rumfriemeln oder im VIS-Edit jede Menge klicks durchführen (wenn ich richtig annehme...).

          Wäre es ggf möglich nen Index je View einzubauen, der die Position angibt? Den könnte man bequem im Nachgang anpassen?

          Scrounger 2 Replies Last reply Reply Quote 0
          • Scrounger
            Scrounger Developer @Mottimuc last edited by

            @Mottimuc sagte in Material Design Widgets: Masonry Views Widget:

            Hallo @Scrounger,

            vielleicht mal was für die nächste Version zum überlegen. Wenn man die Views aufgebaut hat und später einem einfällt, dass man die Sortierung anders haben möchte, muss man entweder im Code rumfriemeln oder im VIS-Edit jede Menge klicks durchführen (wenn ich richtig annehme...).

            Wäre es ggf möglich nen Index je View einzubauen, der die Position angibt? Den könnte man bequem im Nachgang anpassen?

            Die Idee hatte ich auch schon und bin bereits am grübeln wie man das Umsetzen könnte.
            Schreib doch bitte mal ein Issue auf git, damit ich es nicht vergesse.

            1 Reply Last reply Reply Quote 0
            • Scrounger
              Scrounger Developer @Mottimuc last edited by

              @Mottimuc sagte in Material Design Widgets: Masonry Views Widget:

              Wäre es ggf möglich nen Index je View einzubauen, der die Position angibt? Den könnte man bequem im Nachgang anpassen?

              Hab ich eingebaut, wenn du testen willst aktuellen master von git ziehen, oder warten bis zur nächsten latest version

              1 Reply Last reply Reply Quote 1
              • O
                Oli @Scrounger last edited by

                @Scrounger

                wie kann ich verhindern, dass beim zusammenschieben der Vis, sich einzelne Komponenten überschneiden?

                Kann ich im Masonry Views Widget eine Mindestbreite pro Spalte hinterlegen?

                71a0655c-3ac0-4699-96b0-ff7b16eed458-image.png

                Scrounger 1 Reply Last reply Reply Quote 0
                • Scrounger
                  Scrounger Developer @Oli last edited by

                  @Oli
                  musst bei allen Komponenten mit relativer breite arbeiten

                  O 1 Reply Last reply Reply Quote 0
                  • O
                    Oli @Scrounger last edited by

                    @Scrounger

                    danke für die schnelle Antwort, sind das feste Prozentzahlen, oder muss ich mir das berechnen?

                    Scrounger 1 Reply Last reply Reply Quote 0
                    • Scrounger
                      Scrounger Developer @Oli last edited by Scrounger

                      @Oli
                      Das kann man nicht pauschal beantworten. Je nachdem was du haben willst.

                      Verwendest du nur prozent, dann wächst das Element natürlich um so breiter der screen wird.
                      Mit calc kannst du z.B. das Element gleich groß lassen, aber die position abhängig von der breite des screens machen. usw...

                      Einfach mal damit rumspielen, dann bekommst den dreh mit der Zeit raus.
                      Zusätzlich kannst dir auch das Online Beispiel anschauen, da hab ich das bei einiggen Beispielen so umgsetzt

                      O 1 Reply Last reply Reply Quote 0
                      • O
                        Oli @Scrounger last edited by

                        @Scrounger

                        ich wollte mir gerade dein Online Beispiel ansehen, leider wird es nicht aufgerufen.

                        1 Reply Last reply Reply Quote 0
                        • F
                          Fatmax last edited by

                          Bin gerade dabei meine VIS mit Material Design Widgets neu zu gestalten.
                          Bis jetzt funktioniert es einwandfrei, Danke dafür an @Scrounger für die Arbeit.

                          Ich habe nun mit den Masonry-Views herumprobiert, bekomme es aber nicht hin, dass auf meinem Samsung Galaxy Tab 10.1 der View korekt angezeigt wird.
                          Das Tablet hat eine Auflösung von 1280 x 800 px und der View wird mit Fully Kiosk-Browser im Querformat dargestellt.

                          Hier die Ansicht am Desktop PC unter Google Chrome -> dies Größe des gesamten Views im Google Chrome ist 1280px, der Rest des Fensters im Google Chome ist frei:

                          vis-masonry-views-NOK.jpg

                          -> Die Anzeige schaut so aus wie sie soll.

                          Hier die Ansicht am Tablet im Fully Kiosk Browser:

                          vis-masonry-views-NOK.jpg

                          -> die einzelnen Views werden untereinander dargestellt, was nicht gewünscht ist.

                          Hier die VIS-Einstellungen:

                          vis-masonry-views-Einstellungen.jpg

                          Was kann es hier haben?
                          Ich finde den Fehler nicht.

                          Scrounger 1 Reply Last reply Reply Quote 0
                          • Scrounger
                            Scrounger Developer @Fatmax last edited by

                            @Fatmax
                            Width und height unter allgemein muss einen relativen Wert haben und keinen absoluten.
                            Nimm hier bei beiden 100% dann wird auf dem destop und tablet die volle breite verwendet und ist responsiv

                            Schau dir am besten dazu das online Beispiel an:
                            https://github.com/Scrounger/ioBroker.vis-materialdesign#online-example-project

                            1 Reply Last reply Reply Quote 0
                            • F
                              Fatmax last edited by

                              Hat leider auch nicht funktioniert.
                              Habe auch die Einstellungen aus dem Beispiel 1:1 übernommen, ebenfalls der selbe Fehler.
                              Keine Ahnung woran es liegt.

                              Ich mache jetzt das Design nur mit "View in Widget" für das Tablet.
                              Ein responsive Design für das Mobiltelefon brauche ich nicht.

                              Scrounger 1 Reply Last reply Reply Quote 0
                              • Scrounger
                                Scrounger Developer @Fatmax last edited by

                                @Fatmax
                                Max Mal nen Export von dem Widget oder noch besser exportier dein Projekt, damit ich die eingebundenen Views sehe.
                                Das muss funktionieren

                                P 1 Reply Last reply Reply Quote 0
                                • P
                                  PatrickFro @Scrounger last edited by PatrickFro

                                  @Scrounger Gibt es eine Möglichkeit das Mansonry-Widget für phantomjs "sichtbar" zu machen? Ich muss mir monatlich mehrere Bilder einer View zusenden, für die ich Mansonry nutze. Nur leider erscheint eine leere Seite. Erstelle ich das Bild per phantomjs von einer der darin genutzten Views, funktioniert es.

                                  Ich hoffe es gibt eine Lösung, hab eine Woche an der Seite gebastelt. Es gibt dann sicherlich auch nen Kaffee 😉

                                  Scrounger 1 Reply Last reply Reply Quote 0
                                  • Scrounger
                                    Scrounger Developer @PatrickFro last edited by

                                    @PatrickFro
                                    Ich versteh überhaupt nicht was du machen willst und wofür die phantonjs sein soll.

                                    Bei Bilder nimm htlm oder Image Widget Pack das in ne View und dann die View ins masonry.

                                    P 1 Reply Last reply Reply Quote 0
                                    • P
                                      PatrickFro @Scrounger last edited by

                                      @Scrounger Hoffentlich wird es nun etwas klarer. Ich habe eine VIS von der ich von einem View regelmäßig ein Bild erstellen muss und mir zusende. Um ein .jpg von meiner View erstellen zu können nutze ich den phantomjs-Adapter.

                                      Die View, die ich "abfotographiere, ist folgende:
                                      d88010e5-ec15-49a3-b320-17bf5a0c7022-image.png

                                      Diese ist mit dem Mansonry-Widget erstellt. Wird von phantomjs ein Bild erstellt, ist dies leider nur weiß. Erstelle ich von einem anderen View meiner VIS mit phantomjs ein Bild, funktioniert es.

                                      Besser verständlich?

                                      Scrounger 1 Reply Last reply Reply Quote 0
                                      • Scrounger
                                        Scrounger Developer @PatrickFro last edited by

                                        @PatrickFro
                                        Ja jetzt hab ich verstanden was du machen möchtest.
                                        Hab mal grad das phantomjs überflogen. Hast du versucht den timeout (wartezeit) bis der ein Bild macht zu erhöhen?
                                        Das Masonry Widget braucht nen bissle bis es vollständig geladen ist.

                                        P 1 Reply Last reply Reply Quote 0
                                        • P
                                          PatrickFro @Scrounger last edited by

                                          @Scrounger Selbst mit sehr hohem Timeout (500.000 ms oder 8,3 Minuten) bekomme ich ein weißes Bild zurück.

                                          Scrounger 1 Reply Last reply Reply Quote 0
                                          • Scrounger
                                            Scrounger Developer @PatrickFro last edited by

                                            @PatrickFro
                                            Mhhh....
                                            Bitte erklär mir mal wie du das ganze umgesetzt hast, also wie du phantomjs lib (vorallem welche npm lib) du eingebunden hast und wie du das ganze dann ausführst - js skript?

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            528
                                            Online

                                            31.7k
                                            Users

                                            79.9k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            18
                                            53
                                            5343
                                            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