Editor-pro-tools-and-menus

Режим Pro в XIOT-EDITOR содержит инструменты для ручного создания дополнительных страниц, окон и элементов интерфейса. Перед началом работы прочитайте Lite и Pro версии редактора и Назначение и возможности Pro версии редактора.

---

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

Страницы

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

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

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

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

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

.xelem — файл элемента, а не всего проекта.

Команда сохранения в .xelem экспортирует выбранный элемент и не выполняет Сохранить проект, не создаёт версию проекта и не загружает конфигурацию на XIOT-PLC. Во время вёрстки в Pro периодически используйте Сохранить проект как самостоятельную контрольную точку. Отдельная команда Сохранить проект создаёт локальную версию и не изменяет конфигурацию XIOT-PLC. Чтобы применить конфигурацию на объекте, нажмите Загрузить конфигурацию на контроллер: эта команда сначала сохраняет проект локально и после успешной записи отправляет сохранённую конфигурацию на XIOT-PLC. Облачное сохранение и публикацию приложения проверяют отдельно: успешная загрузка на PLC их не подтверждает.

Окна

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

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

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

Структура

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В редакторе доступны основные настройки отображения: размеры, отступы, фон, шрифты, позиционирование, тени, прозрачность и анимации.

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

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

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

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

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

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

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

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

Привязка характеристик и физических адресов

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

Процесс:

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

Типы событий

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

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

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

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

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

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

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

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

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

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

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

Проверка:

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

---

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

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

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

Важно:

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

Проверяйте результат на всех целевых размерах экрана. Подробные рекомендации: Структура элементов и адаптивный интерфейс.

✔ Итог

Режим Pro дополняет автоматически сформированный интерфейс Lite:

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

Клавиша F2 переключает просмотр и редактирование, а не режимы Lite и Pro. Порядок входа в редактор: Доступ к XIOT-EDITOR.