I was just wondering as I wanted a gif/picture on the screen, but did not have a sd card. I am using pros
Yes, you can encode an image into an array that lvgl can read. There should be a tutorial in the lvgl docs somewhere. Make sure you are reading the docs for the version of lvgl that PROS uses.
You can do that easily with a PNG file, but it becomes stupid hard with a gif. I did it, but it took forever to make it work.
I don’t know off the top of my head. Presumably there is a table of contents or search function that you could use.
do you know where to upload the image
nvm(20 characters plz)
Yes. I have my teams logo embedded as an LVGL img in my PROS cold package…
Just wondering, is there anyway to upload the picture without an sd card using V5 Text/VEXcode pro?
Ok thanks.
20 chars 20
There is no direct upload of images because images need to be read and displayed by the user program. The two choices for this are, reading BMP or PNG image file from the SD card or by embedding the image data as a static array inside the program.
6 Likes
How do you code that in Vexcode Pro?
1 Like
You need to turn the image (png or bmp) into a C struct and then display that using the drawImageFromBuffer function. We do not directly provide any tools to do this, but it is fairly easy using tools available online, this is one way, there may be others available as well.
Images must be less than 480x240 pixels in size or they will not display. In general this method should only be used for smaller images as it will make the program much larger.
Go to the LVGL image converter page.
https://lvgl.io/tools/imageconverter
Although we are not using LVGL in VEXcode, it can still convert to the necessary data format.
Convert the PNG image using these settings.
This will download to your PC a C file with the data, however, we have to make a few changes to it before we can use it.
- rename the file so it has a .h rather than a .c extension.
- remove the unnecessary LVGL information.
change this
#include "lvgl/lvgl.h"
#ifndef LV_ATTRIBUTE_MEM_ALIGN
#define LV_ATTRIBUTE_MEM_ALIGN
#endif
#ifndef LV_ATTRIBUTE_IMG_IMAGE
#define LV_ATTRIBUTE_IMG_IMAGE
#endif
const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_IMG_IMAGE uint8_t image_map[] = {
0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d, 0x49, 0x48, 0x44, 0x52,
0x00, 0x00, 0x00, 0xc8, 0x00, 0x00, 0x00, 0xb3, 0x08, 0x06, 0x00, 0x00, 0x00, 0xcc, 0xbd, 0x53,
0x9c, 0x00, 0x00, 0x0f, 0x52, 0x69, 0x43, 0x43, 0x50, 0x49, 0x43, 0x43, 0x20, 0x50, 0x72, 0x6f,
to something like this
uint8_t image[] = {
0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00, 0x00, 0x00, 0x0d, 0x49, 0x48, 0x44, 0x52,
0x00, 0x00, 0x00, 0xc8, 0x00, 0x00, 0x00, 0xb3, 0x08, 0x06, 0x00, 0x00, 0x00, 0xcc, 0xbd, 0x53,
0x9c, 0x00, 0x00, 0x0f, 0x52, 0x69, 0x43, 0x43, 0x50, 0x49, 0x43, 0x43, 0x20, 0x50, 0x72, 0x6f,
I happened to have renamed the C structure as well, you can give it any valid C variable name.
remove all this from the end of the file, we do not use it in VEXcode.
const lv_img_dsc_t image = {
.header.always_zero = 0,
.header.w = 200,
.header.h = 179,
.data_size = 24312,
.header.cf = LV_IMG_CF_RAW,
.data = image_map,
};
Now create a VEXcode project. With the project open, move or copy the image data file into the include folder. You should see something like this in VEXcode now.
Add the image.h (or whatever it is called) header into main.cpp and display like this.
(only include these image headers in exactly one .cpp file, do not include in main.cpp and another file or the project will not build).
#include "vex.h"
#include "image.h"
using namespace vex;
int main() {
// Initializing Robot Configuration. DO NOT REMOVE!
vexcodeInit();
Brain.Screen.drawImageFromBuffer(image, 0, 0, sizeof(image));
}
demo program attached.
v5code-project-ImageDemo.zip (155.7 KB)
18 Likes
Thank you so much! This will help a lot.
did you ever figure out how to do this if so can you send me the code please