OLED Bitmaps and Animation

Just starting to learn these things. Does anyone have examples of code for inserting bitmaps and animations like a fuel gauge for example? I am using a 1306 OLED display. Thank you in advance.

wayland/ssd1306-oled-i2c — XOD has an example for displaying logo (which I assume is from an image file of some sort) that might help you. You might want to display background gauge, then draw rectangle or line to show current value rather than have multiple images.

Thanks, that’s what I was thinking of doing with the gauge. Just have no idea on how to make the needle move. Do I need to make a needle for each incremental position and turn them on individually at a certain analog level?

Upon investigating the XOD Logo in the example, I don’t see it as an image file. When I click on the documentation for it, it shows up as the C++ code used to create the image. I don’t think there is a node that allows the import of a bitmap, at least from what I can see.

Sorry, looks like you are probably right. I don’t have the hardware, so I didn’t bother to download the library to view the code. You might be able to use the same idea as logo code to draw your gauge. For the gauge indicator, you can just draw a line in the appropriate location. To update, you will need to erase (or over-write with background color) the old line, then draw a new one. This will be a lot easier if the line never covers any part of the gauge background so it doesn’t get erased (or clear display, draw background, then draw indicator each time…)

If you opened the code of the XOD-logo node, you should have noticed that there is a byte array in which the image is encrypted. On this site you can convert images from the “.png” format to a byte array: Convert picture to C code array
If necessary, I can explain in more detail how to work with this site, and how to edit the xod-logo node for your own needs.

Here are detailed instructions with an example from me.
example.pdf (947.5 KB)

Thank you so much for your help. I will give it a shot.

Thank you so much. Now I need to has out the moving needle. I’ll try gweimer’s suggestions.

Thanks again, I followed you instructions and it worked great. I only have one problem. I copied and pasted the XOD Logo node into my project and changed the byte array to add my image but it also changed the byte array for the XOD Logo node in the library. I tried making my own node using a “Not-Implemented-In XOD” node and adding the same inputs and outputs on the XOD Logo example but it did not work. It had an error on deployment. Any ideas? Thanks Again.

You have created a __xod__ folder in your workspace replacing the built-in nodes, which is going to cause problems for you later. You can delete this folder to resolve the issue (save your bitmap before deleting it). What you want to do to create a copy of the node is to open a new patch of your own, then open the node you want to copy. Select the items within the node you want to copy (including the not-implemented-in-xod node), then copy that into your new patch. Now you can modify the bitmap in your new patch without affecting the original built-in code.

1 Like

Everything is exactly as @gweimer wrote. When creating a copy of a node, you must be especially careful not to accidentally change the content of the original.

That’s exactly what I did, or so I think… I copied the XOD Logo node, Pasted it into a new Patch, then edited the Byte Array. When I edited the copy, it also edited the one in the library and if I re-download the library, it changes the edited copy that I made. I think I might be missing something here…

You don’t want to copy the Logo node. You want to open it up and copy the parts inside of it. Copying the node is the same as opening it from the node list.

Don’t copy this:

Copy this:

Copy the inputs and not-int… Paste the copied into a new patch and then edit. Sorry I didn’t describe it in my example…

I tried that and it worked great. Thanks again

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.