Nine Slice Scalling

Below is the public contract (constructor and methods) of my NineSliceImage component. It may be used to draw Buttons, Title bars and Frames.

import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;

public class NineSliceImage {

  public NineSliceImage (Image img, int vMargin, int hMargin) { ... }

  public void paintFrameAround (Graphics g, int x, int y, int width, int height) { ... }
  public Image createFrameFor (int width, int height) { ... }

}

And below is a sample usage:

class MyClass extends Canvas {
  MyClass () throws java.io.IOException {
  Image i = Image.createImage("/pattern.PNG");
  this.nsi = new NineSliceImage(i, 5, 5);
  }
  protected void paint(Graphics g) {
  nsi.paintFrameAround(g, 20, 20, 20, 20);
  }
}

Where patter is the following image:

And the resulting frame is:

Full component source code below:

import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;

public class NineSliceImage {

  private Image originalImage;
  private int verticalMargin;
  private int horizontalMargin;
  int middlePieceHeight;
  int middlePieceWidth;

  public NineSliceImage (Image img, int vMargin, int hMargin) {
    validateConstructorParameters(img, vMargin, hMargin);
    setAttributesValuesFor(img, vMargin, hMargin);
  }

  public Image createFrameFor (int width, int height) {
    validateWidthAndHeight(width, height);

    int middleHeight = getMiddleHeight(height);
    int middleWidth = getMiddleWidth(width);
    Image frame = Image.createImage(middleWidth + (2 * this.horizontalMargin),
        middleHeight + (2 * this.verticalMargin));
    Graphics g = frame.getGraphics();

    this.paintFrameAround(g, horizontalMargin, verticalMargin, middleWidth, middleHeight);

    return frame;
  }

  public void paintFrameAround (Graphics g, int x, int y, int width, int height) {
    validateWidthAndHeight(width, height);

    int middleWidth = getMiddleWidth(width);
    int middleHeight = getMiddleWidth(height);
    int totalWidth = middleWidth + (2 * this.horizontalMargin);
    int totalHeight = middleHeight + (2 * this.verticalMargin);
    x = x - ((middleWidth - width) / 2) - this.horizontalMargin;
    y = y - ((middleHeight - height) / 2) - this.verticalMargin;

    drawFrameCorners(g, x, y, middleWidth, middleHeight, totalWidth, totalHeight);
    drawTopAndBottomLines(g, x, y, width, totalHeight);
    drawLeftAndRightColumns(g, x, y, height, totalWidth);
  }

  private void validateConstructorParameters (Image img, int vMargin, int hMargin) {
    if (img == null || vMargin <= 0 || hMargin <= 0) {
      throw new IllegalArgumentException();
    }
    if (vMargin >= img.getHeight() / 2) {
      throw new IllegalArgumentException();
    }
    if (hMargin >= img.getWidth() / 2) {
      throw new IllegalArgumentException();
    }
  }

  private void setAttributesValuesFor (Image img, int vMargin, int hMargin) {
    this.originalImage = img;
    this.verticalMargin = vMargin;
    this.horizontalMargin = hMargin;
    this.middlePieceHeight = this.originalImage.getHeight()
        - (2 * this.verticalMargin);
    this.middlePieceWidth = this.originalImage.getWidth()
        - (2 * this.horizontalMargin);
  }

  private void validateWidthAndHeight (int width, int height) {
    if (width <= 0 || height <= 0) {
      throw new IllegalArgumentException();
    }
  }

  private int getMiddleWidth (int width) {
    return getHorizontalRepetitions(width) * middlePieceWidth;
  }

  private int getHorizontalRepetitions (int width) {
    int horizontalRepetitions = width / middlePieceWidth;

    if (width % middlePieceWidth > 0) {
      horizontalRepetitions++;
    }

    return horizontalRepetitions;
  }

  private int getMiddleHeight (int height) {
    return getVerticalRepetitions(height) * middlePieceHeight;
  }

  private int getVerticalRepetitions (int height) {
    int verticalRepetitions = height / middlePieceHeight;

    if (height % middlePieceHeight > 0) {
      verticalRepetitions++;
    }

    return verticalRepetitions;
  }

  private void drawFrameCorners (Graphics g, int x, int y, int middleWidth,
      int middleHeight, int totalWidth, int totalHeight) {
    g.setClip(x, y,
        this.horizontalMargin, this.verticalMargin);
    g.drawImage(this.originalImage, x, y,
        Graphics.LEFT | Graphics.TOP);
    g.setClip(x, y + this.verticalMargin + middleHeight,
        this.horizontalMargin, this.verticalMargin);
    g.drawImage(this.originalImage, x, y + totalHeight,
        Graphics.LEFT | Graphics.BOTTOM);
    g.setClip(x + this.horizontalMargin + middleWidth, y,
        this.horizontalMargin, this.verticalMargin);
    g.drawImage(this.originalImage, x + totalWidth, y,
        Graphics.RIGHT | Graphics.TOP);
    g.setClip(x + this.horizontalMargin + middleWidth, y + this.verticalMargin + middleHeight,
        this.horizontalMargin, this.verticalMargin);
    g.drawImage(this.originalImage, x + totalWidth, y + totalHeight,
        Graphics.RIGHT | Graphics.BOTTOM);
  }

  private void drawTopAndBottomLines (Graphics g, int x, int y, int width, int totalHeight) {
    int horizontalRepetitions = getHorizontalRepetitions(width);
    x += horizontalMargin;
    for (int i = 0; i < horizontalRepetitions; i++) {
      g.setClip(x, y, middlePieceWidth, this.verticalMargin);
      g.drawImage(this.originalImage, x - this.horizontalMargin, y,
        Graphics.LEFT | Graphics.TOP);
      g.setClip(x, y + totalHeight - this.verticalMargin,
          middlePieceWidth, this.verticalMargin);
      g.drawImage(this.originalImage, x - this.horizontalMargin,
          y + totalHeight - this.verticalMargin,
        Graphics.LEFT | Graphics.TOP);
      x += middlePieceWidth;
    }
  }

  private void drawLeftAndRightColumns (Graphics g, int x, int y, int height, int totalWidth) {
    int verticalRepetitions = getVerticalRepetitions(height);

    y += this.verticalMargin;
    for (int i = 0; i < verticalRepetitions; i++) {
      g.setClip(x, y, this.horizontalMargin, middlePieceHeight);
      g.drawImage(this.originalImage, x, y - this.verticalMargin,
        Graphics.LEFT | Graphics.TOP);
      g.setClip(x + totalWidth - this.horizontalMargin, y,
          this.horizontalMargin, middlePieceHeight);
      g.drawImage(this.originalImage, x + totalWidth - this.horizontalMargin,
          y - this.verticalMargin,
        Graphics.LEFT | Graphics.TOP);
      y += middlePieceHeight;
    }
  }

}

Manipulate PNG palette

I am not a graphic designer, thus I don't know how to create fancy icons/images
for my apps and Microsoft
Paint is just enough for my skills.

For all my apps I've used black-and-white PNG files without transparency and that is ok, but... black and white?! I should be
adding colors.

Image class does not have a method to easily change colors. A workaround could be to call getRGB method and iterate the rgbData array.
A better way is to read the file content, change the palette bytes and create an image from the resulting data. First lets create a helper
method to read a whole InputStream and return a byte array with its content:

private byte [] readStream (InputStream in) 
    throws java.io.IOException
{
  ByteArrayOutputStream baos = new ByteArrayOutputStream();
  byte [] buff = new byte [1024];
  int size = in.read(buff);

  while (size >= 0) {
    baos.write(buff, 0, size);
    size = in.read(buff);
  }

  return baos.toByteArray();
}

Next we have to find where is the palette chunk inside the byte array. Here is another helper method:

// return index where P of PLTE is found at buff array or -1
private int getPLTEIndex (byte [] buff) {
  int i = -1;
  // 4 == "PLTE".size()
  if (buff != null && buff.length >= 4) {
    boolean foundPalete = false;
    boolean endOfBuff = false;
    do {
      i++;
      foundPalete = buff[i] == 'P'
              && buff[i +1] == 'L'
              && buff[i +2] == 'T'
              && buff[i +3] == 'E';
      endOfBuff = (i +4 >= buff.length);
    } while (!foundPalete && !endOfBuff);
    if (endOfBuff) {
      i = -1;
    }
  }
  return i;
}

And, finally, a method to change a color from the palette of PNG files with color type 3:

private byte [] setRGBColor (byte [] buff, int colorIndex, int colorNewValue) {
  int i = getPLTEIndex(buff);
  if (i >= 0) {
    i += 4; // 4 == "PLTE".size()
    i += (colorIndex * 3); // 3 == RGB bytes
    if (i + 3 <= buff.length) {
      buff[i] = (byte) (((colorNewValue & 0x00ff0000) >> 16) & 0xff);
      buff[i +1] = (byte) (((colorNewValue & 0x0000ff00) >> 8) & 0xff);
      buff[i +2] = (byte) ((colorNewValue & 0x000000ff) & 0xff);
    }
  }
  return buff;
}

Below is a sample on how to use all the methods:

InputStream in = getClass().getResourceAsStream("/e.png");
try {
  byte [] buff = readStream(in);
  Image original = Image.createImage(buff, 0, buff.length);
  buff = setRGBColor(buff, 0, 0x00ff0000); // set 1st color to red
  buff = setRGBColor(buff, 1, 0x0000ff00); // set 2nd color to green
  Image updated = Image.createImage(buff, 0, buff.length);
} catch (IOException ex) {
    ex.printStackTrace();
}

Related topics:

• Adding colors

Blog audience 2T10

From 2010 March, 15 to June, 14 this blog had 215 visits from 54 countries.

The top 10 countries are:

• Brazil: 34


• Indonesia: 25


• India: 15


• United States: 11


• Italy: 7


• Russia: 7


• Germany: 6


• Portugual: 6


• Poland: 4

Romania, United Kingdom, Sweden and Canada has left the top 10 list. New to the list are Italy, Russia and Poland.

Related topics:

• Blog audience 1T10


• Blog audience


• Know your audience