Graphical User Interfaces (GUI) has been one of the revolution points in computer science. Transitioning from punched cards to terminal, from terminal to full colored screen with drag-and-drop capabilities, engineers have made it easy to start and and end programs with simple clicking. The same is going on in the micro world of embedded programming: we are beginning to add GUIs which enable us to easily alter the execution of the program which lies in the soul of the MCU. Last time we were going over capacitive and resistive touch panels, this time we will introduce a simple tutorial which will help you make a GUI easily using our Visual TFT software.
Starting a project
When you start the software, click on "New Project". A dialog screen will pop up, asking for a file path. The file path is the path where you will store your project, and how you will name it. The default file path is the installation folderMikroelektronikaVisual TFTProjects
Visual TFT new project
After choosing your path, the "Project Settings" window will open. The first field is "Hardware patterns", here you can choose already pre-built configurations, to save your time. All of our hardware boards are supported here. If you, however, want a custom configuration, you can create one of your own. Under the hardware patters window, are the Advanced Settings. Here, you tweak your configurations fully: you can select your MCU, set the working clock, choose the display controller, the display size, set the touch panel configurations and much more.
Visual TFT project settings
Play time!
After you're done with project settings, your window will change to Display. You will be presented with a blank screen to work with. To the left is the Object Inspector, under which we have two fields: Screens and Components. To the right is the Components Palette, with the fields Basic and Common use the components to add different graphics to the screen: a simple drag-and-drop system will place the desired component on the screen. Once you have placed the component on the screen, you can edit all of it's features in the Components part of the Object inspector.
Initial display screen
Components
For this part of the tutorial, we will do the Basic components: boxes, circles and lines, we will also do the "Label" component from the Common ones.
Once you click one of these components, you can drop them at the screen with a left click again. Once it's there, if you click at it, you can edit all of it's aspects in the Components section. The components section has two sub sections: Properties and Events, in this part we will cover only properties.
(Rounded) Box, Circle, Line
Most of these are self-explanatory, with the Gradient field you can configure the color of the component to be a gradient of color between the start color and end color. The press color is the color of the component when it is pressed on the screen. The line First Point and Second Point can be configured to their exact coordinates.
Label
Whenever you want a field of text, you can use the label. In the properties you can edit the desired text under the "Caption" field. You can also the font, or make the text to be vertical.
Using the components field of the Object Inspector
Screens
Inside one project, you can set up multiple screens. You can add or delete screens by hitting Ctrl + Ins or Ctrl + Del. Managing different screens is done in the Screens field of the Object Inspector. The "Start screen" check box determines if the certain screen will be the first to appear when the program starts. You can set the orientation (Landscape or Portrait), and also configure the underlying grid.
Screens field of the Object Inspector
You are ready for work!
This are the basics concepts of setting up a project in Visual TFT. With these you can easily start up a screen get ready for work. After you're done configuring the project you can hit Ctrl+F9 to generate the code, and F9 to open it in the compiler.
Generate code and open in compiler
If you want to know how to work with buttons, progress bars, images, stay tuned for the part 2 series of this tutorial!
References
Graphical User Interface, Wikipedia 2016
