Fork us on GitHub

Image Overriding

Building your own image using code
Post Image

Image Overriding

I hoped todays post would cover the new Kitchen Sink demo but due to a couple of bugs we decided to postpone that to next week. In the meantime I’d like to discuss something I did there which is actually pretty cool and most developers have no idea that we can do: Image Overriding.

The new kitchen sink renders a set of icons like the old demo. In this version of the demo we wanted to show off graphics drawing which is an important feature missing from the old demo. Steve’s clock demo is a great example of that!

When the time came to create an icon for that demo it dawned on us that it would be cool if the clock icon was actually "live". We decided to create an Image in code that draws everything dynamically. Yes, we could have used a Painter but that would have meant reworking a lot of the existing code, the same would have been true if we used another component.

This is the code we used to create a clock, I’m redacting the clock drawing code itself for brevity’s sake:

class ClockImage extends Image {
    int w = 250, h = 250;

    ClockImage() {
        super(null);
    }

    ClockImage(int w, int h) {
        super(null);
        this.w = w;
        this.h = h;
    }

    @Override
    public int getWidth() {
        return w;
    }

    @Override
    public int getHeight() {
        return h;
    }

    @Override
    public void scale(int width, int height) {
        w = width;
        h = height;
    }

    @Override
    public Image fill(int width, int height) {
        return new ClockImage(width, height);
    }

    @Override
    public Image applyMask(Object mask) {
        return new ClockImage(w, h);
    }


    @Override
    public boolean isAnimation() {
        return true;
    }

    @Override
    public boolean requiresDrawImage() {
        return true;
    }

    @Override
    protected void drawImage(Graphics g, Object nativeGraphics, int x, int y) {
        paintClock(g, x, y, w, h, x + g.getTranslateX(), y + g.getTranslateY());
    }

    @Override
    protected void drawImage(Graphics g, Object nativeGraphics, int x, int y, int w, int h) {
        paintClock(g, x, y, w, h, x + g.getTranslateX(), y + g.getTranslateY());
    }

    @Override
    public boolean animate() {
        if (System.currentTimeMillis() / 1000 != lastRenderedTime / 1000) {
            currentTime.setTime(System.currentTimeMillis());
            return true;
        }
        return false;
    }
};

That is it!

Notice that the image must declare itself as an animation and then override animate() to invoke drawImage. Also notice the method requiresDrawImage which disables some builtin image optimizations that we can perform in the native layer that might break this.

This is how we built FontImage within our code and we might do more of this as we move forward to allow more vector graphics primitives.

Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.