Using the generated function in Arduino

How to
1

Hello,

i am trying to find out how to use a simple Button from Squareline Studio with Arduino IDE and ESP32.

I am not very experienced with programming and with all the Object Oriented Programming i am really overtaxed and the worst of all, English is not my native language.

I created a Button in SquarelineStudio. Then i found the function in ui_events.c.:

looks like:

#include "ui.h"

void test(lv_event_t * e)
{
	
	
}

How can i get it work, when i press the Button on the touchscreen to see in my serial monitor something like “button pressed”.

Where do i have to implement the function in my code? into “void loop”?
Can please anybody correct my Code so i can find out how to learn all this function,callback,… things?

The main Code is:

#include <lvgl.h>
#include <TFT_eSPI.h>
#include <ui.h>

/*Don't forget to set Sketchbook location in File/Preferencesto the path of your UI project (the parent foder of this INO file)*/

/*Change to your screen resolution*/
static const uint16_t screenWidth  = 320;
static const uint16_t screenHeight = 240;

static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[ screenWidth * screenHeight / 10 ];

TFT_eSPI tft = TFT_eSPI(screenWidth, screenHeight); /* TFT instance */

#if LV_USE_LOG != 0
/* Serial debugging */
void my_print(const char * buf)
{
    Serial.printf(buf);
    Serial.flush();
}
#endif

/* Display flushing */
void my_disp_flush( lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p )
{
    uint32_t w = ( area->x2 - area->x1 + 1 );
    uint32_t h = ( area->y2 - area->y1 + 1 );

    tft.startWrite();
    tft.setAddrWindow( area->x1, area->y1, w, h );
    tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
    tft.endWrite();

    lv_disp_flush_ready( disp );
}
  
/*Read the touchpad*/
void my_touchpad_read( lv_indev_drv_t * indev_driver, lv_indev_data_t * data )
{
    uint16_t touchX = 0, touchY = 0;

    bool touched = tft.getTouch( &touchX, &touchY, 600 );

    if( !touched )
    {
        data->state = LV_INDEV_STATE_REL;
    }
    else
    {
        data->state = LV_INDEV_STATE_PR;

        /*Set the coordinates*/
        data->point.x = touchX;
        data->point.y = touchY;

        Serial.print( "Data x " );
        Serial.println( touchX );

        Serial.print( "Data y " );
        Serial.println( touchY );
    }
}

void setup()
{
    Serial.begin( 115200 ); /* prepare for possible serial debug */

    String LVGL_Arduino = "Hello Arduino! ";
    LVGL_Arduino += String('V') + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();

    Serial.println( LVGL_Arduino );
    Serial.println( "I am LVGL_Arduino" );

    lv_init();

#if LV_USE_LOG != 0
    lv_log_register_print_cb( my_print ); /* register print function for debugging */
#endif

    tft.begin();          /* TFT init */
    tft.setRotation( 3 ); /* Landscape orientation, flipped */

    lv_disp_draw_buf_init( &draw_buf, buf, NULL, screenWidth * screenHeight / 10 );

    /*Initialize the display*/
    static lv_disp_drv_t disp_drv;
    lv_disp_drv_init( &disp_drv );
    /*Change the following line to your display resolution*/
    disp_drv.hor_res = screenWidth;
    disp_drv.ver_res = screenHeight;
    disp_drv.flush_cb = my_disp_flush;
    disp_drv.draw_buf = &draw_buf;
    lv_disp_drv_register( &disp_drv );

    /*Initialize the (dummy) input device driver*/
    static lv_indev_drv_t indev_drv;
    lv_indev_drv_init( &indev_drv );
    indev_drv.type = LV_INDEV_TYPE_POINTER;
    indev_drv.read_cb = my_touchpad_read;
    lv_indev_drv_register( &indev_drv );


    ui_init();

    Serial.println( "Setup done" );
}

void loop()
{
    
    lv_timer_handler(); /* let the GUI do its work */
    delay(5);
   
}

Greetings Patrick

2

Hello Patrick, I’m having a similar problem to yours!
I managed to generate the screen with a simple button in the center using SLS. I exported everything to the Arduino IDE, and I’m using the ESP32 with a TFT touch display. My problem is that the display is not detecting touch on the screen. I’ve already changed line 46 to: bool touched = tft.getTouch(&touchX, &touchY, 600);

Interestingly, when running the example from the TFT_eSPI library, I can read and calibrate the display without any issues. Do you know what might be happening, or anyone here on the forum? My main code is exactly the same as the one posted by Patrick.

Thank you and regards

3

Now i found one more example of code.

void buttonCallback(lv_event_t *e) {
  lv_event_code_t event = lv_event_get_code(e);
  lv_obj_t *obj = lv_event_get_target(e);
  if (event == LV_EVENT_VALUE_CHANGED) {
    LV_LOG_USER("State: %s\n", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "On" : "Off");
    LV_LOG_USER("statusLED value is: %d\n", statusLEDState);

When i create a callback function for my button, do i need these Lines of Code too:

lv_event_code_t event = lv_event_get_code(e);
  lv_obj_t *obj = lv_event_get_target(e);

?
What do they mean? What are they for?

4

And when i try to change the generated “ui_events.ccp”
to

#include "ui.h"

void buttonclick(lv_event_t * e)
{
	Serial.println( "Testbutton pressed" );
}

There is an Error while compiling:

c:\Users\Patrick\Documents\Arduino\squareline\template\testbutton2\testbutton2\libraries\ui\src\ui_events.cpp: In function 'void buttonclick(lv_event_t*)':
c:\Users\Patrick\Documents\Arduino\squareline\template\testbutton2\testbutton2\libraries\ui\src\ui_events.cpp:10:2: error: 'Serial' was not declared in this scope
  Serial.println( "Testbutton pressed" );
  ^~~~~~

exit status 1

Compilation error: exit status 1
5

Add #include “Arduino.h”

6

event contains the cause why this function was called.
obj contains the object which caused the event.

7

Ok, i found out, it works best when “ui_events.ccp” stays empty and add a function to the main program like this:

void slider(lv_event_t * e)
{
  lv_event_code_t event = lv_event_get_code(e);
  lv_obj_t *obj = lv_event_get_target(e);
  if (event == LV_EVENT_VALUE_CHANGED) {
    uint32_t value = lv_slider_get_value(obj);
    Serial.print(value);
  }
	// Your code here
}

Thank you Fex0 for the hint!