Перейти к содержанию

Editor-pro-capabilities: различия между версиями

Материал из XIOT Wiki
Нет описания правки
Строка 43: Строка 43:
Каждый добавленный элемент по умолчанию имеет тип '''блок'''.   
Каждый добавленный элемент по умолчанию имеет тип '''блок'''.   
Блоки могут содержать внутри себя другие элементы — это основа адаптивного интерфейса, аналогичная HTML-структуре:
Блоки могут содержать внутри себя другие элементы — это основа адаптивного интерфейса, аналогичная HTML-структуре:
 
- блок
* блок
   - вложенный блок   
   * вложенный блок   
  - иконка   
    * иконка   
  - текст   
    * текст   
  - кнопка   
    * кнопка   
  - индикатор   
    * индикатор   


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

Версия от 19:06, 3 декабря 2025


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 — это инструмент, который открывает полный контроль над интерфейсом управления умным домом. Она позволяет:

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

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