Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

baldengineer — Sat, 10 Dec 2022 00:57:38 GMT

I haven't actually used any of the suggested tools ... yet. When I made this post, I was working on moving the code from an ESP8266 to an ESP32. And I did the "new" project with PlatformIO, which was a new experience for me. That said, here's a demo of "Treat Bot 32."

community.element14.com/.../treatbot_5F00_lives_5F00_IMG_5F00_0350.mp4

All of the core functionality is there. It connects to a (private) MQTT broker. Dispenses Treats. Flashes some WS2812s. And displays a cute, ahem useful, graphic on the OLED screen. (It also plays mp3 sound effects, but I broke the speaker wire right before recording.)

The idea is that during my Twitch live streams, chat participants can send some emotes that (eventually) activate TreatBot.

In this demo, I manually activated the sequence with my "test" button. (And, can I just say this project is the most delicious debugging I have ever done.)

Anyway, now that the code doesn't look like it was written by a hardware engineer anymore, I can focus on the graphics of the OLED next.

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

dang74 — Wed, 07 Dec 2022 20:28:29 GMT

I never thought of this approach. But I just might try it out.

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

BigG — Wed, 07 Dec 2022 16:31:58 GMT

You're welcome. Nice animation and a cool way to share projects using wokwi.

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

scottiebabe — Wed, 07 Dec 2022 15:29:19 GMT

BigG! That is soo cool!

I uploaded this as 32x32 pixel png:

I requested a 1bit alpha:

And it just worked!

https://wokwi.com/projects/350400426373284435

Very neat!

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

scottiebabe — Wed, 07 Dec 2022 14:34:38 GMT

This Arduino stuff is pretty cool!

  for(;;) { // Loop forever...
    display.clearDisplay(); // Clear the display buffer

    // Draw each snowflake:
    for(f=0; f< NUMFLAKES; f++) {
      display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, SSD1306_WHITE);
    }

    display.display(); // Show the display buffer on the screen
    delay(200);        // Pause for 1/10 second

    // Then update coordinates of each flake...
    ...

https://wokwi.com/projects/344892392214626898

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

scottiebabe — Wed, 07 Dec 2022 14:09:12 GMT

Not really an answer but a environment I have found helpful at times for testing small code snippets without the actual hardware in front of you.

https://wokwi.com/projects/346340290067432020

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

saadtiwana_int — Wed, 07 Dec 2022 07:13:20 GMT

baldengineer I'm a bit late to the party. Probably you have found some tools that works for you by now. However, I just want to point you to one tool that I have found very useful in my embedded projects in the recent years. It's called LVGL (LVGL - Light and Versatile Embedded Graphics Library). It's designed for microcontrollers (Arduino, ESP32 included) and is easy to set up. The quality of embedded UIs you can build with it is very good! I highly recommend having a look. This is not a sponsored comment 🙂. I have even used this to create UIs on some FPGA (Zynq) projects with very good results.

The particular bit about gifs can be found here GIF decoder — LVGL documentation

Hope it helps..!

-Saad

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

rsc — Tue, 06 Dec 2022 20:10:18 GMT

Here's a tool I wrote for 96 x 96 OLEDs on HexiWear boards

https://www.hackster.io/r-scott-coppersmith/hexiwear-oled-bitmap-tool-938ed1

https://github.com/CapperLabs/HexiWearOLEDbitmapTool

Scott

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

BigG — Tue, 06 Dec 2022 16:53:09 GMT

I use the Inkscape export function (set to 96 dpi) to create the graphic (png format) and then the LVGL online tool to convert: https://lvgl.io/tools/imageconverter.

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

wolfgangfriedrich — Tue, 06 Dec 2022 12:30:27 GMT

Just an idea: you could use the everything-tool Excel.

Enter a number in a field and have a bunch of conditional formatting to set a representative background colour to make the design more visual. With the numbers it should be not too hard to generate hex values of the pixel matrix to import;copy-paste into a c-file.

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

wolfgangfriedrich — Tue, 06 Dec 2022 12:22:50 GMT

I was successfully using "The Dot factory" tool to create C include files for fonts and graphics.

http://www.eran.io/the-dot-factory-an-lcd-font-and-image-generator/

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

shabaz — Tue, 06 Dec 2022 06:18:56 GMT

Hi!

Although I dislike Corel products (over-bloated and so many nag ads), Paint Shop Pro is surprisingly good at being a tool between images and microcontrollers.

With it, you can save images in RGB formats, but you can also save them using a reduced palette. For instance, if your OLED only supports three colors, then the file output will only contain 3 values (0,1 and 2) for each pixel, if your image is of three colors. To do this, it's easy, first reduce the number of colors (there's a menu option to do that), then do File->Save As, and select "Raw" format (it sounds like a camera format, but it isn't, instead it's literally just a byte per pixel, with no file header or anything. PSP will count the colors in the image, and assign a value from 0 upward, to each color.

Let's say the image was 32 x 32 pixels, that's 32x32=1024, and that's exactly the file size that PSP will save.

Then you can use C or Python or whatever to convert it to a C array (if that's what you want) with 10-15 lines of code. The ordering is left to right, for each row, from top to bottom from memory. If (say) your OLED only has 1 color, then you might want to pack the pixels into a byte, so that's implementation-dependent of course.

It's actually super-useful in the other direction too. For instance, if you're working with a microcontroller and don't have the display yet, then if you're writing to RAM (a framebuffer basically), one or two bytes per pixel, then provided you can dump that RAM to a file, then you can use PSP to directly accept that file and show it as an image.

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

baldengineer — Tue, 06 Dec 2022 04:44:30 GMT

Oh, interesting workflow and tools. This video gives me a few ideas.

Also, I really like stuff that Volvos does! In fact, I have some of the prototype boards he designed. (and they are great!)

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

dougw — Tue, 06 Dec 2022 04:25:45 GMT

I use a bunch of tools to do stuff like this. Probably not an ideal workflow, but it is free.

Here is a guy who creates the animation C arrays using VB (for an OLED) ... pretty neat...

He also uses some of the same tools I would use.

https://www.youtube.com/watch?v=0KGMFhFQ0YY&ab_channel=VolosProjects

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

baldengineer — Tue, 06 Dec 2022 04:25:10 GMT

Totally not what I had in mind, but a related tool is this Display Generator.

It's a web-based implementation of the Adafruit GFX Library. Give it the code you'd use and it'll draw the display. Looks handy to do some pixel pushing without having to waiting for the compile/upload cycle.

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

baldengineer — Tue, 06 Dec 2022 04:18:26 GMT

Yeah, i was hoping someone made some tools more focused on pixel art. Those are always an option.

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

baldengineer — Tue, 06 Dec 2022 04:17:55 GMT

Looks like that article referenced this img2bytearray tool.

Granted, its output is a Python bytearray, but converting it into a C-array isn't a big deal.

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

robogary — Tue, 06 Dec 2022 04:09:39 GMT

BTW - graphics , I used powerpoint to start , but can fetch any image you want , and modify as needed in Paint.

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

robogary — Tue, 06 Dec 2022 04:08:15 GMT

found this but hadnt tried it. https://www.mischianti.org/images-to-byte-array-online-converter-cpp-arduino/ https://manytools.org/hacker-tools/image-to-byte-array/

the trick is to search for the needed vernacular

Whatever image I used, I had to use Paint to reduce the pixel size of the image to match the desired pixel array size, 128X64 , 64 X 64 etc..

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

robogary — Tue, 06 Dec 2022 04:04:07 GMT

mmmm the link did something weird www.tomshardware.com/.../oled-display-raspberry-pi-pico

RE: Tools (or tricks) to develop graphics/animations for OLED displays (single-color 128x64 or 64x64 style)?

robogary — Tue, 06 Dec 2022 04:03:02 GMT

This tool is for converting graphics into byte arrays , which I used to animate SSD1306 screens for RPi Pico. It was so fun I had to mention it. I expect to find similar for C. I had so much fun tho, I had to share this version. www.tomshardware.com/.../oled-display-raspberry-pi-pico