Hi!

I'm porting from jgraph5 to jgraphx and am trying to get my custom icon code working.

I've read about setting the style string parameter.

I'm trying to use something like this:

style = "shape=image;image=computer9.gif"

However, the images I'm using are contained as resources in the jar file my code glob gets put into.

How do I tell jgraphx to use an image resource? In jgraph5, I loaded an Java ImageIcon with my resource and was able to set icons using that.

Thanks,

Bobby

asked 24 Aug '12, 10:23

Bobby%20Krupczak's gravatar image

Bobby Krupczak
2629
accept rate: 7%


See the last block for the solution to your problem or the full text about how I got there.

This is in detail what you could use to set an image style, e. g. "bell.png", where the image is referenced with an absolute path:

    // get graph stylesheet
    mxStylesheet stylesheet = graph.getStylesheet();

    // define image style name
    String myStyleName = "myImageStyle";

    // define image style           
    Hashtable<String, Object> style = new Hashtable<String, Object>();
    style.put( mxConstants.STYLE_SHAPE, mxConstants.SHAPE_IMAGE);
    style.put( mxConstants.STYLE_IMAGE, "file:/c:/images/bell.png");
    style.put( mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_BOTTOM);

    stylesheet.putCellStyle( styleName, style);

    Object v1 = graph.insertVertex(parent, null, "Vertex 1", 0, 0, 80, 30, myStyleName);

But to answer your question, here's from mxConstants.java:

    /**
     * Defines the key for the image style. Possible values are any image URL,
     * registered key in mxImageResources or short data URI as defined in
     * mxImageBundle.
     * The type of the value is <code>String</code>. This is the path to the
     * image to image that is to be displayed within the label of a vertex. See
     * mxGraphics2DCanvas.getImageForStyle, loadImage and setImageBasePath on
     * how the image URL is resolved. Finally, mxUtils.loadImage is used for
     * loading the image for a given value.
     */
    public static String STYLE_IMAGE = "image";

And from there we go to mxUtils.loadImage, an excerpt:

            ...
            URL realUrl = null;

            try
            {
                realUrl = new URL(url);
            }
            catch (Exception e)
            {
                realUrl = mxUtils.class.getResource(url);
            }

            if (realUrl != null)
            {
                try
                {
                    img = ImageIO.read(realUrl);
                }
                catch (Exception e1)
                {
                    // ignore
                }
            }
            ...

You see that there is resource loading. So what you need to do is to create e. g. a root folder in parallel to the src/com/mxgraph/... package, e. g. src/icons and put your images in there. Then you reference them like this:

    // get graph stylesheet
    mxStylesheet stylesheet = graph.getStylesheet();

    // define image style name
    String myStyleName = "myImageStyle";

     // define image style          
    Hashtable<String, Object> style = new Hashtable<String, Object>();
    style.put( mxConstants.STYLE_SHAPE, mxConstants.SHAPE_IMAGE);
    style.put( mxConstants.STYLE_IMAGE, "/icons/bell.png");
    style.put( mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_BOTTOM);

    stylesheet.putCellStyle( styleName, style);

    Object v1 = graph.insertVertex(parent, null, "Vertex 1", 0, 0, 80, 30, myStyleName);

or in your case, assuming that your computer9.gif is in /src/icons/compter9.gif:

"shape=image;image=/icons/computer9.gif"
link

answered 26 Aug '12, 01:14

Lofi's gravatar image

Lofi
1.0k1221
accept rate: 37%

edited 26 Aug '12, 01:19

Here's a full example with 2 versions of style definitions, assuming your image is in /resources/computer9.gif:

package com.mxgraph.examples.swing;

import java.util.Hashtable;

import javax.swing.JFrame;

import com.mxgraph.swing.mxGraphComponent;
import com.mxgraph.util.mxConstants;
import com.mxgraph.view.mxGraph;
import com.mxgraph.view.mxStylesheet;

public class IconExample extends JFrame {

    public IconExample() {

        super("Icon Example");

        mxGraph graph = new mxGraph();
        Object parent = graph.getDefaultParent();

        graph.getModel().beginUpdate();
        try {

            // get stylesheet
            mxStylesheet stylesheet = graph.getStylesheet();

            // define stylename
            String styleName = "myImageStyle";

            // create image style
            Hashtable<String, Object> style = new Hashtable<String, Object>();
            style.put( mxConstants.STYLE_SHAPE, mxConstants.SHAPE_IMAGE);
            style.put( mxConstants.STYLE_IMAGE, "/resources/computer9.gif");
            style.put( mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_CENTER);

            // make new style available via stylename
            stylesheet.putCellStyle( styleName, style);

            // example 1: use style by stylename
            Object v1 = graph.insertVertex(parent, null, "v1", 100, 100, 80, 30, styleName);

            // example 2: use style by style definition
            Object v2 = graph.insertVertex(parent, null, "v2", 200, 200, 80, 30, "shape=image;image=/resources/computer9.gif");

            // create edge
            graph.insertEdge(parent, null, "", v1, v2);

        } finally {
            graph.getModel().endUpdate();
        }

        mxGraphComponent graphComponent = new mxGraphComponent(graph);
        getContentPane().add(graphComponent);
    }

    public static void main(String[] args) {
        IconExample frame = new IconExample();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(800, 600);
        frame.setVisible(true);
    }
}
link

answered 26 Aug '12, 11:47

Lofi's gravatar image

Lofi
1.0k1221
accept rate: 37%

edited 26 Aug '12, 11:48

Hi!

Thanks for your answer!

I'm trying to trace through your code and understand it. If I have 5 different icons that I want to choose from (based on state of graph cell), how would I do so?

Do I need a distinct myStyleName/Hashtable for each entry in the stylesheet?
That is, myImageStyle1, myImageStyle2, etc?

When done, I'll post my code.

Thanks,

Bobby

link

answered 26 Aug '12, 10:39

Bobby%20Krupczak's gravatar image

Bobby Krupczak
2629
accept rate: 7%

I'd create 5 different styles and assign them to the vertex when needed. But that's only my own personal preference.

(26 Aug '12, 11:50) Lofi

Hi!

More questions on your sample code. (Thanks for posting, by the way.)

In my jar file, my images/icons are at the root of the jar with no /. Do I simply put "computer9.gif" if thats the case? In my build area, they are under src/resources/computer9.gif for example.

Also, you refer to styleName in the stylesheet.put() call but do not define it. Should that have been myStyleName?

Do I understand your code correctly such that the literal myImageStyle string is used ?

Where does the "shape=image;image=computer9.gif" get placed? I dont see where you put that in the stylesheet itself nor in the vertex create? I'm going to be setting icons after the creation of vertices. Do I need to make sure to create them with enough geometry space to hold the icon or will the graph code adjust the vertex geometry?

Thanks,

Bobby

link

answered 26 Aug '12, 11:04

Bobby%20Krupczak's gravatar image

Bobby Krupczak
2629
accept rate: 7%

I think you still need to use /computer9.gif, try it. What I'm sure of is that you should use the same folder structure in the package like you have in your build area. Don't put resources in the root of your package.

Everything is defined. I think you missed something in the code. Yes, I use the string myImageStyle as a reference. The other thing can be used as an alternative. See the full code below where I use both examples.

(26 Aug '12, 11:54) Lofi

Hi!

Thanks. I experimented with the sample code this morning and got things working. I'll post snippets in a separate message.

What I found is that I needed needed to put /computer9.gif for the filename because the resource was listed in the root of my jar file with no '/'. For example, computer9.gif is listed in the jar as:

1763 Sun Aug 26 12:00:32 EDT 2012 computer9.gif

Also, I created a separate style hashtable for each entry in the style sheet that I want to refer to. Then, I refer to that name when I set the style in my vertex creation code.

Thanks,

Bobby

link

answered 26 Aug '12, 13:26

Bobby%20Krupczak's gravatar image

Bobby Krupczak
2629
accept rate: 7%

Hi

Here is some snippets of code I use to modify a vertice's icon. I also figured out that I have to give reasonable geometry (height/width) when I create the vertex. For example, if I gave 0,0 as the height/width when I created the vertex, the icon would not appear. I use 50,50 which is large enough to hold all my icons.

I still need to pick at fonts and font sizes for labels, but that is another battle.

Thanks,

Bobby

private void initializeStylesheet() { Hashtable<string,object> style; mxStylesheet theStylesheet;

   theStylesheet = theGraph.getStylesheet();

   style = new Hashtable<String,Object>();
   style.put( mxConstants.STYLE_SHAPE, mxConstants.SHAPE_IMAGE);
   style.put( mxConstants.STYLE_IMAGE, "/computer9.gif");
   style.put( mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_BOTTOM);
   theStylesheet.putCellStyle("computer9",style);

   style = new Hashtable<String,Object>();
   style.put( mxConstants.STYLE_SHAPE, mxConstants.SHAPE_IMAGE);
   style.put( mxConstants.STYLE_IMAGE, "/computer9-blue.gif");
   style.put( mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_BOTTOM);
   theStylesheet.putCellStyle("computer9-blue",style);

   style = new Hashtable<String,Object>();
   style.put( mxConstants.STYLE_SHAPE, mxConstants.SHAPE_IMAGE);
   style.put( mxConstants.STYLE_IMAGE, "/computer9-green.gif");
   style.put( mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_BOTTOM);
   theStylesheet.putCellStyle("computer9-green",style);

   style = new Hashtable<String,Object>();
   style.put( mxConstants.STYLE_SHAPE, mxConstants.SHAPE_IMAGE);
   style.put( mxConstants.STYLE_IMAGE, "/computer9-yellow.gif");
   style.put( mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_BOTTOM);
   theStylesheet.putCellStyle("computer9-yellow",style);

}

protected void setVertexIcon(Object UserObject, mxCell s) { String style; Object[] cells = new Object[]{cell};

 // omit logic code to determine which style to use
 style = "computer9";

 // theGraph is an instance variable of type mxGraph
 // graphComponent is an instance variable of type mxGraphComponent
 theGraph.setCellStyle(style,cells);
 graphComponent.refresh();

}

link

answered 26 Aug '12, 13:32

Bobby%20Krupczak's gravatar image

Bobby Krupczak
2629
accept rate: 7%

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×194
×79
×2

Asked: 24 Aug '12, 10:23

Seen: 4,675 times

Last updated: 26 Aug '12, 13:32