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. Create them with the function ImGui::SliderFloat(char const * pLabel, float *pValue, float Min, float Max). The argument pLabel specifies the string that is rendered next to the Slider, pValue is a pointer to float variable where the value is stored and Min and Max are the minimum and maximum slider positions.

    // Create the following variables outside of the main-loop:
    //  int RadioButtonValue = 1;
    //  float SliderValue1 = 0.0f;
    //  float SliderValue2 = 0.5f;

    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();

    ImGui::SliderFloat("Value 1", &SliderValue1, 0.0f, 10.0f);
    ImGui::SliderFloat("Value 2", &SliderValue2, 0.1f, 0.9f);

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

• Text input: To create a text input field use the function ImGui::InputText(char const *pLabel, char * pCharArray, int ArraySize, int Flags). The argument pLabel specifies the text next to the input element. The argument pCharArray is a pointer to a character array, where IMGUI will store the text from the input field. With ArraySize you have to specify the size of that array, to prevent IMGUI from writing characters out of the array boundary. With the optional argument Flags you can specify additional option for the input field.
  
  In the next example we will add a text input field to your window. We use here the Flag ImGuiInputTextFlags_EnterReturnsTrue to receive true as return value from the ImGui::InputText(...) function when the user presses Return/Enter while he is editing the text inside the field.
  
  Furthermore we add a Button "Send" next to the input field. If the button is pressed or the user finalizes the text input by pressing Return/Enter inside the text field, the text from this field is printed at the console.

    // Create the following variables outside of the main-loop:
    //  int RadioButtonValue = 1;
    //  float SliderValue1 = 0.0f;
    //  float SliderValue2 = 0.5f;
    //  char  Text[256] = "Enter something here!";

    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();

    ImGui::SliderFloat("Value 1", &SliderValue1, 0.0f, 10.0f);
    ImGui::SliderFloat("Value 2", &SliderValue2, 0.1f, 0.9f);

    // add the text input field with button
    bool const IsReturnPressed = ImGui::InputText("Input", Text, 256, ImGuiInputTextFlags_EnterReturnsTrue);
    ImGui::SameLine(0.0f, 10.0f);
    if (IsReturnPressed || ImGui::Button("Send", ImVec2(40, 20)))
    {
      std::cout << "Input Text: " << Text << "\n";
      // reset text field
      Text[0] = '\0';
    }    

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

Please look at the IMGUI project side to learn more about the the possibilities you have with IMGUI.