Showing an image in a URCap

URCap Development
1

There is two options for showing an image in PolyScope:

  • ImgComponent - HTML5 concept
  • LabelComponent - Basically an icon + text

Label component

On the HTML side:

<div id="liveImageImgDiv"><label id="liveImage"/></div>

In the contribution class:

@Label(id = "liveImage")
private LabelComponent liveImage;

In openView():

try{
   liveImage.setImage(ImageIO.read(getClass().getResource("/com/ur/urcap/helloworld/impl/ur.png")));
} catch (java.io.IOException e) {
   e.printStackTrace();
}

Img component

On the HTML side:

<div id="liveImageImgDiv2"><img src="none.png" id="liveImage2"></div>

In openView():

try{
	liveImage2.setImage(ImageIO.read(getClass().getResource("/com/ur/urcap/helloworld/impl/ur.png")));
} catch (java.io.IOException e) {
	e.printStackTrace();
}
2

Is there a method to assign a callback to an image ? E.g. assign a callback function to be executed when the mouse is clicking on the image.

3

@hrd,

A callback function from an image, e.g. like a button functionality, is not possible in the current SDK.

(Valid for PolyScope 3.3.0.145, SDK 1.0.0.7)

4

For the Img component, on the html side you call “none.png”, but in OpenView() its “ur.png”. Shouldn’t they be the same?

5

@nicolas,

Not necessarily, none.png is written to indicate, that there is not an actual picture behind the img.

The setImage() method is called to overwrite the img component that is linked by the id=liveImage2.
Hence, if you do not put the setImage() method in the openView method, there will not be any image in your UI, irregardless that the img component was linked to the right picture.

1 Like
6

It didn’t work for me, I think I wasn’t declaring liveImage2 properly. The label approach works like a charm though!

7

@nicolas, the initialization is like the one of the Label component:

@Img(id = "liveImage2")
private ImgComponent liveImage2;

Anyway, I was wondering if it is possible to set an image as background, and in such a case what would be the correct size of the image (having in mind the tablet application and not just the simulator).

I mean something like the URcap shown in the video of the Robotiq 2-Finger Gripper.

Thank you for your time,
Alessandro Tondo @qbrobotics

1 Like
8

To make a clickable image, you can use a button element without a text and assign an image, which has the same size as the button.

1 Like
9

Hello,
I’m getting a NoClassDefFoundError when I try to use ImageIO. I know that class is included in rt.jar from jvm libraries, but apparently the classpath of the URSim environment doesn’t include it.
How can I add that jar to my classpath in this environment? I couldn’t find a way to embed this jar in my urcap either.
Does anyone know what I’m missing?

10

Make sure you’re initializing the component correctly for example.

(Java side)


(HTML side)

@preyna

11

@roman.reiner thanks for your reply.
For the record, the problem was in the Manifest; I wasn’t importing javax.imageio.*, so it crashed in runtime.

1 Like
12

Hi all,
I have a short question: is it possible to remove the borders in the image? I tried following these steps, and this is what I get:

The declaration is the following:

    @Img(id = "statusImage")
    private ImgComponent statusImageLabel;

And on the HTML side;

                    <div id="productStatus" style="display: inline-block;">
                        <img src="none.png" id="statusImage" style="width: 40px; height: 40px;"/>
                    </div>

And finally, I’m setting it like this:

        try {
            statusImageLabel.setImage(ImageIO.read(getClass().getResource("/img/error.png")));
        } catch (IOException e) {
            e.printStackTrace();
        }

I’d like to remove the borders so that I can use round images over the grey background. Is that possible with the standard SDK tools?

13

I just figured it out.
For the record, I used LabelComponent in Java and label as HTML tag, and I added a border="0" attribute to the tag.
I tried the same with the img tag, but it didn’t work.

Solution:

    @Label(id = "statusImage")
    private LabelComponent statusImageLabel;

                    <div id="productStatus" style="display: inline-block;">
                        <label id="statusImage" border="0"/>
                    </div>
1 Like
14

Hi! I’m having troubles to include an image, I’m using ImageIcon function, I’m not sure what the problem is. Here is my code:

JLabel jIcon = new JLabel();
ImageIcon imgIcon = new ImageIcon(new ImageIcon("/com/ur/urcap/helloworld/impl/Logo.png").getImage().getScaledInstance(150,51, Image.SCALE_DEFAULT));
jIcon.setIcon(imgIcon);

In URSim I already can put my image by putting the Location in my computer but the problem is when I want to put it on the teach pendant’s screen. I’m running out of options so if you have any suggestion or you know where the problem is I’ll be thankful in advantage.

15

@slvdr05
To add images in a swing based URCap I do the following:

public JLabel imageLabel;
BufferedImage image = ImageIO.read(this.getClass().getResource("image.png"));
imageLabel = new JLabel(new ImageIcon(imageLabel));

This will store your image in the JLabel imageLabel. Add this to your GUI as you would any other JLabel
This relies on your image (here called image.png) saved under src/main/resources.

Hope this helps.

4 Likes
16

@slvdr05
I think the trick here really is @sam.verity-hilton using the below:

As getResource() will return an object from within the resource-folder of your bundle (URCap / JAR).
While a “static” use of /com/ur/... will point to a location in the root file system.

1 Like
17

Thanks a lot, this worked for me, just to clarify I used the instruction like this:

BufferedImage image = ImageIO.read(getClass().getResource(“/image.png”));

I also find out this way could be used for the classpath root.

BufferedImage image = ImageIO.read(getClass().getClassLoader().getResource(“image.png”));

2 Likes
18

Hi @sam.verity-hilton

Where exactly in the code are these lines? I’m having trouble getting this to work, I put the lines in a function SetLogo() in the program node view, which is then called from openView() in the contribution.

Urimagesnip
Urimagesnip.JPG692Ă—116 14.6 KB

imageLabel being defined at the beginning of the class. This isn’t throwing an exception, but the image isn’t there.

19

@ianc1
That code looks fine to me, make sure you’ve run setLogo() from within buildUI() and then added imageLabel to the JPanel passed as an argument in buildUI().

20

Thanks! I didn’t know I had to call it in the BuildUI function, good to know!

1 Like