Search code examples
codenameoneparparvm

Codename One rounded image from an internet source

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
Solution

  • 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.