Drawing a simple line, artifact on screen (probably me doing something wrong...)


I havde added an additional tab to the demo example. In this tab I’m making a simple line using lv_line_create() and lv_line_set_points(). The line shows up fine, but I get a strange looking verical line on the far right side of the screen also. This only happens when the line ends “close” to the bottom of the screen.

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

Keil on LPC54608, and Visual studio/TFT simulator, happens on both targets.
littlevGL is 6.1.2

What do you want to achieve?

A single line :wink:

What have you tried so far?

Not much more as I’m pretty stuck. I have a feeling that there is something fundamental that I don’t understand about littlevGL (just started with it a couple of days ago)

Code to reproduce

Added this to demo.c:

void lv_ex_line_1(lv_obj_t * parent)
	/*Create an array for the points of the line*/
	static lv_point_t line_points[5];

	// Width is reported as 480, height 221
	printf("width=%i, height=%i\n", lv_obj_get_width(parent), lv_obj_get_height(parent));

	line_points[0].x = 0;
	line_points[0].y = 0;

	line_points[1].x = 100;
	line_points[1].y = lv_obj_get_height(parent)-11; // -11 fails, -12 does not (so 210 fails, 209 does not)

	/*Create new style (thick dark blue)*/
	static lv_style_t style_line;
	lv_style_copy(&style_line, &lv_style_plain);
	style_line.line.color = LV_COLOR_MAKE(0xff, 0xff, 0xff);
	style_line.line.width = 1;
	style_line.line.rounded = 0;

	/*Copy the previous line and apply the new style*/
	lv_obj_t * line1;
	line1 = lv_line_create(parent, NULL);
	lv_line_set_auto_size(line1, true);

	lv_line_set_points(line1, line_points, 2);     /*Set the points*/
	lv_line_set_style(line1, LV_LINE_STYLE_MAIN, &style_line);

And the following in demo_create():

lv_obj_t * tab1 = lv_tabview_add_tab(tv, "Write");
lv_obj_t * tab2 = lv_tabview_add_tab(tv, "List");
lv_obj_t * tab3 = lv_tabview_add_tab(tv, "Chart");
lv_obj_t * tab4 = lv_tabview_add_tab(tv, "Lift");



Screenshot and/or video



You are not misunderstanding things at all :slight_smile: the line on the right is simply the automatic scroll bar which appears when you get close to the edge of the page size. You can either draw your line further back from the edge of the bottom of the page or disable the scroll bar.

See this link to read about the scroll bar if you want to change the way it behaves: https://docs.littlevgl.com/en/html/object-types/page.html#scrollbars



1 Like

Ahhh, thanks a lot Pete :blush:
I could have told myslef that, the line looked too “human made” to be some artifact, why on earth I did not think about that I don’t know :face_with_raised_eyebrow:
Thanks a lot for helping a noob with this, much appreciated!

I added:

lv_page_set_sb_mode(tab4, LV_SB_MODE_OFF);

and the scroll bar has vanished :slight_smile:

No worries Carsten, glad you got it sorted.:smiley:



1 Like

I’m afraid I have an additional question to this topic :slight_smile:

The scroll bars are gone as they should, in one of the tabs I use the screen all out to the left edge (with some text), I have a few elements that are updated async (a rectangle and some numbers). Now, even though the scrollbars are disabled (with lv_page_set_sb_mode(tab4, LV_SB_MODE_OFF);
), I can still drag the screen a little to the right. When doing so, the async drawing is shifted “out” of the original tab (hope this makes sense…). The part of the drawing that does move to the right have been created during the demo_create() call, the parts that “stays” to the right of the screen are dynamically drawn.
The async drawing is done like this:

// Lift frame
static lv_obj_t * obj2 = NULL;
if (obj2)
obj2 = lv_obj_create(tab4, NULL);
lv_obj_set_size(obj2, 180, 8);
lv_obj_set_pos(obj2, 48, 60 + (level%75));
lv_obj_set_style(obj2, &style_obj2);

Even though the obj2 is created with tab4 as parent, when I drag the screen, it will be positioned as if the tab was not shifted to the right (which I guess it should’nt do in the first place as I disabled the scrollbars…)
So, its more or less 2 problems (probably because I miss something)…

I have a small video of the effect: https://youtu.be/6jC2Fc3HY9I

Are you recreating obj2 each time you want to move it?

Yes, I first delete it and then create it (currently I’m not worried about efficiency, just trying to get a grip on the workings…)
I know I could just move it instead
Another thing, this only happens if I have some text to the extreme left of the screen, if I move that further away from the edge, this does not happen! So it seems to be something related to scroll again :slight_smile: