QEC-M-043T + 86Duino’s LVGL example: DemoWidgets

QEC-M-043T + 86Duino’s LVGL example: DemoWidgets

In this tutorial, you will learn to use LVGL (Light and Versatile Graphics Library) example to create a graphical user interface on QEC-M-043T.

lvglDemoWidgets_1

Goals:

  • Understanding the structure to include LVGL Library.
  • Building an example UI.
  • Configuring the setup to display the UI.

Required hardware and Software


The Light and Versatile Graphics Library

Graphical User interfaces are necessary. The Light and Versatile Graphics Library, also known as LVGL, is an open-sourced library that creates graphical user interfaces for microcontrollers and high-end processors.

The core LVGL library and the examples are directly available as 86Duino IDE 500 libraries.


Instructions

The setup for this tutorial requires you to connect QEC-M-043T and PC by the USB-to-MicroUSB cable, then upload the finished sketch file to the QEC-M-043T. The LVGL example will display on the QEC-M-043T.

The Basic Setup

Begin by plugging QEC-M-043T into the computer using a USB-to-MicroUSB cable and opening the 86Duino IDE 500. If this is your first time running 86Duino sketch files, we suggest you check out how to set up the QEC-M-043T for 86Duino before proceeding.

Open the LVGL Example

Select “QEC M043T” in the Tools -> Board menu first.
Next, select “Examples” in the File menu, go to LVGL86 -> LVGL and open the “DemoWidgets”.

lvglDemoWidgetsLocation

LVGL DemoWidgets

There are 3 files in the ‘DemoWidgets’ example.

  • DemoWidgets:
    *.ino files are your main application files.
  • lv_demo_widgets.c:
    *.c files are our C source code files in which our code is written and created by the user.
  • lv_demo_widgets.h:
    *.h files are header files that are prewritten for our compiler.
lvglDemoWidgets

Upload the Sketch

Below are the complete steps for uploading the sketch to QEC-M-043T. Upload the sketch to QEC-M-043T, and then you can see the display on it.

  1. Select “QEC M043T” in the Tools -> Board menu.
  2. Select the correct COM port in the Tools -> Serial Port menu. (Please open Device Manager -> Ports (COM & LPT) -> Prolific PL2303GC USB Serial COM Port (COMx) to make sure your COM number.)
  3. Click the “Upload” button to compile your code and upload it to the QEC-M-043T.
  4. Then, you can see the DemoWidgets example on QEC-M-043T after the upload is complete.

Conclusion

This tutorial shows how to use the LVGL example to create a graphical user interface on QEC-M-043T and also shows how to use the “task” feature of LVGL to run instructions recurrently.

Next Steps

Now that you know how to build a UI for a screen, you can connect the EtherCAT Slave device to QEC-M-043T for control with the UI.


Troubleshooting

Sketch Upload Troubleshooting

If you have trouble uploading the sketch, please ensure:

  1. Vs (Power of FGND/GND/VS) must be connected.
  2. Please check the COM port. You can open the Device Manager -> Ports (COM & LPT) -> Prolific PL2303GC USB Serial COM Port (COMx) to make sure your COM number.)
  3. Boards: “QEC M043T”

The text of the 86Duino reference is a modification of the Arduino reference and is licensed under a Creative Commons Attribution-ShareAlike 3.0 License. Code samples in the reference are released into the public domain.

Leave a Comment

Scroll to Top