Quazar3D: Master Tutorial
HomePreviousParentNext

Master Tutorial  »  05. Additional GUI functionality, helicopter configurator

05. Additional GUI functionality, helicopter configurator

test

Lesson 05

Complete lesson 04

This lesson will teach you how to create steps in the application and how to make the helicopter's configurator.

  1. Go to the master_tutorial_fg, open the Tutorial_Menu block. Add Find Widget block. Connect its Input to the Output of the Add Child block. Connect the UserInterface in the Find Widget block to the UserInterface block. Add String block, open it and enter sr_door, connect it to the Name in the Find Widget block. Add Widget block and connect it to the Widget in the Find Widget block. Add Cast block, open it and in Conver From select Widget  [Widget], in Convert To select WidgetCheckBox  [WidgetCheckBox]. Connect the Succeeded in the Find Widget to the Input in the Cast block. Connect the Widget block to the Widget in the Cast Block. Add WidgetCheckBox block, name it Checkbox_sr_door and connect it to the WidgetCheckBox in the Cast block.
lesson_05_screen_01
  1. Now in the same manner connect next four sets of blocks. In the String blocks enter: sr_camera, sr_interior, com_door and com_interior. Name the WidgetCheckBox blocks: Checkbox_sr_camera, Checkbox_sr_interior, Checkbox_com_door and Checkbox_com_interior.
lesson_05_screen_02
  1. Add two WidgetCallback blocks. Name the first one ClickedSRHeli and the second one ClickedComHeli.
test
  1. Add Set Boolean block, connect the Output from the ClickedSRHeli to the True in the Set Boolean block. Connect the Output from the ClickedComHeli to the False in the Set Boolean block. Add Boolean block, set it to False and connect it to the Result in the Set Boolean block.
test
  1. Add three Set Property blocks, open them and in each block in Type enter WidgetCheckBox [Data/Items/Gui/Widgets], in Property enter Checked  [Boolean].
lesson_05_screen_05
  1. Connect the Output of the Set Boolean block to the Input of the first Set Property block. Connect the Checked from all three Set Property blocks to the Boolean block. Connect the Succeeded from the first Set Property block to Input of the second Set Property block, do the same for the third Set Property block. Connect the WidgetCheckBox from the first Set Property block to Checkbox_sr_door block. Connect the WidgetCheckBox from the second Set Property block to Checkbox_sr_camera block. Connect the WidgetCheckBox from the third Set Property block to Checkbox_sr_interior block.
lesson_05_screen_06
  1. Add Logic Not block, connect its Input to the Succeeded in the third Set Property block. Connect the Value in the Logic Not block to the Boolean block.
lesson_05_screen_07
  1. Add two Set Property blocks, open them and in Type select WidgetCheckBox [Data/Items/Gui/Widgets], in Property select Checked  [Boolean].
test
  1. Connect the Output from the Logic Not block to the Input of the fourth Set Property block. Connect the Succeeded from the fourth Set Property block to the Input of the fifth Set Property block. Add Boolean block, set it to False and connect it to the Result of the Logic Not block. Connect the Boolean block to WidgetCheckBox in the fourth and fifth Set Property blocks. Connect the WidgetCheckBox from the fourth Set Property block to Checkbox_com_door block. Connect the WidgetCheckBox from the fifth Set Property block to Checkbox_com_interior block.
lesson_05_screen_09
  1. Drag ChangeMaterial.fg container from the Embedded containers list to the Tutorial_Menu.fg window. In Create new flowgraph enter change_material and press save. Change the name of the container to Change material to Search & Rescue. In the same manner create the second container, save it under the same name and then change its name to Change material to Commercial. Connect the Output from the ClickedSRHeli block to the Input of the Change material to Search & Rescue block. Connect the Output from the ClickedComHeli block to the Input of the Change material to Commercial block.
lesson_05_screen_10
  1. Select the Change material to Search & Rescue block, press Ctrl+C and paste it eight times by pressing Ctrl+V. Copy and paste the Change material to Commercial block eight times. Connect the Output from the first Change material to Search & Rescue block with the Input of the next Change material to Search & Rescue block. Do the same for the next eight Change material to Search & Rescue blocks. In the same manner connect the Change material to Commercial blocks.
lesson_05_screen_11
  1. From the Editor in the Nodes window drag following elements to the Flowgraph window: HELICOPTER, HATCH, DOORS_LOWER_RV, DOORS_UPPER_RV, DOORS_UPPER_CV, DOORS_LOWER_CV, HOIST, SIDE and SIDE_RV. Connect the HELICOPTER block with the Object in both Change material to Search & Rescue and Change material to Commercial blocks. In the same manner connect the previously mentioned elements (connections marked in yellow).
lesson_05_screen_12
  1. Add two String blocks. Name the first one Helicopter RV material name, open it and enter HELICOPTER_REFLECTION_RV. Name the second String block Helicopter CV material name, open it and enter HELICOPTER_REFLECTION_CV. Connect the Helicopter RV material name block to the Material Name in first, second, fifth, sixth, eight and ninth Change material to Search & Rescue block. In the same manner connect the Helicopter CV material name block to Material Name in Change material to Commercial blocks (connections marked in yellow).
lesson_05_screen_13
  1. Add two String blocks. Name the first one Hoist RV material name, open it and enter HELICOPTER_HOIST_RV. Name the second block Hoist CV material name, open it and enter HELICOPTER_HOIST_CV. Connect the Hoist RV material name block to the Material Name in third, fourth and seventh Change material to Search & Rescue blocks. In the same manner connect the Hoist CV material name block to Material Name in Change material to Commercial blocks (connections marked in yellow).
lesson_05_screen_14
  1. Add WidgetCallback block, name it Com_Doors_toggled. Add Cast block, open it and in Convert From select Widget  [Widget], in Convert To select WidgetCheckBox  [WidgetCheckBox]. Add Get Property block, open it and in Type select WidgetCheckBox [Data/Items/Gui/Widgets], in Property select Checked  [Boolean]. Add Set Property block, open it and in Type select Node [Data/Items/World], in Property select Enabled  [Boolean].
lesson_05_screen_15
  1. Connect the Output from the Com_Doors_toggled block to Input of the Cast block. Connect the Succeeded in the Cast block to Input of the Get Property block. Connect the Succeeded in the Get Property block to the Input of the Set Property block.  Add Widget block and connect it to the Widget in the Com_Doors_toggled block and to Widget in Cast block.  Add WidgetCheckBox block and connect it to the WidgetCheckBox in Cast block and to WidgetCheckBox in Get Property block. Add Boolean block, name it isChecked?, open it and set it to False then connect it to the Checked in Get Property block and to Enabled in Set Property block. Go to the editor and from Nodes window drag an element called DOOR_CV_DUMMY on the Flowgraph window, connect it to the Node in the Set Property block.
lesson_05_screen_16
  1. Select the set of blocks that you have just created by draggin a box around them with your mouse. Copy and paste it four times, in each of the copied set replace the DOOR_CV_DUMMY with following elements: DOOR_RV_DUMMY, CAMERA, INTERIOR_RV and INTERIOR_CV. Remember to change the names of WidgetCallback blocks to: SR_Doors_toggled, SR_Camera_toggled, SR_Interior_toggled, Com_Interior_toggled.
lesson_05_screen_17
  1. The following set of blocks will be responsible for control over the volume slider and button. The user will be able to turn the sound level up or down or mute sound of the entire application.
    Add Find Widget block, connect its Input to Output of the Add Child block. Connect the UserInterface block to UserInterface in the Find Widget block. Add String block, open it and enter volume_slider, connect it to Name in the Find Widget block. Add Widget block and connect it to Widget in the Find Widget block. Add Cast block, open it and in Convert From enter Widget  [Widget], in Convert To enter WidgetSlider  [WidgetSlider]. Connect its Input to Succeeded in the Find Widget block. Connect the Widget block to Widget in the Cast block. Add WidgetSlider block, name it WidgetSlider - VolumeSlider and connect it to WidgetSlider in the Cast block.
lesson_05_screen_18
  1. Add Find Widget block, connect its Input to Output of the Add Child block. Connect the UserInterface block to UserInterface in the Find Widget block. Add String block, open it and enter mute_button, connect it to Name in the Find Widget block. Add Widget block and connect it to Widget in the Find Widget block. Add Cast block, open it and in Convert From enter Widget  [Widget], in Convert To enter WidgetIcon  [WidgetIcon]. Connect its Input to Succeeded in the Find Widget block. Connect the Widget block to Widget in the Cast block. Add WidgetIcon block, name it WidgetIcon - Mute Button and connect it to WidgetIcon in the Cast block.
lesson_05_screen_19
  1. Add WidgetCallback block, name it WidgetCallback volume changed. Add Get Property block, open it and in Type enter WidgetSlider [Data/Items/Gui/Widgets], in Property enter Value  [Integer]. Connect its Input to Output of the WidgetCallback volume changed block. Connect the WidgetIcon - VolumeSlider to WidgetSlider in the Get Property block. Add Integer block, open it and enter 100, name it Integer - slider value and connect it to Value in the Get Property block.
lesson_05_screen_20
  1. Add Compare Integer block, connect its Input to Succeeded in the Get Property block. Connect the Integer - slider value block to A in the Compare Integer block. Add Integer block, name it Zero and connect it to B in the Compare Integer block. Add If block, name it If - if changed to mute on, connect its Input to == in the Compare Integer block. Add If block, change its name to If - if changed to mute off and connect its Input to != in the Compare Integer block. Add Set Boolean block, connect its True to False in the If - if changed to mute on block. Connect the True in the If - if changed to mute off to False in the Set Boolean block.
lesson_05_screen_21
  1. Add Set Property block, open it and in Type enter WidgetIcon [Data/Items/Gui/Widgets], in Property enter Toggled  [Boolean].

test
  1. Connect the Output from the Set Boolean block to Input in the Set Property block. Add WidgetIcon block, name it WidgetIcon - Mute button and connect it to WidgetIcon in the Cast block and to WidgetIcon in the Set Property block. Add Boolean block, set it to False, name it shouldIconBeToggled?, connect it to Result in the Set Boolean block and to Toggled in the Set Property block.
lesson_05_screen_23
  1. Add Integer To Real block, connect its Input to True in the If - if changed to mute on block, to Succeeded in the Set Propety block and to False in the If - if changed to mute off block. Connect the Integer - slider value block to Value in the Integer To Real block. Add Real block, name it Real - volume value and connect it to Result in the Integer To Real block.
lesson_05_screen_24
  1. Add Divide Real block, connect its Input to Output of the Integer To Real block. Connect the Real - volume value to A and Result in the Divide Real block. Add Real block, name it Real - divider, open it and enter value 100. Connnect the Real - divider block to B in the Divide Real block.
test
  1. Add Set Propety block, open it and in Type enter Sound [Data/Items/Engine], in Property enter Volume  [Real].
test
  1. Connect the Output in the Divide Real block to Input of the Set Property block. Add Sound block and connect it to Sound in the Set Property block. Connect the Real - volume value block to Volume in the Set Property block.
lesson_05_screen_27
  1. Add WidgetCallback block, name it WidgetCallback sound mute toggle. Add Get Property block, open it and in Type enter WidgetIcon [Data/Items/Gui/Widgets], in Property enter Toggled  [Boolean].
test
  1. Connect the Output in the WidgetCallback sound mute toggle to Input of the Get Property block. Connect the WidgetIcon - Mute Button block to WidgetIcon in the Get Property block. Add Boolean block, name it isMute?, connect it to Toggled in the Get Property block, Condition in If - if changed to mute on and If - if changed to mute off blocks.
lesson_05_screen_29
  1. Add If block, connect its Input to Succeeded in the Get Property block. Connect the isMute? block to Condition in the If block.
test
  1. Add two Assign blocks, open them and in Type select Integer [Data].
test
  1. Connect the True in the If block to the first Assign block, connect False in the If block to the second Assign block. Connect the Integer - slider value to the first Integer in the first Assign block. Add Integer block, name it Backup slider value and connect it to the second Integer in the first Assign block. Connect the Backup slider value to the first Integer in the second Assign block.
lesson_05_screen_32
  1. Add Set Integer block, open it and change the name of Input0 to Sound Off.
test
  1. Connect the Output in the first Assign block to the Sound Off in the Set Integer block. Add Integer block, connect it to Result in the Set Integer block and to second Integer in the second Assign block.
lesson_05_screen_34
  1. Add Set Property block, open it and in Type enter WidgetSlider [Data/Items/Gui/Widgets], in Property enter Value  [Integer].
test
  1. Connect the Output in the Set Integer block to Input of the Set Property block. Connect the Output of the second Assign block to Input of the Set Property block. Connect the WidgetSlider - VolumeSlider block to WidgetSlider in the Set Property block. Connect the Integer block to Value in the Set Property block.
lesson_05_screen_36
  1. Right now you can observe how the menu works. Go to the editor, press Play and after pressing setup check if the configurator works properly. You should be able to switch between the Commercial and Search & Rescue version of the helicopter (by pressing on the helicopter icons), change the doors and interior and show/hide the infrared camera.
  2. Go back to the Flowgraph window to the master_tutorial.fg. We need to modify the already existing block structure. Disconnect some connections to the Tutorial_Menu block as shown in the image below.
test
  1. Add If block, connect its Input to the Output of the gui_pressed_help. Add Boolean block, set it to True name it isFirstClick? and connect it to the Condition of the If block. Add Set Boolean block and connect its Result to the isFirstClick? block. Connect the True in the If block to the False in Set Boolean block.
test
  1. Add Set Integer block, open it and change the Name of the Input0 to Step 1, in Value enter 1.
test
  1. Connect the Output from the Set Boolean block with the Step 1 in the Set Integer block. Connect the Output from the gui_pressed_help with ShowControls in the Tutorial_Menu block.
lesson_05_screen_21
  1. Add Compare Integer block. Connect the Output in the gui_pressed_configurator block with the Input in the Compare Integer block. Add Integer block, open it and enter 3, connect the block to the B in the Compare Integer block. Add another Integer block, change its name to ApplicationStepCounter, connect it to the A in the Compare Integer block and to Result in the Set Integer block.
lesson_05_screen_22
  1. Add Set Integer block, open it, change the Name from Input0 to Step 3, in Value enter 3.
test
  1.  Connect the < in the Compare Integer block with the Step 3 in the Set Integer block. Connect the Result in the Set Integer block with the ApplicationStepCounter block. Connect the Output in the gui_pressed_configurator block to the ShowConfigurator in the Tutorial_Menu block.
lesson_05_screen_24
  1. Add Switch block, open it and add three outputs: How to move, Turn lights ON and Config Unlock.
test
  1. Change the name of the Switch block to Switch - step info. Connect the Output from gui_pressed_task to the Input of Switch - step info block. Connect the Value in Switch - step info to the ApplicationStepCounter block. Connect the How to move in the Switch - step info block to the How to move Info in the Set String block. Connect the Config Unlock in the Switch - step info block to the Config Unlock in the Set String block.
lesson_05_screen_26
  1. Add Init block and connect its Output to the SetConfigButtonEnabled in the Tutorial_Menu block and to How to move Info in the Set String block.
test
  1. Add Container block, double press on it, press Create and save it under LightSwitch name then press OK. Change the name of the Container to LightSwitch. Open the LightSwitch block and inside add SignalInput block. Open the block and in Create new enter SetActive.
test
  1. Add two Set Boolean blocks. Connect the SetActive in the SignalInput block to the True in both Set Boolean blocks. Add Init block and connect its Output to the False in the first Set Boolean.
test
  1. Add Boolean block, name it isClickable?, set it to False and connect it to the Result of the second Set Boolean block.
test
  1. Add Set Property block, open it and in Type enter Node [Data/Items/World], in Property enter Enabled  [Boolean].
test
  1. Connect the Output from the first Set Boolean block to the Input of the Set Property block. Add Boolean block, set it to False, name it isActive? and connect it to the Enabled in the Set Property block and to Result in the first Set Boolean block. From the Nodes window in the editor drag the power_switch_box_selection_box element to the Flowgraph window and connect it to the Node in the Set Property block.
test
  1. Add WidgetCallback, name it Light_toggled. Add two containers ActionClick from the Embedded containers. Add two Integer blocks, open them and select APP_BUTTON_LEFT. Connect them to APP_BUTTON in ActionClick.fg blocks. Connect the power_switch_box_selection_box block to Object in the first ActionClick.fg block. From the Nodes window in the editor drag the power_switch element on the Flowgraph window and connect it to the Object in the second ActionClick.fg block.
test
  1. Add If block, and connect the Output from Light_toggled and two ActionClick.fg blocks to its Input. Connect the isClickable? block to Condition in the If block.
lesson_05_screen_34
  1. Add Latch.fg container from the Embedded containers. Connect the True in the If block to the Input of the Latch.fg block. Add Set Boolean block, connect the Output 1 in the Latch.fg block to True in the Set Boolean block. Connect the Output 2 in the Latch.fg block to False in the Set Boolean block. Add Init block and connect its Output to False in Set Boolean block.
test
  1. Add Set Property block, open it and in Type enter Node [Data/Items/World], in Property enter Enabled  [Boolean].
test
  1. Connect the Output in the Set Boolean block to the Input of the Set Property block. From the Nodes window in the editor drag the Hangar_lightning element on the Flowgraph window, connect it to the Node in the Set Property block. Add Boolean block, set it to True and connect it to Enabled in the Set Property block and to Result in the Set Boolean block.
test
  1. Add block Set Real, open it and change the name of the Input0 to Switch ON, in Value enter -45. Add one more input, name it Switch OFF, in Value enter 0.
test
  1. Connect the Output 1 in the Latch.fg block to the Switch ON in the Set Real block. Connect the Output 2 in the Latch.fg block to the Switch OFF in the Set Real block.
lesson_05_screen_39
  1. Add Set QuatByEulerAngles block. Connect the Output from the Set Real block to Input of Set QuatByEulerAngles block. Add Real block, open it and enter -45. Connect the Real block to Roll in Set QuatByEulerAngles and to Result in Set Real block. Add Quat block, connect it to the Quat in the Set QuatByEulerAngles block.
test
  1. Add Set Property block, open it and in Type enter Node [Data/Items/World], in Property enter Rotation  [Quat].
test
  1. Connect the Output of the Set QuatByEulerAngles block to the Input of the Set Property block. Connect the power_switch block to the Node in the Set Property block. Connect the Rotation in the Set Property block to the Quat block.
lesson_05_screen_42
  1. Add If block, connect the Succeeded in the Set Property block to the Input of the If block. Add SignalOutput block, open it and in Create new enter Switched. Connect the True in the If block to the Switched in the SignalInput block. Connect the False in the first Set Boolean block with the True in the last If block. Connect the isActive? block to the Condition in the last If block.
lesson_05_screen_43
  1. Go back to the master_tutorial.fg, connect the Turn lights ON in the Switch - step info block with the ShowLightIfno in the Tutorial_menu block and to Set Active in the LightSwitch block. Add Set Boolean block, connect its True with the Switched in the LightSwitch block. Connect the Result in the Set Boolean block with the isConfigEnabled? block.
lesson_05_screen_44
  1. Add Set Integer block, open it and change the name of the Input0 to Step 2, in value enter 2.
test
  1. Connect the Output of the Set Boolean block to the SetConfigButtonEnabled and to Step 2 in the Set Integer block. Connect the Output in the Set Integer block with the Input of Switch - step info block. Connect the Result in the Set Integer block with the ApplicationStepCounter block.
lesson_05_screen_46
  1. Verify if the menu works properly. Go to the editor press Play, the menu should open at start and display the following message : Press the question mark icon to display the next step. After pressing the help button press the task button, the menu should display a message concerning lights. You can turn them on by pressing the bulb icon on the menu or by approaching the light switch and pressing on it. Then press the configurator icon and check if you can customize the helicopter.
  2. The next lesson will consolidate your knowledge on fbx files, materials and Quazar3D editor in general.

 

  Previous lesson || Next Lesson