TouchGFX design" + online battery status monitoring

北方

TouchGFX design" + online battery status monitoring [Copy link]

1. Introduction to TouchGFXDesigner

GFX is a library that runs very high on MCU and can be seen in various versions of KEIL. The usual development process is to create a project and then add libraries one by one according to the hardware. The GFX library needs a license to be used in Keil. However, GFX is put in the pocket by ST. Then, there is this free TouchGFXDesigner.

TouchGFXDesigner is more like a web page tool developed by MVC. With the foundation of frontpage website design, you can get started directly without reading the manual. The user interface designed can be calculated in minutes. This project is like this.

However, based on embedded development, there are two ways to connect the code in TouchGFXDesigner. The first is to use the Generate Code button after the UI design is completed, and then export it to continue development in keil, gcc, iar and other environments.

But there is a faster way. There is an option to insert function under the interaction option, which can directly embed the code into the project.

However, the more useful part is the simulator, which can directly form the dynamic part of the code. The compilation and execution process is a little slow, but it is really fun, and it is even more convenient if you write a small game.

2. Battery Status Online Monitoring Project Introduction

2.1 The effect achieved by the battery status online monitoring project , this interface includes the initial page splash, the status display page Status, the settings page Settings, and the introduction page About.

This project can accept data from the ADC interface or the communication interface to display the real-time status. The data interface of this project is represented by demonstration data.

Specific implementation process:

- The project starts, displays the image of the start page, and waits for the entire project to be loaded and initialized.

- After completing the initialization, it will directly enter the main page. The main page includes text display of battery voltage, battery current and battery operating temperature, and dynamic display of ambient temperature.

- In order to correctly display the set parameters, it is necessary to set the set unit and time period, which are all shown in the setting page.

- The last about page explains the required information, which introduces the description of touchGFX.

2.2 Application platform: When creating a project, typical development boards such as stm32's discover are available. This project is developed using simulator and designed from blank UI, without using typical examples and demos;

2.3 Application scenario: industrial data monitoring panel display.

2.4 Design features: The user interface is simple and easy to use. The STM32 LOGO is used in the design, but it should be noted that the file name needs to be changed to a short file name, otherwise an error will be reported.

3. The design uses container and Scroll list, and the interface design is richer.

3.1 First create a custom container,

and then add elements to it, here are pictures and text, where the textIt is the data accessed and updated in the code

3.2 In this way, you can add this element to the created page. Here, use the scroll list to add 3 elements.

3.3 Other files are edited one by one in this way, forming a simple logical execution framework as follows.

4. The corresponding project files and simple operation demonstration videos are as follows.

4.1 The video uses simulator, and the effect after displaying the gif screenshot is as follows,

4.2 The uploaded code is as attached

BatteryManagement.7z (10.66 MB, downloads: 115)

2019-4-8 15:36 上传

点击文件名下载附件

5. Subsequent work.

On this simple interface, complete the injection and modification of code to realize the function of data update.

After completing the basic logic, you can further optimize the page design, select colors, pictures and richer user interactions.

倾心思梦

Thanks for sharing!