Creating a circle image in Codename One like Google plus Profile image

[Chibuike Mba]

Hi every one,

I want to create a circle image with a picture in it like google plus profile image.

Anyone knows how to achieve this in CN1?

I have tried border image in CN1 Designer but that did not help.

Thanks in advance.

[Shai Almog]

Hi,
create a mask image representing the circle. Apply the mask to a label which you can do using the maskName attribute (just type the name of the image in the resource file).

[Chibuike Mba]

Hi Shai,

I created a mask image in Photoshop, imported it to CN1 Designer through Add Multi Images menu and applied it to the Label with below code:

protected void beforeSplashScreenForm(Form f) {
        super.beforeSplashScreenForm(f);
   
        this.hideProgress(f);
               
        findLblOziFace(f).setMaskName("anotherimage.png");
        findLblVersion(f).setText(findLblVersion(f).getText()+" "+APP_VERSION);
        f.revalidate();
    }

But nothing happened, I did not see the masked images when I tested my app on the emulator.

I as well removed the image extension from the code above but still did not work.

Please what am I doing wrong?

Thank you.

[Shai Almog]

Hi,
setMask name is for the GUI builder.
If you are doing this from code get the image from the resource, convert it to a mask (using createMask) and invoke setMask on the label.

[Chibuike Mba]

Hi Shai,

using setMastName through the Desginer does not have any effect.

But on the code using createMask method of image object inverts the mask image as shown in the attached screen shot:

Image image = this.getResource().getImage("oziface.png");
       
        findLblOziFace(f).setMask(image.createMask());

The original mask image i created with photoshop is oziface.png

[Shai Almog]

Hi,
the image should be inverted to get the effect you want. You need the blue channel to represent the sections you want to keep and the black (zero) what you want to remove.

[Gustavo Mandolesi]

You can also create your mask programmatically, as in the example below:

        Form form = new Form(null);

        Image originalImage = theme.getImage("face.jpg");

        Label label1 = new Label(originalImage);

        form.addComponent(label1);

        int w = originalImage.getWidth();

        int h = originalImage.getHeight();

        

        Image maskImage = Image.createImage(w, h);

        Graphics g = maskImage.getGraphics();

        g.setAntiAliased(true);

        g.setColor(0x000000);

        g.fillRect(0, 0, w, h);

        g.setColor(0xffffff);

        g.fillArc(0, 0, w, h, 0, 360);

        Label label2 = new Label(maskImage);

        form.addComponent(label2);

        

        Object mask = maskImage.createMask();

        

        Image maskedImage = originalImage.applyMask(mask);

        Label label3 = new Label(maskedImage);

        form.addComponent(label3);

        

        form.show();

Hope it helps.

\Gustavo

[Chibuike Mba]

Thanks Shai and Gustavo,

I choose programmatic way, that worked for me.