Last time we talked about Visual TFT, we went over the basics: we created a project, configured our project settings, and played with the basic components (boxes, circles, lines and labels).
That's all fine and well, but the current project is not interactive with the end user. So what if we want to add a couple of buttons, to change the view from time to time, to break the monotony? Well fear not, because today we will go over how to make interactive buttons and check boxes, as well as how to make the desired events once the user interacts with them.
Buttons
The properties section for buttons firstly contains the field name, where you will choose how to identify your button, after that you have the coordinates of the buttons position on the screen. You can manually type on the coordinates, or change the position with your mouse, the coordinates will adapt. The caption field contains what text will be shown on the button. Max length is the maximum length of the text to be shown on the button, you can adjust it manually. You can also choose between horizontal or vertical text alignment, as well as where it will be aligned inside the button (center, left, right, up, down). You can also configure the font of the caption, the fields are self-explanatory. Like the previous components, the button color can have a gradient, and of course, a different color when pressed, if you need to brush up on how to use those you can take a glance at the previous part.
Simple button
The main event
Okay, so what now? The button is still just a field with text. That's why we have events. Right next to the Properties section, there are events. Events let you configure what will happen on four different occasions, those occasions are: Up event (OnUp), Down event (OnDown), Click event (OnClick), Press event (Onpress). Clicking on one of these, you will open a field, in that field you can type the name of the function which you want to be called on that event. Once you hit enter, the prototype of the function will appear in the editor.
Setting up the button events
Once Visual TFT generates your project, these functions will appear in your "projectname_events_code.c" file. You can alter them inside your compiler also.
Button event code
Check boxes
Under the common components palette, other than buttons, you also have check boxes offered. These can have a desired caption, and change their state (checked or unchecked) when pressed by default - meaning that you don't have to set this up manually.
Check box with it's properties
Wrapping it up
Now you have all the ingredients needed to make and interactive GUI. Play with the events, let your creativity wander between designing the look of the main screen and the source code of the button events! But don't get carried away too much, stay tuned for the third part, where we will cover how to add images and progress bars to your projects!
References
Graphical User Interface, Wikipedia 2016