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.6k

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.
  • 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
        • ScroungerS Scrounger

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

          @Scrounger Sehr gerne.

          Seit 2 Tagen Intel NUC i5 mit Debian Buster. Neue IoBroker-Installation. Dies zuerst zu den Grundlagen.

          phantomjs-Adapter gestern installiert. Wie kann ich denn die lib abfragen? Bin leider nicht geübt bei Linux...

          JS:

          function Kopfschmerzdruck () {
              sendTo('phantomjs.0', 'send', {
                  url: 'http://192.168.178.77:8082/vis/index.html?Hauptview#Kopfschmerzen_O',
                  output: 'Auswertung2.png',
                  width: 1300,
                  height: 1000,
                 renderTime: 20000,
                 online: true
              }, function (result) {
                  console.log(result.error + ' ' + result.output);
              });
          }
           
          Kopfschmerzdruck();
          
          1 Antwort Letzte Antwort
          0
          • M Offline
            M Offline
            MaikB85
            schrieb am zuletzt editiert von
            #35

            Hi,

            @Scrounger erstmal Danke für die tolle Arbeit!

            ich bin gerade dabei meine vis komplett umzubauen auf die Material Design Widgets.
            Eine Sache bekomme ich gerade nicht so hin, wie ich es gerne hätte (weiß auch nicht ob es so ohne weiteres möglich ist)
            Ich möchte das Verlaufsdiagramm gerne so haben, dass es sich immer über 2 Spalten erstreckt. Sollte dann aus Platzgründen nur eine Spalte zur verfügung sein, soll es ausgeblendet werden.
            Hab schon Probiert, die anderen Cards, wie im Beispielprojekt, prozentual zu verkleinern, aber dann entstehen teilweise so unschöne Lücken zwischen den Cards, obwohl diese dann auch breiter sein könnten.

            Hast du da eine Lösung für mich?

            Alle Cards 100% Breite:
            Bild Text

            Alle Cards 49.5% Breite und Diagramm 100%:
            Bild Text
            Bild Text
            Bei 2 Spalten sieht es erstmal okay aus, aber bei 3 nicht mehr...

            M 1 Antwort Letzte Antwort
            0
            • M MaikB85

              Hi,

              @Scrounger erstmal Danke für die tolle Arbeit!

              ich bin gerade dabei meine vis komplett umzubauen auf die Material Design Widgets.
              Eine Sache bekomme ich gerade nicht so hin, wie ich es gerne hätte (weiß auch nicht ob es so ohne weiteres möglich ist)
              Ich möchte das Verlaufsdiagramm gerne so haben, dass es sich immer über 2 Spalten erstreckt. Sollte dann aus Platzgründen nur eine Spalte zur verfügung sein, soll es ausgeblendet werden.
              Hab schon Probiert, die anderen Cards, wie im Beispielprojekt, prozentual zu verkleinern, aber dann entstehen teilweise so unschöne Lücken zwischen den Cards, obwohl diese dann auch breiter sein könnten.

              Hast du da eine Lösung für mich?

              Alle Cards 100% Breite:
              Bild Text

              Alle Cards 49.5% Breite und Diagramm 100%:
              Bild Text
              Bild Text
              Bei 2 Spalten sieht es erstmal okay aus, aber bei 3 nicht mehr...

              M Offline
              M Offline
              MaikB85
              schrieb am zuletzt editiert von
              #36

              Also das mit den Lücken hab ich hinbekommen mit den richtigen Einstellungen. Nur leider habe ich dann auf dem Smartphone immer eine Spalte mit 2 Cards nebeneinander. Also mit der Einstellung 49% Breite wird das so nix

              M 1 Antwort Letzte Antwort
              0
              • M MaikB85

                Also das mit den Lücken hab ich hinbekommen mit den richtigen Einstellungen. Nur leider habe ich dann auf dem Smartphone immer eine Spalte mit 2 Cards nebeneinander. Also mit der Einstellung 49% Breite wird das so nix

                M Offline
                M Offline
                micklafisch
                schrieb am zuletzt editiert von
                #37

                @MaikB85
                Hast du den Auflösungsassistent mal angehakt und nachgesehen ob das Masonry Widget deine Smartphone Auflösung richtig erkennt? Ich hatte den Fehler, dass das iphone im Portraitmodus nicht korrekt war, ich habe die Auflösung dann entsprechend im Widget eingetragen, dann sah es besser aus:

                0b7645da-674d-4989-b714-db963f87d8bd-grafik.png

                1 Antwort Letzte Antwort
                0
                • M Offline
                  M Offline
                  MaikB85
                  schrieb am zuletzt editiert von
                  #38

                  Der Auflösungsassistent will nicht so richtig bei mir

                  Bild Text

                  Der Text ist scheinbar weiß und ich weiß nicht wo ich ihn ändern kann.

                  btw grundsätzlich ist das schon in Ordnung so. Lücken habe ich weg und die Cards werden auch gut sortiert, aber das Diagramm ist mir so zu schmal. würde das gerne über 2 Spalten gestreckt haben.

                  auf dem iPhone möchte ich im Portrait modus ja nur eine Spalte haben. Die hab ich ja auch. Nur wenn ich die Cards alle auf 49% schrumpfe, damit das Diagramm "über 2 Spalten" geht, habe ich das Problem, dass halt auch 2 Cards pro Spalte angezeigt werden. Da sollte aber aus Platzgründen besser nur eine Card pro Zeile angezeigt werden.
                  Schwierig zu erklären...

                  M 1 Antwort Letzte Antwort
                  0
                  • M MaikB85

                    Der Auflösungsassistent will nicht so richtig bei mir

                    Bild Text

                    Der Text ist scheinbar weiß und ich weiß nicht wo ich ihn ändern kann.

                    btw grundsätzlich ist das schon in Ordnung so. Lücken habe ich weg und die Cards werden auch gut sortiert, aber das Diagramm ist mir so zu schmal. würde das gerne über 2 Spalten gestreckt haben.

                    auf dem iPhone möchte ich im Portrait modus ja nur eine Spalte haben. Die hab ich ja auch. Nur wenn ich die Cards alle auf 49% schrumpfe, damit das Diagramm "über 2 Spalten" geht, habe ich das Problem, dass halt auch 2 Cards pro Spalte angezeigt werden. Da sollte aber aus Platzgründen besser nur eine Card pro Zeile angezeigt werden.
                    Schwierig zu erklären...

                    M Offline
                    M Offline
                    micklafisch
                    schrieb am zuletzt editiert von
                    #39

                    @MaikB85
                    achso, glaub jetzt habe ich es verstanden.

                    Ich hätte da nur folgenden Ansatz:
                    Bei den Cards die dann nicht auf 49% "geschrumpft" sein sollen, kannst du in der Bedingung noch "sichtbar wenn Auflösung größer als" mitgeben. Dann werden die Cards mit 49% entsprechend nur angezeigt wenn es die Auflösung ermöglicht. Dann weitere Views in das Masonry View hinzufügen in dem die entsprechenden Cards nicht auf 49% geschrumpft sind und dort ebenfalls eine Auflösungsbedingung hinterlegen. Somit wird entweder oder angezeigt.

                    1 Antwort Letzte Antwort
                    0
                    • M Offline
                      M Offline
                      MaikB85
                      schrieb am zuletzt editiert von
                      #40

                      Gute Idee, dass könnte ich mal probieren!

                      1 Antwort Letzte Antwort
                      0
                      • M Offline
                        M Offline
                        MaikB85
                        schrieb am zuletzt editiert von
                        #41

                        "sichtbar wenn Auflösung größer als"

                        Wonach richtet sich dieser Wert?

                        M 1 Antwort Letzte Antwort
                        0
                        • M MaikB85

                          "sichtbar wenn Auflösung größer als"

                          Wonach richtet sich dieser Wert?

                          M Offline
                          M Offline
                          micklafisch
                          schrieb am zuletzt editiert von
                          #42

                          @MaikB85
                          ich hatte mal zum testen des Masonry View folgendes:
                          1 View mit größer als 375 und 1 View mit kleiner als 376. Somit wurde beim iPhone im Portraitformat bei 375px Anzeigebreite das entsprechende View angezeigt. Beim rotieren in Landscape dann entsprechend das andere.

                          1 Antwort Letzte Antwort
                          0
                          • M Offline
                            M Offline
                            MaikB85
                            schrieb am zuletzt editiert von
                            #43

                            Klappt bei mir irgendwie nicht. Vielleicht liegt's auch an Safari. Bei den Charts funktioniert da auch was nicht richtig.
                            Egal. Werde einfach 2 separate Views erstellen. Einmal für iPhone und einmal für Tablet/PC

                            1 Antwort Letzte Antwort
                            0
                            • B Offline
                              B Offline
                              BobBruni
                              schrieb am zuletzt editiert von
                              #44

                              Ich habe beim Masonry View Widget 4 Spalten eignstellt. Kann mir jemand erklären, warum nur 3 Spalten + Zwischenraum dargestellt werden?
                              a85dcd4a-0185-4c95-b50e-e859fc3187bf-image.png

                              Wenn ich 3 bzw. 5 Spalten einstelle, passt die Darstellung!?
                              35c3ffc5-e8be-41ed-b09b-a90150b1fe89-image.png
                              bf2d8873-7819-479a-9b15-bad107f546d3-image.png

                              1 Antwort Letzte Antwort
                              0
                              • T Offline
                                T Offline
                                Termina
                                schrieb am zuletzt editiert von
                                #45

                                Hi zusammen,

                                meine bisher genutzten Tablets haben die Android interne Auflösung von 960x600 px. Nun habe ich mir den Echo Show geholt und dieser hat 1280x800 px. Da sehen die Views natürlich sehr klein aus. Damit ich nun nicht extra doppelte Views in unterschiedlichen Projekten synchron halten muss, erhoffe ich mir eine andere Lösung. Wäre dieses Widget eine Möglichkeit? Bei meinen Tests zeigt er zwar die angegebenen Views an, jedoch überlagert er diese. Kann da jemand etwas zu sagen, ob oder wie ich da recht smart zu einem Ziel kommen kann?

                                BastelritiusB 1 Antwort Letzte Antwort
                                0
                                • T Termina

                                  Hi zusammen,

                                  meine bisher genutzten Tablets haben die Android interne Auflösung von 960x600 px. Nun habe ich mir den Echo Show geholt und dieser hat 1280x800 px. Da sehen die Views natürlich sehr klein aus. Damit ich nun nicht extra doppelte Views in unterschiedlichen Projekten synchron halten muss, erhoffe ich mir eine andere Lösung. Wäre dieses Widget eine Möglichkeit? Bei meinen Tests zeigt er zwar die angegebenen Views an, jedoch überlagert er diese. Kann da jemand etwas zu sagen, ob oder wie ich da recht smart zu einem Ziel kommen kann?

                                  BastelritiusB Offline
                                  BastelritiusB Offline
                                  Bastelritius
                                  schrieb am zuletzt editiert von
                                  #46

                                  Hallo,

                                  ich versuche mich gerade in das Material Design einzuarbeiten und würde gern den Masonry view nutzen. Ich blicke leider momentan noch gar nicht durch. Leider funktionieren seit Tagen auch die Links nicht zu den Beispielprojekten. Kann evtl. mal jemand sein Projekt als Zip zur Verfügung stellen. Oder gibt es evtl. die Online Beispielprojekte als Zip zum Importieren. Dann könnte ich mir das mal in einem bestehendem Projekt anschauen. Das würde vieles einfacher machen.

                                  Danke

                                  BastelritiusB 1 Antwort Letzte Antwort
                                  0
                                  • BastelritiusB Bastelritius

                                    Hallo,

                                    ich versuche mich gerade in das Material Design einzuarbeiten und würde gern den Masonry view nutzen. Ich blicke leider momentan noch gar nicht durch. Leider funktionieren seit Tagen auch die Links nicht zu den Beispielprojekten. Kann evtl. mal jemand sein Projekt als Zip zur Verfügung stellen. Oder gibt es evtl. die Online Beispielprojekte als Zip zum Importieren. Dann könnte ich mir das mal in einem bestehendem Projekt anschauen. Das würde vieles einfacher machen.

                                    Danke

                                    BastelritiusB Offline
                                    BastelritiusB Offline
                                    Bastelritius
                                    schrieb am zuletzt editiert von
                                    #47

                                    Hallo,

                                    ich habe mich nun etwas durchgebissen und spiele mit dem Masonry view rum.
                                    Bisher hat es so funktioniert wie ich es mir gedacht habe. Ich stehe aber nun vor folgendem Problem. ich habe ein view der eine mindestbreite besitzt der breiter ist als meine Auflösung auf dem Handy. D.h. der view müsste also auf dem Handy scrollbar sein. Das ist er aber nicht. In den Containern habe ich 100% width und Overflow auf auto. Trotzdem sehe ich dann im Masonry view keinen scroll-Balken. Kann mir da jemand weiter helfen. Was mache ich falsch. Im unteren view " Rollos automatik" kommen weiter rechts noch Elemente, die ich aber nicht sehen kann.

                                    Anbei das Projekt als Eport:
                                    2020-11-11-Material Design_1 test.zip

                                    Ein Bild vom Handy:
                                    Screenshot_20201111_213154_com.android.chrome.jpg

                                    ScroungerS 1 Antwort Letzte Antwort
                                    0
                                    • BastelritiusB Offline
                                      BastelritiusB Offline
                                      Bastelritius
                                      schrieb am zuletzt editiert von
                                      #48

                                      Hat denn hier niemand eine Idee? Ich würde mich über einen Tipp wirklich sehr freuen.

                                      1 Antwort Letzte Antwort
                                      0
                                      • BastelritiusB Bastelritius

                                        Hallo,

                                        ich habe mich nun etwas durchgebissen und spiele mit dem Masonry view rum.
                                        Bisher hat es so funktioniert wie ich es mir gedacht habe. Ich stehe aber nun vor folgendem Problem. ich habe ein view der eine mindestbreite besitzt der breiter ist als meine Auflösung auf dem Handy. D.h. der view müsste also auf dem Handy scrollbar sein. Das ist er aber nicht. In den Containern habe ich 100% width und Overflow auf auto. Trotzdem sehe ich dann im Masonry view keinen scroll-Balken. Kann mir da jemand weiter helfen. Was mache ich falsch. Im unteren view " Rollos automatik" kommen weiter rechts noch Elemente, die ich aber nicht sehen kann.

                                        Anbei das Projekt als Eport:
                                        2020-11-11-Material Design_1 test.zip

                                        Ein Bild vom Handy:
                                        Screenshot_20201111_213154_com.android.chrome.jpg

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

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

                                        Hallo,

                                        ich habe mich nun etwas durchgebissen und spiele mit dem Masonry view rum.
                                        Bisher hat es so funktioniert wie ich es mir gedacht habe. Ich stehe aber nun vor folgendem Problem. ich habe ein view der eine mindestbreite besitzt der breiter ist als meine Auflösung auf dem Handy. D.h. der view müsste also auf dem Handy scrollbar sein. Das ist er aber nicht. In den Containern habe ich 100% width und Overflow auf auto. Trotzdem sehe ich dann im Masonry view keinen scroll-Balken. Kann mir da jemand weiter helfen. Was mache ich falsch. Im unteren view " Rollos automatik" kommen weiter rechts noch Elemente, die ich aber nicht sehen kann.

                                        Die Scrollbar müsste eigentlich angezeigt werden, geht zumindest bei mir.
                                        Ich würde das aber anders lösen, weil dieses scrollen nicht wirklich responsiv ist. Folgende zwei Möglichkeiten gibt es z.B.

                                        1. variable width für die input widgets verwenden, nachteil die werden dann automatisch gestaucht bzw. vergrößert

                                        2. du verwendest das table widget (mit style card background) mit den inputs als controls. das table widget verwendest du dann im masnory. Vorteil du kannst das Table so einstellen, das die inputs eine feste größe haben. Somit kannst du dann nur innerhalb dieser card scrollen.

                                        1 Antwort Letzte Antwort
                                        0
                                        • M Offline
                                          M Offline
                                          Martin1982
                                          schrieb am zuletzt editiert von
                                          #50

                                          Hallo,

                                          ich versuche gerade (sowohl mit dem Masonry wie mit der Grid View) folgendes ungewöhnliches Verhalten zu erzeugen und bekomme es leider nicht hin. Hat da eventuell jemand einen Tipp für mich?

                                          Ich möchte Zwei Reihen von Karten (jeweils mit einer festen Höhe) anzeigen und diese einzeln horizontal scrollen können. Dafür verwende ich zwei Grids und jedes Grid soll eigentlich nur eine Reihe mit beliebig vielen Views anzeigen. Aber ich bekomme es nicht hin, dass die Views nebeneinander angezeigt werden und diese dann in der X-Achse scrollbar sind, es wird immer ein Zeilenumbruch erzeugt.

                                          Mir ist bewusst, dass die Views dafür eigentlich nicht gedacht sind, aber hatte gehofft das sie es trotzdem können. Hat jemand sowas schon mal gemacht und kann mir einen Tipp geben? Eventuell auch ein anderes View?

                                          Zum Hintergrund: Im Flur haben wir ein kleines 7" Display quer hängen. Auf der "Home" Seite würde ich gerne in der ersten Reihe große Karten anzeigen lassen die auch bedient werden können und in der unteren Reihe sollen Info Karten stehen (z.B. 2 Fenster offen) die dann ein Dialog öffnen in dem man sehen kann welche Fenster es sind.

                                          Gruß
                                          Martin

                                          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

                                          811

                                          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