Below is a photo of a 128x64 OLED showng images created with the oled-bitmapper tool. The bitmaps shown are also available to download. Just look for the files in the repository ending with .c
Photo enlarged to show detail. Actual display is much smaller.
The file oled-bitmapper.html is an HTML / JavaScript utility to generate the array values needed to display bitmaps on an OLED display. I'm using it to create icons for a 128x64 with the SSD1306 driver chip and the Adafruit library. The bitmaps generated should work equally well with a 128x32 display or other size OLEDs/LCDs.
It also works with MicroPython's FrameBuffer class and the SSD1306. Just be sure to use a format of framebuf.MONO_HLSB when initializing the frame buffer or else your bitmaps will be sideways or worse.
The default text generated by the SSD1306 is not very exciting. If you want to spice up you project with some graphics or custom characters, you can use this tool to create icons. The edits you make are shown in real time on a simulated OLED display. The C declaration of the array is also updated as you edit.
I find it easier to create icons this way than using a general purpose image editor with a bitmap conversion utility. And it's definitely easier than coding and loading by hand.
It's really simple:
- Download oled-bitmapper.html to your PC.
- Run it in a browser.
- Start clicking pixels.
- Copy the array definition to your project source code.
If you want a quick look at the bitmaps produced with this tool, there is a photo of an OLED display in the code repository. On the top half of the display, you'll see text and bitmaps mixed together to make a simulated weather display. The bottom half shows the other bitmap combinations that can be used to represent barometer readings in the range of fair, change, precipitation and storms.
If you want to play around on your own microcontroller, upload the weather.ino sketch to a device with an I2C attached display. (Make sure the I2C address is correct for your device.) You will see a simulation of a weather station display along with icons for sunny, cloudy, rainy, and stormy. If you have a 128x64 display you'll get the same as what's shown in the photo. If your display is smaller, you either won't see the row of icons on the bottom or you'll get an error. I don't have a 128x32 display to test.
There is also a screenshot of the tool. At this point, it is very utilitarian with no CSS styling, but it gets the job done. It can create bitmaps up to 32x32 by changing the dimensions with the dropdown selections.
You can also use OLED-Bitmapper on GitHub Pages
Nowhere, really. My original goal was to create weather icons for an ESP32 project. This tool is just a happy byproduct.