Verschiedene ähnliche Zeichnungen darstellen (je nach Zustand)

[Tom Bombadil]

Hallo,

wie würdet Ihr vorgehen, um an der gleichen Stelle einer Seite verschiedene PNG's dazustellen (zustangsabhängig)? Mir geht es konkret um eine Heizungsvisualisierung mit 3 Zuständen (jeweils Zeichnung der Heizungshydraulik):

• kein Heizbetrieb (z.B. Sommer) --> Übersichtszeichnung der Heizungshydraulik in schwarz/weiss, nennen wir sie mal zeichnung1.png;
• Heizkreis 1 aktiv (Heizkörper) --> modifizierte zeichnung1.png mit Darstellung von Vorlauf/Rücklauf in Heizkreis 1 in rot/blau sowie hervorgehobenen Heizkörpern;
• Heizkreis 2 aktiv (Erwärmung Warmwasser) --> modifizierte zeichnung1.png mit Vorlauf/Rücklauf in Heizkreis 2 in rot/blau sowie hervorgehobenem WW-Speicher.

Da die Betriebsarten sich gegenseitig ausschließen, dürfte die Bildung des/der nötigen Hilfsitems in shNG das kleinste Problem sein. Spannend wird wohl eher die Übergabe an die Visu.

Mir fallen spontan 3 Möglichkeiten ein:

• basic.symbol mit angepasstem css, um das png auf die gewünschte Größe zu bekommen (vermutlich mehrere Hilfsitems erforderlich),
• status.collapse mit mehreren div's (vermutlich nur ein Hilfsitem notwendig); alles, was nicht den aktuellen Status hat, wird 'wegcollapsed',
• die Bilder einfach übereinanderlegen und mit klassischem HTML/css (z-Index) arbeiten; der z-Index kommt aus dem Hilfsitem.

Hat jemand noch andere Ideen oder sowas sogar schon mal gemacht? Danke im Voraus für Eure Anregungen!

Viele Grüße,
/tom

[thesing]

Nur als flotte Idee:
Die ganze Anlage als SVG erstellen und Farben je nach Zustand ändern. Bei comet-Visu hab ich so etwas zumindest schon mal gesehen:
https://www.cometvisu.org/CometVisu/...t/demo/#id_19_
Und dynamische Icons gibt es bei smartvisu zumindest.

Das Howto von cometvisu:
https://www.cometvisu.org/CometVisu/...hydraulik.html

Edit: Howto wieder gefunden.

[Tom Bombadil]

Ja, über svg und Animationen hab ich auch schon nachgedacht. Aber erst mal das Grundprinzip knacken - 'schick machen' kann ich es dann in GIMP, Corel Draw oder Photoshop immer noch. Am schönsten wären natürlich Layer, die man ein- oder ausblendet - aber das beherrscht svg meines Wissens nicht (bei den Standardformaten fällt mir in Sachen 'Layer' spontan nur png ein; habe aber überhaupt keinen Plan, wie man das ansteuern würde/müsste) ...

/tom

[bmx]

Du kannst IMHO im SVG doch gruppieren und dafür ID vergeben. Die sollte man mit Javascript dann auch ein und ausblenden können.

[gama]

Das würde mich auch brennend interessieren, blicke aber die Internas von SmartVisu nicht so richtig.
Ein kleines jquery / JS Beispiel mit einem einfachen <svg> wäre super.

Genial fände ich eine Art basic.stateswitch(), nur das man das svg per id referenziert und [wert1, wert2, ..] einer [gruppe1, grupp2, ... ] zuweisen kann. Das wäre evtl. der Türöffner für interaktive, graphische Statussymbole... nur so als erste Idee.

[Tom Bombadil]

-proof of concept (wie Psilo sagen würde)-

Alles quick & dirty!

Ok, die Kurzfassung: Es geht, zwischen verschiedenen svg's mittels eines Hilfsitems umzuschalten. Bei status.collapse habe ich entnervt aufgegeben, weil es genau das Gegenteil von dem macht, was ich will (man kann nicht negieren). Aber mit basic.symbol geht's wunderbar. Man muss halt die default-css-Anweisungen für das Symbol aufheben, dann gehen auch Grafiken in Vollauflösung oder gewünschter Größe.

Die Langfassung zum Ausprobieren:

• ein Hilfsitem zz_testitems.num1 anlegen
• die im beigefügten zip enthaltenen svg's unter smartvisu/pics kopieren
• in ein beliebiges {% block xxxx %} folgenden Beispielcode kopieren:

<style type="text/css">
  div#meins img.icon {
  width: auto;
  height: auto;}
</style>

Slider mit den Werten 1, 2 oder 3, um zwischen den svg's umzuschalten:
{{ basic.slider('', 'zz_testitems.num1', 1, 3, 1) }}

/** {{ basic.symbol('', 'item', '', [array mit bildern], [array mit num-werten des items]) }} **/
<div id="meins" style="text-align: center">
  {{ basic.symbol('', 'zz_testitems.num1', '', ['pics/eins.svg','pics/zwei.svg','pics/drei.svg'], [1,2,3]) }}
</div>

Die Positionierung der Messwerte habe ich noch nicht drin, aber das ist nur css-Fleißarbeit und in meinem Widget für die Helios schon seit Jahren gelöst (position absolute, dann die x/y offsets mit margin-top und margin-left setzen).

(Rest inkl. Popup-Anzeige mit Details bei Klick auf das svg kommt, sobald ich die Routinearbeiten fertig habe.)

Enjoy!

/tom

p.s.: Bitte nicht über den Seitenaufbau wundern (bin gerade am Ausprobieren eines alternativen eigenen Templates mit 1:1, 1:2 split v, 1:4 split h/v) - ist alles noch Großbaustelle.

[Haiphong]

Servus René,

wie bzw. mit welcher SW erstellst Du das hydr. Schaltbild ??

[Tom Bombadil]

Servus,

mit Visio auf verschiedenen Layern erstellt (Aus, Heizbetrieb, Warmwasser, Beschriftungen) und dann Layer für Layer nach svg exportiert, siehe Anlage. Sieht im weißen Browserfenster nach dem Öffnen etwas komisch aus, aber hab ja einen dunklen Hintergrund in der Visu. Je Grafik 2 Versionen (1x beschriftet, 1x die reine Grafik).

beispiel1.png

beispiel2.png

Heute Abend wird's schick gemacht - die svg's ohne Beschriftungen werden wie oben beschrieben über ein 'dynamisches' basic.symbol eingeblendet, die Sensortemperaturen werden draufgepappt und bei Klick auf die Hydraulik erscheint ein größeres Popup mit beschriftetem svg und weiteren Infos. Dito bei den Charts - ich überlege, die in der Standardansicht auf 24h zu begrenzen, ein transparentes Element komplett drüberzulegen und bei Klick auf das Element ein Popup mit der zoombaren Wochenansicht hochzubringen. Dann noch ein bisschen 'Luft' zwischen die Elemente 'blasen' (margins), um das Gesamtbild etwas übersichtlicher und aufgräumter erscheinen zu lassen, und fertig ist's.

Meine etwas ältere Frage mit gleichzeitiger Full-HD- und iPad-Darstellung in der Visu konnte ich mittlerweile auch einigermaßen brauchbar lösen. Wenn man mit %-Angaben statt px arbeitet (Bildgrößen, Objektpositionen usw), dann bekommt man das einigermaßen hingefummelt, und es sieht in beiden Zielumgebungen vernünftig aus.

/tom