PRO версия редактора XIOT‑EDITOR предоставляет полный набор инструментов для ручного создания адаптивных интерфейсов. Ниже приведён обзор всех основных областей и возможностей редактора.

📁 Левое меню: Страницы, Окна, Структура

Страницы

Раздел предназначен для управления страницами приложения.

Доступные функции:

создание новой страницы;
удаление страницы;
клонирование;
сохранение страницы в файл (формат .xelem);
сортировка страниц — удерживайте левую кнопку мыши на имени страницы и перетяните.

При сохранении страница записывается в файл с названием, совпадающим с её именем.

При клике правой кнопкой мыши в рабочей области можно загрузить страницу, окно или элемент из файла — так можно переносить элементы между проектами.

Окна

Окна — независимые элементы интерфейса, которые отображаются поверх страниц.

Особенности:

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

Структура

Показывает вложенность элементов внутри текущей страницы или окна.

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

переход внутрь элемента двойным кликом;
выбор элементов для редактирования;
выход из элемента кликом по его имени;
удаление и копирование выбранных узлов.

🖥 Центральная рабочая область

Центральная зона отображает текущее приложение:

выбранную страницу;
вложенные элементы;
открытые окна поверх страницы.

Вся страница занимает рабочую область целиком.

Окна располагаются поверх и не ограничены размерами страницы.

Правый клик в рабочей области вызывает меню:

вставить новый блок;
вставить скопированный блок;
вставить из базы;
загрузить из файла.

При добавлении блок появляется именно в том месте структуры, где выполняется действие: внутри страницы, окна или другого блока.

🧱 Элементы и их типы

Каждый добавленный элемент по умолчанию имеет тип Блок.

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

Меню по правому клику на элементе позволяет:

копировать;
клонировать;
удалить;
сохранить в файл.

Тип элемента можно изменить в правой панели.

Тип определяет набор дополнительных свойств (SVG-иконка, текст, поле ввода, список, график, таблица, цветовой выбор и др.).

🎨 Стили элементов

Каждый элемент может иметь собственный набор CSS-стилей.

Доступно несколько хранилищ стилей: all, 0, 1, 2 и т.д.

Это позволяет:

задать разные состояния отображения;
менять визуальный стиль через логику (например, включён/выключен, ошибка, активность);
адаптировать элементы под разные устройства в одном проекте.

Полный набор CSS соответствует стандарту веб‑разработки — размеры, тени, фон, шрифты, позиционирование, анимации и др.

🧭 Навигация внутри блоков

Двойной клик по блоку — вход внутрь.

Внутри блока можно добавлять элементы правой кнопкой мыши.

Как ориентироваться:

зелёная рамка — активный режим редактирования вложенного элемента;
двойной клик в «Структуре» — переход внутрь;
клик по имени элемента сверху — выход из него;
клик вне элемента в рабочей области — выход на уровень выше.

⚙️ Логика элементов

Каждому элементу можно назначить собственную логику.

Для этого используется визуальный редактор действий.

Привязка характеристик и тэгов

Вкладка Логика → раздел характеристики устройств или тэги.

Процесс:

выбрать устройство из дерева помещений;
выбрать характеристику или тэг;
задать имя — оно появится в визуальном редакторе логики.

Типы событий

События в левом наборе:

тач‑события: касание, удержание, отпускание, клик, двойной клик, свайпы, drag‑события;
изменение характеристик;
изменение тегов;
события старта (приложение, сервер).

Верхний набор действий

таймеры;
математические функции;
преобразования значений;
условия;
работа с переменными.

Правый набор действий

открыть страницу;
открыть окно;
записать стиль;
изменить текст;
записать характеристику;
записать физический тэг;
анимации;
системные действия.

Важное отличие типов

Синие элементы — выполняются в приложении.
Красные элементы — выполняются на контроллере XIOT‑PLC.

Это позволяет:

запускать автономную логику на контроллере;
обрабатывать события, даже если приложение закрыто;
использовать приложение лишь как интерфейс запуска действий.

👆 Пример: тач‑событие

1. Добавляем событие Клик по элементу.

2. Добавляем действие Открыть страницу.

3. Выбираем нужную страницу.

4. Закрываем редактор логики.

Проверка:

нажимаем F2 (или fn+F2) для выхода из режима редактирования;
приложение начинает работать в реальном режиме;
если логика использует контроллер, нажимаем кнопку Загрузить конфигурацию.

🖼 Адаптивность интерфейса

В верхнем меню можно:

менять устройство отображения (телефон, планшет, панель);
менять масштаб интерфейса (это меняет font-size всего приложения).

Важно:

при изменении масштаба меняется font-size, поэтому элементы должны проектироваться в процентах и em — тогда интерфейс будет всегда адаптивным.

✔ Итог

PRO версия XIOT‑EDITOR — это полноценная среда разработки интерфейсов:

вложенная структура, CSS‑стили, логика элементов, работа с тэгами и характеристиками, страницы и окна, переносимость элементов между проектами и адаптивность под любые устройства.

Обзор инструментов и меню PRO версии редактора