Trying to optimize images and increase FPS

[brightproject]

Good day @nishad2m8
I have a 360x360 round display controlled by esp32s3 via QSPI.

To display an image, you need to include libraries

#include <ESP_IOExpander.h>
#include <ESP_Panel_Library.h>

And also export bitmaps with 16-bit swap.

Studying your project

https://github.com/nishad2m8/T-Display-S3-YT/tree/master/13-Attitude%20indicator/SLS

I changed it a little in SLS, removed images from export, left only three layers.

The output I got was an image on my device that I had to zoom in a bit because the original images were created for a smaller display.

    lv_img_set_src(ui_img_pitch_scale, &ui_img_images_pitch_scale_png);
    lv_obj_set_width(ui_img_pitch_scale, LV_SIZE_CONTENT);   /// 170
    lv_obj_set_height(ui_img_pitch_scale, LV_SIZE_CONTENT);    /// 170
    lv_obj_set_align(ui_img_pitch_scale, LV_ALIGN_CENTER);
    lv_obj_add_flag(ui_img_pitch_scale, LV_OBJ_FLAG_ADV_HITTEST);     /// Flags
    lv_obj_clear_flag(ui_img_pitch_scale, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
    lv_img_set_zoom(ui_img_pitch_scale, 400);

This video shows the work of graphics that move based on your code

animation_by_code.mp4

The next video shows the work based on data that is transmitted to the device via UDP via Wi-Fi.

data_from_udp.mp4

The second video has a slightly reduced zoom of the pictures, the effect on the display speed was checked - but no visible acceleration was noticed.

You may notice that the graphics do not have time to render as the speed increases, and the images are broken and flickering.

I send data via udp by python script, and I tried both a specific IP address and a broadcast address.

import socket
import time

# Settings
# UDP_IP = "192.168.4.1"  # IP address of your ESP32 or microcontroller
# UDP_IP = "192.168.137.240"  # IP address of your ESP32 or microcontroller
UDP_IP = "192.168.137.255"  # Broadcast IP address
UDP_PORT = 4210         # Port to send data to

# Initial values and maximums
RollVal = 0  # Roll angle value
PitchVal = 0  # Pitch angle value
YawVal = 0   # Yaw angle value

max_RollVal = 45   # Maximum value for roll (in degrees)
max_PitchVal = 20  # Maximum value for pitch (in degrees)
max_YawVal = 359   # Maximum value for yaw (in degrees)
increment = 1      # Increment step
direction_Roll = 1  # Direction for changing RollVal: 1 for increasing, -1 for decreasing
direction_Pitch = 1 # Direction for changing PitchVal: 1 for increasing, -1 for decreasing
direction_Yaw = 1   # Direction for changing YawVal: 1 for increasing, -1 for decreasing

# Create a socket
sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)  # Create a UDP socket
sock.setsockopt(socket.SOL_SOCKET, socket.SO_BROADCAST, 1)  # Configure the socket to send broadcast packets

try:
    while True:
        # Form the string with data
        message = f"{RollVal},{PitchVal},{YawVal}"  # Create a message with current values

        # Send data
        sock.sendto(message.encode(), (UDP_IP, UDP_PORT))  # Send the message to the specified address and port
        print(f"Sent: {message}")  # Output the sent message to the console

        # Increase RollVal
        RollVal += increment * direction_Roll
        if RollVal >= max_RollVal:
            direction_Roll = -1  # Change direction to decrease when maximum is reached
        elif RollVal <= -max_RollVal:
            direction_Roll = 1    # Change direction to increase when minimum is reached

        # Increase PitchVal
        PitchVal += increment * direction_Pitch
        if PitchVal >= max_PitchVal:
            direction_Pitch = -1  # Change direction to decrease when maximum is reached
        elif PitchVal <= -max_PitchVal:
            direction_Pitch = 1    # Change direction to increase when minimum is reached

        # Update YawVal
        YawVal += increment * direction_Yaw
        if YawVal >= max_YawVal:
            direction_Yaw = -1  # Change direction to decrease when maximum is reached
        elif YawVal <= 1:
            direction_Yaw = 1    # Change direction to increase when minimum is reached

        # Delay for 0.1 seconds
        time.sleep(0.1)  # Wait before the next iteration

except Exception as e:
    print(f"Error during sending: {e}")  # Print error if an exception occurs
finally:
    sock.close()  # Close the socket when done

Perhaps you can test your example further and optimize the images and lvgl methods to speed up the widget.
I'd be happy to talk to you about this.

UPD.
I will attach project files for PIO and SLS.
PIO_att_indicator.zip
SLS_att_indicator.zip

[nishad2m8]

Hi, I know it have some performance issue. i think its because of the image size. ill try to optimize it.

[brightproject]

ill try to optimize it.

I would like to solve this problem together with you.
Perhaps you should try changing the settings in conjunction with image optimization?

/*=========================
   MEMORY SETTINGS
 *=========================*/

/*1: use custom malloc/free, 0: use the built-in `lv_mem_alloc()` and `lv_mem_free()`*/
#define LV_MEM_CUSTOM 0
#if LV_MEM_CUSTOM == 0
    /*Size of the memory available for `lv_mem_alloc()` in bytes (>= 2kB)*/
    // #define LV_MEM_SIZE (24U * 1024U)          /*[bytes]*/
    // #define LV_MEM_SIZE (48U * 1024U)          /*[bytes]*/
    #define LV_MEM_SIZE (96U * 1024U)          /*[bytes]*/

    /*Set an address for the memory pool instead of allocating it as a normal array. Can be in external SRAM too.*/
    #define LV_MEM_ADR 0     /*0: unused*/
    /*Instead of an address give a memory allocator that will be called to get a memory pool for LVGL. E.g. my_malloc*/
    #if LV_MEM_ADR == 0
        //#define LV_MEM_POOL_INCLUDE your_alloc_library  /* Uncomment if using an external allocator*/
        //#define LV_MEM_POOL_ALLOC   your_alloc          /* Uncomment if using an external allocator*/
    #endif

#else       /*LV_MEM_CUSTOM*/
    #define LV_MEM_CUSTOM_INCLUDE <stdlib.h>   /*Header for the dynamic memory function*/
    #define LV_MEM_CUSTOM_ALLOC   malloc
    #define LV_MEM_CUSTOM_FREE    free
    #define LV_MEM_CUSTOM_REALLOC realloc
#endif     /*LV_MEM_CUSTOM*/

/*Number of the intermediate memory buffer used during rendering and other internal processing mechanisms.
 *You will see an error log message if there wasn't enough buffers. */
#define LV_MEM_BUF_MAX_NUM 16

/*Use the standard `memcpy` and `memset` instead of LVGL's own functions. (Might or might not be faster).*/
#define LV_MEMCPY_MEMSET_STD 0

/*====================
   HAL SETTINGS
 *====================*/

/*Default display refresh period. LVG will redraw changed areas with this period time*/
#define LV_DISP_DEF_REFR_PERIOD 5      /*[ms]*/ //15

/*Input device read period in milliseconds*/
#define LV_INDEV_DEF_READ_PERIOD 10     /*[ms]*///30

/*Use a custom tick source that tells the elapsed time in milliseconds.
 *It removes the need to manually update the tick with `lv_tick_inc()`)*/
#define LV_TICK_CUSTOM 1
#if LV_TICK_CUSTOM
    #define LV_TICK_CUSTOM_INCLUDE "Arduino.h"         /*Header for the system time function*/
    #define LV_TICK_CUSTOM_SYS_TIME_EXPR (millis())    /*Expression evaluating to current system time in ms*/
#endif   /*LV_TICK_CUSTOM*/

or decrease Color depth

/*Color depth: 1 (1 byte per pixel), 8 (RGB332), 16 (RGB565), 32 (ARGB8888)*/
// #define LV_COLOR_DEPTH 8
#define LV_COLOR_DEPTH 16

/*Swap the 2 bytes of RGB565 color. Useful if the display has an 8-bit interface (e.g. SPI)*/
#define LV_COLOR_16_SWAP 1

/*Enable more complex drawing routines to manage screens transparency.
 *Can be used if the UI is above another layer, e.g. an OSD menu or video player.
 *Requires `LV_COLOR_DEPTH = 32` colors and the screen's `bg_opa` should be set to non LV_OPA_COVER value*/
#define LV_COLOR_SCREEN_TRANSP 0

[nishad2m8]

Hi, I tried using a smaller Roll Scale image, but the result showed only a slight improvement. I also tried adjusting the LVGL configuration, but there wasn’t much improvement either. Did you test with a real sensor or just mock data?

[brightproject]

Did you test with a real sensor or just mock data?

Yes, I test both with simulation data and with real sensors - but the slowdown is of the widget itself.
I have another type of artificial horizon, which is drawn using double buffer technology (sprites) on the library TFT_eSPI.

and wokwi simulator

https://wokwi.com/projects/374228486620365825

There is real-time speed.

I want to try to make a working widget on LVGL, so I'm looking for optimization options.

[nishad2m8]

I tried this a long time ago using TFT_eSPI, but it was too hard to make it transparent

1732827049812278.mp4

It's possible to do with LVGL, but more learning is needed. If asked in the LVGL forum, maybe someone will help

[brightproject]

I tried this a long time ago using TFT_eSPI, but it was too hard to make it transparent

Wow, a small artificial horizon.

It's possible to do with LVGL, but more learning is needed. If asked in the LVGL forum, maybe someone will help

It seems to me that the LVGL forum is really sad, there are very few people there who understand anything more or less seriously.
In general, I have been understanding this issue for a long time, and only you are professionally involved in LVGL, that is why I am having discussions with you🙂
Perhaps in the future we will find a joint solution to speed up the graphics on LVGL.

[brightproject]

Hello @nishad2m8 It's me again😃
Look, this project uses js and animates SVG images

https://github.com/sebmatton/jQuery-Flight-Indicators

As far as I understand, lvgl is also working on including SVG in version 9.3

lvgl/lvgl#6845

You haven't looked into this, maybe using SVG images will give a speed boost?

I once tried to animate a simple SVG file on a PC

https://www.youtube.com/watch?v=nQ4RMRAfBe8