<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Пользовательский интерфейс - Helianthus</title>
</head>
<body>
<div class="navigation">
<p><a href="https://coolbug.org/users/bw/helianthus/ru.html">Helianthus</a></p>
<hr />
<p><a href="index.html">Helianthus: Документация</a></p>
<p><a href="install.html">Установка</a></p>
<p><a href="common.html">Запуск и общие функции</a></p>
<p><a href="input.html">Клавиатура и мышь</a></p>
<p><a href="drawing.html">Рисование</a></p>
<p><a href="font.html">Шрифты и текст</a></p>
<p><a href="animation.html">Текстуры и анимация</a></p>
<p><a href="framebuffer.html">Буфер кадра</a></p>
<p><a href="sprites.html">Спрайты</a></p>
<p><a href="groups.html">Группы спрайтов</a></p>
<p><a href="sound.html">Звук</a></p>
<p><a href="ui.html">Пользовательский интерфейс</a></p>
<hr />
<p><a href="functions.html">Все функции</a></p>
</div>
<div class="content">
<h1>Пользовательский интерфейс</h1>
<img src="image/figure6.png" />
<p>Библиотека Helianthus позволяет вам легко создавать элементы пользовательского интерфейса, такие как кнопки, поля для ввода текста, выпадающие списки и многое другое.</p>
<p>Для этого в проект включена библиотека <a href="https://immediate-mode-ui.github.io/Nuklear/doc/index.html" target="blank">Nuklear UI</a>. Данная библиотека предоставляет большой набор функции и нам здесь будет затруднительно описать их все. Поэтому отправляем вас на сайт Nukear чтобы ознакомиться со всей документацией из первых рук:</p>
<p><a href="https://immediate-mode-ui.github.io/Nuklear/doc/index.html" target="blank">https://immediate-mode-ui.github.io/Nuklear/doc/index.html</a></p>
<p>Здесь мы лишь дадим небольшой пример и опишем функции связывающие Nuklear с Helianthus. И вот пример простой программы:</p>
<pre>
#include <helianthus-nk.h> // обратите внимание на -nk.h
nk_heli hnk; // контекст Helianthus-Nuklear
struct nk_context *nk; // контекст непосредственно Nuklear
void init() {
nk_heli_init(&hnk, 12); // инициальзоровать Nuklear
nk = &hnk.context; // получить контекст
}
void draw() {
// Создаём окно Nuklear и заполняем его кнопками
if (nk_begin(nk, "My Window", nk_rect(10, 10, 200, 300),
NK_WINDOW_BORDER|NK_WINDOW_TITLE|NK_WINDOW_MOVABLE))
{
// если окно создано и его видно, то продолжаем:
// создаём новую строку в интерфейсе
nk_layout_row_dynamic(nk, 30, 1);
// Добавляем кнопку в строку и, одновременно с этим,
// проверяем нажата ли она.
// Если нажата то печатаем текст в консоль
if (nk_button_label(nk, "hello"))
printf("hello\n");
// следующая строка
nk_layout_row_dynamic(nk, 30, 1);
// и следующая кнопка
if (nk_button_label(nk, "world"))
printf("world\n");
}
// независимо от того было ли видно окно, нужно сообщить
// Nuklear, что c этим окном мы работу закончили:
nk_end(nk);
// После того как все окна созданы и заполнены
// нужно, чтобы Nuklear проанализировал нажатые
// клавиши и движения мыши и в итоге нарисовал
// сформированный нами интерфейс на экране.
// Это делается одной командой:
nk_heli_process(&hnk);
}
void deinit() {
nk_heli_deinit(&hnk); // завершить работу с Nuklear
}
int main() {
windowSetVariableFrameRate(); // для более плавной анимации
windowSetInit(&init);
windowSetDraw(&draw);
windowSetDeinit(&deinit);
windowRun();
return 0;
}
</pre>
<p>Обратите внимание, что для работы с Nuklear вам нужно подключить файл <i><helianthus-hk.h></i> вместо обычного <i><helianthus.h></i>. Это сделано для того, чтобы у вас была возможность не загромождать пространство имён Си обширным набором функций Nuklear, тогда когда они вам не нужны.</p>
<p>Для работы с Nuklear вам нужно создать переменную типа <i>nk_heli</i> и инициализировать её с помощью функции <a href="ui.html#nk_heli_init">nk_heli_init</a>. И, соответственно, после завершения работы с Nuklear нужно ей деинициализировать, вызвав функцию <a href="ui.html#nk_heli_deinit">nk_heli_deinit</a>. Если одновременно с этим вы заканчиваете и работу всей программы, то деинициализировать переменную не обязательно. Вот в нашем примере как раз деинициальзацию можно было и не делать — она там только для примера...</p>
<p>Структура <i>nk_heli</i> содержит в себе поле <i>context</i> — это указатель на контекст Nuklear, он нужен при обращении к любой фукнции Nuklear. Для удобства в нашем примере мы скопировали его в отдельную переменную.</p>
<p>Функция <i>nk_begin</i> открывает работу с новым окном Nuklear. После заполнения окна нужно обязательно вызвать <i>nk_end</i>. Нельзя оставлять <i>nk_begin</i> без пары (<i>nk_end</i>) — это может привести к ошибкам в работе программы (и обязательно приведёт). Подробнее об этих функциях вы можете почитать в документации на сайте <a href="https://immediate-mode-ui.github.io/Nuklear/doc/index.html" target="blank">Nuklear</a>.</p>
<p>Функции семейства <i>nk_layout_xxxxx</i> управляют размещением элементов в окне. Мы использовали один из самых простых методов разметки — <i>nk_layout_row_dynamic</i>. Он создаёт новую строку элементов в окне качестве аргументов принимает высоту строки и количество элементов в ней. Точнее количество элементов которое будет в строке — изначально строка создаётся незаполненной. Подробнее о разметке смотрите в оригинальной документации <a href="https://immediate-mode-ui.github.io/Nuklear/doc/index.html" target="blank">Nuklear</a>.</p>
<p>Функция <i>nk_button_label</i> создаёт кнопку и сразу же проверяет была ли она нажата. Это кажется странным, так как на этом этапе Nuklear толком не знает где должна находиться кнопка и к тому же ещё и не проанализированы движения мыши и нажатия клавиш. Дело в том, что Nuklear запоминает какие элементы интерфейса были созданы на предыдущем кадре, и, если порядок создания элементов не изменился, можно легко связать старые и новые элементы и вычислить, была ли кнопка нажата на предыдущем кадре. Так в общем Nuklear и работает. Если вам это не очень понятно — не волнуйтесь, Nuklear всё равно делает всю работу за вас, а для вас оставляет простой в использовании функционал. Подробнее про <i>nk_button_xxxxx</i> и другие элементы читайте в оригинальной документации <a href="https://immediate-mode-ui.github.io/Nuklear/doc/index.html" target="blank">Nuklear</a>.</p>
<p>После того как интерфейс сформирован и работа с окном завершена (<i>nk_end</i>) необходимо вызвать функцию <a href="ui.html#nk_heli_process">nk_heli_process</a>. Она проанализирует пользовательский ввод (мышь и клавиатуру) и затем нарисует интерфейс на экране. Как вы можете видеть функция делает сразу две операции: анализ ввода и рисование. Если вы хотите вы можете запустить их по отдельности используя функции <a href="ui.html#nk_heli_input">nk_heli_input</a> и <a href="ui.html#nk_heli_draw">nk_heli_draw</a>, соответсвенно.</p>
<p>Некоторые элементы Nuklear работают с изображениями. Чтобы создать изображение для Nuklear используйте функцию <a href="ui.html#nk_heli_image">nk_heli_image</a>.</p>
<p>Также Helianthus включает в себя ещё две полезные функции: <a href="ui.html#nk_color_from_heli">nk_color_from_heli</a> и <a href="ui.html#nk_color_to_heli">nk_color_to_heli</a>. Они преобразуют цвет из формата Helianthus в формат Nuklear и наоборот.</p>
<h2>Функции:</h2>
<h3 id="nk_heli_init">nk_bool nk_heli_init(nk_heli *n, double fontSize);</h3>
<p>Инициализирует контекст Helianthus-Nuklear. Функция возвращает TRUE если инициализация прошла успешно. После успешной инициализации указатель на чистый контекст Nuklear можно получить из поля <i>context</i> структуры <i>nk_heli</i> (n->context). См. также <a href="ui.html#nk_heli_deinit">nk_heli_deinit</a>, <a href="ui.html#nk_heli_process">nk_heli_process</a>.</p>
<h4>Параметры:</h4>
<p><i>n</i> — указатель на переменную типа <i>nk_heli</i>;<br />
<i>fontSize</i> — размер шрифта, который будет использоваться во всех элементах Nuklear.</p>
<h3 id="nk_heli_deinit">void nk_heli_deinit(nk_heli *n);</h3>
<p>Деинициализирует ранее инициализированный контекст Helianthus-Nuklear. После этой операции все внутренние структуры Nuklear будут очищены и их память освобождена. Контекст больше нельзя использовать (но можно повторно инициализировать, см. <a href="ui.html#nk_heli_init">nk_heli_init</a>).</p>
<h3 id="nk_heli_input">void nk_heli_input(nk_heli *n);</h3>
<p>Данная функция анализирует нажатия клавиш и движения мыши и выполняет соответствующие действия в интерфейсе. См. также <a href="ui.html#nk_heli_init">nk_heli_init</a>, <a href="ui.html#nk_heli_draw">nk_heli_draw</a> и <a href="ui.html#nk_heli_process">nk_heli_process</a>.</p>
<h3 id="nk_heli_draw">void nk_heli_draw(nk_heli *n);</h3>
<p>Рисует элементы интерфейса на экране. См. также <a href="ui.html#nk_heli_init">nk_heli_init</a>, <i>nk_heli_</i><i>input</i> и <a href="ui.html#nk_heli_process">nk_heli_process</a>.</p>
<h3 id="nk_heli_process">void nk_heli_process(nk_heli *n);</h3>
<p>Анализирует нажатия клавиш и движения мыши и рисует элементы интерфейса на экране. Данная функция вызывает последовательно <a href="ui.html#nk_heli_input">nk_heli_input</a> и <a href="ui.html#nk_heli_draw">nk_heli_draw</a>, ничего от себя не добавляя. То есть вместо <a href="ui.html#nk_heli_process">nk_heli_process</a> вы можете вызвать указанные функции по отдельности самостоятельно, если вам это будет удобнее. См. также <a href="ui.html#nk_heli_init">nk_heli_init</a>, <a href="ui.html#nk_heli_input">nk_heli_input</a> и <a href="ui.html#nk_heli_draw">nk_heli_draw</a>.</p>
<h3 id="nk_heli_image">struct nk_image nk_heli_image(Animation anim, int width, int height);</h3>
<p>Функция преобразует указатель на анимацию в формат понятные Nuklear. Полученную в результате структуру можно свободно копировать в другие переменные (того же типа. естественно) и передавать в Nuklear там где требуется изображение.</p>
<p>Как либо удалять или деинициализировать структуру после завершения работы с ней не требуется. Однако нельзя удалять изначальную анимацию до тех пор пока она привязана к элементам Nuklear.</p>
<p>Функция принимает в качестве аргументов размеры изображения. Эти параметры указывают в каком размере следует рисовать картинку Nuklear. Они могут не совпадать с оригинальными размерами картинки, в этом случае картинка будет просто смасштабирована при рисовании до указанных здесь размеров.</p>
<p>См. также <a href="ui.html#nk_heli_init">nk_heli_init</a> и <a href="animation.html#createAnimation">createAnimation</a>.</p>
<h4>Параметры:</h4>
<p><i>anim</i> — указатель на анимацию;<br />
<i>width</i> — ширина изображения в пикселях;<br />
<i>height</i> — высота изображения в пикселях.</p>
<h3 id="nk_color_to_heli">unsigned int nk_color_to_heli(struct nk_color c);</h3>
<p>Преобразует цвет из формата Nuklear в формат Helianthus. См. также <a href="ui.html#nk_heli_init">nk_heli_init</a> и <a href="ui.html#nk_color_from_heli">nk_color_from_heli</a>.</p>
<h3 id="nk_color_from_heli">struct nk_color nk_color_from_heli(unsigned int c);</h3>
<p>Преобразует цвет из формата Helianthus в формат Nuklear. См. также <a href="ui.html#nk_heli_init">nk_heli_init</a> и <a href="ui.html#nk_color_to_heli">nk_color_to_heli</a>.</p>
</div>
</body>
</html>