Labels on Wires

[Frank]

Hi,

as proposed text on wires (centered aligned) can easily be added
trough the usage of canvas-text:

ctxt.save();
//1.Quadrant
if ((p1[0]<p2[0])&&(p1[1]>p2[1])){
winkel=Math.PI*1.5+winkel;
ctxt.translate(t1[0],t1[1]);
}
//2. Quadrant
else if ((p1[0]<p2[0])&&(p1[1]<p2[1])){
winkel = Math.PI/2-winkel;
ctxt.translate(t1[0],t1[1]);
}
//3. Quadrant
else if ((p1[0]>p2[0])&&(p1[1]<p2[1])){
//winkel = Math.PI/2+winkel;
winkel = Math.PI*1.5+winkel;
ctxt.translate(t2[0],t2[1]);
}
//4. Quadrant
else if ((p1[0]>p2[0])&&(p1[1]>p2[1])){
winkel=Math.PI*0.5-winkel;
ctxt.translate(t2[0],t2[1]);
}
ctxt.rotate(winkel);
ctxt.font = "14px Arial";
ctxt.fillStyle = "Black";
ctxt.translate((distance-(ctxt.measureText("Sample
String")).width)/2,0);
ctxt.fillText("Sample String", 0, 0);
ctxt.restore();

Maybe this little patch can be commited to git...

Thank you,

Frank

[Eric Abouaf]

Thanks Frank !
I got it working with a few changes...

However, the fix is not immediate, because I want it to work with all kinds of wires. (we have 4 different drawing algorithms at the moment)

The issue is that the positionning of the text depends of the drawing method, so we would have to implement this for each method. :(
I'm still looking for a good way to model text positionning :

Maybe the wire drawing methods should return the positions of the terminals in the canvas referential, so that we can use the same algorithm to position the text.

What do you think ?
Have you implemented it on all drawing methods ?

Eric

--
Eric Abouaf
eric....@gmail.com
Tél: 06 29 86 37 89

[Frank]

Hi,

sorry I was a few days off in Norway with no internet connection
available. No I just implemented it for 1 wire type - but I'm looking
forward for an universal solution. At the moment I'm looking at
http://canviz.googlecode.com/svn/path/. I already removed the protoype
dependency. Maybe it would be a good idea to separate the drawing
process of the wires. The lib has some nice features (like dotted line
style) and good algorithms for bezier curves. Do you think it would be
a good idea to integrate this in wireit? There are some examples
inside the lib, or I can send you a link of a demo I created combining
path.js and wireit. If you are interested I can send you a patch.

Thank you,
Frank

> eric.abo...@gmail.com

[Frank]

Hi,

you can find a demo using path.js here:http://frankhess.de/soccer/
WebContent/. This would allow a lot of interesting stuff like
modifying the bezier curve using dnd. Just dnd 2 players from the left
side on the soccer field. When moving the mouse over a wire you can
drag the black rectangle and the bezier curve follows. Integrating
this would give some flexibility to wireit.I'm in contact with the
author of path.js to get the modified version of path.js (dependency
to prototype removed) back to trunk.

Thanks,

Frank

On Sep 2, 10:17 am, Frank <m...@frankhess.de> wrote:
> Hi,
>
> sorry I was a few days off in Norway with no internet connection
> available. No I just implemented it for 1 wire type - but I'm looking

> forward for an universal solution. At the moment I'm looking athttp://canviz.googlecode.com/svn/path/. I already removed the protoype

> dependency. Maybe it would be a good idea to separate the drawing
> process of the wires. The lib has some nice features (like dotted line
> style) and good algorithms for bezier curves. Do you think it would be
> a good idea to integrate this in wireit? There are some examples
> inside the lib, or I can send you a link of a demo I created combining
> path.js and wireit. If you are interested I can send you a patch.
>
> Thank you,Frank
>
> On Aug 13, 10:27 am, Eric Abouaf <eric.abo...@gmail.com> wrote:
>
> > ThanksFrank!
> > I got it working with a few changes...
>
> > However, the fix is not immediate, because I want it to work with all kinds
> > of wires. (we have 4 different drawing algorithms at the moment)
>
> > The issue is that the positionning of the text depends of the drawing
> > method, so we would have to implement this for each method. :(
> > I'm still looking for a good way to model text positionning :
>
> > Maybe the wire drawing methods should return the positions of the terminals
> > in the canvas referential, so that we can use the same algorithm to position
> > the text.
>
> > What do you think ?
> > Have you implemented it on all drawing methods ?
>
> > Eric
>

[Eric Abouaf]

Hi Frank,

This demo is awesome !
Indeed editing the bezier curve is really nice, we could also edit the 2 directions separatly ?

Concerning the labels, It still needs some work so that we can add labels for each wire style...

Eric

--
Eric Abouaf
eric....@gmail.com