LVGL on Oniro

Philippe.Coval + Gábor.Kiss-Vámosi #FOSDEM2022

WIP version https://www.volatile.rzr.cloudns.org/docs/oniro-lvgl/

#+ URL: https://cryptpad.fr/code/#/2/code/edit/fVu5h2jOBXzGmpn8Uuw5YgvR/%23LGVL #+ Day Sunday 2022-02-06 : Start time 10:00:00 / 25min

Abstract:

LVGL: A versatile UI toolkit for MCU & CPU An UI framework for Eclipse Onino a cross kernel OS

LVGL is an open-source graphics library to create embedded GUI.

By its flexibility, this toolkit is well matching Oniro project's requirements to build a multiple kernel OS for IoT devices or enable interactions in a multiple devices environment.

UI toolkits are well established in CPU world (desktop, mobile), but what about in more constrained system ?

Often tied to one vendor, the choice is often limited. However OpenSource project LVGL provides everything developers need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and low memory footprint.

This library is compact and flexible enough to be thread through a regular Linux system. Of course this will not compete with other popular frameworks like Qt or GTK, but it has some advantages worth sharing: where portability matters more than eye candy features.

Oniro's Bitbake recipes enable makers to build products with user interface in a Yocto environment that can target different kernels or graphics systems.

Oniro's blueprints will illustrate integration details to match a product requirement.

Demos of vending machine (running on Linux+Wayland) or keypad (on Zephyr MCU OS) will be shown too.

https://fosdem.org/2022/schedule/event/lvgl/

Agenda

Introduction
LVGL
Oniro project
Integration showcase

Introduction

Philippe Coval is involved into Oniro Project
- Astrolabe constultant based in France
- for Huawei Open Source Tech Center
Gábor Kiss-Vámosi is the founder of LVGL
- CEO of LVGL LLC
- Developing LVGL and providing Services

What is LVGL?

Light and Versatile Graphics Library
- Open source (MIT license)
- Platform independent, and scalable
First published in 2016 on GitHub
- Now has 8.3k stars and 200+ contributors
Integrated into many OS and HW solutions:
- NXP, ESP, NuttX, Zephyr, Rt-Thread, Adafruit, and many more

Thank you and welcome! So LVGL stands for Light and Versatile Graphics Library. It's an open source, MIT licensed graphics library to easily create modern UIs. LVGL's primary targets are the resource constrained embedded devices such as smart watches, smart homes, instruments, kitchen aid devices, medical devices and things like that. However, recently LVGL got some exciting features to effectively work for desktop apps too. So you can create even 4k apps that uses the video card of the PC to achieve high FPS.

LVGL was started as my hobby project more than 10 years ago. For a couple of years I used it only for myself but in 2016 I've shared it on GitHub. It turned out there was a great need for a library like this.

Since then LVGL got more than 200 contributors and more then 8k stars on GitHub. It's frequently among the most popular C repositories of GitHub and was adopted by many large and popular project.

We have a good relationship with vendors like NXP, Espressif or Ardunio and RTOS project like Rt-Thread, Zephyr, NuttX and recently Oniro who adopted LVGL into their ecosystem.

About a year ago we have created LVGL LLC in order to provide a solid background for the library and provide services to the users of LVGL.

LVGL UI Demo

LVGL Features

Many built in Widgets:
- buttons, charts, lists, sliders, images, etc.
Advanced graphics with animations
- anti-aliasing, opacity, smooth scrolling
Fully customizable with CSS-like styles
Supports various input devices:
- touchpad, mouse, keyboard, encoder, etc
Multi-language support with UTF-8 encoding
Binding to MicroPython

As you could see LVGL has may built in widgets. Buttons, charts, lists, sliders, images, tabview, various type of meters and so on. You can simply create, delete and adjust the widgets run time.

As the users get use to the UIs of the smartphones they expect the same quality on other devices too. To give this experience to the users with LVGL you can draw anti-aliased shapes, use opacity, various blending modes or smoothly scroll long content, animations and so on. Basically what you usually see in Android apps can be realized with LVGL too.

The widgets of LVGL are highly customization. We adopted a CSS-like styling scheme and adopted it's boxing modle, property names, cascading and inheritance philosophy and even its modern layouts. Namely flexbox and grid. With these versatile layouts the widgets can be easily positioned in a responsive way!

Unlike smartphones LVGL is not limited to touchpad or mouse input devices. The UIs created with LVGL can be navigated and used with keyboard too by pressing TAB to change focus. In fact, even a single rotary encoder, supporting rotation and push, is suitable to control the whole UI. You can even have multiple encoders assigned to a specfic group of the widgets. For example an instrument with 2 channels can be controlled by 2 encoders, each assigned to the widgets of a different channel.

You can also create multi language UIs. LVGL supports UTF-8 encoding, mixing RTL and LTR languages and the special requirements of Arabian and Persian languages. We have an internationlization library to get the strings to translate from the source-code and, export them into yaml files where you can translate them, and build source-code from the translations again, allowing you to select the current language of the UI.

LVGL has binding to Micropython. Micropython is a Python subset, basically it gives you Python-like experience on embedded devices. And this binding allows you to create UIs using LVGL in Python.

Scalable and Portable

Written in C for maximal compatibility
- C++ compatible
Hardware independent:
- use with any MCU and display
OS, external memory, GPU are optional
Scalable:
- from small MCUs (>64 kB Flash, 16 kB RAM)
- to desktop PCs with 4k displays

Let's how can you use LVGL in your project! LVGL is written in C and depends only standard C library headers. As most of the C project, LVGL also can be used in C++ environment too.

For build systems we support make, Cmake, but LVGL works with simple managed builds too. That is, you can copy it into Eclipse or VSCode, refresh the project, and it just works.

As LVGL is just a buch of open-source C and H files, it's fully vendor agnostic. You can build it for any MCU or board. There is no limitation in display type either. Of course you can use it with normal RGB display, gray scale or monochrome displays, or with any special environment.

Just to mention interesting use cases, someone used LVGL to create a UI in virtual reality environment. Some other users create UEFI BIOS UI, others integrated LVGL with Nintendo, but our demos are built run in a web browser.

Porting LVGL

Only 2 functions are needed to port LVGL:
1. A Render ready callback
  - to copy the rendered image to the screen
2. An Input read callback
  - to read the touchpad or other device
Flexible architecture:
- you can add GPU support in the pipeline
- hook any drawing drawing operations

Design with SquareLine ($)

📺

The Oniro Project

An independent Eclipse Foundation project
An open source distributed operating system
- For diverse IoT devices (big and small)
- Cross kernel, focus on interoperability
Defragment development for embedded sys:
- Avoid technology silos
- Unified tooling, common policies,

UI Requirements

Oniro can support FLOSS toolkits:
- Qt, GTK+, EFL… or Web frameworks
LVGL works on many flavors of Oniro devices
- A common denominator for CPU/MCU
  - For cross kernel Oniro apps
Challenge: Prototype app on CPU (Linux)
- rebase on MCU (Zephyr or Other)

Oniro Linux flavour

Reference "Vending machine" blueprint
Using lvgl v8 with wayland driver
- build using bitbake recipe
  - Upstreamed (meta-openembedded)
2 apps: UI + controller (websockets)
Shipped into customized distro with variables:
- Screen size, allocator, fonts
- weston config for kiosk application

Oniro's Vending machine

📺 📺

Oniro's Keypad

Oniro Zephyr flavour

Oniro blueprint: "Keypad device"
- Custom zephyr-keypad app (WIP)
  - built using bitbake (meta-zephyr layer)
    - shipping zephyr fork of LVGL (v7)
  - work out of the box on nRF52840
Oniro's plan: meta-zephyr (Goofy)
- Align to v8 : zephyr's lvgl (Thx @brgl)
- KConfig to customize (thx @pidge)
Challenge: Cross kernel dialog-lvgl app

Summary

LVGL is portable library for MCU
Also CPU using drivers: Wayland, SDL
Oniro is crosskernel OS
- with "blueprint" projects using LVGL
  - Linux: Vending machine
  - Zephyr: Keypad
Visit FOSDEM Oniro's stand for more!