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.

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

[Dejan Vu]

Ich würde mir persönlich mal überlegen, was Du da machst: Die Verbindungen sind ja nicht der zentrale Punkt, sondern der Graph an sich. Ergo würde ich mir auch keine Gedanken über irgendwelche Verbindungsbibliotheken machen, damit das irgendwie hübsch aussieht. Beim Leiterplattendesign geht es ja gerade um die Verbindungen, und da ergibt das Sinn, aber bei dir eben nicht.

Ich kann mich dunkel daran erinnern, das die Entflechtungsalgorithmen, die die Teile umplazieren um überkreuzungen zu minimieren, nicht sonderlich schwer sind (Brute Force, soweit ich weiss), aber ich finde auf die Schnelle keinen Link (und ich kann mich auch irren).

Ich würde also eher so einen Algorithmus suchen und den einbauen. Beim Erstellen der Verbindungen mit der Maus würde ich jedoch keine direkte Linie verwenden, sondern eine, die nur aus senkrechten und waagerechten Linien besteht und möglichst wenig Ecken hat.

Vielleicht bringt es was, sich deine Leinwand als z.B. 100x100 Matrix vorzustellen und jede Zelle ist entweder eine Linie (senkrecht, waagerecht, Ecke) oder Teil eines Bausteins (Anschlusspunkt, sonstiges). Und schon kannst Du sehr sauber 'zeichnen'. Mit einem Algorithmus, der den 'optimalen' Weg von A nach B findet, solltest Du beim Layouten schon weit kommen. Die Regeln sind klar: Jede Ecke kostet und das überkreuzen auch.

[hstreicher]

Ich würde mir mal ansehen wie das Leiterplatten Entflechtungsprogramme machen ,
da darf sich ja auch nichts kreuzen :)

[himitsu]

Zitat:

Zitat von hstreicher (Beitrag 1269223)

Ich würde mir mal ansehen wie das Leiterplatten Entflechtungsprogramme machen ,
da darf sich ja auch nichts kreuzen :)

Doch, darf es, bei mehreren Ebenen. :angel:

Es darf auch mal ein verworrener Umweg sein, bzw. bestimmte Dinge müssen eine ganz bestimmte Länge haben (1), egal wo es lang geht und andere Leiter dürfen nicht nebeneinander liegen, oder sie dürfen schräg verlaufen und unter den Bausteinen hindurch ...
Und grade von denen verrät doch keiner wie er es macht, denn die wollen ja ihr Programm vekaufen.

PS: Selbst bei einer einseitigen Leiterplatte gibt es schon seit jahrzehnten möglichkeiten es dennoch zu kreuzen.
- 0 Ohm-Widerstände
- oder eine dünne Sperrschicht dazwischen (wird oft bei Tastaturlayouts angewendet, wo für die Gummyknöpfe eh eine weitere (Kontakt)Leiterschicht aufgetragen wird)


1: hohe Frequenzen, hohe Ströme oder gaaaanz kleine störanfällige Spannungen

[Dejan Vu]

Ich hab mir mal die Links von Perlsau angesehen. Das ist wirklich super! Da kreuzen sich die Bahnen, aber es ist trotzdem nicht unübersichtlich. Ich finde es auch wichtig (nervt mich bei ER-Tools), das *meine* visuelle Gruppierung der Elemente durch den Autorouter nicht durcheinander gewirbelt wird. Denn das nervt mehr, als eine Leitungen, die sich kreuzen.

Eigentlich muss der TE doch nur drauf achten, das
* Leitungen nicht 'hinter' anderen Klötzen verlaufen
* Kreuzungen irgendwie ordentlich gezeichnet werden, damit man sieht, was wohin verläuft.

[Namenloser]

Zitat:

Zitat von Dejan Vu (Beitrag 1269178)

Vielleicht bringt es was, sich deine Leinwand als z.B. 100x100 Matrix vorzustellen und jede Zelle ist entweder eine Linie (senkrecht, waagerecht, Ecke) oder Teil eines Bausteins (Anschlusspunkt, sonstiges). Und schon kannst Du sehr sauber 'zeichnen'. Mit einem Algorithmus, der den 'optimalen' Weg von A nach B findet, solltest Du beim Layouten schon weit kommen. Die Regeln sind klar: Jede Ecke kostet und das überkreuzen auch.

Genau so hatte ich das gemacht, hat sich nicht wirklich bewährt, wie oben beschrieben.

Edit: Im Anhang mal ein Screenshot. Das Ergebnis sieht schon ähnlich aus wie bei den Komponenten, die Perlsau verlinkt hat (nur weniger schön gezeichnet, z.B. keine abgerundeten Ecken). Das Hauptproblem ist halt, dass die Berechnung von Routen in dieser Qualität bei mir einfach viel zu lange gedauert hat.

[Dejan Vu]

Ah, ist also dein Wegfindealgorithmus suboptimal? Welchen verwendest Du denn? A* würde sich hier anbieten, wobei dem man das 'schräge' -also Zick-Zack- laufen einfach nur abgewöhnen müsste.

PS: Ist doch ordentlich... Bisserl mehr Mühe beim rendern, und schon ist das perfekt. Aber es ist auch so imho vollkommen ausreichend (die Verbindungen sollten halbdurchsichtig sein, das wäre noch besser)

[Namenloser]

Zitat:

Zitat von Dejan Vu (Beitrag 1269262)

Ah, ist also dein Wegfindealgorithmus suboptimal? Welchen verwendest Du denn? A* würde sich hier anbieten, wobei dem man das 'schräge' -also Zick-Zack- laufen einfach nur abgewöhnen müsste.

Das ist A*. Der Algorithmus braucht deshalb so lange, weil durch das komplizierte Qualitätsmaß einfach sehr viele mögliche Routen in Frage kommen und er deshalb sehr viele Möglichkeiten durchprobieren muss, bis die optimale Route gefunden ist. Beispiel: Setzt man die Bestrafung für eine Überkreuzung hoch, dann probiert natürlich er einen besseren Umweg zu finden. Je größer man die Bestrafung setzt, desto größer darf der Umweg sein, und das alles kostet eben Zeit. Im Endeffekt läuft A* hier fast auf Brute Force hinaus.

Dass er an den Ecken eine 45°-Kurve macht, ist gewollt. Das ist nicht der Zick-Zack-Fall, den ich meine. Der Zick-Zack-Fall tritt erst bei Platzmangel auf. Ich hab ihn im Anhang mal provoziert. Glaub mir, ich habe wirklich Tage damit verbracht, zu versuchen, ihm das abzugewöhnen, aber es kam immer zu noch schlimmeren Seiteneffekten.

Ich denke, man könnte den Algorithmus nur effizienter zu machen, indem man die Anzahl der in Betrachtung gezogenen Wegpunkte durch irgendeine Vorberechnung reduziert. Bisher wurde hier mit einem einfachen Raster gearbeitet. D.h. auch bei einer geraden Strecke gibt es dadurch sehr viele Abzweigungspunkte, die der Algorithmus ggf. durchprobiert. Wenn man die Anzahl der in Betrachtung gezogenen Punkte durch eine Vorberechnung einschränken würde, würde sich der Suchraum deutlich verkleinern, und dann wäre es vielleicht effizient machbar.