Ankündigung

Einklappen
Keine Ankündigung bisher.

Verhalten von Colspan am IPhone und Ladeverhalten (0.9.2 und rev2742)

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Verhalten von Colspan am IPhone und Ladeverhalten (0.9.2 und rev2742)

    Hallo zusammen!

    Folgendes Problem habe ich unter 0.9.2 und der aktuellen Version auf GitHub (rev2742) am Iphone:
    1) colspan:
    - Trigger und Info mit jeweils colspan=2 werden nebeneinander dargestellt
    - Trigger mit colspan=2 und Info-widget mit colspan=1 passt ebenfalls in eine Zeile
    - ABER: Trigger mit colspan=3 und info mit colspan=1 wird in der Zeile umgebrochen

    2) Beim initialen Aufrufen der Seite, wird auf der 1. Seite die Schrift zu groß dargestellt. Beim Hin und Zurückklicken wird dann die richtige Schriftgröße verwendet.

    lg
    Robert
    Angehängte Dateien

  • #2
    Mangels iPhone kann ich kaum weiterhelfen. Gerade bei 2) müsste hier ein Kenner der iPhone Internas mal ran, klingt für mich aber stark nach einem Bug im iOS, denn die CometVisu ändert kein CSS in der Zwischenzeit und wo anders ist die Schriftgröße nicht definiert.

    Zu 1): Wenn 2+2 (und erst recht 2+1) geht, 3+1 aber nicht, dann könnte es an Rundungsproblemen liegen. Da nicht jede Auflösung ohne Rest durch 12 teilbar ist, wird das immer schwierig sein.
    Was Du aber mal anschauen könntest: inzwischen gibt es zusätzlich colspan-m und colspan-s um gerade auf kleinen Geräten wie Smartphones die Darstellung zu optimieren.
    TS2, B.IQ, DALI, WireGate für 1wire so wie Server für Logik und als KNX Visu die CometVisu auf HomeCockpit Minor. - Bitte keine PNs, Fragen gehören in das Forum, damit jeder was von den Antworten hat!

    Kommentar


    • #3
      zu 1) Ich hatte eigentlich an ein Ladeverhalten im zusammenspiel mit custom.css oder mobile.css. Dem ist aber nicht so (hab grad die beiden css-files gelöscht, Verhalten blieb gleich).

      zu 2) Muss mir das nochmal genau ansehen. Das Verhalten von colspan hat sich doch mehrfach geändert. Am IPhone schaffe ich es in den aktuellen Versionen nicht, dass zB im Hochformat die Widget einspaltig sind und im Querformat dann zweispaltig werden. Vermute dass jetzt auch im Hochformat eine Breite von 12 angenommen wird, so dass dies nicht mehr möglich ist!

      lg
      Robert

      Kommentar


      • #4
        Ich habe das jetzt nochmal mit einer Testseite durchgespielt:
        Folgende Erkenntnisse:
        1) visu hat in 0.9.2.und github eine Breite von colspan=4 und zwar unabhängig (!) von Hoch- bzw. Querformat!
        2) mit colspan-12 wird die Seite in 12 Abschnitte geteilt, aber wiederum in Hoch- und Querformat gleich.

        Git_undRelease_Hochformat.PNGGit_undRelease_Querformat.PNG
        3) vor der Einführung von colspan-s (noch ein Stand aus den sourceforge repo) hatte die Visu am Iphone eine Breite von colspan=3 im Hochformat und cospan=6 im Querformat.
        svn_alt_Hochformat.PNGsvn_alt_Querformat.PNG

        Grundsätzlich will ich nicht nörgeln, die Cometvisu ist absolut toll und meine "Kritik/Feedback" ist wirklich konstruktiv gemeint!

        Aber das alte Verhalten war für mich wesentlich stimmiger. So konnte man eben eine Gruppe mit 4 Widgets untereinander habe und darunter ein Diagramm.
        Beim Drehen des Telefons damit man das Diagramm größer und in Queransicht sieht, waren es dann 2 Widgets nebeneinander und untereinander und das Diagramm mit voller Bildschirmbreite. Nachdem im Querformat ja wesentlich weniger Höhe da ist, spart dies natürlich scollen und schaut optisch besser aus.

        Und ich denke Chris war diese dynamische Sortierung der Widgets auch in diesem Sinn gedacht.

        lg
        Robert

        Hier noch die Testconfig.
        Code:
        <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
        <pages xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" design="metal" xsi:noNamespaceSchemaLocation="../visu_config.xsd" lib_version="8">
        
          <meta>
            <plugins>
              <plugin name="diagram"/>
            </plugins>
            <mappings>
              <mapping name="NoYes">
                <entry value="0">Nein</entry>
                <entry value="1">Ja</entry>
              </mapping>
            </mappings>
            <stylings>
              <styling name="RedGreen">
                <entry value="0">red</entry>
                <entry value="1">green</entry>
              </styling>
            </stylings>
          </meta>
          <page name="Main" showtopnavigation="false" showfooter="false" shownavbar-top="true">  
            <text align="left">
              <layout colspan="2"/>
              <label>Colspan2</label>
            </text>
            <text align="left">
              <layout colspan="2"/>
              <label>Colspan2</label>
            </text>
            <text align="left">
              <layout colspan="3"/>
              <label>Colspan3</label>
            </text>
            <text align="left">
              <layout colspan="1"/>
              <label>Colspan1</label>
            </text>
            <line/>
            <text align="left">
              <layout colspan-m="2"/>
              <label>Colspan-m=2</label>
            </text>
            <text align="left">
              <layout colspan-m="2"/>
              <label>Colspan-m=2</label>
            </text>
            <text align="left">
              <layout colspan-m="3"/>
              <label>Colspan-m=3</label>
            </text>
            <text align="left">
              <layout colspan-m="1"/>
              <label>Colspan-m=1</label>
            </text>
            <line/>
            <text align="left">
              <layout colspan-s="2"/>
              <label>Colspan2-s=2</label>
            </text>
            <text align="left">
              <layout colspan-s="2"/>
              <label>Colspan2-s=2</label>
            </text>
            <text align="left">
              <layout colspan-s="3"/>
              <label>Colspan-s=3</label>
            </text>
            <text align="left">
              <layout colspan-s="1"/>
              <label>Colspan-s=1</label>
            </text>
            <text align="left">
              <layout colspan-s="4"/>
              <label>Colspan-s=4</label>
            </text>    
          </page>
        </pages>

        Kommentar


        • #5
          Nur kurz ein paar allgemein Anmerkungen: Die CometVisu ist immer in 12 Spalten unterteilt (egal wie groß/klein der Bildschirm ist). Mit den colspan Werten, legst Du fest, wie viele dieser Spalten ein Widget belegen darf (z.B. colspan=6 heißt die Hälfte des Bildschirms und ist auch der Default-Wert wenn nichts angegeben wird). Die colspan-m/-s Werte sagen nun, wie viele Spalten, das Widget auf kleinen (-s) und "mittelgroßen" (-m) Bildschirmen belegen kann. Wenn Du nun z.B. auf dem Desktop 4 Widgets nebeneinander, auf dem Smartphone quer 2 und Smartphone Hochformat 1, dann müssen Deine Widgets folgendes layout bekommen:

          Code:
          <layout colspan="3" colspan-m="6" colspan-s="12"/>
          In Deiner Beispielconfig hast Du immer nur entweder colspan oder colspan-m oder colspan-s angegeben, so kann und wird das nicht funktionieren.
          Gruß
          Tobias

          Kommentar


          • #6
            Hallo Tobias!

            Von der Idee her wäre das ja perfekt.
            Setzt aber voraus, dass ein Smartphone im Hochformat als "kleines Device" und im Querformat als "mittleres Device" erkannt wird.

            Hab das gerade nochmal wie von dir beschrieben getestet. Bei allen Smartphones bei uns zuhause ist aber nicht der Fall (Android 5.1, 4.4, und iOS 10.2).

            Kleine Ergänzung noch zu meinem vorherigen Posting: Beim Bild unter 2) sieht man, dass colspan=3 gleich wie colspan=4 dargestellt wird.
            Das spricht gegen die Theorie von Chris, dass es sich beim Umbruch 3/1 um einen Rundungsfehler handelt.

            lg
            Robert

            Kommentar


            • #7
              Ja da scheint in der Tat der Wert ein bischen zu hoch angesetzt worden zu sein:
              https://github.com/CometVisu/CometVi...eEngine.js#L99

              Du kannst ja mal selbst den Wert in Deinen Sourcen ändern auf. z.b 480 und gucken ob sich das Verhalten dann ändert.
              Gruß
              Tobias

              Kommentar


              • #8
                Hallo Tobias!

                Habe jetzt gefühlt alle möglichen Kombinationen getestet - ohne Erfolg.

                Das IPhone5s hat eine Auflösung von 1136x640.
                Mein Verständnis wäre, dass mit
                - maxScreenWidthColspanS: 700,
                - maxScreenWidthColspanM: 1200,

                im Hochformat das Colspan-s und im Querformat colspan-m greifen sollte. Das ist aber leider nicht der Fall.
                Egal was ich an Kombinationen eingebe (ob sinnvoll oder nicht), die colspan-s/-m bewirkt keine Änderung.

                Versuchsweise habe ich auch maxMobileScreenWidth: 640 getestet (Grenzwert zum Laden der mobile.css), hat aber keine Einfluss.

                Code:
                <text align="left">
                        <layout colspan="3" colspan-m="6" colspan-s="12"/>
                        <label>Colspan3 6 12</label>
                      </text>
                      <text align="left">
                        <layout colspan="3" colspan-m="6" colspan-s="12"/>
                        <label>Colspan3 6 12</label>
                      </text>
                Ist nicht sehr dringend, aber irendwie doch nervig, wenn die Parameter nicht das machen, was sie sollen.

                Danke und lg
                Robert

                Kommentar


                • #9
                  Zitat von Robert_Mini Beitrag anzeigen
                  Das IPhone5s hat eine Auflösung von 1136x640.
                  Mein Verständnis wäre, dass mit
                  - maxScreenWidthColspanS: 700,
                  - maxScreenWidthColspanM: 1200,

                  im Hochformat das Colspan-s und im Querformat colspan-m greifen sollte.
                  Jeder mir gesundem Menschenverstand würde wohlauf diese Idee kommen, dem ist aber leider nicht so. Da gibt es noch einen Umrechnungsfaktor bei Smartphones den man berücksichtigen muss (hab gerade vergessen wie das genau alles heißt).

                  Den tatsächlichen Wert kannst Du hier ablesen (hoffe mal das die Tabelle stimmt, schein realistisch zu sein): http://viewportsizes.com/?filter=Iphone
                  Demnach sollte es mit dem von mir vorgeschlagenen Wert maxScreenWidthColspanS = 480 funktionieren (vorrausgesetzt Dein Browser lädt die Änderungen in Deinem Source-Code auch: zur Sicherheit mal &forceReload=true an die URL hängen).

                  Auf den ersten Blick erscheint das total sinnlos, aber Du musst dir mal kurz überlegen, du hättest wie in grauer Vorzeit einen 15" Monitor der in etwa die Auflösung Deines Smartphones hat und schaust Dir darauf eine Webseite an. Und jetzt stell Dir vor dieser Bildschirm würde mit derselben Auflösung auf die Größe Deines Smartphones geschrumpft => Du könntest nichts mehr lesen auf der Seite, weil alles viel zu klein wäre. Daher gaukeln nun Smartphones mit hoher Auflösung wie z.B. 1136x640 der Webseite vor sie hätten nur z.B. eine Auflösung von 667x375, damit die Schriften u.ä. in lesbarer Größe dargestellt werden können (mag sein das ich das gerade technisch nicht ganz korrekt beschrieben habe, geht ja nur dazum das Prinzip zu erklären).

                  Gruß
                  Tobias

                  Kommentar


                  • #10
                    Ich hab gerade den Code nicht da - aber ich glaube mich erinnern zu können, dass man die magischen Werte auch in der Config-Datei angeben kann.

                    Im übrigen: die verwendeten Werte sind inspiriert durch https://material.google.com/layout/r...ui-breakpoints - wenn wir durch eine Verwendung auf einem breiten Geräte-Park auf bessere Zahlen kommen, können wir die natürlich auch gerne verwenden.
                    TS2, B.IQ, DALI, WireGate für 1wire so wie Server für Logik und als KNX Visu die CometVisu auf HomeCockpit Minor. - Bitte keine PNs, Fragen gehören in das Forum, damit jeder was von den Antworten hat!

                    Kommentar


                    • #11
                      Hallo Chris, Tobias!

                      Nachdem gerade über das nächste Release nachgedacht wird, möchte ich das Thema hier nochmal aufgreifen!

                      Grundsätzlich sollte mein Vorstellung ja bereits funktionieren: In Hochformat einspaltige Widgets, im Querformat 2 Widgets nebeneinander.

                      Entweder bin ich zu blöd, oder da gibt es einen massiven Bug (der eigentlich schon auch anderen Usern aufgefallen sein sollte). Unten ein Code Beispiel, vielleicht können das mal ein paar Leute auf ihren Mobil Devices ausprobieren und hier Feedback geben.

                      Im Querformat sollte das colspan-s greifen => Spaltenbreite 12, im Hochformat colspan-m => Breite 6 => die beiden Textwidgets sollten nebeneinander dargestellt werden.
                      Das funktioniert in meiner alten Version vom Sourceforge, aber nicht in rev2742 von gitgub bzw. release 0.9.2.

                      Getestest habe ich auf verschiedenen Androids und Iphone 4s mit jeweils richtigen settings für maxScreenWidthColspanS und maxScreenWidthColspanM (entsprechend den Viewport sizes, nicht nativer Auflösung), so dass die längere Seite in cospan-m Bereich fällt, die kürzere Seite in den Bereich von colspan-s.

                      Code:
                      <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
                      <pages xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" design="metal" xsi:noNamespaceSchemaLocation="../visu_config.xsd" lib_version="8">
                      
                        <page name="Main" showtopnavigation="false" showfooter="false" shownavbar-top="true">  
                          <text align="left">
                            <layout colspan="2" colspan-m="6" colspan-s="12"/>
                            <label>Colspan2</label>
                          </text>
                          <text align="left">
                            <layout colspan="2" colspan-m="6" colspan-s="12"/>
                            <label>Colspan2</label>
                          </text>
                        </page>
                      </pages>
                      lg
                      Robert

                      Kommentar


                      • #12
                        Du kannst mal die Browser-Console öffnen (in Chrome oder Firefox mit F12) und dann da
                        Code:
                        templateEngine.getAvailableWidth()
                        eingeben. Das wird aber vermutlich nur mit der Github version gehen und nicht mit dem Release. Das ist der echte Wert, den die CometVisu zur Bestimmung der colspans benutzt.

                        Und ich Frage mich warum das in der alten Sourceforge Version funktionieren soll, zu den Zeiten gabs colspan-m und colspan-s noch garnicht. Welchen Wert hast Du denn für maxScreenWidthColspanS genutzt? Wird der geänderte Wert wirklich genutzt? Oder ist das wieder ein Cache-Problem? In der aktuellen Github Version kannst Du das ebenfalls in der Browserkonsole mit
                        Code:
                        templateEngine.configSettings.maxScreenWidthColspanS
                        checken.

                        Der Code an sich schaltet bei mir richtig um, daher vermute ich mal das die Werte nicht stimmen.
                        Gruß
                        Tobias

                        Kommentar


                        • #13
                          Über die Browserconsole kann man auch eine Mobile-Device Simulationsmodus anschalten, dann wird das Browserfenster entsprechend verkleinert, so lassen sich solche Dinge einfacher debuggen. Ansonsten müsstest Du remote debugging mit dem Handy machen. Das wird dann ein wenig aufwändiger einzurichten.
                          Gruß
                          Tobias

                          Kommentar


                          • #14
                            Zitat von Robert_Mini Beitrag anzeigen
                            Im Querformat sollte das colspan-s greifen => Spaltenbreite 12, im Hochformat colspan-m => Breite 6
                            Wahrscheinlich nur vertippt, aber das ist natürlich umgedreht: Im Hochformat ist das Display schmaler => colspan-s; im Querformat breiter => colspan-m

                            Im Übrigen gab's noch ein Problem, dass die Colspans bei Display-Größen-Änderung - was auch beim Drehen eines Telefons passieren kann - nicht neu berechnet wurden, vgl. https://github.com/CometVisu/CometVisu/issues/369
                            Um das zu beheben ist jetzt ein Pull Request gestellt.

                            Das hat aber nichts mit dem Problem hier zu tun, oder doch?
                            TS2, B.IQ, DALI, WireGate für 1wire so wie Server für Logik und als KNX Visu die CometVisu auf HomeCockpit Minor. - Bitte keine PNs, Fragen gehören in das Forum, damit jeder was von den Antworten hat!

                            Kommentar


                            • #15
                              Richtig - nur vertippt.

                              Ich denke das ist der Punkt, da ich je genau beim drehen das Umschalten von 1 auf 2-spaltig erreichen möchte.

                              Am Desktop habe ich den mobile Device Simulationsmodus getestet, da ist das Verhalten, genau so, wie man das Zusammenspiel von colspan-s/-m, den Parametern und HF/QF erwarten würde. Allerdings erfolgt die Umsortierung der Widgets erst nach reload und nicht dynamisch mit dem Button Bildschirm drehen (das ist aber genau das Verhalten aus dem genannten Bug).
                              Hab jetzt auch am Handy nochmal mit Reload im QF probiert => 2-spaltig! Somit ist das der Grund!

                              Eine Frage hab ich noch:
                              Wenn ich lt. Doku "svn update ." im Verzeichnis /visu_git/ aufrufe, bekomme ich nur nach einigen Sekunden die Meldung "Revision 2742", es werden aber keine neue Daten geladen.
                              Ist 2742 wirklich die letzte Version oder mache ich hier was falsch, um den Letztstand von Github zu holen?

                              Danke
                              Robert
                              Angehängte Dateien

                              Kommentar

                              Lädt...
                              X