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.
  • 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 Offline
    O Offline
    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
                        • 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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          408

                                          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