2D Seite in einer Gruppe

[Robert_Mini]

Hallo zusammen!

Nachdem ich mich gerade wieder mit der aktuellen svn beschäftige, ist mir noch eine Idee gekommen (auch wenn der Zeitpunkt in Bezug auf die akt. Release wahrscheinlich etwas ungünstig ist):

Was mir extrem gut gefallen würde, wäre die Möglichkeit 2D Seiten innerhalb einer Gruppe zu verwenden.
Momentan kann ich zwar Gruppen auf einer 2D Seite verwenden und das bmp so skalieren (Leerbereich oben, siehe 2D_Seite1), dass es unter der Gruppe liegt, das ist aber denkbar unflexibel.

Perfekt wäre es, wenn man Gruppen als 2D-Seite definieren könnte, und dann:
- Skalierbares SVG im Hintergrund
- Widgets mit aktuellen Temp. etc. im Vordergrund

Das wäre in Hinblick auf unterschiedliche Endgeräte deutlich flexibler, als jetzt das Bild mit einem leeren Bereich oben zu positionieren.
Die Gruppengröße könnte man dann schön mit rowspan/colspan definieren und das 2D Bild mit scaled svg einfügen.

Was mir vorschwebt:
- Auf Visu-Seite wie im Anhang je Stockwerk
- In der oberen Gruppe die wichtigsten Infos
- Darunter die Gruppe mit Stockwerksplan als svg
- Die Zimmer / Lampensymbole des svg dynamisch einfärben (anwesend + Lichtstatus)

Das lässt sich bis auf die obere Statusgruppe auch mit der reinen 2D Seite machen, alternativ könnte man ein Image-Widget verwendet zusammen mit dem svg, dann aber keine Info's wie Temp. darstellen.

Was haltet ihr davon?

lg
Robert

[swiss]

Hallo Robert

Das Thema 2D/3D Seiten hört sich wirklich spannend an und wäre in Zukunft sicher eine sehr wichtige Funktion der CometVisu. Doch wird 2D/3D wohl noch nicht Teil der kommenden Releas sein. Denn wenn ich es recht in Erinnerung habe ist dies der Grund wesshalb es noch keine Verson 1.x geben kann (laut ChrisM).

Diese Baustelle wird also wohl nicht mehr in das nächste Releas 0.8 einfliessen dass ja in den nächsten 3-4 Wochen vollständig ausgerollt werden soll. Danach sind dann sicher wieder Kapazitäten frei und das Thema 2D/3D wird bestimmt weiter vertieft.

Bis dahin bleibt die Funktion wohl SVN Only

[Robert_Mini]

Hallo Patrik!

Ist mir bewusst (verwende ohnehin nur die SVN).
Dennoch wollte ich die Idee schon mal zur Diskussion stellen.

lg
Robert

[swiss]

Also mal meinen Input zu diesem spannenden Thema

Ich finde man sollte normale Widgets mit Group und 2D/3D beliebig auf einer Page kombinieren können. Vor allem das plazieren von Widgets direkt auf einem SVG mit x/y Position wäre natürlich super, wenn man dies wieder Grafisch lösen könnte. Also WYSIWYG für die 2D/3D gestaltung Denn das dauernde hin und her schalten zwischen Vorschau und Editor ist für solche Aufgaben suboptimal.

Eventuell könnte man das ja ganz "billig" lösen indem man ein Iframe mit 1 Sekunde Refresh im Editor einbinden. Mir ist auch klar dass das eigentlich Murks ist aber für den Anfang würde mir schon so eine kleine "editierhilfe" helfen und es wäre warscheinlich sehr schnell umgesetzt

[Chris M.]

Die 2D-Seiten sollten schon jetzt gehen (ich befürchte aber noch nicht ausreichende Testtiefe in der Breite - dazu kamen mir zu wenige Fehlermeldungen...).

3D-Seiten sind definitiv nicht fertig. Und die sind, wie Patrick schon geschrieben hat, für mich Voraussetzung das 1.0 zu nennen...

Der Screenshot zeigt mir aber, dass Du die 2D Seite noch nicht richtig nutzt. Sobald Du die verwendest, solltest Du die Widgets auch einzeln plazieren - und nicht colspan/rowspan verwenden.
Damit sollte sich wohl auch nicht das Bedürfnis nach 2D-Groups ergeben, oder?

Für das 0.8er Release habe ich jedoch schon einen Feature-Freeze ausgerufen, d.h. Änderungen die nicht Fehler beseitigen sollten wir im Interesse eines baldigen Release erst mal hinten anstellen. (Wünsche in den Bug-Tracker bzw. Feauture Request eintragen ist während dessen natürlich weiterhin erwünscht)

[Robert_Mini]

Die 2D-Seiten sollten schon jetzt gehen (ich befürchte aber noch nicht ausreichende Testtiefe in der Breite - dazu kamen mir zu wenige Fehlermeldungen...).

Dazu kann ich gleich mal berichten, dass bei 2D mit relativ Bezug die y-Koordinate nicht (richtig) berücksichtigt wird. Sieht man auch im Demo-config.

Der Screenshot zeigt mir aber, dass Du die 2D Seite noch nicht richtig nutzt. Sobald Du die verwendest, solltest Du die Widgets auch einzeln plazieren - und nicht colspan/rowspan verwenden.
Damit sollte sich wohl auch nicht das Bedürfnis nach 2D-Groups ergeben, oder?

Ist mir schon klar, dass ich mit reinen 2D Seiten alles machen kann.
Ich denke nur, dass mit colspan/rowspan die Darstellung relativ gut auf anderen Displaygrößen skaliert, wo ich mir bei 2D nicht sicher bin - bin grad am testen.

Ich fände halt die Anwendung kleiner 2D Seiten in einer Gruppe eine tolle Ergänzung zum jetzigen Design:
zB Übersicht zur Solaranlage als Gruppe, Buffer als eigene 2D Gruppe mit Bild und Temp-Werten als frei positionierte Info-Felder (siehe Anhang, rechte Gruppe wäre dann mit frei positionierten Temp-Werten)

lg
Robert

[Robert_Mini]

Nachdem ich gestern nur knapp geantwortet habe (hoffe das wirkte nicht unhöflich, falls doch - sorry), habe ich heute nochmal die 2D Seite getestet.
Folgendes ist mir aufgefallen:
- mit "scaled" als Einstellung für den Hintergrund der 2D Seite und angabe der Widgetposition mit %, ist der Bildschirm 200% breit, d.h. 100% entspricht der Mitte zw. Navbar und Bildschirmrand. Ich hätte hier 50% erwartet. Falls so beabsichtigt - auch ok.
- Die Angabe der vertikalen Position mit % wird immer als 0 interpretiert, das ist offensichtlich ein Bug.
- Die y-Position mit "px" funktioniert einwandfrei.

Man kann offensichtlich die Breite Breite der Widgets auf 2D Seiten mit width="xx px" oder "xx %" festlegen. Das ist schon sehr gut, nur noch nicht dokumentiert. Wäre auf der Demo-Seite sehr hilfreich.
Die Widget-Breite in % skaliert aber wieder etwas anders. width="100%" mit x="100%" (mit obiger Festlegung 200%=ges. Breite) reicht ca. 15px über die Breite der 2D Seite hinaus.

Ich vermute, dass bei der Berechnung der % Werte nicht konsistent auf Breite mit/ohne Navbar bezogen ist.

Hoffe das hilft,
Lg Robert

[MicHau]

Kannst du vielleicht mal die Config (oder den relevanten Teil davon) und die Screenshots dazu posten? Damit ist es immer einfacher, Fehler nachzuvollziehen.

[Chris M.]

Die Einheiten gehen wieder direkt auf's CSS, d.h. alles was CSS erlaubt ist möglich.

Daher bitte mit verschiedenen Designs (insb. pure!) testen, es könnte sein, dass hier auch ein Design (oder alle?!?) noch nicht kompatibel ist.

[Robert_Mini]

Hier mal eine kleine Übersicht mit unten eingefügter config (Ausschnitt):

Wie gesagt: Breite des Fensters ohne Navbar=200%
Bildmitte 100%
Gibt man dem Widget die Breite 100%, so reicht dieses über die Mitte.
Y-Werte in % werden immer als 0% interpretiert, Angaben in px passen.

   <page name="Erdgeschoß" shownavbar-left="true" visible="false" type="2d" backdrop="config/media/EG1.svg" align="center" size="scaled">
      <navbar position="left" dynamic="true" width="200px">
        <group name="Räume">
          <pagejump target="Küche" name="Küche">
            <label>
              <icon name="scene_cooking"/>
            </label>
          </pagejump>
          <pagejump target="Essen" name="Essen">
            <label>
              <icon name="scene_dinner"/>
            </label>
          </pagejump>
          <pagejump target="Wohnen" name="Wohnen">
            <label>
              <icon name="scene_livingroom"/>
            </label>
          </pagejump>
          <pagejump target="Arbeiten" name="Arbeiten">
            <label>
              <icon name="it_pc"/>
            </label>
          </pagejump>
          <pagejump target="Eingang" name="Eingang/WC">
            <label>
              <icon name="scene_keyboard"/>
            </label>
          </pagejump>
        </group>
        <group name="Sonstiges">
          <pagejump target="Temperaturen" name="Temperatur">
            <label>
              <icon name="temp_temperature"/>
            </label>
          </pagejump>
        </group>
      </navbar>
      <text align="left">
        <layout x="100%" y="100%" width="200px"/> 
        <label>x="100%" y="100%"</label>
      </text>
      <text align="left">
        <layout x="50%" y="0%" width="200px"/> 
        <label>x="50%" y="0%"</label>
      </text>
      <text align="left">
        <layout x="200%" y="100px"/>
        <label>x="200%" y="100px"</label>
      </text>
      <text align="left">
        <layout x="100%" y="500px" width="100%"/>
        <label>x="100%" y="500px" width="100%"</label>
      </text>
      <text align="left">
        <layout x="0%" y="400px" width="100%"/>
        <label>x="0%" y="400px" width="100%"</label>
      </text> 
    </page>

lg
Robert

[Robert_Mini]

Die Einheiten gehen wieder direkt auf's CSS, d.h. alles was CSS erlaubt ist möglich.

Daher bitte mit verschiedenen Designs (insb. pure!) testen, es könnte sein, dass hier auch ein Design (oder alle?!?) noch nicht kompatibel ist.

Hallo Chris!

Du hattest recht. Im Design pure sind die Positionen richtig und auch "y=50%" wird richtig interpretiert!!

Im Design Metal werden offensichtlich einige Umrechnung noch nicht richtig durchgeführt. Kannst du mir mal sagen, in welchem File hier mit css die Umrechnugnen beim Metal-Design zu suchen sind? Vielleich steig ich ja dahinter?

lg
Robert

[Robert_Mini]

Hab das Thema gerade im Bugtracker eingetragen. Zumindest der Bug mit den y-Koordinaten sollte in der 0.8 noch raus (Positionsangaben in % werden beim Metal design in y-Richtung nicht berücksichtigt).

Wo passiert den die Pixel-Umrechnerei von % in px bzw. wo werden px im jeweiligen Design skaliert (welches File?)?

lg
Robert

[peuter]

Hab das Thema gerade im Bugtracker eingetragen. Zumindest der Bug mit den y-Koordinaten sollte in der 0.8 noch raus (Positionsangaben in % werden beim Metal design in y-Richtung nicht berücksichtigt).

So in Revision #1958 sollte das Problem behoben sein. Zumindest die 2D-Demo config sieht bei mir gut aus.
Da findet auch keine Umrechnung von px auf % statt. Das problem war einfach, das im Metal-Design der das zu positionierende Element umschließende widget_container mit position:relative versehen war und sich somit alle Positions-/größenangaben sich auf diesen container bezogen haben und nicht auf die ganze Seite. Reines CSS-Problem.

Da genau diese CSS-Codeänderung (die glaube ich nicht von mir war) an anderer Stelle schon Probleme gemacht hat, hab ich die wieder entfernt.

Bitte probier mal ob das alle Probleme erschlägt und schließe den Bugreport, wenn das der Fall sein sollte. Ich habe/nutze das 2D-Seiten Feature überhaupt nicht und kann daher nur gucken ob die Demo gut aussieht.

[Robert_Mini]

Hallo peuter!

Danke für das Update!

Die x/y Koordinaten stimmen jetzt. y passt, und 100% ist genau am Bildschirmrand.

Nur das Attribut width stimmt noch nicht ganz. w=50% bei x=0% steht leicht über die Mitte, w=50% bei x=50% steht leicht aus dem Bildschirm hinaus => Scrollbar. Das sind bei meiner Auflösung etwa 12px zuviel, und zwar unabhängig von der Breite.
Hab grad noch 0% 1% 2% 3% width getestet (siehe Anhang), da sieht man eigentlich das Problem: auch bei 0% hat das widget eine Breite > 0, das ist genau der Teil zuviel.

Danke und lg
Robert

[peuter]

So nächster Versuch in #1961.

Der erste Versuch hat leider die Möglichkeit Widget per align-Attribut zu Positionieren zerstört, daher musste eine andere Möglichkeit her.

Ich habe nun versucht per CSS nur die widget_container auszuwählen, die auf einer 2D-Seite platziert sind und bei diesen die Hintergründe, Paddings, Ränder entfernt, da die ja auf einer 2D-Seite nur stören. Dadurch passt dann auch ein width mit 50% wieder.

Problematisch ist hier nur der CSS-Selektor, der die besagten widget_container auswählt. Hier werden kurz gesagt alle widget_container genommen, die ein Schwester-Element von einem embed oder img Element sind und die direkt unterhalb einer page liegen. Das ist nun nicht unbedingt Zukunftssicher, da vermutlich nicht nur auf 2D-Seiten embed oder img Elemente an der Stelle vorkommen.

Aus meiner Sicht müsste den 2D-Seiten Bildelementen eine zusätzliche class hinzugefügt werden, damit man die per CSS eindeutig selektieren kann. Wenn niemand einen besseren Vorschlag hat, würde ich das so machen.