MicroView Graphics in Minutes

Microview Power Up graphic
Microview Power Up graphic
Microview Power Up graphic

If you have been playing with the new MicroView arduino microcontroller, you likely know that it has a built-in 64 by 48 pixel OLED display and, that you can use the support library for it to control those pixels in your code. The library also supports some gauges and text output, which will likely cover most useful things people will actually want to do with the MicroView.

I, of course, immediately wanted to put various arbitrary graphics on it moments after un-boxing.

After dismissing the obvious approach of plotting individual pixels as way too much effort for play time, I came up with a way to convert bitmap images into MicroView code. I promptly splattered my company’s logo and, did a simple three-frame gear animation.

It’s easy and, you can do it, too. Here’s how:

  1. Create a 1-bit (“black and white”) 64 pixel by 48 pixel image using your favorite bitmap editing program (e..g., the gimp). I’ll omit the details of that here as it is a fairly extensive topic on its own. I used PNG format to save my images (PNG-8 is technically 8-bit but, we are only using black pixels on a white background). Note that the image ends up rotated 180 degrees. We’ll use this image for the demo:

    Two-color 8-bit power icon
    Two-color 8-bit power icon
  2. Open your image with ImageJ, a Java (multi-platform) image processing and analysis program.
  3. In ImageJ, choose Analyze > Tools > Save XY Coordinates … Click Ok in the options dialog and, save the coordinate list to a file. This will produce a text file with each line containing the coordinates of a pixel from the image as three numbers (x, y and 1 or 0, since we are not using the color value).

    Creating a bitmap coordinate list in ImageJ
    Creating a bitmap coordinate list in ImageJ.
  4. We need to turn these into lines of code that look like: 
    uView.pixel(x,y);

    A good way to do that is to run a regular expression against the file. You can do this in most decent code editors (I used jEdit). Basically, we want:

    s/^(.+)\t(.+)\t.+/uView.pixel($1,$2);/g

    That should give you a list of uView.pixel commands that you can paste into your code.

    RegEx replace in jEdit.
    RegEx replace in jEdit.

For reference, the code for the Power Up image is here.

The bitmaps take up a lot of memory. The gear animation uses up about half the available memory, for instance.

It should be pretty simple to write a script to optimize the images better by looking for consecutive pixels and turning them into uView.line() commands.

Old hat? Have a better way to do it? Wrote my optimization script? Let me know in the comments!

MicroView Gears

MicroView Controller with Gears Image
Simple 3-frame gear animation on the MicroView
Simple 3-frame gear animation on the MicroView

A very simple animated gear on the new MicroView Arduino. The code is here, although it is not particularly exciting. It’s just a simple three-frame animation. I’m sure there is a better way to do it, possibly using a single sprite and rotating it.

What’s possibly more interesting is that I did the whole thing in about 20 minutes, most of which was spent figuring out an easy way to draw a gear in a vector graphics program (a star, three circles and a few uses of trim and weld). I will write up the conversion of bitmaps into MicroView-specific code in my next post.

Want to tell me how to use the power of math to rotate my gear? Let me know in the comments.