Codename One rounded image from an internet source

Question

I am trying to display a rounded image that I get straight from the Internet. I used the code below to create a round mask, get the image from the Internet, then tried to either set the mask on the image or the label itself. None of these approaches worked. If I remove the mask, the image is displayed fine. If I keep the code to set the mask then all I see is an empty white circle.

I have the idea that if I apply the mask on the image itself, then it may not take effect because the image was not downloaded at the time the mask was applied.

But I don't seem to understand why calling setMask on the label is also not working.

   // Create MASK

    Image maskImage = Image.createImage(w, l);
    Graphics g = maskImage.getGraphics();
    g.setAntiAliased(true);
    g.setColor(0x000000);
    g.fillRect(0, 0, w, l);
    g.setColor(0xffffff);
    g.fillArc(0, 0, w, l, 0, 360);
    Object mask = maskImage.createMask();



    // GET IMAGE
    com.cloudinary.Cloudinary cloudinary = new com.cloudinary.Cloudinary(ObjectUtils.asMap(
            "cloud_name", "REMOVED",
            "api_key", "REMOVED",
            "api_secret", "REMOVED"));
    // Disable private CDN URLs as this doesn't seem to work with free accounts
    cloudinary.config.privateCdn = false;
    Image placeholder = Image.createImage(150, 150);
    EncodedImage encImage = EncodedImage.createFromImage(placeholder, false);
    Image img2 = cloudinary.url()
            .type("fetch") // Says we are fetching an image
            .format("jpg") // We want it to be a jpg
            .transformation(
                    new Transformation()
                    .radius("max").width(150).height(150).crop("thumb").gravity("faces").image(encImage, "http://upload.wikimedia.org/wikipedia/commons/4/46/Jennifer_Lawrence_at_the_83rd_Academy_Awards.jpg");

    Label label = new Label(img2);
    label.setMask(mask);  // also tried to do img2.applyMask(mask); before passing img2 

Answer 1

So I tried various things:

1) Removing the mask that was set through cloudinary - That did not work

2) applied the mask to the placeholder & encoded image (as expected these shouldnt affect the final version that is getting published)

3) This is what works! I am not sure if the issue is really with downloading the picture before or after applying the mask.. time can tell down the road

    Label label = new Label();
    img2.applyMask(mask);  // If you remove this line , the image will no longer be displayed, I will only see a rounded white circle ! I am not sure what this is doing, it might be simply stalling the process until the image is downloaded? or maybe somehow calling repaint or revalidate
    label.setIcon( img2.applyMask(mask));

Here is what worked for me if anyone else is having similar issues:

        //CREATE MASK
    Image maskImage = Image.createImage(w, l);
    Graphics g = maskImage.getGraphics();
    g.setAntiAliased(true);
    g.setColor(0x000000);
    g.fillRect(0, 0, w, l);
    g.setColor(0xffffff);
    g.fillArc(0, 0, w, l, 0, 360);
    Object mask = maskImage.createMask();

    //CONNECT TO CLOUDINARY 
    com.cloudinary.Cloudinary cloudinary = new com.cloudinary.Cloudinary(ObjectUtils.asMap(
            "cloud_name", "REMOVED",
            "api_key", "REMOVED",
            "api_secret", "REMOVED"));
    // Disable private CDN URLs as this doesn't seem to work with free accounts
    cloudinary.config.privateCdn = false;

    //CREATE IMAGE PLACEHOLDERS 
    Image placeholder = Image.createImage(w, l);
    EncodedImage encImage = EncodedImage.createFromImage(placeholder, false);

    //DOWNLOAD IMAGE
    Image img2 = cloudinary.url()
            .type("fetch") // Says we are fetching an image
            .format("jpg") // We want it to be a jpg
            .transformation(
                    new Transformation()
                    .crop("thumb").gravity("faces")
                    .image(encImage, url);


    // Add the image to a label and place it on the form.
    //GetCircleImage(img2);
    Label label = new Label();
    img2.applyMask(mask);   // If you remove this line , the image will no longer be displayed, I will only see a rounded white circle ! I am not sure what this is doing, it might be simply stalling the process until the image is downloaded? or maybe somehow calling repaint or revalidate
    label.setIcon( img2.applyMask(mask));

Shai, I seriously appreciate your time!! Thank you very much. Will have to dig more into it if it gives me any other problems later but it seems to consistently work for now.

Answer 2

I think the making code you set to the label might be conflicting with the masking code you get from Cloudinary.

Answer 3

The Cloudinary API returns a URLImage which doesn't work well with the Label.setMask() method because, technically, a URLImage is an animated image (it is a placeholder image until it finishes loading, and then "animates" to become the target image).

I have just released a new version of the cloudinary cn1lib which gives you a couple of options for working around this.

I have added two new image() methods. One that takes an ImageAdapter parameter that you can use to apply the mask to the image itself, before setting it as the icon for the label. Then you wouldn't use Label.setMask() at all.

See javadocs for this method here

The other method uses the new Async image loading APIs underneath to load the image asynchronously. The image you receive in the callback is a "real" image so you can use it with a mask normally.

See javadocs for this method here

We are looking at adding a soft warning to the Label.setMask() and setIcon() methods if you try to add an "animated" image and mask it so that it is more clear.