|
|
| (не показано 5 промежуточных версий этого же участника) |
| Строка 1: |
Строка 1: |
| __NOTOC__
| | {{DISPLAYTITLE:Назначение и возможности Pro версии редактора}} |
| | Режим '''Pro''' предназначен для случаев, когда к стандартному интерфейсу Lite нужно добавить страницы, окна или элементы с ручной компоновкой. |
|
| |
|
| | '''Lite и Pro — два режима одного XIOT-EDITOR''' и одного проекта. Pro дополняет Lite, а не является отдельным приложением. '''Переключение режима не создаёт второй проект'''. |
|
| |
|
| '''PRO версия редактора XIOT-EDITOR''' предназначена для тех случаев, когда стандартной автоматической сборки интерфейса недостаточно.
| | Краткое сравнение режимов: [[Editor-lite-and-pro|Lite и Pro версии редактора]]. |
| Если Lite-версия создаёт готовое пользовательское приложение на основе дерева устройств, то PRO — это полноценная среда разработки интерфейсов, где каждый элемент, блок, стиль и логика настраиваются вручную.
| |
|
| |
|
| PRO-версия используется для создания дополнительных кнопок, технических страниц, отдельного приложения.
| | == Когда нужен Pro == |
|
| |
|
| ----
| | Используйте Pro, если проекту требуется: |
|
| |
|
| == 🔍 Отличия от Lite версии ==
| | * техническая или диспетчерская страница; |
| | * специализированный экран для настенной панели; |
| | * дополнительное окно управления; |
| | * ручная компоновка элементов; |
| | * индивидуальное оформление интерфейса. |
|
| |
|
| '''Lite версия''' — это автоматический конфигуратор.
| | Если стандартного интерфейса, автоматически сформированного в Lite по структуре проекта, достаточно, создавать страницу Pro необязательно. |
| Интерфейс собирается сам по созданной структуре: дом → этажи → комнаты → устройства → сценарии. Пользователь сразу получает готовое приложение.
| |
|
| |
|
| '''PRO версия''' — это ручная разработка:
| | == Что создаётся в Pro == |
| * каждый элемент создаётся вручную;
| |
| * каждый виджет строится из блоков;
| |
| * каждая кнопка, иконка, текст, индикатор настраиваются индивидуально;
| |
| * логика поведения элементов задаётся визуальным редактором;
| |
| * можно создавать собственные страницы, окна и виджеты, которые не ограничены стандартной структурой.
| |
|
| |
|
| PRO-версия не заменяет Lite — она дополняет её.
| | Интегратор может вручную создавать: |
| Пользователь продолжит получать обновления Lite-приложения, а созданные кастомные элементы и страницы останутся неизменными.
| |
|
| |
|
| ----
| | * '''страницы''' — отдельные полноэкранные представления; |
| | * '''окна''' — панели, которые открываются поверх страницы; |
| | * '''элементы и виджеты''' — блоки интерфейса с настроенным внешним видом; |
| | * '''визуальную логику элементов''' — реакции на действия пользователя и изменения данных проекта. |
|
| |
|
| == 📄 Страницы и окна ==
| | Элементы можно связывать с характеристиками устройств и адресами состояния и управления, чтобы отображать значения или отправлять команды. |
| В PRO доступны два основных типа интерфейсных контейнеров:
| |
|
| |
|
| * '''Страницы''' — полноэкранные представления приложения.
| | == Совместная работа с Lite == |
| * '''Окна''' — всплывающие или плавающие панели произвольного размера.
| |
| - могут появляться поверх текущей страницы;
| |
| - поддерживают анимации появления/исчезновения;
| |
| - подходят для создания быстрых панелей управления или диаграмм.
| |
|
| |
|
| На любую страницу или окно можно добавлять элементы и компоненты, формируя структуру интерфейса вручную.
| | Обычный порядок работы: |
|
| |
|
| ----
| | # В Lite создайте структуру проекта и проверьте стандартный интерфейс. |
| | # Определите, каких специализированных экранов или элементов не хватает. |
| | # Переключитесь в Pro и создайте только необходимые дополнительные страницы, окна и элементы. |
| | # Проверьте результат в режиме просмотра и на целевых устройствах. |
|
| |
|
| == 🧱 Элементы интерфейса (блоки, иконки, текст) ==
| | '''Клавиша F2 переключает просмотр и редактирование, а не режимы Lite и Pro'''. Переключение между Lite и Pro выполняется отдельной кнопкой '''LITE / PRO'''. |
|
| |
|
| Каждый добавленный элемент по умолчанию имеет тип '''блок'''.
| | == Повторное использование элементов == |
| Блоки могут содержать внутри себя другие элементы — это основа адаптивного интерфейса, аналогичная HTML-структуре:
| |
| - блок
| |
| - вложенный блок
| |
| - иконка
| |
| - текст
| |
| - кнопка
| |
| - индикатор
| |
|
| |
|
| Тип блока можно изменить:
| | Выбранную страницу, окно или элемент можно сохранить в формате '''.xelem''', а затем загрузить для повторного использования. '''.xelem — файл элемента, а не всего проекта''': этот экспорт не выполняет '''Сохранить проект''', не создаёт версию проекта и не загружает конфигурацию на XIOT-PLC. |
|
| |
|
| * '''SVG-иконка''' → выбор иконки из встроенной базы
| | Во время вёрстки в Pro используйте '''Сохранить проект''' как самостоятельную контрольную точку. Чтобы применить конфигурацию на объекте, нажмите '''Загрузить конфигурацию на контроллер''': команда сначала сохраняет проект локально и после успешной записи отправляет сохранённую конфигурацию на XIOT-PLC. Облачное сохранение и публикацию приложения проверяют отдельно: успешная загрузка на PLC их не подтверждает. Подробнее: [[Project-backup|Сохранение резервной копии проекта]]. |
| * '''Текст''' → возможность задать свой текст
| |
| и др. | |
|
| |
|
| Каждый элемент имеет собственное меню настроек, которое зависит от выбранного типа.
| | == Следующие материалы == |
|
| |
|
| ----
| | * [[Editor-pro-tools-and-menus|Обзор инструментов и меню PRO версии редактора]] — расположение рабочих областей и основные действия. |
| | | * [[Ui-element-structure-and-responsive-layout|Структура элементов и адаптивный интерфейс]] — вложенность, размеры и проверка компоновки. |
| == 🎨 Стилизация элементов (CSS-уровень) ==
| | * [[Xiot-editor-access|Доступ к XIOT-EDITOR]] — вход, браузеры и переключение режимов. |
| | |
| Все элементы поддерживают полноценные 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 остаются неизменными и служат как профессиональный инструмент инженера.
| |
Режим Pro предназначен для случаев, когда к стандартному интерфейсу Lite нужно добавить страницы, окна или элементы с ручной компоновкой.
Lite и Pro — два режима одного XIOT-EDITOR и одного проекта. Pro дополняет Lite, а не является отдельным приложением. Переключение режима не создаёт второй проект.
Краткое сравнение режимов: Lite и Pro версии редактора.
Когда нужен Pro
Используйте Pro, если проекту требуется:
- техническая или диспетчерская страница;
- специализированный экран для настенной панели;
- дополнительное окно управления;
- ручная компоновка элементов;
- индивидуальное оформление интерфейса.
Если стандартного интерфейса, автоматически сформированного в Lite по структуре проекта, достаточно, создавать страницу Pro необязательно.
Что создаётся в Pro
Интегратор может вручную создавать:
- страницы — отдельные полноэкранные представления;
- окна — панели, которые открываются поверх страницы;
- элементы и виджеты — блоки интерфейса с настроенным внешним видом;
- визуальную логику элементов — реакции на действия пользователя и изменения данных проекта.
Элементы можно связывать с характеристиками устройств и адресами состояния и управления, чтобы отображать значения или отправлять команды.
Совместная работа с Lite
Обычный порядок работы:
- В Lite создайте структуру проекта и проверьте стандартный интерфейс.
- Определите, каких специализированных экранов или элементов не хватает.
- Переключитесь в Pro и создайте только необходимые дополнительные страницы, окна и элементы.
- Проверьте результат в режиме просмотра и на целевых устройствах.
Клавиша F2 переключает просмотр и редактирование, а не режимы Lite и Pro. Переключение между Lite и Pro выполняется отдельной кнопкой LITE / PRO.
Повторное использование элементов
Выбранную страницу, окно или элемент можно сохранить в формате .xelem, а затем загрузить для повторного использования. .xelem — файл элемента, а не всего проекта: этот экспорт не выполняет Сохранить проект, не создаёт версию проекта и не загружает конфигурацию на XIOT-PLC.
Во время вёрстки в Pro используйте Сохранить проект как самостоятельную контрольную точку. Чтобы применить конфигурацию на объекте, нажмите Загрузить конфигурацию на контроллер: команда сначала сохраняет проект локально и после успешной записи отправляет сохранённую конфигурацию на XIOT-PLC. Облачное сохранение и публикацию приложения проверяют отдельно: успешная загрузка на PLC их не подтверждает. Подробнее: Сохранение резервной копии проекта.
Следующие материалы
