Просмотр кода страницы Назначение и возможности Pro версии редактора

__NOTOC__


'''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 остаются неизменными и служат как профессиональный инструмент инженера.