3. Виджеты

Лучший вариант для более полного понимания работы виджетов находится в Demo-версии самой библиотеки. Запустить ее можно при помощи ImGui::ShowDemoWindow();, если в CMakeLists.txt вы подключали исходники ${THIRD_PARTY_DIR}/imgui/imgui_demo.cpp. Далее, уже по названию виджетов в примерах можно найти реализацию любого элемента на экране и их взаимодействия.

Проект только с Demo-окном можно найти по ссылке. Результат выглядит следующим образом:

alt text

Начало любого виджета (окна внутри главного приложения) начинается с ImGui::Begin(); и должно заканчиваться ImGui::End();. Далее, для примеров виджетов эти конструкции будут проигнорированы для сокращения текста.

{
    ImGui::Begin("Hello, world!"); 

    ImGui::End();
}

Здесь будет просто пустое окно с текстом Hello World! в шапке.

alt text

Текстовое сообщение (Text)

Это окно с текстом + текстом с выводом занчения переменной:

{ 
    
    ImGui::Begin("Hello, world!"); 

    static int counter = 0;
    ImGui::Text("This is some useful text.");
    ImGui::Text("counter = %d", counter);
    ImGui::TextLinkOpenURL(" Текст с сылкой: https://github.com/epezent/implot");

    ImGui::End();
}

alt text

Кнопки (Button)

С кнопками можно помнить, что проверка нажатия на каждую кнопку должна осуществляться в инструкции if() {}:

{
    static int counter = 0;
    if (ImGui::Button("Button")){
        counter++;
        // можно что угодно добавить при нажатии на кнопку
    }                        
    ImGui::Text("counter = %d", counter);

    ImGui::Button("change me", ImVec2(71,19));
}

Изменение размера окна, позиция виджетов

Изменяем размер виджета\окна по координатам X = 686, Y = 416.

ImGui::SetNextWindowSize(ImVec2(686,416));
ImGui::Begin("Hello, world!");
ImGui::End();

Для того, чтобы изменить местоположнеие виджета применяем функцию SetCursorPos().

ImGui::SetCursorPos(ImVec2(109.5,54.5));
ImGui::Button("change me"); 

Цветовые схемы GUI

Глобально, за отображение интерфейса в конкретном контексте (ImGuiContext* GImGui) отвечает структура struct ImGuiStyle. Получить текущий стиль можно при помощи функции ImGuiStyle& ImGui::GetStyle() (в случае, если хотите поменять цветовую схему конкретного элемента окна).

Также, можно задать одну из стандартных цветовых схем интерфейса:

{
    ImGui::Begin("Color theme");

    static int style_idx = 0;

    if (ImGui::Button("Light"))
        style_idx = 1;
    if (ImGui::Button("Dark"))
        style_idx = 0;
    if (ImGui::Button("Classic"))
        style_idx = 2;

    switch (style_idx)
    {
        case 0: ImGui::StyleColorsDark(); break;
        case 1: ImGui::StyleColorsLight(); break;
        case 2: ImGui::StyleColorsClassic(); break;
    }

    ImGui::End();
}

alt text

Работа с устройствами I\O

Для работы с устройствами ввода вывода присутствует структура ImGuiIO. Включение различных устройств осуществляется при помощи флагов конфигурации:

ImGuiIO& io = ImGui::GetIO(); (void)io;
io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;     // Включить Keyboard Controls
io.ConfigFlags |= ImGuiConfigFlags_NavEnableGamepad;      // Включить Gamepad Controls
io.ConfigFlags |= ImGuiConfigFlags_DockingEnable;         // Включить Docking
io.ConfigFlags |= ImGuiConfigFlags_ViewportsEnable;       // Включить Multi-Viewport / Platform Windows. Позволяет работать "окнам" вне основного окна. 

После инициализации ImGuiIO может получить доступ к работе с устройствами:

Мышка

Получение текущей позиции мыши:

ImVec2 mouse = ImGui::GetMousePos();
ImGui::Text("Mouse position: x = %d, y = %d", mouse.x, mouse.y);

alt text