Simple Examples

The examples included are helpful, but they are all very complicated.

Very, very simple things like changing the screen’s background color, or drawing a rectangle on the screen, or just drawing one word on the screen, are nigh impossible to find examples for.

Can these simple, simple things be added to the example code?

You’re teaching someone how to build a Lego creation, starting with the basics of commercial injection mold design and production.

Thank you very much for the feedback!

I think we have examples for all these but they might scattered among the examples:

I think the Quick overview is very useful to get started. The README also has some basic example.

Have you found these? If not, probably we need to do more to make them more visible. If you found them but didn’t help enough we should create different kind of examples.

I you haven’t these examples where would you expect to find them?

Hi @kisvegabor, thanks for the response!

Yes, I found all those documents, but it’s still great to link them here for others searching.

I think these could, at a minimum, use an example at the beginning like “set the background color, then draw text on it” without borders, blurs, shadows, buttons, callbacks, animations, gradients, fillets, chamfers, or any other decorations. Like, super-simple.

For example, just figuring out how to set a global background color from your examples is extremely difficult, and likely one of, if not the, first thing many users might need to do.

What about adding a “hello world” example here and the README like:

  /*Change the active screen's background color*/
  lv_obj_set_style_bg_color(lv_scr_act(), lv_color_hex(0x003a57), LV_PART_MAIN);

  /*Create a white label, set its text and align it to the center*/
  lv_obj_t * label = lv_label_create(lv_scr_act());
  lv_label_set_text(label, "Hello world");
  lv_obj_set_style_text_color(lv_scr_act(), lv_color_hex(0xffffff), LV_PART_MAIN);
  lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);

image

1 Like

I think that would help folks a lot.

To continue this, I am wondering if there are any actual working examples of canvas drawing routines (Ver 8.2.0)
I spent considerable time trying to get any of them work to no avail with the exception of lv_canvas_set_px.

More description as to what is expected in draw_dsc would help too.
Additionally on small ram devices it’s not possible to allocate a true color buffer for any reasonable display size. Can we just write to the display directly without this additional buffer? I’m only able to allocate LV_IMG_CF_INDEXED_2BIT a max.

I cannot get any of these to work:

lv_canvas_draw_rect(canvas, x, y, width, heigth, &draw_dsc)

lv_canvas_draw_text(canvas, x, y, max_width, &draw_dsc, txt)

lv_canvas_draw_img(canvas, x, y, &img_src, &draw_dsc)

lv_canvas_draw_line(canvas, point_array, point_cnt, &draw_dsc)

lv_canvas_draw_polygon(canvas, points_array, point_cnt, &draw_dsc)

lv_canvas_draw_arc(canvas, x, y, radius, start_angle, end_angle, &draw_dsc)

@squiggle
Great! I’ll do it tomorrow.

@revnhoj
I’ve just added more examples for the canvas. It’s in master but it’s the same for v8.2 too.

1 Like

It is always incredible to get such quick and helpful support! You guys are awesome.
However I still face the same issue; no object drawn in my case. As I mentioned I have memory limitations with my particular esp32 implementation.
What happens when you change your buffer to use LV_IMG_CF_INDEXED_2BIT?

lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_INDEXED_2BIT);

Is there a way to draw basic shapes without needing a huge buffer?

Having good examples is a special topic for me so I try my best. :slight_smile: As a developer when I use other libs I also expect to have super basic examples to see what it is and how it works.


LVGL can’t draw with with indexed formats. :frowning: What is the actual problem you are trying to solve? Maybe there is an other solution. Please open a new topic for it and tag me there.

@squiggle
Added :slight_smile: Docs and README.

1 Like

:smiley:

Hi all,
Sorry to reopen this old topic, but I’m just starting my LVGL journey of discovery, and I have to agree with Squiggle.
Yes, LVGL is fantastic, and yes, the examples really show off the power of this library.
However, I have not yet found an example as simple as the classic ‘c’ “Hello World” (HW).
(It was my very first ‘c’ program straight out of K&R 1st. edition).

The provided HW example starts straight in with -

#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_LABEL

rather than -

#include <lvgl.h>
Create and initialise a new lvgl object
Set its backgroun colour
Add a text box at X,Y
Set its font colour etc.
Set text to HW
1 Like

Hi,

Thank you for the feedback!

Have you found this example in the readme? If not, exactly which example have found and where?

Hi Kisvegabor,
Yes, I had found that one, along with all the others.
They are all incredibly helpful, once you are up and running with the basics.
What would be really useful for complete beginners like me is a stand-alone example, such as I suggested at the end of my previous post.
What would really help is a few lines at the start of the example, which show all of the setup code required to create the “active screen”.


However lv_screen_active() does not compile
I had to use lv_scr_act()
SUCCESS
Based on the Arduino library Arduino_GFX example LvglHelloWorld.ino

1 Like

I see, and I will take care of that! Thank you!

It’s renamed in LVGL v9 (will be released on January 15). See

Thanks!

This doesn’t work
I have tried it and I get the white area on the top of the screen

What is not working?

I am not sure what I am doing wrong but I can’t set screen background color

I am puzzeled with the output of my code
It should cover the whole screen but I get this white are on the top
LVGL 8.3.8 on ESP32 dev kit

include <lvgl.h>
#include <TFT_eSPI.h>
#include “touch.h”

static const uint16_t screenWidth = 480;
static const uint16_t screenHeight = 320;
static lv_disp_draw_buf_t disp_buf;
static lv_color_t buf[screenWidth*20];

TFT_eSPI tft = TFT_eSPI();

/* 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.setAddrWindow(area->x1, area->y1,  w, h);
tft.pushColors((uint16_t *)&color_p->full, w*h, true);

/*Change the active screen's background color*/
lv_obj_set_style_bg_color(lv_scr_act(), lv_color_hex(0x1f272a), LV_PART_MAIN);


lv_disp_flush_ready(disp);

}

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

tft.init();
tft.setRotation(1); 


touch_init(tft.width(), tft.height(),tft.getRotation());
lv_init();

delay(10);
lv_disp_draw_buf_init(&disp_buf, buf, NULL, screenWidth*20);

/*Initialize the display*/
static lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv);
disp_drv.hor_res = tft.width();
disp_drv.ver_res = tft.height();
disp_drv.flush_cb = my_disp_flush;
disp_drv.draw_buf = &disp_buf;
lv_disp_drv_register(&disp_drv);

}

void loop()
{

lv_task_handler(); /* let the GUI do its work */
delay(5);

}