Example 2: AnotherWindow

IrrIMGUI Examples

Example 2 - Another Window

The second example shows how to create a second window with elements, that control the behaviour of the Irrlicht scene. The full source code can be found in the file examples/02.AnotherWindow/main.cpp. In this description we will not look further at the Irrlicht and IMGUI initialization, but we will concentrate on the new elements compared to the first example.

• Settings the initial position and size of Windows: When creating a new window, it will be drawn at the top left edge of the Irrlicht render screen. Furthermore a new window will have a size that is dependent on the content of this window. Nevertheless there are possibilities to overwrite the default position and size. For that use the functions ImGui::SetNextWindowPos(ImVec2 Position) and ImGui::SetNextWindowSize(ImVec2 Size). Call these functions directly before creating the new window with ImGui::Begin("New Window").
  
  However this will set the size and position of the window every time these functions are called from the main-loop. This means also, that the position and size is reset every frame, so you can not move and resize the windows anymore. To prevent such a behaviour you simply need to take care, that these size- and position-functions are performed just a single time in the first frame. Use for this a boolean that is only true in the first execution of the main-loop.

  // Irrlicht and IMGUI initialization...

  bool IsFirstLoop = true;

  while(pDevice->run())
  {
    pDriver->beginScene(true, true, irr::video::SColor(255,100,101,140));

    GUI.startGUI();

    if (IsFirstLoop)
    {
      ImGui::SetNextWindowPos(ImVec2(20.0f, 200.0f));
      ImGui::SetNextWindowSize(ImVec2(600.0f, 100.0f));
    }
    ImGui::Begin("Control Interface", NULL, ImGuiWindowFlags_ShowBorders);
    
    // create window content here ...

    ImGui::End();

    pSceneManager->drawAll();
    GUI.drawAll();

    pDriver->endScene();

    IsFirstLoop = false;
  }

• Align elements horizontally: Normally every new element in a window is rendered directly below the element before. To order elements in a horizontal line, you can call the function ImGui::SameLine(float XPosition, float XSpacing) directly bore adding a new element to tell IMGUI to draw this element in the same horizontal line like the element before.
  
  If the argument XPosition is 0, the X position of the new element follows automatically the previous element. With a value not equal to 0, you can specify a manual X position. With the argument XSpacing you can define a spacing between two elements in case the X position is calculated automatically.

    ImGui::Begin("Control Interface", NULL, ImGuiWindowFlags_ShowBorders);

    // first element ...

    ImGui::SameLine(0.0f, 10.0f);

    // second element at the same horizontal line like the first one...

    ImGui::End();

• Use groups for layout alignment: You can use element groups to align a set of elements horizontally with another set of elements. To create a group use the function ImGui::BeginGroup(); and use ImGui::EndGroup(); to stop the grouping.
  
  The following code will create two groups of elements. The elements inside the groups are aligned vertically, but the groups itself are aligned horizontally:

    ImGui::Begin("Control Interface", NULL, ImGuiWindowFlags_ShowBorders);
    ImGui::BeginGroup();

    // vertically aligned elements in group 1...

    ImGui::EndGroup();    

    // align group 1 and group 2 horizontally
    ImGui::SameLine(0.0f, 10.0f);
    ImGui::BeginGroup();

    // vertically aligned elements in group 2...

    ImGui::EndGroup();    
    ImGui::End();

• Radio Buttons: A set of radio buttons is a group of selectable items, where just one item can be selected at the same time. To create radio buttons in IMGUI you can use the function ImGui::RadioButton(char const * pLabel, int * pValueStorage, int ButtonValue).
  
  The argument pLabel is a constant label string, that is rendered next to the button. pValueStorage is a pointer to an integer variable where the value of the radio button group is stored to. The argument Value is the value that is stored to the integer variable, if this specific radio button is selected. To preselect a button of the group, just initialize the integer variable to the value of the button, that should be selected at the start of your program.
  
  You can simply create several groups of radio-buttons by using a different integer variable for every group.

    // Create an integer Variable named "RadioButtonValue" outside of the main-loop

    ImGui::Begin("Control Interface", NULL, ImGuiWindowFlags_ShowBorders);
    ImGui::BeginGroup();

    // vertically aligned radio buttons
    ImGui::RadioButton("Number 1", &RadioButtonValue, 1);
    ImGui::RadioButton("Number 2", &RadioButtonValue, 2);
    ImGui::RadioButton("Number 3", &RadioButtonValue, 3);

    // align group 1 and group 2 horizontally
    ImGui::SameLine(0.0f, 10.0f);
    ImGui::BeginGroup();

    // vertically aligned elements in group 2...

    ImGui::EndGroup();    
    ImGui::End();

• Slider elements: To input numerical values graphically you can use slider elements