Anordnung von Objekten auf 2D-Seiten

[wuestenfuchs]

Wie erstellt ihr so eure 2D-Seiten? Ich hab ca. 50 Objekte, verteilt auf drei 2D-Seiten (eine Seite pro Stockwerk). Demnächst kommen nochmal so viele dazu.

Was ich bisher mache ist, jede Objekt händisch über eine XY-Koordinate zu platzieren. Das ist ganz schön viel Arbeit und noch mehr Trial&Error.

Zudem ist das Endergebnis auch recht unübersichtlich, sowohl im Editor, als auch im XML-File. Jedes Zimmer unterteile ich mit einem <break \>-Statement, um das zumindest *irgendwie* zu strukturieren. Schön ist das aber nicht. Dabei fehlt mir auch sehr die Möglichkeit, pro Objekt Kommentare zu hinterlegen, um diese im XML-File/im Editor besser identitfizieren zu können.

Beispiel:

<break/>
<text>
<layout x="47%" y="70%"/>
<label>Dachboden</label>
</text>
<info format="%.1f °C" styling="Innentemperatur">
<layout x="49%" y="73%"/>
<address transform="DPT:9.001" mode="read">3/4/150</address>
</info>
<switch on_value="1" off_value="0" mapping="Beleuchtung An/Aus">
<layout x="49%" y="76%"/>
<address transform="DPT:1.001" mode="readwrite">3/0/150</address>
<address transform="DPT:1.001" mode="read">3/7/150</address>
</switch>
<break/>
<text>
<layout x="47%" y="12%"/>
<label>Installationsraum</label>
</text>
<info format="%.1f °C" styling="Innentemperatur">
<layout x="49%" y="15%"/>
<address transform="DPT:9.001" mode="read">3/4/180</address>
</info>
<switch on_value="1" off_value="0" mapping="Beleuchtung An/Aus">
<layout x="49%" y="18%"/>
<address transform="DPT:1.001" mode="readwrite">3/0/180</address>
<address transform="DPT:1.011" mode="read">3/7/180</address>
</switch>

Gibt es da einen effizienteren und/oder eleganteren Weg?

[Chris M.]

Für das interaktive Positionieren gibt es einen Trick: Über Strg+Shift+I kannst Du im Browser die Web-Entwicklungskonsole aktivieren.
Dort ist unter "Elements" (Chrome) bzw. "Inspektor" (Firefox) der HTML-DOM-Tree der Seite sichtbar.
Wenn Du nun das entsprechende Widget auswählst, so kannst Du in dessen Style-Attribut sehen wie es positioniert ist. Klickst Du dieses Element an, so werden in dem Styles Fenster die Werte auch nochmal angezeigt - und können dort interaktiv verändert werden. Ist der Wert selbst angeklickt / ausgewählt, kannst Du diesen nicht nur überschreiben, sondern auch durch die Pfeiltaste nach oben bzw. unten vergrößern bzw. verkleinern. Mit gleichzeitig gedrücktem Shift oder Alt wird gleich die Zehner bzw. Hunderter-Stelle verändert.

So kannst Du das Widget schnell und interaktiv auf die Wunschposition schieben. Die Werte dann in die Konfig übernehmen.

[kleinklausi]

Ich habe mir überlegt was ich in jedem Raum oder ähnlich brauche und benutze dafür templates. Dann habe ich in der eigentlichen Config nur X, Y und die GA. Ich finde das dann sehr schön übersichtlich.

[wuestenfuchs]

Hm, beides gute Tipps. Das sollte die Seitenerstellung doch deutlich einfacher machen.

Was mir bei der 2D-Seitenbearbeitung dennoch fehlt, gerade wenn es um eine hohe Anzahl von Elementen geht, ist ein guter Überblick. Mit Templates wird das schon einfacher, aber (1) ist dennoch nicht alles übersichtlich und (2) nicht auf jeden Raum sind Templates sinnvoll anwendbar.

Kann man im Editor (und im XML-File) eine interne Bezeichnung vergeben, die dort erscheint? Ein Kommentar quasi, das im Frontend gar nicht angezeigt wird?

Hab mal meinen Screenshot und den Code von oben pseudo-überarbeitet, um zu verdeutlichen, was ich meine (siehe Attribut "comment"):

<break comment="Dachboden"/>
<text>
<layout x="47%" y="70%"/>
<label>Dachboden</label>
</text>
<info format="%.1f °C" styling="Innentemperatur" comment="Dachboden Temperatur">
<layout x="49%" y="73%"/>
<address transform="DPT:9.001" mode="read">3/4/150</address>
</info>
<switch on_value="1" off_value="0" mapping="Beleuchtung An/Aus" comment="Dachboden Licht">
<layout x="49%" y="76%"/>
<address transform="DPT:1.001" mode="readwrite">3/0/150</address>
<address transform="DPT:1.001" mode="read">3/7/150</address>
</switch>
<break comment="Installationsraum"/>
<text>
<layout x="47%" y="12%"/>
<label>Installationsraum</label>
</text>
<info format="%.1f °C" styling="Innentemperatur" comment="Installationsraum Temperatur">
<layout x="49%" y="15%"/>
<address transform="DPT:9.001" mode="read">3/4/180</address>
</info>
<switch on_value="1" off_value="0" mapping="Beleuchtung An/Aus" comment="Installationsraum Licht">
<layout x="49%" y="18%"/>
<address transform="DPT:1.001" mode="readwrite">3/0/180</address>
<address transform="DPT:1.011" mode="read">3/7/180</address>
</switch>

[peuter]

Wenn man den Text-Editor benutzt, kann man doch beliebig Kommentare einfügen und benutzen, z.B.:

</switch>
<!-- Installationsraum -->
<text>

Der "normale" Editor kann allerdings nicht mir Kommentaren umgehen, daher muss man entweder beim Text-Editor bleiben (wenn man Templates benutzt, ist das sowieso besser), oder auf die aktuelle Entwicklerversion wechseln. Da ist ein neuer Editor drin und der kann auch Kommentare (zumindest anzeigen).

[Chris M.]

Eine andere Möglichkeit wäre hierfür die Custom Klassen "kreativ" zu verwenden: https://www.cometvisu.org/CometVisu/...ssen-verandern
Die kannst Du ja einem Widget mitgeben, aber keiner zwingt Dich dazu auch eine CSS Regel dafür zu hinterlegen.

Mit geschickter Wahl der Nomenklatur könnte dann auch ein Suchen und Bearbeiten sehr effizient durchführbar sein.