EMWI
Article directory
foreword
We introduce an "artifact" that is often used when using emwin as an interface: GUIBulider. Using this software, we don't need to write the interface in C language. We can design the interface in GUIBulider, and then export the C program. Very convenient. GUIBulider is the official software of emwin, each version of emwin has its corresponding version of GUIBulider software, the control is very complete, skilled use of GUIBulider will have multiplier effect when using emWin to design GUI interface.
1. Introduction to GUIBulider
Similar to QT's production interface, the principle is the same as the
widget selection bar.
The selection bar contains all available widgets of GUIBulider. Just click the selection bar on the desired widget or drag it into the
editor area to add it.
Object Tree
This area displays all currently loaded dialogs and their sub-gadgets, which can be selected by clicking on the corresponding entry.
Widget Properties
It displays the properties of each widget and can be used to edit the properties.
Editor The
editor window displays the currently selected dialog, which can be used to place and resize the dialog and its widgets.
2. GUIBulider usage steps
1. Create a dialog
To create a dialog box, each dialog box needs a valid parent widget. There are currently two parent widgets: Framewin (frame widget) and Window (window widget). In more cases, we create Framewin Gadget
2. Set Framewin parameters
(1) The coordinate of Framewin control is (0,0), that is, the coordinate of the upper left corner of the space on the LCD is (0,0).
(2) The size of the X-axis of the control is 800, and the size of the Y-axis is 480 . It is OK to exceed the screen size. It is set to 800 480 here, and it will be displayed in full screen when the control is displayed in the future).
(3) Set the title bar height to 40, the title bar name to "ALIENTEK GUIBulider", the font to
"GUI_FONT_32B_ASCII", the alignment of the name to be centered horizontally and vertically, and the font to be red.
OK, now we set the Framewin control according to the above parameter requirements, first set the position of the control in the LCD,
To set the height of the title bar, click the right mouse button on the control, there will be many setting options, as shown in the figure, here we select "Set title height".
When we complete the selection, the "Title height" setting option will appear in the widget property bar at the bottom left of the GUIBulider, the default is 14, here we change it to 40
to set the title bar name, right-click on the control and select "Set title text" , set the title bar name to "ALIENTEK GUIBulider"
set the title bar name font to "GUI_FONT_32B_ASCII", right-click the control, select "Set font", the dialog box as shown in the figure appears, select GUI_FONT_32B_ASCII.
Set the color of the title bar name to Red, click the right mouse button on the control and select "Set text color", select red
to set the alignment of the title bar name to be centered horizontally and vertically, right-click the mouse and select "Set text alignment", and select the alignment you want in the dialog box that appears. Here we choose horizontal and center alignment. After the setting is completed, we will add a Listview control, an Edit control, two Button controls and a Scrollbar control in Framewin
as shown in the figure.
3. Save
Save the design, generate a C file, click Flie->Save, a prompt dialog box will appear, click "OK", so that
a .C file will be generated under the folder where GUIBulider is located
Download the code to the development board, you can see the following phenomenon: The
font shows red and I commented, so it shows white.