Subscribe for interesting News and useful Tutorials.   (one or two newsletter per month)

2018-03-13

Embedded GUI using Linux frame buffer device with LittlevGL

LittleGL is a graphics library targeting microcontrollers with limited resources. However it possible to use it to create embedded GUIs with high end microprocessors and boards running Linux operation system. The most well know processors cores are the ARM Cortex A9 (e.g. NXP i.MX6) and ARM Cortex A53 (e.g. Raspbery PI 3). You can create an embedded GUI on this single board computers by simply using Linux's frame buffer device (typically /dev/fb0). If don't know LittlevGL yet learn more about it here: LittlevGL

Why use the frame buffer directly?

The frame buffer device is a very low level interface to display something on the screen. Speaking about an embedded GUI there are several reasons to use the frame buffer directly instead of a Window manager:

  • simple Just write the pixels to a memory
  • fast No window manager which means fast boot and less overhead
  • portable Independently from the distribution every Linux system has a frame buffer device so it's compatible with all of them

Get started with the Linux frame buffer

Maybe you are familiar with the Linux frame buffer device. It is a file usually located at /dev/fb0. This file contains the pixel data of you display. If a you write something into the frame buffer file then the changes will be shown on the display. If your are using Linux on your PC you can try it using a terminal:

  1. Press Ctrl + Alt + F1 to leave the desktop and change to simple character terminal
  2. Type sudo su and type your password
  3. Stop your Display manager (on Ubuntu it's lightdm): service lightdm stop Important: it will log you out, so all windows will be closed
  4. Write random data to the frame buffer device: cat /dev/urandom > /dev/fb0 You should see random colored pixels on the whole screen.
  5. To go back to the normal Graphical User Interface: service lightdm start

Random pixels in Linux frame buffer using urandom

It should work on Linux based single board computer too like:

Get LittlevGL to create embedded GUI

Now you know how to change the pixels on your displays. But you still still need something which creates GUI elements instead of random pixels. Here comes the Littlev Graphics Library. This software library is designed to create GUI elements (like labels, buttons, charts, sliders, check boxes etc.) on embedded system's display. Look all the widgets here: Graphical object types. The graphics library is written in C so you surely you can adapt it in your project. The make your GUI impressive opacity, smooth animations, anti-aliasing and shadows can be added.

To use LittlevGL you need to download it from GitHub or from the Download page. The following components will be required:

  • lvgl The core of the graphics library
  • lv_drivers Contains a Linux frame buffer driver
  • lv_examples Optionally to load a demo applications for testing

GUI project set-up

The most simple case to test the frame buffer device based GUI on your Linux PC. Later you apply the same code on an embedded device too.

  1. Create a new project in your preferred IDE
  2. Copy the template configuration files next to lvgl and lv_drivers folders:

    • lvgl/lv_conf_templ.h as lv_conf.h
    • lv_drivers/lv_drv_conf_templ.h as lv_drv_conf.h
  3. In the config files remove the first and last #if and #endif to enable their content.

Files for Embedded GUI using Linux frame buffer

  1. In lv_drv_conf.h set USE_FBDEV 1
  2. In lv_conf.h change the color depth: LV_COLOR_DEPTH 24
  3. Add the projects root folder as include path

Create an embedded GUI application

  1. In main.c write the following code to create a hello world label:
#include "lvgl/lvgl.h"
#include "lv_drivers/display/fbdev.h"
#include 

int main(void)
{
    /*LittlevGL init*/
    lv_init();

    /*Linux frame buffer device init*/
    fbdev_init();

    /*Add a display the LittlevGL sing the frame buffer driver*/
    lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);
    disp_drv.disp_flush = fbdev_flush;      /*It flushes the internal graphical buffer to the frame buffer*/
    lv_disp_drv_register(&disp_drv);

    /*Create a "Hello world!" label*/
    lv_obj_t * label = lv_label_create(lv_scr_act(), NULL);
    lv_label_set_text(label, "Hello world!");
    lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0);

    /*Handle LitlevGL tasks (tickless mode)*/
    while(1) {
        lv_tick_inc(5);
        lv_task_handler();
        usleep(5000);
    }

    return 0;
}

  1. Compile the code and go back to character terminal mode (Ctrl + Alt + F1 and service lightdm stop)
  2. Go to the built executable file and type: ./file_name

Hello world test for Embedded GUI using Linux frame buffer

  1. Test with a demo application by replace the Hello world label create with: demo_create();

Demo GUI for embedded GUI using Linux frame buffer

Download a ready-to-use project

In the lv_boards repository you find an Eclipse CDT project to try out the plain frame buffer based GUI with a Linux PC.

Summary

I hope you liked this tutorial and found it useful for your microprocessor based embedded Linux projects. As you can see it's super is to create embedded GUI with LittlevGL using only a plain Linux frame buffer.

To learn more about the graphic library start to read the Documentation or check the Embedded GUI building blocks.

If you don't have a embedded hardware right now you can begin the GUI development on PC.

If you have questions use Write a message, use GitHub issue tracker or leave comment below.


Did you like this article? Share it with your friends!


Subscribe for more interesting News and useful Tutorials   (one or two newsletter per month)


Have a question or have experience in this field? Share with us!

MarkDown supported


qianfan
2018-01-08 08:55:02

It's great! the lvgl doesn't support linux framebuffer device some month ago, in that times i need write some codes to make it supports, and now it's a good news that it supports!

I will download lvgl and do some interesting test. Thank you!

kisvegabor
2018-01-08 09:41:51

Yes, a lot of updates happened in the last few month. I'm curious about your tests results. Please share them when something came to light!

Cerys
2018-03-12 14:27:26

Hey there, You've done a fantastic job. I'll certainly digg it and personally suggest to my friends. I am confident they'll be benefited from this site.

my homepage - logiciel espion android

Kisvegabor
2018-03-12 14:43:33

Hi Cerys, Thanks, I hope they will like ti! :)

Wig
2018-03-15 10:03:21

I refer this post to run a demo on framebuffer https://littlevgl.com/blog/23/embedded-gui-using-linux-frame-buffer-device-with-littlevgl

I can initial mouse success using HID api but I cannot see the cursor on fb0, how to create a cursor without SDL library, thanks

Kiss-Vámosi Gábor
2018-03-15 12:15:22

Hi, Wig
Please check this post about adding a cursor: https://github.com/littlevgl/lvgl/issues/127#issuecomment-368290391

Wig
2018-03-16 07:40:56

It works! Thank you Kiss-Vámosi Gábor

Kisvegabor
2018-03-16 07:44:47

Your welcome :)

LittlevGL - Open-source Embedded GUI Library

LittlevGL is a free and open-source graphics library providing everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and low memory footprint.

If you like LittlevGL, please
support its deveopment!


The founder of Littlev Graphics Library (LittlevGL) and related software modules is:
Gábor Kiss-Vámosi
All Rights Reserved ©  2018 Hungary