Line not drawing in correct place and extra lines showing that I did not draw

How-to
1

Description

I am using ESP-IDF and used the esp_lcd_touch example as my starting point (with touch disabled). This example worked as expected.

I then replaced the example_lvgl_demo_ui code with the code below and the line is not being drawn correctly on the screen. I actually see 3 lines.

I am using lv_line_create and lv_line_set_points with 2 points to create a line, then call lv_obj_update_layout.

Also, why does the border of the circle overwrite the line but the centre does not?

Thanks in advance for feedback. This has been driving me nuts!

What MCU/Processor/Board and compiler are you using?

Waveshare esp32-s3-lcd-1.28

What LVGL version are you using?

9.2

Code to reproduce

// spi_lcd_touch_example_main.c does the setup and calls example_lvgl_demo_ui
_lock_acquire(&lvgl_api_lock);
example_lvgl_demo_ui(display);
_lock_release(&lvgl_api_lock);

//lvgl_demo_ui.c contents below.

#include "lvgl.h"
#include <unistd.h>
#include <sys/lock.h>
#include "esp_err.h"
#include "esp_log.h"
#include <string.h>

static _lock_t lvgl_api_lock;
static const char *TAG = "lvgl";
void example_lvgl_demo_ui(lv_display_t *disp)
{
    static lv_obj_t * dial;
    dial = lv_obj_create(lv_screen_active());
    lv_obj_set_size(dial , 100, 100);
    lv_obj_set_style_bg_color(dial , lv_palette_main(LV_PALETTE_BLUE), 0);
    lv_obj_set_style_radius(dial , LV_RADIUS_CIRCLE, 0);
    lv_obj_set_pos(dial , 50,50);
    lv_obj_update_layout(dial);

    static lv_obj_t * hand;
    static lv_point_precise_t p[] = {{50, 50}, {150, 150}};
    hand = lv_line_create(dial);
    lv_line_set_points(hand, p, 2); 
    lv_obj_update_layout(hand);

    static lv_area_t coords;
    static lv_point_precise_t *points;
    points=lv_line_get_points(hand);
    ESP_LOGI(TAG,"Points %ld %ld %ld %ld",points[0].x,points[0].y,points[1].x,points[1].y);
    lv_obj_get_coords(hand, &coords);
    ESP_LOGI(TAG,"Coords %ld %ld %ld %ld",coords.x1,coords.y1,coords.x2,coords.y2);
}

//I added logging to the lv functions to check what is being passed.
//lv_line.c

void lv_line_set_points(lv_obj_t * obj, const lv_point_precise_t points[], uint32_t point_num)
{
    line_set_points(obj, points, point_num, false);
    ESP_LOGI(TAG,"lv_sp  = %ld %ld %ld %ld",points[0].x,points[0].y,points[1].x,points[1].y);
}
static void line_set_points(lv_obj_t * obj, const lv_point_precise_t points[], uint32_t point_num, bool mut)
{
    LV_ASSERT_OBJ(obj, MY_CLASS);
    lv_line_t * line = (lv_line_t *)obj;
    line->point_array.constant = points;
    line->point_num      = point_num;
    line->point_array_is_mutable = mut;
    ESP_LOGI(TAG,"sp  = %ld %ld %ld %ld",points[0].x,points[0].y,points[1].x,points[1].y);
    lv_obj_refresh_self_size(obj);
    lv_obj_invalidate(obj);
}

Screenshot and/or video

This is returned in the terminal.

I (539) LVGL: sp = 50 50 150 150
I (539) LVGL: lv_sp = 50 50 150 150
I (539) lvgl: Points 50 50 150 150
I (539) lvgl: Coords 65 65 214 214

IMG_6128
IMG_61281680×1793 403 KB

2

I’ve done some more testing and found that if the line extends beyond the parent then the additional lines show. However, this is what I don’t understand.

Parent position is 50,50 and size is 100,100.
The child line points are 0,0 to 70,70.

The line runs from top left of the parent to bottom right of the parent. Why is this when the end point of the line is 30 pixels shorter than the size of the parent. Also, if I make the line end point greater than 70,70 then additional lines start appearing.

Can anyone explain this? Thanks.

3

Hello,

Those lines are for scrolling and they appear because your line extends further than the size of the parent minus its padding I think you should disable the LV_OBJ_FLAG_SCROLLABLE flag.

4

Thanks Tinus. You were right, I removed scrolling and lines are gone. Any thoughts on why the dimensions for a line are different to the its parent object?

In the example below the square is 98 x 98 and the line points are 0,0 to 70,70. Padding and margin of the parent is 0, alignment of the line is LV_ALIGN_OUT_TOP_LEFT, 0, 0. Why doesn’t it run from top left corner and why does it reach almost to bottom right when only 70 long.

IMG_6143
IMG_61431209×1291 200 KB

5

Hello,

I am not sure to be honest, I figure it could be the padding of your object. But you say that is already at 0. For the alignment, I think it should be LV_ALIGN_TOP_LEFT instead.

As for the size being off, no idea.

Kind regards

6

Thanks for the reply, I had tried with LV_ALIGN_TOP_LEFT but it made no difference.

7

You need to eliminate the padding and margins and also border and outline widths. I don’t remember which ones of those have values that are set by default but one or more of them do and that is causing the shift that is happening spacing.

Another thing you need to remember is that the coordinates are always relative to the objects parent and not to the screen. so keep that in mind as well.

That will fix the shift you are seeing in the object. By default the alignment uses the upper left corner. The coordinates you are using are correct for the alignment.