Neuer Modus für 2D Seiten

[Chris M.]

Im aktuellen Git gibt es nun einen neuen Modus für 2D Seiten, die vermutlich deutlich leichter zu Nutzen sind: "contained"

In der gleichzeitig neu Veröffentlichen Demo "demo_flat" kann man sehen, wie das in der Praxis funktioniert (Das ist übrigens die Demo die auf der Light & Building auf dem WireGate NG gelaufen ist):
Bei Größenänderung des Browser-Fensters (oder drehen des Tablets...) wird der Hintergrund unter Beibehaltung des Seitenverhältnisses so skaliert, dass die Seite ausgenutzt wird. Und die da drüber positionierten Widgets werden automatisch mit verschoben.

Verwendung:

<page name="MeinName" type="2d" backdrop="config/media/meinBackdrop.png" size="contained" backdropalign="25% 0">

• size="contained" -> um diesen Modus zu verwenden
• backdropalign="25% 0" -> Optional. "25% 0" verschiebt das Bild zu "25%" nach rechts und "0" nach unten. Default ist "50% 50%" das das Bild in der Mitte der Seite zentriert.
• Die Widgets auf der Seite werden mit <layout> und "x" und "y" Werten entsprechend positioniert. Dabei müssen die Werte für "x" und "y" in der Einheit Pixel (also z.B. "123px") sein und beziehen sich auf die natürliche Größe des Bildes. (=> Wunsch-Werte kann man einfach im Grafikprogramm ablesen)

demo_flat.jpg

[murelli146]

Habs eben Probiert funzt echt super so machen 2D Seiten immer mehr Spaß!

Danke.

Was ich mir für die 2D Seiten wünschen würde (abgesehen von per Drag&Drop Widgets zu platzieren

1) eine Möglichkeit die Widgets mit zu skalieren. Also die ganze Seite skalieren.
-> Für eine Statusübersicht benötigt man nicht so "Fingergroße" Widgets, dann könnte man auch am iPhone einen Grundrissplan ohne scrollen anzeigen

2) Gruppen Erstellen und die Gruppe auf der X und Y Achse zu Positionieren

3) Atribut für Widgets background ausblenden (derzeit über custom.css gelöst)

Der Boiler auf der Technik Seite sieht spitze aus!

Schöne Grüße
Gernot

[Chris M.]

Was ich mir für die 2D Seiten wünschen würde (abgesehen von per Drag&Drop Widgets zu platzieren

Oh ja, ich wünsche mir auch, dass der Editor interaktiver mit der CV umgeht und so Live Editierung möglich wird

1) eine Möglichkeit die Widgets mit zu skalieren. Also die ganze Seite skalieren.
-> Für eine Statusübersicht benötigt man nicht so "Fingergroße" Widgets, dann könnte man auch am iPhone einen Grundrissplan ohne scrollen anzeigen

OK, d.h. dass width und height mit skaliert werden soll?

2) Gruppen Erstellen und die Gruppe auf der X und Y Achse zu Positionieren

Was willst Du hier genau?

3) Atribut für Widgets background ausblenden (derzeit über custom.css gelöst)

Ich nehme an, Du meinst das metal Design, oder?
Gut möglich, dass das noch nicht auf die 2D Seiten hin optimiert wurde (bei der L&B Demo hatte ich auch eine custom.css mitgeliefert... )

Der Boiler auf der Technik Seite sieht spitze aus!

Und dabei ist die dort verwendete Technik schon seit Ewigkeiten in der CV... (Vgl. die Heizung-Seite bei der WireGate Demo unter http://demo.wiregate.de/visu-svn - die auf der 0.6.1 basiert...)

[murelli146]

Oh ja, ich wünsche mir auch, dass der Editor interaktiver mit der CV umgeht und so Live Editierung möglich wird

Ja, eines Tages werden wir drüber lachen wie wir uns noch mit Koordinaten herumschlagen haben

OK, d.h. dass width und height mit skaliert werden soll?

Als Beispiel habe ich unten meine 2D Seite > Grundriss mit E-Strich-, Raum-, Solltemperatur und Ventilstatus.
Ideal wäre es wenn die Seite so wie sie ist skaliert wird. Wie bei size="contained" inklusive widgets.
Quasi die Seite gesperrt und skaliert
oder
ein Attribut bei den Widgets selber ob sie mit skaliert werden oder nicht dann hätte man die Möglichkeit Bedienelemente nicht zu skalieren

Was willst Du hier genau?

Eine Gruppe erstellen z.B. eine Raumstatusanzeige mit Luftfeuchte, Soll- und Ist-Temperatur und diese über die Koordinaten im Raum Platzieren.
Derzeit haben Koordinaten keinen Einfluss auf Gruppen.
Oder man kann damit ein Steuermenü zum Wärmeerzeuger auf dem Schema machen.

Ich nehme an, Du meinst das metal Design, oder?
Gut möglich, dass das noch nicht auf die 2D Seiten hin optimiert wurde (bei der L&amp;B Demo hatte ich auch eine custom.css mitgeliefert... )

Ja ich verwende sehr gerne (eigentlich ausschließlich) das schlichte Metal Design.

Und dabei ist die dort verwendete Technik schon seit Ewigkeiten in der CV... (Vgl. die Heizung-Seite bei der WireGate Demo unter http://demo.wiregate.de/visu-svn - die auf der 0.6.1 basiert...)

Und genau diese Demo Seite hat mich damals dazu angespornt mich etwas mit SVG's und der Trick- und Pipe-o-matic zu beschäftigen.
Damals ein Steiniger Weg aber wenn man es geschafft hat sind weitere Bilder auch nicht so wild.

Und jetz gibt es ja noch ein schönes howto auf der wiki Seite
http://www.cometvisu.org/wiki/CometV..._Hydraulikplan

Gruß Gernot
eg1.PNG

[murelli146]

Hallo Chris,

da sich die Endgeräte oder Monitore schnell mal ändern, wollte ich den 2D Seiten Skalierungsmodus noch einmal nachfragen.

Bei Größenänderung des Browser-Fensters (oder drehen des Tablets...) wird der Hintergrund unter Beibehaltung des Seitenverhältnisses so skaliert, dass die Seite ausgenutzt wird. Und die da drüber positionierten Widgets werden automatisch mit verschoben.

Bei der " size="contained" " Option wird der Hintergrund über die Ganze Seite ausgenutzt.

Ich möchte gerne die 2D Seiten die ich für eine Auflösung "1920x1080" (Touchscreen fix montiert) optimiert habe auch auf dem iPad oder iPhone ohne zu scrollen anzeigen.

Das mit dem Hintergrundbild funktioniert super, doch für ein Heizungsschema passen schnell die Positionen der Widgets auf den gezeichneten Rohren nicht mehr bzw. stoßen sich.

Eine 2D Statusübersicht auf einer kleineren Auflösung (iPad, iPhone usw.) benötigt keine "fingergroßen" Widgets.

Wäre diese Option die Witgets auch zu skalieren ein tiefer eingriff oder würde es "nur" eine Modifikation der " size="contained" "Option sein.

Würde diese Option für sonst noch wem sinn machen oder gefallen?

Wollte nur noch mal nachfragen bevor ich auf Github ein Issue auf mache.

Schöne Grüße
Gernot

[Chris M.]

Der Eingriff wäre vermutlich schon tief.

Aber evtl. gibt's einen gangbaren Work-Around (gerade komplett ungetestet):
Du kannst Widget eine eigene CSS Klasse (class) mitgeben. Und ein eigenes CSS Stylesheet definieren. In dem könntest Du denn entsprechend andere Werte vorgeben.

Auch ungetestet (war schon lange nicht mehr in dieser Code Ecke...):
Evtl. gehen auch die Attribute width und height um selber direkt eine Größe setzen zu können. (Wenn das geht, wäre es vermutlich sogar schöner als die extra class)

[murelli146]

Leider scheitert mein vorhaben da die Widgets alle an der linken oberen Ecke festgemacht sind (positioniert auf x y) zu scheitern.
Dadurch scheint es unmöglich die Temperaturanzeigen und die Pumpen über den Rohren Platziert zu halten.
Das mit der CSS Klasse und with und hight habe ich dadurch auch nicht in angriff genommen.

Wäre es möglich so was wie einen Zoom (wie beim Browser) in die 2D Seite einzubauen?

[murelli146]

Bekomme das Thema nicht aus dem Kopf.

Hab nun diese Seite gefunden wo liquide-css-layouts beschrieben werden.
http://www.webmasterpro.de/coding/ar...s-layouts.html

Klingt für mich als Ansatz.
Doch verstehe ich CSS zu wenig.

Vielleicht kann mir jemand unter die Arme greifen die 2D Seiten in der custom.css so anzupassen dass sie skaliert wird.

[Chris M.]

Die Positionen (also den Wert für x und y) kannst Du bereits in Prozent angeben. Damit ist doch das "liquide" Design erreicht, nicht?

Was halt erst mal nicht so leicht ist, ist das die Icons mit skaliert werden. Da die inzwischen (HEAD, nicht im letzten Release) reine SVG Dateien sind, sollten die gut skalieren. D.h. da müsste man mal überlegen, wie man die am besten befähigen kann.