Forums

Good morning flare users,

this demo contains an extension of the EdgeRenderer from the flare toolkit which includes the possibility to draw an edge with arrow heads on both ends of the edge. An edge is drawn in that manner if the edge is declared to be not directed (aEdge.directed == false) and the arrow type is set to line or triangle (aEdge.arrowType != ArrowType.NONE).

This extension was achieved by simply copying the relevant parts of the original EdgeRenderer source code for the end point arrow calculating/drawing and applying it to the start point.

[attachment=307]

An outshining peak in the history of software engineering.

cheers

martin


requires flare release 2008.08.08 or higher

Hi Martin,
Thanks for the great example. I'm a bit of a newbie though, and I'm looking for a simple way to add triangle arrowheads on both ends of all edges. I'm trying this which is, of course, not working:

vis.data.edges.setProperty("arrowType", Arrows.TRIANGLE);

I've attached more of my code, although it's not the complete project. Any assistance would be really appreciated!

Many thanks,
Linus

...OOOPS, I posted this in another thread (Hey, n00b status confirmed!). Meant to post here. Sorry!

Hi Everyone - Glad to stumble across this forum; Flare would be a lot more difficult without this resource to get some examples from.

I wanted to ask about the ExtendedEdgeRenderer class' reference to flare.vis.util.Arrows. Couldn't see if there was a work around for this since it does not appear to be in the latest build (the alpha release: 080808)

Am I missing something?

Again, thanks for the help!

---

Wait: I think I understand: Instead of using Arrows, we import:

flare.vis.data.render.ArrowType

And use it.

Thanks!

Adam

Hi Linus,

hope you are well.

Thanks for posting the source which shows the not working situation you are facing. That makes it so much easier to find the problem. As far as I see you are not using the ExtendedEdgeRenderer which comes along with the Demo. The flare core EdgeRenderer can't render edges with two arrow heads as far as I see. For that matter I extended it (or more precise copied the source code and modified it) to get this done. Through the following line in the demo the new extended edge renderer comes into play


so you would have to include that to your demo and also of course include this new renderer class.

Hope that helps

martin

---

Hi Adam,

thanks a lot for pointing out that this demo doesn't run anymore with the current flare version, unfortunately I missed to update it. As you already found out, the ArrowType class had been introduced with release 2008.08.08 and has to be used for the arrow types. I attached the updated version to the thread above.

Thanks

martin

hey martin (34all) - Man you rock this forum....thanks for making it happen; it's people like you that help make cool new technologies make their way out there.

I'll probably be posting here a few more times before it's all said and done, but hopefully I'll have a nice tool for browsing hierarchical data graphs here with this visualization tookit.

Tootles,
adam

(31-10-2008 02:39 AM)34all Wrote: [ -> ]Hi Linus,

hope you are well.

Thanks for posting the source which shows the not working situation you are facing. That makes it so much easier to find the problem. As far as I see you are not using the ExtendedEdgeRenderer which comes along with the Demo. The flare core EdgeRenderer can't render edges with two arrow heads as far as I see. For that matter I extended it (or more precise copied the source code and modified it) to get this done. Through the following line in the demo the new extended edge renderer comes into play

Code:

vis.data.edges.setProperty("renderer", ExtendedEdgeRenderer.instance);

so you would have to include that to your demo and also of course include this new renderer class.

Hope that helps

martin

---

Hi Adam,

thanks a lot for pointing out that this demo doesn't run anymore with the current flare version, unfortunately I missed to update it. As you already found out, the ArrowType class had been introduced with release 2008.08.08 and has to be used for the arrow types. I attached the updated version to the thread above.

Thanks

martin

Hi Martin - many thanks for the response. I understand what you're saying, I've added the ExtendedEdgeRenderer class to my project and I have included the code calling the renderer as you posted above, but still no arrows.

In your code, I see you are specifying ArrowType in buildGraph()...I suspect I need to do something similar but I'm not sure how it would fit into my code.

public static function buildPaths(vis:Visualization):void {
//Set edge properties
vis.data.edges.setProperty("renderer", ExtendedEdgeRenderer.instance);

vis.data.edges.setProperty("arrowHeight", 17);
vis.data.edges.setProperty("arrowWidth", 11);
vis.data.edges.setProperty("lineWidth", 2);
vis.data.edges.setProperty("lineColor", 0xff000000);
vis.data.edges.setProperty("fillColor", 0xffCCCCCC);

//vis.data.edges.setProperty("arrowType", Arrows.TRIANGLE);

}

looks good, you just have to use the newly introduced ArrowType class instead as pointed out here in thread by Adam just yesterday. I updated the demo accordingly. So instead of the above line


should do.

Greets

martin

Success!! Thanks!