Editor-pro-capabilities

PRO версия редактора XIOT-EDITOR предназначена для тех случаев, когда стандартной автоматической сборки интерфейса недостаточно. Если Lite-версия создаёт готовое пользовательское приложение на основе дерева устройств, то PRO — это полноценная среда разработки интерфейсов, где каждый элемент, блок, стиль и логика настраиваются вручную.

PRO-версия используется для создания дополнительных кнопок, технических страниц, отдельного приложения.

---

🔍 Отличия от Lite версии

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

PRO версия — это ручная разработка:

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

PRO-версия не заменяет Lite — она дополняет её. Пользователь продолжит получать обновления Lite-приложения, а созданные кастомные элементы и страницы останутся неизменными.

---

📄 Страницы и окна

В PRO доступны два основных типа интерфейсных контейнеров:

• Страницы — полноэкранные представления приложения.
• Окна — всплывающие или плавающие панели произвольного размера.

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

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

---

🧱 Элементы интерфейса (блоки, иконки, текст)

Каждый добавленный элемент по умолчанию имеет тип блок. Блоки могут содержать внутри себя другие элементы — это основа адаптивного интерфейса, аналогичная HTML-структуре:

- блок
 - вложенный блок  
  - иконка  
  - текст  
  - кнопка  
  - индикатор  

Тип блока можно изменить:

• SVG-иконка → выбор иконки из встроенной базы
• Текст → возможность задать свой текст

и др.

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

---

🎨 Стилизация элементов (CSS-уровень)

Все элементы поддерживают полноценные CSS-стили:

• размеры, отступы, выравнивание
• фон, цвета, тени
• радиус скругления
• позиционирование
• прозрачность
• анимации

Кроме того, доступны состояния стилей —0, 1, 2, … и all.

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

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

Сменой состояния можно управлять через визуальную логику.

---

🧩 Виджеты как самостоятельные элементы интерфейса

Любой элемент или группа элементов могут быть оформлены как виджет.

Виджет включает:

• внешний вид (CSS стили);
• вложенную структуру элементов;
• собственную логику;
• привязки к характеристикам устройств или тэгам.

Благодаря этому виджет — полноценный функциональный модуль:

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

Виджеты можно:

• копировать;
• перемещать;
• сохранять в файл;
• загружать в другой проект;
• передавать другим разработчикам.

---

⚙️ Визуальная логика элементов

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

События

• 👆 тач-события: касание, отпускание, клик, двойной клик, удержание
• 🔄 изменение характеристик устройств и сценариев
• 🧲 изменение физического тэга
• 🚀 запуск XIOT-PLC

Доступные действия

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

Это даёт возможность создавать сложное интерактивное поведение элементов интерфейса.

---

🛠 Зачем нужна PRO версия на практике

PRO позволяет реализовать то, что невозможно в автоматическом интерфейсе Lite:

• 🧑‍🔧 Технические панели — например, страница с параметрами котельной: датчики, сервоприводы, графики.
• 👷 Инженерные страницы для сервисных специалистов, скрытые от обычных пользователей.
• 🚪 Кастомные элементы управления — любые кнопки, виджеты, ползунки, панели.
• 🔍 Диагностика оборудования — отображение внутренних параметров, которых нет в Lite.
• 🎛 Расширение возможностей проекта без изменения Lite-интерфейса пользователя.
• 🔗 Интеграция уникальных механизмов под конкретные требования объекта.
• 🎨 Брендирование и особый дизайн, недоступный в автоматической версии.

Например:

• инженер создаёт виджет управления приточной вентиляцией;
• привязывает его к параметрам системы;
• размещает на скрытой странице или добавляет кнопку в Lite-версию;
• клиент получает привычный интерфейс, а инженер — полный функционал.

---

📐 Типы построения интерфейса: адаптивный и позиционный

PRO версия редактора XIOT-EDITOR позволяет использовать два подхода к построению интерфейса: адаптивный («резиновый») и позиционный. Эти подходы можно применять как по отдельности, так и совместно — в рамках одного проекта.

---

🔄 Адаптивный (резиновый) интерфейс

Адаптивный интерфейс строится на относительных единицах измерения:

• % — для размеров и расположения элементов относительно контейнера;
• em — для масштабируемых элементов и виджетов.

Такой подход позволяет создавать интерфейсы, которые:

• автоматически подстраиваются под любое разрешение экрана;
• корректно масштабируются при изменении масштаба приложения;
• одинаково отображаются на телефонах, планшетах и сенсорных панелях.

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

---

📌 Позиционный интерфейс (абсолютное позиционирование)

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

В этом случае:

• элементу задаётся CSS-свойство position: absolute;
• после этого элемент можно свободно перемещать мышью по рабочей области;
• положение элемента фиксируется относительно страницы.

Позиционный интерфейс удобен для:

• экранов с заранее известным разрешением;
• специализированных панелей;
• нестандартных схем отображения.

---

🔀 Совмещение подходов

В PRO версии можно совмещать оба метода в одном интерфейсе.

Рекомендуемая практика:

• виджеты создавать адаптивными —

 размеры задавать в em,  
 вложенные элементы — в % и em,  
 без использования абсолютного позиционирования;

• сам виджет размещать на странице с помощью position: absolute.

Таким образом:

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

Такой подход особенно удобен при создании:

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

---

✔ Рекомендации

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

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

---

🎯 Заключение

PRO версия редактора XIOT-EDITOR — это инструмент, который открывает полный контроль над интерфейсом управления умным домом. Позволяет:

• строить собственные элементы и виджеты;
• создавать страницы и окна любой сложности;
• управлять стилями и логикой на уровне профессионального UI-конструктора;
• расширять возможности Lite-версии и создавать уникальные решения под конкретный объект.

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