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

[Robert_Mini]

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

[Chris M.]

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.

[Robert_Mini]

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

[Robert_Mini]

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.

<?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>

[peuter]

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:

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

[Robert_Mini]

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

[peuter]

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.

[Robert_Mini]

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.

<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

[peuter]

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).

[Chris M.]

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.

[Robert_Mini]

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.

<?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

[peuter]

Du kannst mal die Browser-Console öffnen (in Chrome oder Firefox mit F12) und dann da

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

templateEngine.configSettings.maxScreenWidthColspanS

checken.

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

[peuter]

Ü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.

[Chris M.]

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?

[Robert_Mini]

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