Forums - using images instead of text nodes

This demo shows how to use images as nodes instead of text based rendering.

The LabelRenderer used in this demo (same as in the DataMountain demo)

Code:

LabelRenderer nodeRenderer = new LabelRenderer(null, "image");

nodeRenderer.setTextField(null);

nodeRenderer.setVerticalAlignment(Constants.BOTTOM);

nodeRenderer.setHorizontalPadding(0);

nodeRenderer.setVerticalPadding(0);

nodeRenderer.setMaxImageDimensions(100,100);

You can also have a combined images/text rendering which is hopefully easy to implement based on this demo.

While this is quite straight forward the more tricky thing with this demo if you never did it before is that the default spring length of the edges is too short, the both images are overlapping.

Here we need to set this length explicitly, along with other parameters for the sake of demonstration (for which we use the default values)

Code:

ForceSimulator fsim = new ForceSimulator(new RungeKuttaIntegrator());

float gravConstant = -1f; 

float minDistance = -1f;

float theta = 0.9f;

float drag = 0.01f; 

float springCoeff = 1E-4f;  

float defaultLength = 150f;  //default: 50f

fsim.addForce(new NBodyForce(gravConstant, minDistance, theta));

fsim.addForce(new DragForce(drag));

fsim.addForce(new SpringForce(springCoeff, defaultLength));

ForceDirectedLayout fdl = new ForceDirectedLayout(GRAPH, fsim,true);

be well and don't forget to also download the two attachted images a.jpg and b.jpg below in order to run the demo

Hi there

Very cool!

Would it be possible to do something similar in treeview, with some nodes being rendered as text and others as images?

Cheers!

Rodolphe

Hi Rodolphe,

hope you are well.

I assume the best way to do this is to use two LabelRenderer, one for the images (as in the example above) and one for text. Once you have these two Renderer, you could distinguish them with a predicate. See the
GraphViewPredicateBasedRendering demo for how to implement predicate based rendering.

Hope that works out for you, if you can't get it together please let us know here.

Cheers

martin

ps. as usual, baby pap is looking forward for your solution Wink

Hi, 34all. I want to show image and its label at the same time in each node, codes are as following:
//---------
Graph g = new Graph();

g.addColumn("image", String.class);
g.addColumn("ftype",Flavour.class);

Node centroid = g.addNode();
centroid.setString("image","data/4366.jpg"));
centroid.set("ftype", new Flavour("cluster1"));

m_vis.addGraph(GRAPH, g);
//-----------

Then horizontally, the image is on the left and the text on the right hand.
How could I set image on the top and text on the bottom vertically?
Thanks.

--Cissy

an other question: if I want to set different length to each edge, how can I do ?

Hi Cissy,

for the sake of adding demo files to this board, I just put the answer in a demo and attach it to this thread. Nevertheless, the answer is basically just one more line

Code:

nodeRenderer.setImagePosition(Constants.TOP);

cheers

martin

cissy Wrote:an other question: if I want to set different length to each edge, how can I do ?

I would like to know myself. I just asked a while ago about predicate based forces in the sourceforge prefuse forum
http://sourceforge.net/forum/forum.php?t..._id=343013
but didn't got any response yet. Maybe you repost your question in the sourceforge forum

cheers

martin

Hi, Martin. Thanks very much for your reply. It works now.
Another question: If I want to distinguish different group with different color (just like the prefuse demo AggregatreDemo.java does), but there are more than 3 groups and in each group there are more than 3 items. If I develope based on AggregatreDemo.java, it's very tedious. Do you know other similar examples like zone manager?

Thanks again.
--cissy

Sorry, I just realize you are the writer of zonemanager. I just send an email to you. Wish to get response from you.
--Yaxi