📘 X11 GUI Library

Современная легковесная GUI библиотека для C++ с поддержкой X11, оптимизированная для производительности через систему частичной перерисовки и предоставляющая профессиональные инструменты отладки уровня Android Studio.

💡 Версия 2.0 - добавлены: Dirty Rectangles, Android-style отладка, двойная буферизация, маркеры кликов, визуализация границ виджетов.

✨ Возможности

⚡

Dirty Rectangles

Перерисовка только изменённых областей. Ускорение в 5-50 раз.

🎨

Двойная буферизация

Никакого мерцания благодаря backbuffer через X11 Pixmap.

🔍

Android Debug

Визуализация dirty rects, границ виджетов, маркеры кликов.

📡

EventBus

Слабое связывание через глобальную шину событий.

🎭

Анимации

Плавные dropdown и progress bar с ease-функциями.

📦

Иерархия

TreeView, ScrollView, вложенные виджеты.

🚀 Быстрый старт

main.cpp

#include "gui.h"

int main() {
    gui::window win("My App");
    
    win.addPAGE("main");
    win.configur_page("main", [](gui::page& p) {
        gui::WidgetData btn;
        btn.id = "start_btn";
        btn.text = "Start";
        btn.x = 50; btn.y = 50;
        btn.width = 150; btn.height = 40;
        btn.bg_color = 0x2563EB;
        p.Button(btn);
    }, true);

    // Включить все режимы отладки
    win.debug().show_debug_overlay = true;
    win.debug().show_dirty_rects = true;
    win.debug().log_to_console = true;

    gui::EventBus::get().on("button.click", [](const gui::EventData& e) {
        std::cout << "Clicked: " << e.source_id << "\n";
    });

    while (true) {
        win.update();
    }
    return 0;
}

⚡ Dirty Rectangles NEW

Система частичной перерисовки DirtyRegion отслеживает только изменённые области экрана. Когда виджет меняет состояние, он помечает свою область как "грязную", и библиотека перерисовывает только эти области.

Как это работает

Виджет вызывает mark_dirty() при изменении
Область добавляется в DirtyRegion
При window::update() перерисовываются только dirty-области
XCopyArea копирует только нужные регионы из backbuffer

📊 Результат: Для интерфейса с 100 виджетами, где меняется 1 элемент, CPU нагрузка снижается в 50+ раз.

Автоматическое отслеживание

Библиотека автоматически помечает как dirty:

Dropdown - во время анимации открытия/закрытия
Progressbar - при изменении значения или в indeterminate-режиме
Slider - во время drag
Input - при вводе текста
Expose events - при восстановлении окна из-под другого
Resize - весь экран при изменении размера окна

🎨 Двойная буферизация

Вся отрисовка происходит в off-screen Pixmap (backbuffer), затем нужные области копируются в окно через XCopyArea. Это полностью убирает мерцание при анимациях.

Как работает backbuffer

// 1. Создаём backbuffer при инициализации
backbuffer = XCreatePixmap(dpy, win, width, height, depth);

// 2. Вся отрисовка идёт в backbuffer
XFillRectangle(dpy, backbuffer, gc, ...);
XDrawString(dpy, backbuffer, gc, ...);

// 3. Копируем только dirty-регионы в окно
for (auto& rect : dirty_rects) {
    XCopyArea(dpy, backbuffer, window, gc,
              rect.x, rect.y, rect.width, rect.height,
              rect.x, rect.y);
}

⌨️ Горячие клавиши отладки NEW

Во время работы приложения используйте F-клавиши для переключения режимов отладки:

Toggle Debug Overlay - FPS, координаты мыши, лог событий

Toggle Dirty Rectangles - мигание изменённых областей (Android-style)

Toggle Click Markers - красные крестики в местах клика

Toggle Widget Bounds - розовые границы всех виджетов

Toggle Console Logging - вывод событий в stdout

💡 Совет: Включите F2 при разработке - вы сразу увидите, какие области перерисовываются и сможете оптимизировать UI.

📊 Debug Overlay

При нажатии F1 в правом верхнем углу появляется панель с информацией в реальном времени:

Показатель	Описание
`FPS`	Текущий FPS (обновляется каждые 0.5 сек)
`Widgets`	Общее количество виджетов на всех страницах
`Partial updates`	Счётчик частичных обновлений (показывает эффективность dirty rects)
`Mouse`	Текущие координаты мыши
`Event Log`	Последние 5 событий с полной информацией

🔧 API отладки

Программное управление

gui::window win("App");

// Прямой доступ к настройкам отладки
win.debug().show_debug_overlay = true;
win.debug().show_dirty_rects = true;
win.debug().show_click_markers = true;
win.debug().show_widget_bounds = true;
win.debug().log_to_console = true;

// Увеличить размер лога
win.debug().max_log_size = 30;

// Ручное управление dirty region
win.mark_dirty(100, 100, 200, 50);  // пометить область
win.mark_all_dirty();                // пометить весь экран

// Чтение состояния отладки
std::cout << "FPS: " << win.debug().fps << "\n";
std::cout << "Mouse: " << win.debug().mouse_x 
          << "," << win.debug().mouse_y << "\n";

Структура DebugInfo

struct DebugInfo {
    int fps;                    // текущий FPS
    int widget_count;           // количество виджетов
    int partial_updates;        // счётчик dirty updates
    int mouse_x, mouse_y;       // координаты мыши
    
    bool show_debug_overlay;    // F1
    bool show_dirty_rects;      // F2
    bool show_click_markers;    // F3
    bool show_widget_bounds;    // F4
    bool log_to_console;        // F5
    
    std::deque<std::string> log;  // лог событий
    size_t max_log_size;          // макс размер лога
};

📡 EventBus

Глобальная шина событий для слабой связи между компонентами. Поддерживает глобальное логирование всех событий.

Работа с EventBus

// Подписка
int token = gui::EventBus::get().on("button.click", [](const gui::EventData& e) {
    std::cout << "Button: " << e.source_id << "\n";
});

// Отправка
gui::EventBus::get().emit("custom.event", {
    "widget_id",     // source_id
    "text value",    // text
    0.5f,            // value
    3,               // index
    true             // flag
});

// Отписка
gui::EventBus::get().off(token);

Встроенные события

Событие	Когда возникает	Данные
`button.click`	Нажатие кнопки	source_id, text
`checkbox.change`	Изменение чекбокса	source_id, text, flag
`radio.change`	Выбор радио-кнопки	source_id, text, flag
`slider.change`	Движение слайдера	source_id, value (0-1)
`list.select`	Выбор в списке	source_id, text, index
`dropdown.select`	Выбор в dropdown	source_id, text, index
`tree.toggle`	Раскрытие узла	source_id, text, flag
`input.submit`	Enter в Input	source_id, text
`page.open`	Открытие страницы	source_id (name)

🎨 RawPicture

Класс для программного рендеринга графики. Поддерживает 8/16/24/32 бита, загрузку BMP и PPM, и все базовые примитивы.

Пример использования

auto pic = std::make_shared<gui::RawPicture>(200, 200);

pic->clear(0x1A1A1A);
pic->fillCircle(100, 100, 50, 0xFF0000);
pic->drawText(display, 80, 95, "Hello", 0xFFFFFF);

gui::WidgetData w;
w.id = "image";
w.x = 50; w.y = 150;
w.width = 200; w.height = 200;
w.picture = pic;
page.RawPictureWidget(w);

Доступные примитивы

Метод	Описание
`clear(color)`	Очистка цветом
`drawLine(x0,y0,x1,y1,c)`	Линия (алгоритм Брезенхема)
`drawRect/fillRect(...)`	Прямоугольник
`drawCircle/fillCircle(...)`	Окружность/круг
`drawTriangle/fillTriangle(...)`	Треугольник
`drawPolygon/fillPolygon(...)`	Произвольный полигон
`drawText(...)`	Текст (X11 шрифт с масштабированием)
`load(path)`	Загрузка BMP или PPM
`blit(src,dx,dy)`	Копирование из другого RawPicture

🧩 Виджеты

Все виджеты создаются через фабричные методы класса combat с передачей структуры WidgetData.

Метод	Тип	Описание
`Button(d)`	BUTTON	Кнопка
`Label(d)`	LABEL	Текстовая метка
`Input(d)`	INPUT	Поле ввода
`Checkbox(d)`	CHECKBOX	Флажок
`Radiobutton(d)`	RADIO	Радио-кнопка
`Slider(d)`	SLIDER	Ползунок 0-1
`Progressbar(d)`	PROGRESS	Прогресс-бар
`Listbox(d)`	LISTBOX	Список
`Dropdown(d)`	DROPDOWN	Выпадающий список
`TreeView(d)`	TREE_VIEW	Дерево
`TreeNode(d)`	TREE	Узел дерева
`ScrollView(d)`	SCROLL	Контейнер с прокруткой
`RawPictureWidget(d)`	RAW_PIC	Изображение
`SpriteButton(d)`	SPRITE_BTN	Кнопка со спрайтом

📚 API: gui::window

window(std::string title)

Конструктор. Создаёт X11 окно 1200x600, инициализирует backbuffer, настраивает глобальный логгер EventBus.

void update()

Главный метод цикла. Обрабатывает X11 события, обновляет анимации, перерисовывает dirty regions, обновляет debug overlay. Должен вызываться постоянно.

void addPAGE(name) / configur_page(...)

Создание и настройка страниц с виджетами через callback.

void openPAGE(name)

Переключение активной страницы. Помечает весь экран как dirty.

DebugInfo& debug() NEW

Доступ к отладочной информации: FPS, координаты, режимы, лог событий.

void mark_dirty(x,y,w,h) / mark_all_dirty() NEW

Ручное управление dirty region для принудительной перерисовки.

📚 API: gui::page

Наследуется от combat, предоставляет все фабричные методы для создания виджетов. Имеет поля width, height, active.

📚 API: gui::combat

Фабричные методы

14 методов для создания виджетов: Button, Label, Input, Checkbox, Radiobutton, Slider, Progressbar, Listbox, Dropdown, TreeView, TreeNode, ScrollView, RawPictureWidget, SpriteButton.

Widget* find(const std::string& id)

Рекурсивный поиск виджета по ID в иерархии.

void visit(fn)

Обход всех виджетов с применением лямбда-функции.

int count_widgets() NEW

Рекурсивный подсчёт всех виджетов в иерархии.

📚 API: gui::Widget

void setValue(float v) / getValue()

Установка целевого значения с плавной анимацией перехода.

void mark_dirty(dirty, ox, oy) NEW

Помечает область виджета как dirty для частичной перерисовки.

Автоматическая оптимизация

При изменении состояния виджет сам помечает свою область. Для составных виджетов (dropdown с popup) помечаются все связанные области.