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 :oops:), 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 :-D)... 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:

Zitat von silver-moon-2000 (Beitrag 1269019)

-> 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:

Zitat von silver-moon-2000 (Beitrag 1269019)

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:

Zitat von silver-moon-2000 (Beitrag 1269019)

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.

[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.

[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.

[silver-moon-2000]

Hallo,

erstmal danke für die zahlreichen Antworten (die Arbeit hat mich nicht eher gehen lassen wollen, ich komme gerade erst zurück, hatte also keine Zeit, früher zu antworten)

Zitat:

Zitat von jaenicke (Beitrag 1269026)

Ich würde sehr dazu raten alles selbst zu zeichnen, auch die Blöcke. [...] Dann hast du eine sehr viel schönere Darstellung und die volle Kontrolle.

Ich muss gestehen, daran habe ich bisher noch gar nicht gedacht. An der "schöneren Darstellung" darf gezzweifelt werden (zumindest bei meinen designerischen Fähigkeiten :stupid:), aber sonst...
<Selbstgespräch>Das Bewegen der Blöcke wird etwas schwieriger werden und die verschiedenen Klick-Operationen erfordern etwas mehr Koordinaten-Panscherei, aber das alles sollte machbar sein...</Selbstgespräch>
Zumindest hätte es den Vorteil, wenn alles gezeichnet ist, dass ich, wenn alle anderen Stricke reißen, einfach die Verbindungen über die Blöcke drüber malen kann. Sieht dann zwar nicht hübsch aus, aber wenigstens man erkennt die Verbindungen, denn...

Zitat:

Zitat von Namenloser (Beitrag 1269025)

[...] 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. [...]

Zitat:

Zitat von Sailor (Beitrag 1269078)

Grundlagen zum Thema findest Du unter dem Stichwort "Planare Graphen". [...] In Wikipedia findest Du eine Einführung unter "Graphzeichnen". Wenn Du es selbst implementieren willst oder mußt: Es ist ein ziemlicher Brocken.

Zitat:

Zitat von Jumpy (Beitrag 1269046)

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.

Zitat:

Zitat von jobo (Beitrag 1269050)

Mir scheint das eine schwierige Aufgabe. Ist ja schon gesagt worden.

Wie hier übereinstimmend festgehalten wird, habe ich mir da doch einen ziemlichen Brocken aufgeladen, zumindest wenn ich es "richtig" bzw. in aller Kompelxität lösen will. Mit anderen Worten: Simples Strippenziehen kann zu einer wahren Kunst werden.

Da ich jedoch mich selbst, meinen Ehrgeiz und meinen Durchhaltewillen kenne :twisted:, werde ich mich wohl lieber auf die Suche nach einer einfacheren Möglichkeit machen.

Zitat:

Zitat von Whookie (Beitrag 1269043)

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)

Zitat:

Zitat von Namenloser (Beitrag 1269025)

[...]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). [...]

Einspruch Euer Ehren! Kurven (Bezier/Spline) sind grauenhaft! Aargh! Rechte Winkel sind das einzig Wahre :wink: Kurven sehen immer so "unaufgeräumt" aus (aber vielleicht hat das auch mit meinem mangelnden ästhetischen Empfinden und Designvermögen zu tun :wink:)

Ihr sagt aber beide, dass es eine einfachere Möglichkeit gibt, Blöcke mit rechtwinkligen Verbindungen zu verbinden, als einen vollen Weg-Such-Algo darauf loszulassen. Dazu muss ich mir mal Gedanken machen.

Das Dumme ist allerdings bei mir (anders als bei Dir @Namenloser?), dass sich meine Verbindungen in alle Richtungen erstrecken können und nicht "nur" von links nach rechts wie in Deinem Beispiel... mal sehen...

Zitat:

Zitat von jobo (Beitrag 1269050)

[...]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. [...]

Das Dumme daran ist nur, dass "gute" Platinen immer von einem Menschen handgeroutet werden müssen, weil der Autorouter (wo wir wieder beim Wege-Such-Algo sind) bei komplexeren Layouts nur Müll produziert. Und in halbwegs brauchbaren Autoroutern steckt so viel gesammelte Intelligenz drin, dass mir beim Gedanken dran schon schwummrig wird.
Trotzdem:

Zitat:

Zitat von Jumpy (Beitrag 1269046)

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.

Das wäre durchaus eine Idee wert. Ich kenne solche Verbinder zwar nicht von Visio, aber von ePlan (CAE-Software für z.B. Schaltpläne) weiß ich, was Du meinst.

Ich muss gestehen, die Lösung gefällt mir eigentlich recht gut. Ich weiß zwar noch nicht, wie ich dann die einzelnen Blöcke informiere, dass eine Verbindung zwischen ihnen hergestellt ist, aber da wird mir noch was einfallen, hoffe ich.

Also gut, ich nehme aus den Posts das Folgende mit:

- "Gemischt" zu arbeiten, d.h. die eine Hälfte als Componenten auf die Form zu klatschen und dazwischen einfach Linien zu zeichnen ist suboptimal. Besser alles aus einem Guss. Und da es keine drei dreh- und bewegbaren Linien-Komponenten gibt, werde ich wohl alles zeichnen...

- Es gibt anscheinend kein allgemeingültiges Patent-Rezept, wie man am besten und einfachsten schöne Verbindungen zwischen zwei Punkten zieht, außer, dass es beliebig kompliziert werden kann. Gut gefallen hat mir jedoch das manuelle Routen mitHilfe von rechtwinkligen Verbindern

Ich danke allen für die Beteiligung. Ich werde mich jetzt erst einmal zum Denken zurückziehen, das soll Euch aber nicht davon abhalten, weiterhin gute Ratschläge zu geben :wink:

[Whookie]

Und für alle die es nicht kennen hier auch noch der Verweis auf Mindstorms EV3 und LabView. Verdrahten wird zum großen Teil dadurch verhindert, das die einzelnen Module direkt aneinander gesteckt werden.