Arduino esp32: overall framework of lvgl project (I)

Preface

Bishena LVGL Made a GUI, It's used arduino The compiler and ESP32 The board , Although not complicated on the whole , But there are many , Here is the whole project LVGL Partially record . If you need the code, you can ask me by email .

summary

stay ESP32 The above part is based on the previous blogs step by step , The first is to build the environment arduino-esp32： Development environment construction , Then drive the touch screen arduino-esp32： be based on TFT-eSPI The library implements touch screen , Then introduce the LVGLarduino-esp32： Use LVGL And the text library arduino-esp32：LVGL Chinese font （ Universal ）, Next, you can observe each in the simulator API The effect of arduino-esp32：LVGL Of VS2019 Simulator Come on arduino Write the required components and code in .
This is a demo video recorded at that time .

smartCarVideo

The overall framework

As a whole, it is divided into five modules ：

• Control module
• Data display module
• Parameter adjustment module
• Network connection module
• Network data transceiver module

Each module integrates a class of functions , For each module GUI Some use LVGL Provided API To draw , The data and logic sections use NRF To interact with the underlying .
because arduino The limitations of the editor provided by this compiler , So the external editor is used here sublime. Although it is not a good habit to write all the code in one folder , But here is still because arduino The particularity of , This part of the code is integrated in the same ino In the engineering documents , The total number of codes is 1900 Multiple lines , among GUI Part of it probably takes up 60%, The rest is the data processing part .

Control module

The control module is used to control the front, rear, left and right steering of the trolley .GUI as follows . Mainly the controller on the left , After long press, special effects will appear , Then start issuing instructions , Let go and stop .

Data display module

The data display module is used to display the data uploaded by the car ,GUI as follows . There are three types of data display , The first is the track display on the right side of the above figure , In fact, it is the result of a simple car sideline recognition , The second is speed data , Image cycle right , Every time 0.5 Refresh every second , The third method is to draw the gray distribution map of the camera frame image ,x Axis 188 Column , The width of the corresponding image ,y Axis 256 That's ok , Corresponding gray value , The last two data types are each 1 Refresh every second .

Data adjustment module

The data adjustment module is used to issue the mode switching and mode parameters of the car ,GUI as follows . Power on will pop up a pop-up window with blocked operation , Used to send the selection results of automatic or manual mode , There are four jump buttons in the configuration interface , After jumping, you can enter the main configuration interface , The operation mode can be switched here , The speed is selected through the sliding box , The data display part of the previous module can be switched here .

Network connection module

The network connection module provides an interactive connection similar to mobile phones and tablets WIFI The function of ,GUI as follows . Click the on switch , Will scan WIFI hotspot , At the end of the scan, at most 12 Hot spots , You can manually select one , Enter the password to start the connection process , And prompt the process and results .

Network data transceiver module

The network data receiving and sending module provides communication with the cloud server MQTT Connection process , And subscribe to and publish topics , This module is only connected WIFI Only after success , Its GUI as follows （ I didn't take pictures , I cut several pictures in the video ）. After turning on the switch, you will start to connect to the ECS , If the connection is successful, you will be prompted , Data upload and distribution will be displayed on the screen , After starting the network service, the speed data will be uploaded to the corresponding theme of the ECS in real time , And subscribe to the corresponding topics .

Other modules

There is also a configuration for the system , Used to adjust the brightness of the screen , Its GUI as follows . Slide the slider to 0% To 100% Adjust the brightness of the screen .

Summary

Holistic GUI These are the frames , It also includes the background color 、 Layout design and introduction of pictures in the upper right corner , Leave it in the code section later .