Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Visualisierung Next Gen. VIS-2 responsive geht wie?

    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

    Visualisierung Next Gen. VIS-2 responsive geht wie?

    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      MarkusK @wendy2702 last edited by

      @wendy2702 Vergessen: Links oben im Widget findet sich ein "Umbruch"-Symbol. Ist dies rot, so wird in der linken Spalte neu begonnen. Auch sind die Gruppierungen (rechte Maustaste bei mehrfach ausgewählten Widgets) wichtig geworden. So lassen sich logisch zusammenhängene Widgets auch zusammen halten und rutschen nicht in verschiedene Spalten.

      1 Reply Last reply Reply Quote 0
      • wendy2702
        wendy2702 @MarkusK last edited by wendy2702

        @markusk sagte in Visualisierung Next Gen. VIS-2 responsive geht wie?:

        Unter "Optionen" die Seitengröße auf "Nicht definiert" einstellen.

        Gemacht.

        @markusk sagte in Visualisierung Next Gen. VIS-2 responsive geht wie?:

        Unter "Responsive Einstellungen" die Spaltenbreite einstellen.

        Was für einen Wert? Weisst du was der wie bewirkt?

        @markusk sagte in Visualisierung Next Gen. VIS-2 responsive geht wie?:

        Die Widgets können mit Symbol "<->" (links oben im Widget) dann die Spaltenbreite eingestellt werden.

        Wo genau soll das Symbol zu sehen sein? Wenn ich mal diese hier als Beispiel nehme sehe ich das Zeichen nirgends

        7d4a5424-ac68-41dc-a347-46c1e2c2b483-grafik.png

        Habe ein einziges Widget gefunden wo ich das angezeigt bekomme

        0d39b5f3-b81d-4045-953b-a1180b193907-grafik.png

        @markusk sagte in Visualisierung Next Gen. VIS-2 responsive geht wie?:

        Die Nummer gibt die Reihenfolge an. Mit Pfeil hoch und runter, wird diese festgelegt. Bei ausreichend Platz, werden erst alle Spalten von links nach rechts durchgegangen, bevor eine neue Reihe beginnt.

        kanst du mal im Screenshot zeigen wo du das sehen kannst?

        M 1 Reply Last reply Reply Quote 0
        • M
          MarkusK @wendy2702 last edited by MarkusK

          @wendy2702
          Einfach auf den Anker klicken, dann wird das Widget einer Position im Responsive Design zugewiesen. Dann erscheinen auch die anderen Symbole, wie "auf Spaltenbreite vergrößern", "wieder von Spalte 1 beginnen" (quasi ein Umbruch) und die Nummer (rechts oben) für Reihenfolge.

          Zur Reihenfolge:
          Bei zwei Spalten steht das Widget mit der Nummer "1" dann in Spalte 1, das Widget mit der Nummer 2 steht dann in Spalte 2, das Widget mit der 3 steht dann wieder in Spalte 1. Möchtest Du aber unbedingt zwei oder mehr Widgets immer untereinander im einer Spalte haben, musst Du diese Gruppieren.

          Zur Spaltenbreite:
          Die Spaltenbreite gibt an, wie breit eine Spalte sein soll. Ganz einfach. Möchtest Du die Seite auf einem größeren Monitor betrachten (z.B. mit 1920 horizontalen Pixeln) und möchtest Du zwei Spalten, dann teilst Du 1920 durch 2. Ist ein anderer Monitor kleiner, so bekommst Du nur eine Spalte angezeigt. D.h. das Widget mit der Nummer 2, welches vorher in Spalte 2 war, ist jetzt in Spalte 1 unterhalb Widget 1.
          Die Display-Größe spielt also doch eine gewisse Rolle. Deshalb sollte eine einzelne Spalte maximal so groß sein wie das kleinste Display wo Du die Seite anzeigen lässt. Wenn die Spaltenbreite größer ist, muss Du horizonal auf dem kleinen Display scrollen.

          vis2.png

          wendy2702 1 Reply Last reply Reply Quote 0
          • wendy2702
            wendy2702 @MarkusK last edited by wendy2702

            @markusk Erneut ein Dicke Danke für deine Erklärung. Schon nicht einfach ein wirklich Responsives Layout zu erstellen, zumindest aus meiner Sicht.

            Hast du ne Erklärung dafür was hier passiert?

            16190aab-d415-4720-810c-8fd672309700-13BAEF61-E911-4A6C-9E96-8F3F959C1969.GIF

            Irgendwie glingt es mir nicht alle Widgets in eine Reihe zu bekommen.

            EDIT: OK das konnte ich lösen.

            Da das ja mein Menü ist frage ich mich wie ich das auf allen Seiten responsive anzeigen lassen kann.

            M 1 Reply Last reply Reply Quote 0
            • M
              MarkusK @wendy2702 last edited by

              @wendy2702 Ehrlich gesagt, ich habe so viele Probleme mit VIS-2, dass ich schon fast aufgebe etwas Responsives hinzubekommen.

              Da werden Widgets mal zu breit dargestellt wenn sie Gruppiert wurden, dann können Widgets nicht verschoben oder gar nicht anklickt werden. Dann muss ich die Seit neu laden. Egal ob Firefox oder Chrome. Bin aktuell etwas frustriert, weil es entweder nicht intuitiv oder nachvollziehbar ist. Ich habe halt nicht nur Buttons, sondern auch Diagramme, weshalb ich nur 2 Spalten mache.

              Ich habe ja ein wenig gehofft, dass es so etwas wie Abschnitte gibt, wo man unterschiedliche Spalten etc. definieren kann.

              wendy2702 1 Reply Last reply Reply Quote 0
              • wendy2702
                wendy2702 @MarkusK last edited by

                @markusk OK.

                Bin ich froh das ich damit nicht alleine bin.

                Ich klicke auch schon einige Tage hier um aber responsive wird das bei mir nichtmal Ansatzweise.

                M 1 Reply Last reply Reply Quote 1
                • M
                  MarkusK @wendy2702 last edited by

                  @wendy2702
                  Ansatzweise wird es schon, aber die vielen kleinen Probleme und Quirks (ziehen nicht mehr möglich, man selektiert oftmals nicht das korrekte Widget etc.) sind nach vielen Stunden probieren frustierend. Man glaubt man hat es hinbekommen, dann ist wieder was anderes nicht nachvollziehbar (zumindest für mich). Dabei ist es egal, ob man Firefox oder Chrome verwendet. Und ich komme aus der IT und programmiere auch (Python, C, Perl, Bash, Powershell, NodeJS, SQL). Vielleicht fehlt mir auch noch das eine oder andere Verständnis für VIS-2. Andere Visualisierungen sind aber nicht so flexibel, wie ich es mir wünsche.

                  wendy2702 jogibear9988 2 Replies Last reply Reply Quote 0
                  • wendy2702
                    wendy2702 @MarkusK last edited by wendy2702

                    @markusk Ich habe mehrere Widgets zu Gruppen zusammen gefasst und diese bekomme ich in keine Spalte, auch das erneute Zusammenfassen geht so gut wie nicht. Habe ich die z.B. die ersten 10 ausgewählt und klicke dann auf Nummer 11 sind plötzlich alle wieder deselektiert.

                    Mal sehen was das ein oder andere Upgrade noch bringt und ob es Irgendwann mal eine Doku oder YT Video dazu gibt.

                    Vielleicht liegt mein Problem aber auch am Import des VIS1 Projektes. Bin Schon kurz davor alles zu löschen aber wenn ich dann bedenke wieviele Stunden da drin stecken.... 😞

                    Hier kann ich z.B. keine Gruppierung mehr machen:
                    2de7108d-c5e9-44a7-a299-70c03f5a4f99-36D8C27A-D725-4C76-B7F7-05411C138CA6.GIF

                    Xsev 1 Reply Last reply Reply Quote 0
                    • Xsev
                      Xsev @wendy2702 last edited by

                      Kann mir jemand sagen wie ich bei 2 Spalten und einem Widget mit 200% (über 2 Spalten), das nächste Widget unter das 200% Widget bekomme. Irgendwie setzt er mir das "Folgewidget" dann in mein 200% Widget und nicht darunter. Anscheinend erkennt Vis nicht das der Bereich schon belegt ist.

                      sigi234 1 Reply Last reply Reply Quote 0
                      • sigi234
                        sigi234 Forum Testing Most Active @Xsev last edited by

                        @xsev sagte in Visualisierung Next Gen. VIS-2 responsive geht wie?:

                        Kann mir jemand sagen wie ich bei 2 Spalten und einem Widget mit 200% (über 2 Spalten), das nächste Widget unter das 200% Widget bekomme. Irgendwie setzt er mir das "Folgewidget" dann in mein 200% Widget und nicht darunter. Anscheinend erkennt Vis nicht das der Bereich schon belegt ist.

                        Klicke mal auf das Ankersymbol

                        Xsev 1 Reply Last reply Reply Quote 0
                        • Xsev
                          Xsev @sigi234 last edited by

                          @sigi234 Das hab ich auch schon versucht, damit wechselt die Position von relative auf absolut. Für responsive geht ja soweit ich das verstanden habe nur relative aber genau dann tritt das Problem auf. Ich hab es jetzt mit einem leeren Html Widget gelöst, welches ich als Platzhalter hinter dem 200% Widget verwende. Damit kann ich via der relativen Position, genau da "anbauen" wo ichs gern hätte. Leider kommt dann das nächste Problem. Man kann die Widgets anscheinend nur immer linksbündig ausrichten in den Spalten und nicht auch rechts. Wenn ich jetzt ein Widget mit 130% mache und daneben eins mit 70% überlagert das 70% Widget das 130% und rechts bleiben die restlichen 40% als Leerraum.
                          Solange die Widgetbreite immer identisch ist, funktioniert die responisve Geschichte gut aber mit unterschiedlichen Widgetbreiten komme ich nicht wirklich zu recht, da die Positionen (relative) zu wenig Auswahlmöglichkeiten in der Positionierung bietet. Entweder werden manche Teile verdeckt oder es entstehen unschöne Leerräume.

                          sigi234 1 Reply Last reply Reply Quote 0
                          • sigi234
                            sigi234 Forum Testing Most Active @Xsev last edited by

                            @xsev
                            Ja da hast Du Recht, ist alles ein bisschen schwierig. Ich experimentiere auch schon lange damit um.

                            1 Reply Last reply Reply Quote 0
                            • jogibear9988
                              jogibear9988 @MarkusK last edited by

                              @markusk said in Visualisierung Next Gen. VIS-2 responsive geht wie?:

                              @wendy2702
                              Ansatzweise wird es schon, aber die vielen kleinen Probleme und Quirks (ziehen nicht mehr möglich, man selektiert oftmals nicht das korrekte Widget etc.) sind nach vielen Stunden probieren frustierend. Man glaubt man hat es hinbekommen, dann ist wieder was anderes nicht nachvollziehbar (zumindest für mich). Dabei ist es egal, ob man Firefox oder Chrome verwendet. Und ich komme aus der IT und programmiere auch (Python, C, Perl, Bash, Powershell, NodeJS, SQL). Vielleicht fehlt mir auch noch das eine oder andere Verständnis für VIS-2. Andere Visualisierungen sind aber nicht so flexibel, wie ich es mir wünsche.

                              Hast du dir schon mal webui angesehen? Da ist im Endeffekt alles möglich, da man auch den HTML & CSS code direkt editieren kann.

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

                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              616
                              Online

                              31.9k
                              Users

                              80.2k
                              Topics

                              1.3m
                              Posts

                              5
                              16
                              2527
                              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