Step-by-Step Guide to Creating User Interfaces for STM32GPU Software
Follow these detailed instructions to create UI elements, add images, set backgrounds, include buttons, and program events using STM32GPU software for your project with YU.DU.AMSON.ELECTRONICS.CO.,LTD.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
YU DU AMSON ELECTRONICS CO.,LTD. Please download the following project file in advance: https://www.lcd-modules.com.tw/upload/web/UART/Home2023_Project.rar
1. Open the software: stm32gpu_20220908_v2.24 2. Create a new file: File New a. Input a name: Home2023 b. Choose the path to save the file. c. Choose resolution 240*320. d. Click Create
File is created, and you get a new page (UI) named main.
3. Add picture into the library. Click a. Add all the pictures (jpg. suggested)
4. Set background of UI main: a. Background: Choose Ext. Picture (Existing whole picture) b. Picture: Choose menu c. UI main: Background is there.
5. Add new UI: Click Input a name light I. Add the other UI: temperature, scale. Each UI has no contents, which should be designed by the user.
6. Add button in UI main: Click Click Button: obj0 pops up in the upper right box. Meanwhile, obj0 pops out in the page. Let s set the parameters of obj0 in the right table.
I. Button: a. Set the coordinate and size of obj0 b. Background: Choose Transparent (Transparent if it s not pressed) c. Background1: Choose Pt. Picture (Show part of the picture when it s pressed) Picture1: Choose menu
I. Button: d. Set obj1 & obj2 the same way.
I. Button: e. Input the programming in the Event window: obj0: form light; obj1: form temperature; obj2: form scale; ( form is to shift the UI. Note that ; is necessary.)
7. Add fonts in library: a. Name it A24 b. Choose 24 for Height c. Choose us-ascii for Code d. Choose Arial for typeface e. Click Generate and there ll be A24 in the library.
8. Set background of UI light and add & 3 buttons: I. Text: a. Choose Transparent for obj3 b. Input OFF for str c. Choose A24 from library d. Choose blue for strColor e. Choose CC (Center) for align
II. Button: a. Input the programming in the Event window of obj4: obj3.str="ON"; (Change the text of obj3 to ON ) b. Likewise for obj5: obj3.str="OFF"; (Change the text of obj3 to OFF )
II. Button: c. Set the parameters of obj6 according to the table above, choosing the corresponding pictures and inputting programming: form main;
9. Set background of UI temperature and add & 3 buttons I. Number: a. obj7- transparent background b. Input 20 for str c. Choose A24 from font library d. Choose black for strColor e. Choose CC for align II. Progress Bar: Set obj8 according to the right table, and the bar shows part of the picture temperature Object table for reference
III. Button: a. Input the programming in the Event window for obj9: if (obj7.num-1<=20) { obj7.num=20; obj8.num=0; } else { obj7.num-=1; obj8.num-=1; }
III. Button: b. Likewise for obj10: if (obj7.num+1>=28) { obj7.num=28; obj8.num=8; } else { obj7.num+=1; obj8.num+=1; } c. Lastly for obj11: form main;
10. Set background of UI scale and add & 1 button I. Gauge: Set the parameters according to the right table
II. Number: a. obj13- light green background b. Input 0 for str c. Choose A24 from font library d. Choose black for strColor e. Choose CC for align
III. Slide Bar: a. obj14- light green background b. Input 20 for Width c. Input 230 for Maximum d. Input the programming in the Event window as above
IV. Button: Set the parameters of obj15 according to the table above.
