Quazar3D: Master Tutorial
HomePreviousParentNext

Master Tutorial  »  04. Adding GUI elements, creating its functionality

04. Adding GUI elements, creating its functionality

test

Lesson 04

Complete lesson 03

This lesson will present how to create a functional GUI. It will teach you how to add buttons, 2D graphics and how to connect interaction to those elements.

  1. First we need to add the GUI textures to the application. From the downloaded assets //master_tutorial_basic_assets/download/gui drag the gui folder to the File browser window into the textures folder.
  2. From the downloaded assets //master_tutorial_basic_assets/ drag the file main_gui.ui to the root folder of the File browser window.
  3. From the downloaded assets //master_tutorial_basic_assets/ drag the fonts folder to the root folder of the File browser window.
  4. Now go to the Widgets window. Here by pressing the right mouse button on the window or by pressing the button you can add different types of widgets.
  5. Every widget has its own tabs where you can change its name, position, color, assign a texture or create a Callback to a specific widget. Callbacks are used to initiate actions created in the Flowgraph window. By associating the widget with a WidgetCallback block in the Flowgraph window you can create interaction.
  6. Now as a practice add a WidgetIcon. In the Widget tab change its name to Widget_Test and change its Position to values 4,130, select Overlap. In the tab Icon add a texture from textures/gui/help_button.png. The last tab Callbacks is where you assign your Event name. Most widgets work as buttons, so select 5. Clicked and mark Flowgraph as the functionality will be created there. The Event name is very important, the name that you will enter here will be used to initiate action in Flowgraph window. Basically the program needs to know what to do when the button is pressed by the user during simulation. The Event name executes the proper action by using a block  WidgetCallback in the Flowgraph window. The WidgetCallback block should be named the same as the Event name.
  7. Now delete the Widget_Test by pressing the right mouse button on it and select Delete widget.
  8. Press the button and select main_gui.ui file.
  9. Right now you should see the Gui at the bottom of the Render window.
  10. The Gui consists of four buttons: help (the one with a question mark), task (the one with a i letter), setup (the one with a gearwheel) and button_open/button_close (the one between the setup and task icons). All the properties and event names are already included in this file, please use the application Lesson_04 as a point of reference.
  11. Now go to the Flograph window and in master_tutorial.fg we are going to create the first part of the Gui's functionality. The first part includes help button and button_open/button_close.
  12. First create a new Container, call it Tutorial_Menu.
  13. Inside the Tutorial_Menu container add two blocks: Init and Get Property. Connect the Output of the Init block with the Input of the Get Property block. Open the Get Property block and in Type enter Engine [Data/Items/Engine] and in Property enter Gui  [Gui]. 
test
  1. Add blocks Add UserInterface, Engine and Gui. Connect the Succeeded in the Get Property block with the Input of the Add UserInterface block. Connect the Engine block to the Engine of the Get Property block. Connect he Gui block with the Gui in the Get Property block and with the Gui in the Add UserInterface block.
test
  1. Add blocks Find Widget, User Interface, Widget and two String blocks. Open the first String block, enter main_gui.ui and connect it to the Name in the Add UserInterface block. Connect the UserInterface block to UserInterface in Add UserInterface block and to UserInterface in Find Widget block. Open the second String block, enter main_container and connect it to the Name in Find Widget block. Change the name of the Widget block to Main Container and connect it to the Widget in Find Widget block. Connect the Output of the Add UserInterface block to the Input of the Find Widget block.
test
  1. Add two blocks: Add Child and Integer. Open the Integer block, select GUI_ALIGN_BOTTOM and connect it to the Flags of the Add Child block. Connect the Main Container block to the Widget of the Add Child block. Connect the Gui block to the Gui in the Add Child block. Connect the Succeeded of the Find Widget block to the Input of the Add Child block (connections are marked in yellow).
lesson_04_screen_04
  1. Add Find Widget, Widget and String block. Connect the Ouput of the Add Child block to the Input of the Find Widget block. Open the String block, enter background and connect it to the Name in the Find Widget block. Connect the UserInterface block with the UserInterface of the Find Widget block. Change the name of the Widget block to Background and connect it to the Widget of the Find Widget block.
lesson_04_screen_05
  1. In the same manner connect next three widgets: controls, button_open and button_close.
lesson_04_screen_06
  1. Now below the blocks that you have created add a block SignalInput. Open it and in Create New enter ShowControls.
test
  1. Notice that the Tutorial_Menu container in master_tutorial.fg has now a new input ShowControls. Go back to the Tutorial_Menu.fg. Add Assign block, open it and select Widget [Data/Items/Gui/Widgets]. Connect the ShowControls in the SignalInput block with the Input of the Assign block.
test
  1. Right now we have to create a container that will be responsible for opening and closing the menu. Add Container block and name it Menu Control. Open the Menu Control container and inside add three following blocks: two SignalInput and Set Boolean. Open the first SignalInput block and in Create new enter Show, open the second SignalInput block and in Create new enter Hide.
test
  1. Connect the Show from first SignalInput block to True in Set Boolean block. Connect the Hide from the second SignalInput block to False in Set Boolean block. Add If block and connect its Input to the Output of the Set Boolean block.
test
  1. Add DataInput block, open it and enter in Name: Background, in Type: Widget [Data/Items/Gui/Widgets].
test
  1. Connect the False from the If block to the Get in DataInput. Add two If blocks. Connect the Output from the DataInput block to the Input of the first If block. Connect the True in the first If block with the Input of the second If block.
test
  1. Add two Boolean blocks. Name them isShowing and IsOpened. Connect the isShowing block to Result in the Set Boolean block and to the Condition of the last If block. Connect isOpened block to the Condition in the second If block.
lesson_04_screen_13
  1. Add Set Boolean block. Connect the False from the last If block to True of the Set Boolean block. Add a Boolean block, name it inMotion and connect it to the Result of the newly added Set Boolean block and to the Condition of the first If block.
lesson_04_screen_14
  1. Add a block called Timeline and name it Open Menu. Connect the False from the second If block to the Play in the Open Menu block.
lesson_04_screen_15
  1. Open the Open Menu block. Notice that a new window appears, called Timeline. In the upper toolbar find Add input and enter Widget, press enter. In the Input properties (at the bottom of the timeline window) a new element has appeared: Data/Items/Gui/Widgets/Widget. Right press on it and select Add Property - Width. Select it by left pressing on it, a red line should appear on the Timeline window. Now create two points on the line by double pressing on it with the left mouse button. Select the first point with the mouse and in the upper toolbar in Time enter 0, in Value enter 0. Select the second point and enter in Time: 1, and in Value: 700. Pressing the button will fit the view to the screen.
lesson_04_screen_16
  1. Go back to the Flograph window to menu_control.fg. Add another Timeline block and name it Close Menu. Connect the False from the last If block to the Play of the Close Menu block.
lesson_04_screen_17
  1. Open the Close Menu block and add the same element and property as in the Open Menu block but with different values for the added points on the red line. For the first point in Time enter 0, in Value enter 700. For the second point in Time enter 1, in Value enter 0.
lesson_04_screen_18
  1. Now go back to the Flowgraph window to the menu_control.fg. Add Widget block, name it Background. Connect the Background block to the Background in the DataInput block. Connect the Background block to Data/Items/Gui/Widgets/Widget in Open Menu and Close Menu blocks. Connect the Finished from the Open Menu and Close Menu to the False in the last Set Boolean block.
lesson_04_screen_19
  1. Add Set Boolean block. Connect Finished from the Open menu block to True in the Set Boolean block. Connect Finished from the Close Menu block to the False in Set Boolean block. Connect the isOpened block to the Result in Set Boolean block.
lesson_04_screen_20
  1. Add two Set Property blocks. Open them, in Type enter Widget [Data/Items/Gui/Widgets] and in Property enter Hidden  [Boolean].
test
  1. Connect the True of the last If block with the Input of the first Set Property block. Add Widget block, change its name to CurrentWidget and connect it to the Widget in the first Set Property block. Add Boolean block, open it and set it to True, connect it to the Hidden in the first Set Property block.
lesson_04_screen_22
  1. Connect the Widget from the second Set Property block to the CurrentWidget block. Connect the False from the last If block to the Input of the second Set Property block. Add Boolean block, open it and set it to True, connect it to the Hidden in the second Set Property block.
lesson_04_screen_23
  1. Add DataInput block, open it and in Name enter Show Widget on Open, in Type enter Widget [Data/Items/Gui/Widgets].
test
  1. Connect the Finished from the Open Menu block to the Get in the DataInput block. Connect the Output from the Set Property block to the Get in the DataInput block.
lesson_04_screen_25
  1. Add Set Property block, open it and in Type enter Widget [Data/Items/Gui/Widgets], in Property enter Hidden  [Boolean]. Add Assign block, open it and in Type select Widget [Data/Items/Gui/Widgets].
test
  1. Connect the Output from the DataInput block to the Input of the Set Property block. Connect the Output from the Set Property block to the Input of the Assign block. Add Boolean block, set it to False and connect it to the Hidden of the Set Property block.  Add a Widget block, name it NewWidget and connect it to Show Widget on Open of the DataInput block and to Widget of the Set Property block and to first Widget of the Assign block. Connect the CurrentWidget block with the second Widget in the Assign block.
lesson_04_screen_27
  1. Add two SignalOutput blocks, open them and in the first one enter Opened, in the second one Closed.
test
  1. Connect the Output from the Assign block to the Opened of the SignalOutput. Connect the Finished from the Close Menu block to the Closed of the SignalOutput block.
lesson_04_screen_29
  1. Go back to the Tutorial_Menu.fg. Connect the Output of the Assign block to the Show of the Menu Control block. Add two WidgetCallback blocks. Name the first one menu_open and connect its Output with Show of the Menu Control block. Name the second one menu_close and connect its Output with the Hide of the Menu Control block.
lesson_04_screen_30
  1. Add a Widget block, name it Target Widget and connect it to the second Widget in the Assign block and to the Show Widget on Open in Menu Control Block. Connect the first Widget in the Assign block to the Content_controls block. Connect the Background from the Menu Control block to the Background block.
lesson_04_screen_31
  1. Add four Set Property blocks. Open them and in Type enter Widget [Data/Items/Gui/Widgets], in Property enter Hidden  [Boolean].
test
  1. Connect the Opened from the Menu Control block to the Input of the first Set Property block and Closed to the Input of the third Set Property block. Add four Boolean blocks. Set the first Boolean block to True and connect it to the Hidden in the first Set Property block. Set the second Boolean block to False and connect it to the Hidden in the second Set Property block. Set the third Boolean block to False and connect it to the Hidden in the third Set Property block.Set the fourth Boolean block to True and connect it to the Hidden in the fourth Set Property block. Connect the Widget from the first and third Set Property block to the ButtonOpen block. Connect the Widget from the second and fourth Set Property block to the ButtonClose block. Connect the Succeeded from the first Set Property block with the Input of the second Set Property block. Connect the Succeeded from the third Set Property block with the Input of the fourth Set Property block.
lesson_04_screen_33
  1. Go back to the master_tutorial.fg. Add WidgetCallback block, name it gui_pressed_help and connect it to the ShowControls in the Tutorial_Menu block.
test
  1. After pressing Play in the editor your menu should be visible and behave in a following manner: buttons task and setup are inactive, button_open/button_close should show and hide the menu and button help should show the menu and display information on controls.
  2. Right now we are going to add functionality to buttons task and setup. We are going to start with setup. Go to the Tutorial_Menu.fg in the Flowgraph window. Add Find Widget block, connect its Input to the Output of Add Child block. Add String block, open it and enter configurator. Connect the String block to Name in the Find Widget block. Add Widget block, name it Content_configurator and connect it to the Widget in the Find Widget block. Connect the UserInterface block to the UserInterface in the Find Widget block.
lesson_04_screen_35
  1. In the same manner connect next two sets of blocks (Find Widget, String and Widget). In String blocks enter light_switch and text_message.The Widget blocks name Content_light_switch and Content_text_message.
lesson_04_screen_36
  1. Add SignalInput block, open it and in Name enter ShowConfigurator. Add Assign block, open it and select Widget [Data/Items/Gui/Widgets].  Connect the ShowConfigurator from the SignalInput block to the Input of the Assign block. Connect the Output of the Assign block to the Show of Menu Control block. Connect the second Widget from the Assign block to the Target Widget block. Connect the first Widget from the Assign block with the Content_configurator block.
lesson_04_screen_37
  1. Add SignalInput block, open it and in Name enter ShowLightInfo. Add Assign block, open it and select Widget [Data/Items/Gui/Widgets].  Connect the ShowLightInfo from the SignalInput block to the Input of the Assign block. Connect the Output of the Assign block to the Show of Menu Control block. Connect the second Widget from the Assign block to the Target Widget block. Connect the first Widget from the Assign block with the Content_light_switch block.
lesson_04_screen_38
  1. Add Find Widget, String and Widget blocks. Connect the Input of the Find Widget block with the Add Child block. Connect the UserInterface block to the UserInterface in the Find Widget block. Open the String block, enter label_message and connect it to the Name in the Find Widget block. Connect the Widget block to the Widget in the Find Widget block.
lesson_04_screen_39
  1. Add Cast block, open it and in the Convert From enter Widget  [Widget], in the Convert To enter WidgetLabel  [WidgetLabel].
test
  1. Connect the Succeeded in the Find Widget block with the Input of the Cast block. Connect the Widget block with the Widget in the Cast block. Add WidgetLabel block, name it WidgetLabel_Message and connect it to the WidgetLabel in Cast block.
test
  1. Add SIgnalInput block, open it and in Name enter ShowMessage. Add block DataInput, open it and in Name enter Message, in Type select String [Data].
test
  1. Connect the ShowMessage from the SignalInput block to the Get in the DataInput block. Add String block, name it String Message and connect it to the Message in the DataInput block.
test
  1. Add Set Property block, open it and in Type enter Widgetlabel [Data/Items/Gui/Widgets], in Property enter Text  [String]. Add Assign block, open it and select Widget [Data/Items/Gui/Widgets].
test
  1. Connect Output from the DataInput block to the Input of the Set Property block. Connect the String Message block to the Text in the Set Property block. Connect the Succeeded from the Set Property block to Input of the Assign block. Connect the WidgetLabel in the Set Property block to the WidgetLabel_Message block. Connect the first Widget from the Assign block to the Content_text_message block. Connect the second Widget in the Assign block to the Target Widget block. Connect the Output form the Assign block to the Show in the Menu Control block.
lesson_04_screen_45
  1. Add Find Widget block, connect its Input to the Output of the Add Child block. Connect the UserInterface block to UserInterface in Find Widget block. Add String block, open it and enter setup_button. Add Widget block, name it SetupButton and connect it to the Widget in the Find Widget block.
lesson_04_screen_46
  1. Add SignaInput block, open it and in the Name enter SetConfigButtonEnabled. Add DataInput block, open it and in Name enter ConfigButtonEnabled?, in Type enter Boolean [Data]. Add Set Property block, open it and in Type select Widget [Data/Items/Gui/Widgets], in Property select Enabled  [Boolean].
lesson_04_screen_47
  1. Connect the SetConfigButtonEnabled in the SignalInput block with the Get in the DataInput block. Connect the Output from the DataInput block with the Input of the Set Property block. Add Boolean block, set it to False and connect it to the ConfigButtonEnabled? in DataInput block and to Enabled in Set Property block. Connect the Widget in the Set Property block with the SetupButton block.
lesson_04_screen_48
  1. Go back to the master_tutorial.fg in the Flowgraph window. Add WidgetCallback block, name it gui_pressed_configurator and connect its Output to ShowConfigurator in Tutorial_Menu block.
test
  1. Add WidgetCallback , SetString, String and Boolean block. Change the name of the WidgetCallback to gui_pressed_task and connect its Output to Input0 in Set String. Open the Set String block and under Name replace the Input0 with How to move Info. In Value enter Press the question mark icon to display the next step. Add another Input, name it Config unlock and in Value enter Press the configuration icon and customize your helicopter. Connect the Output of the Set String block to the ShowMessage in the Tutorial_Menu block. Change the name of the String block to Message and connect it to the Result from the Set String block and to Message in the Tutorial_Menu block. Name the Boolean block isConfigEnabled?, set it to False and connect it to the ConfigButtonEnabled? in Tutorial_Menu block.
test
  1. After pressing Play in the editor your menu should be visible and behave in a following manner: the button help displays controls, button task displays the current step of the application, button setup displays a non working configurator, and button_open/button_close shows/hides the menu.
  2. The next lesson will show how to create the first step in the application and how to add additional functionality of the Gui, namely to the helicopter's configurator.

 

  Previous lesson || Next lesson