Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Gelöst] Umrechnung px –> % Fehler in VIS oder Denkfehler

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    [Gelöst] Umrechnung px –> % Fehler in VIS oder Denkfehler

    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      tempestas last edited by

      Du schaust es dir sicherlich nicht in 1024x768 auf deinem Monitor an, oder?

      Imho beziehen sich die % auf den sichtbaren Bereich der Bearbeitungsfläche.

      Wenn du also 100% einstellst, wird dein Hinterrgundbild im Editier Modus immer dene gesamte Bearbeitungsfläche ausfüllen, egal wie größ oder klein du sie schiebst. Probier es mal aus

      Gedanke / Frage zum Thema Responsive:

      1024 x 768 ist ein Verhältnis von 1,33 : 1. Wenn du also auf ein moderneres Gerät umstellst, wird wahrscheinlich vieles verzogen sein. Die meisten aktuellen Geräte haben ja eine Auflösung (real) von 1280 x 800, also 1,6 : 1

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

        Denke du hast recht auch wenn es für mich dann keinen Sinn ergibt.

        Wenn ich zuerst die Auflösung meines Devices festlege und in DIESER Auflösung mein View baue bin ich der Meinung man sollte auch bei der ausgewählten Auflösung mit "%" arbeiten und nicht bei der zur Bearbeitung Verfügung stehenden.

        Frage mich wie andere das machen wenn man unterschiedliche Auflösungen nutzen möchte?

        Für jedes ein eigenes Projekt!? :shock:

        1 Reply Last reply Reply Quote 0
        • T
          tempestas last edited by

          Genau das. Oder responsive à la Material Design.

          Für mich ergibt es übrigens absolut Sinn, 100% = sichtbarer Bereich zu setzen. Denn nur dann stimmt ja die inherente Aussage "unabhängig vom Display werden immer 100% ausgefüllt".

          Dein Ansatz für responsive geht ja auch, aber eben nicht, wenn man verschiedene Seitenverhältnisse hat. Aber dafür kann ja VIS dann auch nichts. Ein Background Bild mit Seitenverhaltnis 1,6 : 1 passt nunmal nicht ideal auf 1,33 : 1.

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

            @tempestas:

            Genau das. Oder responsive à la Material Design.

            Für mich ergibt es übrigens absolut Sinn, 100% = sichtbarer Bereich zu setzen. Denn nur dann stimmt ja die inherente Aussage "unabhängig vom Display werden immer 100% ausgefüllt".

            Dein Ansatz für responsive geht ja auch, aber eben nicht, wenn man verschiedene Seitenverhältnisse hat. Aber dafür kann ja VIS dann auch nichts. Ein Background Bild mit Seitenverhaltnis 1,6 : 1 passt nunmal nicht ideal auf 1,33 : 1. `

            Wie geht denn das responsive à la Material Design ?

            Dann müsste doch im umkehr schluss, wenn ich keine Auflösung auswähle und alles in "%" anwähle die Auflösung für jedes Display passen, oder nicht!?

            1 Reply Last reply Reply Quote 0
            • T
              tempestas last edited by

              Da müsstest du bitte in den Thread von uhula schauen oder auf github. Ich nutze nur einige Design Dinge aber nicht den responsiven Teil.

              > Dann müsste doch im umkehr schluss, wenn ich keine Auflösung auswähle und alles in "%" anwähle die Auflösung für jedes Display passen, oder nicht!?

              Es sollten immer die gleichen Prozentwerte des sichtbaren Bereich genommen werden, wie du es angibst. Insoweit also "ja".

              Aber nochmal: dein Problem wird (bzw kann) sein, dass du eben aktuell Auflösungen mit inwzischen eher ungewöhnlichem Seitenverhältnis nutzt.

              D.h. wenn du z.B. ein Widget nimmst und es quadratisch haben willst, dann wird es bei 1024x768 z.B. 5% / 6,67% sein. (entspricht rd 51 px / 51px)

              Wenn du dann ein Display mit 1280 x 800 px nimmst, werden daraus auf einmal 64px / 53,36px, d.h. dein Widget wird gestreckt sein. (5% von 1280 x 6,67% von 800)

              Zumindest ist das mein Verständnis der Funktionsweise, ich kann mich natürlich irren.

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

                Das mit dem Quadratisch ist genauso wie du es beschreibst.

                Wäre zwar schön wenn es anders wäre aber aber geht scheinbar nicht mit einfachen mitteln.

                1 Reply Last reply Reply Quote 0
                • T
                  tempestas last edited by

                  probier mal das hier:

                  Width 10%

                  Height calc(width * 75%)

                  ich kanns leider aktuell nicht auf diversen Auflösungen testen

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

                    Werde ich machen.

                    Wo findet man die möglichen kombinationen die man in die Felder eintragen kann?

                    1 Reply Last reply Reply Quote 0
                    • T
                      tempestas last edited by

                      Das ist einfach CSS, davon verstehe ich allerdings nicht viel. Ich habe also mal im sinne von "lmgtfy" (let me google that for you) nach CSS Seitenverhältnis gegooglet.

                      die 75% sind der Umkehrwert deines Seitenverhältnisses

                      Nachtrag:

                      das hier scheint auch zu gehen und dürfte nach meinem Verständnis dann immer funktionieren

                      width 10%

                      height calc(width/(1/device-aspect-ratio))

                      Nachtrag 2: Damit wird dann imho immer ein quadratisches Verhältnis gewahrt. Für andere Formen müsstest du also Anpassungen vornehmen

                      Nachtrag 3: nee, das geht irgendwie doch net 😞

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

                        CSS…. es gibt noch soviel zu lernen auf der Welt 🙂

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

                          @tempestas:

                          Das ist einfach CSS, davon verstehe ich allerdings nicht viel. Ich habe also mal im sinne von "lmgtfy" (let me google that for you) nach CSS Seitenverhältnis gegooglet.

                          die 75% sind der Umkehrwert deines Seitenverhältnisses

                          Nachtrag:

                          das hier scheint auch zu gehen und dürfte nach meinem Verständnis dann immer funktionieren

                          width 10%

                          height calc(width/(1/device-aspect-ratio))

                          Nachtrag 2: Damit wird dann imho immer ein quadratisches Verhältnis gewahrt. Für andere Formen müsstest du also Anpassungen vornehmen

                          Nachtrag 3: nee, das geht irgendwie doch net 😞 `

                          Auch gerade getestet. Wird nicht quadratisch.

                          Werde auch mal Tante Google bemühen.

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

                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          704
                          Online

                          32.1k
                          Users

                          80.7k
                          Topics

                          1.3m
                          Posts

                          2
                          12
                          702
                          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