Our EVE demo code includes our spinning logo bouncing around the display. This image is saved in the program memory of the Seeeduino, so it has to be small.
Step 1: Create Your Logo Image
The program memory on the Seeeduino is quire small, so the logo image has to compress to be quite small as well. We use a few techniques to make the spinning image small enough to fit:
- We use a small image to start with. Our image is usually between 300-340 pixels square. But the actual image section is 240×240. We do this so that as the logo bounces around the screen none of it is ever cut off by the edges of the screen.
- To make the smallest possible image to fit in the program memory of the seeeduino, we make our png with a lot of transparent space as that compresses much smaller. So in addition to the pixels around the edge of the 240×240 section, there is a lot of transparent space inside the image. The checkerboard in the image below shows where our image is transparent.
- We use photoshop to control the number of colors used (4 + transparent), which will additionally reduce the size of the compressed image.
- Use the EVE Asset Builder Tool to compress the image. This uses ZLIB compression.
Step 2: Convert Your Image to C
This is a multi-step process which can all be completed using the EVE Asset Builder v4.x (EAB).
- Open a new session of EVE Asset Builder.
- Open the first tab: Image Utilities.
- Click Pre82X on the left hand side and select the EVE chip for your module. Check the module datasheet if you’re not sure which chip is in your module.
- Set the bitmap format to ARGB2.
- Add you image to the Input Files box and update the Output Folder if desired.
- Click convert.
- Change to the Asset Compressor tab.
- Add the .raw file that was output by EAB to the Input Files box.
- We use the zlib compression.
- Hit compress.
- Finally, open the BIN2C tab.
- Input the .zlib file that was just created by the Asset Compressor.
- To match our demo code, use hexadecimal as the output Notation and 16 items per line.
- Click convert.
Step 3: Update the Logo Image in our Demo Code
Open the generated .c file. It will have your array and call out the array size.
Copy the array into Round_logos.cpp.
This is the ARGB2 logo.
To make the PNG logo, simply drag your PNG into the BIN2C Input Box and hit compress. Then copy the output array into the variable called xxxx_PNG_Logo.
Make sure you also update Round_Logos.h with the correct array sizes (your array sizes may be different, but these are the sizes for the image I used):
#define LOGO_SIZE_ARGB2 (2480)
...
#define LOGO_SIZE_PNG (4927)Step 4: Show your Logo on the Display
In the CFA10xxx_defines.h file, make sure the LOGO_DEMO is defined (set to 1). If you want to use the compressed image, set LOGO_PNG_0_ARGB2_1 to 1.
Contact Us
If you have any questions, we can be reached at support@crystalfontz.com, we also provide chat and telephone support Monday through Friday during our open hours.
We love to hear about your projects! Find us around the web (YouTube, Facebook, Instagram, LinkedIn, Twitter, Forum) and let us know what you’re working on.
Kelsey is an engineer at Crystalfontz. She graduated from Gonzaga University with a BS in Electrical Engineering. Kelsey’s roles at Crystalfontz include product design, custom parts, customer support, documentation, and product demonstrations.
What our customers say about Kelsey:
“As a new user to the world of LCD electronics, Kelsey has been a Godsend in providing the hand-holding I needed to get my project up and running despite my own efforts at fouling things up! :-)” – Owen M
“Kelsey got me through changing code for a new LCD in only two short emails.” – Phillip V
“The agent that I talked with (Kelsey), is technically sound and she knows what she is doing. The support is what made my job easier to get started with the different display technologies. Thank you!” – Vatsal S