Просмотр кода страницы Editor-pro-tools-and-menus

__NOTOC__

= 🛠 Обзор инструментов и меню PRO версии XIOT‑EDITOR =

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

----

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

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

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

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

---

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

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

---

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

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

----

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

Центральная зона отображает текущее приложение:
* выбранную страницу;
* вложенные элементы;
* открытые окна поверх страницы.

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

Правый клик в рабочей области вызывает меню:
* вставить новый блок;
* вставить скопированный блок;
* вставить из базы;
* загрузить из файла.

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

----

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

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

Меню по правому клику на элементе позволяет:
* копировать;
* клонировать;
* удалить;
* сохранить в файл.

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

---

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

Каждый элемент может иметь собственный набор CSS-стилей.  
Доступно несколько хранилищ стилей: *all*, *0*, *1*, *2* и т.д.

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

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

----

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

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

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

----

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

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

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

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

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

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

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

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

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

----

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

1. Добавляем событие '''Клик''' по элементу.  
2. Добавляем действие '''Открыть страницу'''.  
3. Выбираем нужную страницу.  
4. Закрываем редактор логики.  

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

----

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

В верхнем меню можно:
* менять устройство отображения (телефон, планшет, панель);
* менять масштаб интерфейса (задаётся параметром font-size).

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

----

= ✔ Итог =
PRO версия XIOT‑EDITOR — это полноценная среда разработки интерфейсов:  
вложенная структура, CSS‑стили, логика элементов, работа с тэгами и характеристиками, страницы и окна, переносимость элементов между проектами и адаптивность под любые устройства.