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: Masonry Views Widget

NEWS

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

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

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

Material Design Widgets: Masonry Views Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
53 Beiträge 18 Kommentatoren 6.7k Aufrufe 24 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.
  • B brain

    @Scrounger Ich glaube nicht, dass das ein Bug ist, der zu einem speziellen Widget gehört. Deswegen poste ich hier.
    Die Anzeige der einzelnen Views wird bei mir auf dem Handy abgeschnitten:
    b31fd8a4-35c4-49ce-a4e7-e56e0523227c-grafik.png
    Hat jemand eine Idee an was das liegt und vielleicht einen Lösungsvorschlag? Ich habe das "view in widget 8" widget im Verdacht, bin mir aber nicht sicher. Scrollen durch die komplette Ansicht funktioniert bei mir nur im View zum Adapterstatus: https://forum.iobroker.net/topic/30662/material-design-widgets-skript-status

    ScroungerS Offline
    ScroungerS Offline
    Scrounger
    Developer
    schrieb am zuletzt editiert von
    #14

    @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 Antwort Letzte Antwort
    1
    • ScroungerS Scrounger

      @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 Offline
      B Offline
      brain
      schrieb am zuletzt editiert von
      #15

      @Scrounger Vielen Dank. Genau das wars!

      1 Antwort Letzte Antwort
      0
      • M Offline
        M Offline
        Mottimuc
        schrieb am zuletzt editiert von Mottimuc
        #16

        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?

        Viele Grüße
        Michael

        ScroungerS 2 Antworten Letzte Antwort
        0
        • M 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?

          ScroungerS Offline
          ScroungerS Offline
          Scrounger
          Developer
          schrieb am zuletzt editiert von
          #17

          @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 Antwort Letzte Antwort
          0
          • M 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?

            ScroungerS Offline
            ScroungerS Offline
            Scrounger
            Developer
            schrieb am zuletzt editiert von
            #18

            @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 Antwort Letzte Antwort
            1
            • ScroungerS Scrounger

              Masonry View Widget

              masnory.gif

              Sämtliche Fragen zu Einstellungen (VIS Editor, Bedienung, JSON strings, etc.) des Widgets hier stellen

              Das ist sicher besser für die Übersichtlichkeit und Dokumentation.

              • Dokumentation
              • Online Beispiel

              Themen zu anderen Widgets findest du hier!

              O Online
              O Online
              Oli
              schrieb am zuletzt editiert von
              #19

              @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

              Gruß
              Oliver

              ScroungerS 1 Antwort Letzte Antwort
              0
              • O Oli

                @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

                ScroungerS Offline
                ScroungerS Offline
                Scrounger
                Developer
                schrieb am zuletzt editiert von
                #20

                @Oli
                musst bei allen Komponenten mit relativer breite arbeiten

                O 1 Antwort Letzte Antwort
                0
                • ScroungerS Scrounger

                  @Oli
                  musst bei allen Komponenten mit relativer breite arbeiten

                  O Online
                  O Online
                  Oli
                  schrieb am zuletzt editiert von
                  #21

                  @Scrounger

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

                  Gruß
                  Oliver

                  ScroungerS 1 Antwort Letzte Antwort
                  0
                  • O Oli

                    @Scrounger

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

                    ScroungerS Offline
                    ScroungerS Offline
                    Scrounger
                    Developer
                    schrieb am zuletzt editiert von Scrounger
                    #22

                    @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 Antwort Letzte Antwort
                    0
                    • ScroungerS 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 Online
                      O Online
                      Oli
                      schrieb am zuletzt editiert von
                      #23

                      @Scrounger

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

                      Gruß
                      Oliver

                      1 Antwort Letzte Antwort
                      0
                      • F Offline
                        F Offline
                        Fatmax
                        schrieb am zuletzt editiert von
                        #24

                        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.

                        Liebe Grüße,
                        Fatmax

                        ScroungerS 1 Antwort Letzte Antwort
                        0
                        • F Fatmax

                          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.

                          ScroungerS Offline
                          ScroungerS Offline
                          Scrounger
                          Developer
                          schrieb am zuletzt editiert von
                          #25

                          @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 Antwort Letzte Antwort
                          0
                          • F Offline
                            F Offline
                            Fatmax
                            schrieb am zuletzt editiert von
                            #26

                            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.

                            Liebe Grüße,
                            Fatmax

                            ScroungerS 1 Antwort Letzte Antwort
                            0
                            • F Fatmax

                              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.

                              ScroungerS Offline
                              ScroungerS Offline
                              Scrounger
                              Developer
                              schrieb am zuletzt editiert von
                              #27

                              @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 Antwort Letzte Antwort
                              0
                              • ScroungerS Scrounger

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

                                P Offline
                                P Offline
                                PatrickFro
                                schrieb am zuletzt editiert von PatrickFro
                                #28

                                @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 ;-)

                                ScroungerS 1 Antwort Letzte Antwort
                                0
                                • P 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 ;-)

                                  ScroungerS Offline
                                  ScroungerS Offline
                                  Scrounger
                                  Developer
                                  schrieb am zuletzt editiert von
                                  #29

                                  @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 Antwort Letzte Antwort
                                  0
                                  • ScroungerS Scrounger

                                    @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 Offline
                                    P Offline
                                    PatrickFro
                                    schrieb am zuletzt editiert von
                                    #30

                                    @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?

                                    ScroungerS 1 Antwort Letzte Antwort
                                    0
                                    • P PatrickFro

                                      @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?

                                      ScroungerS Offline
                                      ScroungerS Offline
                                      Scrounger
                                      Developer
                                      schrieb am zuletzt editiert von
                                      #31

                                      @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 Antwort Letzte Antwort
                                      0
                                      • ScroungerS Scrounger

                                        @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 Offline
                                        P Offline
                                        PatrickFro
                                        schrieb am zuletzt editiert von
                                        #32

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

                                        ScroungerS 1 Antwort Letzte Antwort
                                        0
                                        • P PatrickFro

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

                                          ScroungerS Offline
                                          ScroungerS Offline
                                          Scrounger
                                          Developer
                                          schrieb am zuletzt editiert von
                                          #33

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

                                          619

                                          Online

                                          32.5k

                                          Benutzer

                                          81.6k

                                          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