Punkte verbinden.

K

koli.bri

EDIT:
Das Problem ist gelöst, das Konzept-Script befindet sich bei Post 13


Hallo.

Derzeit die einzige Große Hürde, die ich bei dieser Idee sehe, ist das verbinden der Felder.

Folgendes Bildbeispiel:
attachment.php


Denken wir uns ersteinmal die blaue Linie weg.
Ziel ist es, ich klicke auf das Feld "tab 1", und danach auf ds Feld "tab 2".

Danach sollen beide Punkte grafisch verbunden sein.
Nur, wie löse ich das?

Grundvorraussetzung ist:
Wenn ich eine der Orangen Boxen via Drag/Drop verschiebe, soll die Verbindung bestehen bleiben.

Gruß
Lukas

PS: Falls das Thema doch eher zu den Designer gehört, bitte ich um Nachsicht. Ich sehe halt mehr den Programmieraufwand dahinter :)
 

Anhänge

  • er_bsp.png
    er_bsp.png
    4,6 KB · Aufrufe: 553
Zuletzt bearbeitet von einem Moderator:
Ok, das könnte Tricky werden.

Grobfassung ohne Code:
- Über DOM kommst du an die Elemente deiner Struktur heran.
- Mit einem klick auf ein Element liest du dir die Objektkoordinaten aus und berechnest relativ dazu den startpunkt für deine Verbinung. - Das sollten zwei/vier Punkte werden, denn du willst ja mal rechts, mal links verbinden, vlt. kommt o/u dazu.
- Das gleiche passiert mit dem Klick auf Objekt2
- Nun musst du dir eine Heuristic überlegen, die entscheidet, welche Ankerpunkt am besten ist (Abstände zwischen den Ankern zweier Objekte minimieren)
- Nun malst du eine Linie: Easy way: Lineare Interpolation zwischen den Punkten. Soll es mit wie im Bild aussehen, zeichnest du drei Teilstücke a,b,c: b: Höhenunterschied zwischen Objekt1 und Objekt2. a,c verbinden nun den Höhenunterschied mit den Objekten.

- Weil du pfiffig bist, hast du garantiert die Funtkion zur Bestimmung der Heuristic und das Malen in eine Funktion gepackt, die jedes mal beim Ziehen eines Objekts neu aufgerufen wird. So bleibt das Bild schön dynamisch. ;)
 
Vielen Dank :)

Nur, um mich mal vollkommen lächerlich zu machen: Wie mache ich die Linien?
Simple 1*1-Pixelgrafiken, die ich dann einfach in die Länge ziehe? Und dann drei davon zusammenhängend?
Oder "<hr>"s, statt der Grafiken, was mir etwas mehr Flexibilität in Sachen Farbgestaltung bring.

Mit canvas zu Arbeiten hab ich persönlich relativ wenig Lust drauf, da blick ich noch nicht so ganz durch. Zudem wäre das ein Ansatz, der mit etwas "oversized" erscheint.

Oder, was auch möglich wäre: Der Hintergrund der Seite ist eine Tabelle mit lauter kleinen Quadraten, die ich entsprechend einfärbe. (Aber da passen nur folgende Smileys: :hehehe: und :faint: )

gruß
Lukas
 
Tables als Layoutbasis ist ja ganz schlechter stil.
Als Linien kannst du beispielsweise divs nehmen, in die du 1x1px große, einfarbige Bilder einbettest, und diese dann entsprechend breit oder hoch zu ziehen.

hr's (sorry fürs deppenapostroph, so liest es sich einfach besser) sind imo nur horizontal anwendbar, also nicht wirklich eine Lösung.

Und was die Farben angeht: 20 pngs in verschiedenen Farben in 1x1px ist ja kein Speicherfresser, oder du erstellst dynamisch das Bild anhand von bsp.weise dem RGB-HexCode einer Eingabemaske.
- Ah genau, svg hieß dass. Habe ich jedoch noch nicht selbstgemacht, daher kann ich den Aufwand und die komplexität dieser Sache nicht abschätzen.
 
Dazu brauch man noch nicht einmal Bilder einbetten. Denn die DIVs können einfach eine Hintergrundfrabe bekommen.
 
Pingu schrieb:
Dazu brauch man noch nicht einmal Bilder einbetten. Denn die DIVs können einfach eine Hintergrundfrabe bekommen.
Zum Vergrößern anklicken....

Wenn man zu lange über etwas nachdenkt, verliert man einfach den Blick für die einfachsten Lösungen :faint:

Denke, dass ist, wenn man den Strich aus drei Elementen bildet, die einfachste Möglichkeit.

Vielen Dank :)

gruß
Lukas
 
harrr, Pingu, du bist gut ;)
Wieseo ist der Wald nur immer so verdammt mit Bäumen zugestellt...
 
Ok, wir nehmen Divs.

Jetzt bräuchte ich aber dennoch mal ein kleines Beispiel, wie man bei Klick auf ein Objekt die Koordinaten rauskriegt. Weil, die ganzen Beispiele, die ich gefunden habe, die schreiben die Position nur...
Und irgendwie häng ich da fest:

HTML: 
<html>
    <head>
        <title>JavaScript-Test für Verbindunglinien</title>
        <script type="text/javascript">
        // JavaScript       
        var klicked = 0;
        var erstes;
        function klick(wahl){
            dbg(wahl);
            var tmp = document.getElementById("div_1").style.left;
            dbg(tmp);
       
        }
       
        function dbg(vari){
            document.getElementById('dbg').innerHTML = vari + '<br>' + document.getElementById('dbg').innerHTML;
        }
       
        </script>
        <style type="text/css">
        /* CSS Styles */
            body { position:abolute; top:0px;left:0px;bottom:0px;right:0px; }
            #dbg {
                position:absolute;
                top:240px; left:10px;
                width:200px; height:200px;
                border: black solid 2px;
           
            }
            #div_1 {
                position:absolute;
                top:10px; left:10px;
                width:100px; height:200px;
                border: red solid 2px;
               
            }

            #div_2 {
                position:absolute;
                top:10px; left:280px;
                width:100px; height:200px;
                border: red solid 2px;
               
            }
           
        </style>   
    </head>
    <body>
        <div id="div_1">
            <a href="javascript:klick('div_1')">#</a><br>
            DIV#1
        </div>
        <div id="div_2">
            <a href="javascript:klick('div_2')">#</a><br>
            DIV#2
        </div>
        <div id="dbg">
        </div>
    </body>
</htlm>

Und nochmal als Datei angehangen.

Was läuft da schief? :suspect:

gruß
Lukas
 
Soweit ich weiss, sind "style.*"-Properties sogenannte
Write-Only-Properties.
 
:faint:
Das ist ja mal voll doof.
Aber wie komm ich jetzt an die Koordinaten?
Kann ja nicht sein, das eine so blöde Kleinigkeit mir da einen Strich durch die Rechnung macht.

gruß
Lukas
 
moses_78 schrieb:
Soweit ich weiss, sind "style.*"-Properties sogenannte
Write-Only-Properties.
Zum Vergrößern anklicken....

:hehehe:
Wenn ich in JavaScript von Hand ein Style-Attribut setze, kann der das nachher auch wunderbar auslesen. Hab ich das selbe Attribut aber in CSS gesetzt, und nicht via JS, kann ich es NICHT auslesen.
(Safari, FireFox und Opera)

Heißt jetzt für mich:
anstatt CSS in einem CSS-Part zu machen, darf ich, wenn ich auf die Eigenschaften lesen will, alle CSS-Eigenschaften, auf welche ich zugreifen möchte, in einem JavaScript Part definieren. :rotfl: :faint: :mad:
Das führt das ganze irgendwie Ad Absurdum.

wer genaueres weiß, versorge mich bitte mit Quellmaterial :)

gruß
Lukas
 
Ich hab ich ein wenig im SefHTML-Forum durchgelesen:
Schreibe ich die CSS-Angaben mit dem "style"-Attribut direkt ins HTML-Element, so kann ich die wie gewünscht auslesen.

JavaScript kann nur nicht auf die Klassen, bzw. ID-Eigenschaften zugreifen.

Also, Problem gelöst :)
 
So, 12 Tage später, um einiges an Erfahrung reicher, kann ich es euch präsentieren:
Das Grundkonzept von "Punkte Verbinden mit JavaScript und DOM":

Ich verlier mal nicht viele Worte, die JS-Datei in der Zip-Datei ist für meine Verhältnisse überdurschnittlich gut kommentiert (aber ich hab draus gelernt :D), daher, bleibt nur zu sagen:
Es funktioniert :D

Wer will, kann es für sich selbst benutzen, so lange er jetzt keine Firma gründet, die mit diesem Skript die Weltherschaft erobert, und mir nicht mindestens eine Insel abgibt. ;)

gruß
Lukas

EDIT: Und keine 15 Minuten später das erste Update :D Aber nur ne Schönheits-OP

Und noch ein Edit:
Das Drag&Drop funktioniert NICHT mit FireFox, da der das window.event nicht kennt...
Aber eine Lösung wird bereits gesucht!

EDIT:
So, Safari, FireFox, Opera und Camino haben keine Probleme mit dem Script.
 
Zuletzt bearbeitet von einem Moderator:
Drag und Drop geht auch mit script.aculo.us (oder wie das
heißt...).

Auf der Webseite von denen gibts auch eine schöne Demo
dazu :)
 
moses_78 schrieb:
Drag und Drop geht auch mit script.aculo.us (oder wie das
heißt...).

Auf der Webseite von denen gibts auch eine schöne Demo
dazu :)
Zum Vergrößern anklicken....

Ich weiß.
Allerdings denke ich, dass es mit Kanonen auf Spatzen geschossen ist, wenn ich dazu script.aculo.us ins Boot hole.
Zudem, wenn ich nur fertige Sachen nutze, wo bleibt da der Lerneffekt bei :D
Hab aber auch bereits bei SelfHTML ein Script gefunden, was zumindest im Win2K-FF und im IE läuft, andere Browser werd ich daheim testen.

gruß
Lukas
 
Bei der Ajax-Community bin ich auch, aber irgendwie ist mir das da entweder zu hoch, oder zu niedrig :suspect:
Genau wir mir das SelfHTML-Forum zu arrogant ist :Pah:

Ich werd mal gucken, das meiste lern ich sowieso durchs Anwendung, und solche Probleme sehe ich eher als ein "Wenns einem keiner sagt, kannses auch nicht herausfinden" an, und dass tritt ja eigentlich recht selten auf.

gruß
Lukas
 
Der Vorteil bei Frameworks wie Prototype ist, dass
du das Rad nicht ständig neu erfinden musst, außer-
dem bieten diese Bibliotheken auch "abstraction layer"
um zb. Elemente zu formatieren, für Browser, die sich
nicht an den Standard halten.
 
Der Nachteil bei Frameworks wie Prototype ist, dass man mehr Räder hat
als man braucht. Viele linken die Lib nur rein um getElementById durch $
zu ersetzen :rolleyes: muss nicht sein.

Ausserdem sind die Libs meist nicht "crossbrowser-save" und falls mal etwas
nicht funktioniert steht man da wie der ochs' vorm Scheunentor.
Bei selbst erfundenen (kleinen) Rädern weiss man sofort wer schuld ist ;)

T.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten