Denkanstoß: Wie Verbindungen besser darstellen?

[silver-moon-2000]

Hallo

und Entschuldigung für den etwas kryptischen Titel, aber mein Kopf raucht, und mir will nichts intelligentes einfallen.

Wie ihr im Bild sehen könnt, bin ich dabei, so eine Art graphische Ablaufsteuerung zu programmieren, bei der man aus der Ablage (rechts) Blöcke mit verschiedenen Funktionen in das Hauptfenster ziehen und diese miteinander verknüpfen kann.

Dabei gibt es Logik-Elemente (wie AND / OR / NOT / XOR), Timer, Conditions ("ist Leertaste gedrückt worden") und so weiter.
Das Programm ist bei weitem noch nicht fertig (wenn es das jemals werden wird ), aber ich habe in den letzten Tagen einen ziemlichen Durchbruch geschafft, weil sich ein paar Gedankenknoten gelöst haben.

Ja, ich bin mir sicher, dass es solche "Programmier"-Systeme fertig zu kaufen gibt, und vielleicht wahrscheinlich haben einige von Euch das schon früher und besser gelöst, aber, hey... schließlich ist es für mich allein (da bezahle ich kein Geld für...), es macht mir Spaß und ich will ja auch noch was lernen...

Ich bin mir sicher, dass ich deswegen noch häufiger auf Euch zukommen muss, weil sich schon einige andere Knoten in meinem Gehirn abzeichnen (seid also gewarnt )... Doch zu meinem eigentlichen Problem:

Die Verknüpfungen zwischen den Blöcken (die roten Linien) beginnen und enden am Rand der "ConnectionPanels" (die kleinen Quadrate mit der Beschriftung I / O / S / A).

Mit einer Ausnahme werden diese Verknüpfungen auch vollständig angezeigt. Diese Ausnahme ist die Verbindung von CONDITION - A -> LOGIC-OR O, also vom Ausgang des OR auf den Abort-Eingang der Condition. Wie Ihr sehen könnt, verläuft diese Linie teilweise hinter dem LOGIC-OR, wird also von dem verdeckt.
Ihr könnt Euch sicher leicht vorstellen, dass es nur von der Positionierung der Blöcke abhängt, welche der Verbindungen nicht vollständig angezeigt wird...

Alle Blöcke (sind von TPanel abgeleitet) befinden sich auf einer CanvasScrollBox (eine ScrollBox, die von mir um ein Canvas erweitert wurde, sodass ich darauf malen kann), und die Verbindungen werden direkt auf das Canvas der CanvasScrollBox gezeichnet.
Also eigentlich logisch, dass die Blöcke (die ja praktisch Panels sind und auf der ScrollBox liegen) die Verbindungen verdecken.

Das Dumme ist nur: Mir fällt momentan kein passabler Weg ein, wie ich das Problem lösen und alle Verbindungen immer vollständig anzeigen kann
Möglich wäre evtl.:
-> Die Verbindungen nicht Punkt-zu-Punkt zu routen, sondern mit Ecken und Knicken, sodass sie immer um die Blöcke außenherum laufen. Die Berechnung dieser Verbindungen wird dann allerdings deutlich komplexer (Wege-Finde-Algorithmus)
-> Ein transparentes Panel über die Scrollbox legen und darauf die Verbindungen zeichnen: Nachteil: Die Blöcke darunter müssen nach wie vor anklickbar/verschiebbar sein.

Was anderes fällt mir momentan nicht ein, Euch vielleicht? Was ist die bessere Wahl?

Also wie gesagt: ich habe keine wirkliche Frage, sondern erhoffe mir einfach Denkanstöße, wie ich die Verbindungen schöner geroutet / gezeichnet bekomme.

[Namenloser]

Hi,

mit dem Thema hatte ich auch schon mehrfach zu tun.

Zitat von silver-moon-2000:

-> Die Verbindungen nicht Punkt-zu-Punkt zu routen, sondern mit Ecken und Knicken, sodass sie immer um die Blöcke außenherum laufen. Die Berechnung dieser Verbindungen wird dann allerdings deutlich komplexer (Wege-Finde-Algorithmus)

Sowas hab ich mal für eins meiner unvollendeten Hobbyprojekte programmiert. Es war eine A*-Implementierung mit einer Gewichtungsfunktion, die verschiedene Kriterien miteinbezog, z.B. Länge des Weges, Anzahl der Richtungswechsel, Anzahl der Kreuzungen mit anderen Verbindungen etc. Das Problem ist: Die Lösung wird mit der Anzahl von Verbindungen immer langsamer (braucht durchaus einige Sekunden bei ~20 Elementen), außerdem ist man bis in alle Ewigkeit damit beschäftigt, die Parameter des Algorithmus zu tunen, weil man immer einen neuen Sonderfall findet, wo seltsame Routen herauskommen (z.B. Linien, die andere Linien im Zick-Zack kreuzen etc.). Ab einem gewissen Punkt schafft man es nicht mehr, Probleme zu beheben ohne neue Probleme hinzuzufügen. Es ist nicht besonders befriedigend.

Zitat von silver-moon-2000:

Also wie gesagt: ich habe keine wirkliche Frage, sondern erhoffe mir einfach Denkanstöße, wie ich die Verbindungen schöner geroutet / gezeichnet bekomme.

Eine recht einfache Möglichkeit wäre, statt direkter Verbindungen rechtwinklige Verbindungen (oder vielleicht sogar Splines) zu nehmen. Sieht meistens einfach ordentlicher aus (wenn man sich zumindest ein bisschen Mühe bei der Platzierung der Elemente gibt). So machen wir es in einem aktuellen Projekt (siehe Anhang).

Bin aber auch an weiteren Ideen interessiert.

[jaenicke]

Zitat von silver-moon-2000:

Alle Blöcke (sind von TPanel abgeleitet)

Ich würde sehr dazu raten alles selbst zu zeichnen, auch die Blöcke. Ein Beispiel dafür ist mein Periodensystem:
http://www.delphipraxis.net/132375-p...-beta-6-a.html
Dann hast du eine sehr viel schönere Darstellung und die volle Kontrolle.

[Whookie]

Zudem würde ich auch die Verbindungen um die Blöcke herum führen. Im einfachsten Fall über 90° Winkel, schöner sind aber immer Kurven (PolyBezier)

[himitsu]

Bei Kurven lassen sich Kreuzungen aber noch schwerer berechnen.

[jobo]

Mir scheint das eine schwierige Aufgabe. Ist ja schon gesagt worden.
Ich kann hier sicher keine brauchbare Theorie / Verfahren liefern, nur mal ein paar Assoziationen, die vlt dienlich sind.

Zunächst:
Die Aufgabe ist unabhängig von den verwendeten Darstellungskomponenten komplex. Und lohnt daher auch so betrachtet zu werden.

Das angehängte Bild erinnert mich nicht so sehr an eine Ablaufsteuerung, sondern mehr an ein Platinenlayout. Sowas kenne ich zumindest als Betrachter von einem Bekannten. Beim Platinenlayout gibt es immer die nette Hürde, dass Leiterbahnen sich nicht kreuzen können / dürfen, leicht vorstellbar.
Im Bild wäre die schon bei lediglich 2 Komponenten der Fall (rosa und grün), sofern die Andockpunkte nicht verschoben werden können. (Hier unklar)
Um im Bild des Platinenlayouts zu bleiben (sowas Reales hilft mir immer), müsste hier durchkontaktiert werden auf eine andere Platinenebene.

Für die visuelle 2D Darstellung hilft das zunächst jedoch nicht. Das wäre ggF. über Transparenzgrade darstellbar und Darstellungskonventionen wie -Querung immer 90°, -mit spezifischem Symbol, ..
Da spielt m.E. auch die Frage rein, wie intelligent man die Elemente und Verbindungspunkte positioniert, Gewichtung nach Anzahl der Verbindungen, je mehr desto zentralere Position, bewegliche Andockpunkte, ..

Wahrscheinlich ist ein beliebiger Ablauf zunächst eine n dimensionale Matritze, die mathematisch optimierbar ist. Das geht dann aber auch schon Richtung Qualität des Ablaufmodells.

[Sailor]

Grundlagen zum Thema findest Du unter dem Stichwort "Planare Graphen". Unter http://nyssen.blogspot.hu/2010/12/dr...-treasure.html findest Du was bei GEF. Wenn Du offline zeichnen kannst, empfiehlt sich GraphViz. Die Ansteuerung ist simpel. Ich weiß nicht, ob das Ding eine API hat. Die Bilder sind recht brauchbar. In Wikipedia findest Du eine Einführung unter "Graphzeichnen". Wenn Du es selbst implementieren willst oder mußt: Es ist ein ziemlicher Brocken.

[Jumpy]

Ich mache viele so Dinge immer mit MS Visio und auch wenn da das Routing immer mal wieder nicht das macht, was ich will so ist es doch ziemlich ausgereift und schnell. Aber da stecken glaube ich Jahre an Erfahrung drinne und das kann man glaub ich nicht auf die schnelle elegant und performant (wie ja auch namenloser schon sagt) hinbekommen.

Daher würde ich eine Lösung Vorschlagen, die es auch in Visio gibt. Zusätzlich zum automatischen Connector/Verbinder (der autom. geroutet wird) gibt es da auch eine Bibliothek mit verschiedenen rechwinklingen Verbindern für jede Situation (oben raus -> links rein, unten raus -> oben rein, usw.).
Diese Verbinder haben auf jeder Kante einen "Pack an" über den man die Kanten verschieben kann.

Vielleicht wäre eine solche Verbinder-Bibliothem mit verschiebbaren Kanten schneller aufgebaut als ein komplexer Routing-Algo. erstellt werden kann.

[Perlsau]

@silver-moon-2000
Da fallen mir spontan die Mitov-Komponenten ein, insbesondere OpenWire. Allerdings kann ich nicht viel dazu sagen, denn ich hab da nur mal vor längerer Zeit reingeschnuppert und noch nicht ernsthaft damit gearbeitet. Für nichtkommerzielle Anwendungen sind diese Komponenten kostenlos verwendbar.