Littlev Graphics Libraray

Littlev Graphics Library provides everithing you need to add graphical user interface to your embedded stytem which meets the requirements in the 21th century.

Homepage: http://gl.littlev.hu

Table Of Content

• Key features
• Porting
  • Tick interface
  • Display interface
  • Input device interface
• Project set-up
• PC simulator
• Contributing
• Donate

Key features

• Everithing you need to build a GUI (buttons, charts, list, images etc)
• Animations, opacity, smooth scrolling, anti aliasing to impress your cutomers
• Multi language support with UTF-8 decoding
• Fully customizable appearance
• Scalable to operate with a few memory (80 kB flash, 10 kB RAM)
• Hardware independent to use with any MCU or display (TFT, LCD, monochrome)
• Touchpad, mouse, keyboard and external button support
• Only a sinlge frame buffer required in internal RAM or in an external display conroller
• OS, External memory or GPU suppoted but not required
• Written in C for maximal compability
• PC simulator to develop without embedded hardware
• Tutorials, code exampes, style themes for rapid development
• Clear online documentation
• Advanced support, and professional GUI development service
• Free and open source

Porting

Tick interface

The LittlevGL uses a system tick. The lv_tick_inc(tick_period) function periodically and tell the call period in millisecinds. For example: lv_tick_inc(1) if called in every milliseconds.

Display interface

To set up a diplay an lv_disp_drv_t variable has to be initialized:

lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv);           /*Basic initialization*/
disp_drv. ... = ...                    /*Initilaize the field here. See below.*/
disp_drv_register(&disp_drv);

You can configure the driver for different operation modes.

Internal buffering (VDB)

The graphics library works with an internal buffering mechanism to create advances graphics features with only one frame buffer. The internal buffer is called VDB (Virtual Display Buffer) and its size can be adjusted in lv_conf.h. When LV_VDB_SIZE not zero then the internal buffering is used and you have to provide a function which flushes the buffers content to your display:

disp_drv.disp_flush = my_disp_flush;

In the flush function you can use DMA or any hardware to do the flushing in the background, but when the flushing is ready you have to call lv_flush_ready()

Hardware acceleration (GPU)

If your MCU supports graphical acceration (GPU) then you can use it in the following way. (Using GPU is totally optional) The mem_blend and mem_fill fields of a display driver is used to interface with a GPU.

disp_drv.mem_blend = my_mem_blend;  /*Blends two color arrays using opacity*/
disp_drv.mem_fill = my_mem_fill;    /*Fills an array with a color*/ 

The GPU related functions can be used only if internal buffering (VDB) is enabled

Unbuffered drawing

It is possible to draw directly to a framebuffer when the internal buffeering is dispabled (LV_SDB_SIZE = 0).

disp_drv.disp_fill = my_mem_blend;  /*fill an area in the frame buffer*/
disp_drv.disp_map = my_mem_fill;    /*copy a color_map (e.g. image) into the framebuffer*/

Keep in mind this way during refresh some artifacts can be visible because the layers are drawn after each other. And some high level graphics features like anti aliasing, opacity or shadows aren't available in this configuration.

If you use an external display controller which supports accelerated filling (e.g. RA8876) then you can use this feature in disp_fill

Input device interface

To set up an input device an lv_indev_drv_t variable has to be initialized:

lv_indev_drv_t indev_drv;
lv_indev_drv_init(&indev_drv);     /*Basic initialization*/
indev_drv.type = ...               /*See below.*/
indev_drv.read_fp = ...            /*See below.*/
lv_indev_register(&indev_drv);

The type can be LV_INDEV_TYPE_POINTER (e.g touchpad) or LV_INDEV_TYPE_KEYPAD (e.g. keyboard) read_fp is a function pointer which will be called periodically to report the current state of an input device. It can also buffer data and return false when no more data te read ot true is the buffer is not empty.

Touchpad, mouse or any pointer

indev_drv.type = LV_INDEV_TYPE_POINTER;
indev_drv.read_fp = my_input_read; 

The read function should look like this:

bool my_input_read(lv_indev_data_t *data) {
    data->point.x = touchpad_x;
    data->point.y = touchpad_y;
    data->state = LV_INDEV_EVENT_PR or LV_INDEV_EVENT_REL;
    return false;  /*No buffering so no more data read*/

Keypad or keyboard

indev_drv.type = LV_INDEV_TYPE_KEYPAD;
indev_drv.read_fp = my_input_read; 

The read function should look like this:

bool keyboard_read(lv_indev_data_t *data) {
    if(key_pressed()) {
        data->state = LV_INDEV_EVENT_PR;
        data->key = get_key();
    } else {
        data->state = LV_INDEV_EVENT_REL;
        data->key = 0;
    }

    return false;   /*No buffering so no more data read*/
}

To use a keyboard:

• LV_OBJ_GROUP has to be enabled in lv_conf.h
• An object goup has to be craeted: lv_group_create() and object has to be added: lv_group_add_obj()
• The create group has to be assigned to the input device: lv_indev_set_group(my_indev, group1);
• Use LV_GROUP_KEY_... to navigate among the objects in the group

Project set-up

1. Clone or download the lvgl repository: git clone -b dev-5.0 https://github.com/littlevgl/lvgl.git
2. Create project with your prefered IDE and add the lvgl folder
3. Copy lvgl/lv_conf_templ.h as lv_conf.h next to the lvgl folder
4. In the *_conf.h files delete the first #if 0 and its #endif. Let the default configurations at first.
5. In your main.c: #include "lvgl/lvgl.h"
6. In your main function:
   • lvgl_init();
   • tick, display and input device initialization (see above)
7. To test create a label: lv_obj_t * label = lv_label_create(lv_scr_act(), NULL);
8. In the main while(1) call lv_task_handler(); and make a few milliseconds delay (e.g. my_delay_ms(5);)
9. Compile the code and load it to your embedded hardware

PC Simulator

If you don't have got an embedded hardware you can test the graphics library in a PC simulator. The simulator uses SDL2 to emulate a display on your monitor and a touch pad with your mouse.

There is a pre-configured PC project for Eclipse CDT in this repository: https://github.com/littlevgl/proj_pc

Contributing

See CONTRIBUTING.md

Donate

If you are pleased with the graphics library and found it useful please support its further development: