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

Текущая версия от 22:12, 2 октября 2026

Режим Pro в XIOT-EDITOR содержит инструменты для ручного создания дополнительных страниц, окон и элементов интерфейса. Перед началом работы прочитайте Lite и Pro версии редактора и Назначение и возможности Pro версии редактора.

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

Страницы

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

Доступные функции:

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

При сохранении страница записывается в файл с названием, совпадающим с её именем.

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

.xelem — файл элемента, а не всего проекта.

Команда сохранения в .xelem экспортирует выбранный элемент и не выполняет Сохранить проект, не создаёт версию проекта и не загружает конфигурацию на XIOT-PLC. Во время вёрстки в Pro периодически используйте Сохранить проект как самостоятельную контрольную точку. Отдельная команда Сохранить проект создаёт локальную версию и не изменяет конфигурацию XIOT-PLC. Чтобы применить конфигурацию на объекте, нажмите Загрузить конфигурацию на контроллер: эта команда сначала сохраняет проект локально и после успешной записи отправляет сохранённую конфигурацию на XIOT-PLC. Облачное сохранение и публикацию приложения проверяют отдельно: успешная загрузка на PLC их не подтверждает.

Окна

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

Особенности:

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

Структура

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

Возможности:

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

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

Центральная зона отображает текущее приложение:

выбранную страницу;
вложенные элементы;
открытые окна поверх страницы.

Вся страница занимает рабочую область целиком.

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

Правый клик в рабочей области вызывает меню:

вставить новый блок;
вставить скопированный блок;
вставить из базы;
загрузить из файла.

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

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

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

При выборе элемента он подсвечивается красной рамкой.

Меню по правому клику на элементе позволяет:

копировать;
клонировать;
удалить;
сохранить в файл.

Тип элемента можно изменить в правой панели.

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

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

Каждый элемент может иметь собственный набор CSS-стилей.

Доступно несколько хранилищ стилей: all, 0, 1, 2 и т.д.

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

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

В редакторе доступны основные настройки отображения: размеры, отступы, фон, шрифты, позиционирование, тени, прозрачность и анимации.

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

Двойной клик по блоку — вход внутрь.

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

Как ориентироваться:

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

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

Каждому элементу можно назначить собственную логику.

Для этого используется визуальный редактор действий.

Привязка характеристик и физических адресов

Вкладка Логика → раздел характеристики устройств или физические адреса.

Процесс:

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

Типы событий

События в левом наборе:

тач‑события: касание, удержание, отпускание, клик, двойной клик, свайпы, drag‑события;
изменение характеристик;
изменение значений физических адресов;
событие запуска интерфейса.

Верхний набор действий

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

Правый набор действий

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

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

1. Добавляем событие Клик по элементу.

2. Добавляем действие Открыть страницу.

3. Выбираем нужную страницу.

4. Закрываем редактор логики.

Проверка:

нажимаем F2 (или Fn + F2 на некоторых ноутбуках) для перехода к просмотру;
элементы становятся доступны для пользовательского взаимодействия;
проверяем, что нажатие открывает выбранную страницу.

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

В верхнем меню можно:

менять устройство отображения (телефон, планшет, панель);
менять масштаб интерфейса (это меняет font-size всего приложения).

Важно:

при изменении масштаба меняется font-size. Использование процентов и em помогает сохранять пропорции, но не заменяет проверку интерфейса на целевых размерах экрана.

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

✔ Итог

Режим Pro дополняет автоматически сформированный интерфейс Lite:

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

Клавиша F2 переключает просмотр и редактирование, а не режимы Lite и Pro. Порядок входа в редактор: Доступ к XIOT-EDITOR.

@@ Строка 1: / Строка 1: @@
-__NOTOC__
+{{DISPLAYTITLE:Обзор инструментов и меню PRO версии редактора}}
+Режим Pro в XIOT-EDITOR содержит инструменты для ручного создания дополнительных страниц, окон и элементов интерфейса. Перед началом работы прочитайте [[Editor-lite-and-pro|Lite и Pro версии редактора]] и [[Editor-pro-capabilities|Назначение и возможности Pro версии редактора]].
-= 🛠 Обзор инструментов и меню PRO версии XIOT‑EDITOR =
-PRO версия редактора XIOT‑EDITOR предоставляет полный набор инструментов для ручного создания адаптивных интерфейсов. Ниже приведён обзор всех основных областей и возможностей редактора.
 ----
@@ Строка 16: / Строка 13: @@
 * удаление страницы;
 * клонирование;
-* сохранение страницы в файл (формат *.xelem*);
+* сохранение страницы в файл (формат '''.xelem''');
 * сортировка страниц — удерживайте левую кнопку мыши на имени страницы и перетяните.
 При сохранении страница записывается в файл с названием, совпадающим с её именем.
 При клике правой кнопкой мыши в рабочей области можно загрузить страницу, окно или элемент из файла — так можно переносить элементы между проектами.
----
+'''.xelem — файл элемента, а не всего проекта'''.
+Команда сохранения в <code>.xelem</code> экспортирует выбранный элемент и не выполняет '''Сохранить проект''', не создаёт версию проекта и не загружает конфигурацию на XIOT-PLC. Во время вёрстки в Pro периодически используйте '''Сохранить проект''' как самостоятельную контрольную точку. Отдельная команда '''Сохранить проект''' создаёт локальную версию и не изменяет конфигурацию XIOT-PLC. Чтобы применить конфигурацию на объекте, нажмите '''Загрузить конфигурацию на контроллер''': эта команда сначала сохраняет проект локально и после успешной записи отправляет сохранённую конфигурацию на XIOT-PLC. Облачное сохранение и публикацию приложения проверяют отдельно: успешная загрузка на PLC их не подтверждает.
 === '''Окна''' ===
@@ Строка 32: / Строка 32: @@
 * порядок отображения соответствует порядку в списке (чем ниже окно, тем выше его слой);
 * доступны настройки отображения, анимаций появления/исчезновения, времени жизни и условий показа.
----
 === '''Структура''' ===
@@ Строка 44: / Строка 42: @@
 * удаление и копирование выбранных узлов.
-----
+🖥 Центральная рабочая область
-== 🖥 Центральная рабочая область ==
 Центральная зона отображает текущее приложение:
@@ Строка 54: / Строка 50: @@
 Вся страница занимает рабочую область целиком.
 Окна располагаются поверх и не ограничены размерами страницы.
@@ Строка 63: / Строка 60: @@
 При добавлении блок появляется именно в том месте структуры, где выполняется действие: внутри страницы, окна или другого блока.
-----
 == 🧱 Элементы и их типы ==
 Каждый добавленный элемент по умолчанию имеет тип '''Блок'''.
 При выборе элемента он подсвечивается красной рамкой.
@@ Строка 78: / Строка 74: @@
 Тип элемента можно изменить в правой панели.
 Тип определяет набор дополнительных свойств (SVG-иконка, текст, поле ввода, список, график, таблица, цветовой выбор и др.).
----
 == 🎨 Стили элементов ==
 Каждый элемент может иметь собственный набор CSS-стилей.
-Доступно несколько хранилищ стилей: *all*, *0*, *1*, *2* и т.д.
+Доступно несколько хранилищ стилей: '''all''', '''0''', '''1''', '''2''' и т.д.
 Это позволяет:
@@ Строка 92: / Строка 88: @@
 * адаптировать элементы под разные устройства в одном проекте.
-Полный набор CSS соответствует стандарту веб‑разработки — размеры, тени, фон, шрифты, позиционирование, анимации и др.
+В редакторе доступны основные настройки отображения: размеры, отступы, фон, шрифты, позиционирование, тени, прозрачность и анимации.
-----
 == 🧭 Навигация внутри блоков ==
 Двойной клик по блоку — вход внутрь.
 Внутри блока можно добавлять элементы правой кнопкой мыши.
@@ Строка 106: / Строка 101: @@
 * клик по имени элемента сверху — выход из него;
 * клик вне элемента в рабочей области — выход на уровень выше.
-----
 == ⚙️ Логика элементов ==
 Каждому элементу можно назначить собственную логику.
 Для этого используется визуальный редактор действий.
-=== Привязка характеристик и тэгов ===
+=== Привязка характеристик и физических адресов ===
-Вкладка '''Логика''' → раздел *характеристики устройств* или *тэги*.
+Вкладка '''Логика''' → раздел '''характеристики устройств''' или '''физические адреса'''.
 Процесс:
 # выбрать устройство из дерева помещений;
-# выбрать характеристику или тэг;
+# выбрать характеристику или физический адрес;
 # задать имя — оно появится в визуальном редакторе логики.
@@ Строка 126: / Строка 120: @@
 * тач‑события: касание, удержание, отпускание, клик, двойной клик, свайпы, drag‑события;
 * изменение характеристик;
-* изменение тегов;
+* изменение значений физических адресов;
-* события старта (приложение, сервер).
+* событие запуска интерфейса.
 === Верхний набор действий ===
@@ Строка 142: / Строка 136: @@
 * изменить текст;
 * записать характеристику;
-* записать физический тэг;
+* записать значение по адресу управления;
 * анимации;
 * системные действия.
-=== Важное отличие типов ===
+== 👆 Пример: тач‑событие ==
-* '''Синие элементы''' — выполняются в приложении.
-* '''Красные элементы''' — выполняются на контроллере XIOT‑PLC.
-Это позволяет:
+. Добавляем событие '''Клик''' по элементу.
-* запускать автономную логику на контроллере;
-* обрабатывать события, даже если приложение закрыто;
-* использовать приложение лишь как интерфейс запуска действий.
-----
+. Добавляем действие '''Открыть страницу'''.
-== 👆 Пример: тач‑событие ==
+. Выбираем нужную страницу.
-. Добавляем событие '''Клик''' по элементу.
-. Добавляем действие '''Открыть страницу'''.
-. Выбираем нужную страницу.
 . Закрываем редактор логики.
 Проверка:
-* нажимаем F2 (или fn+F2) для выхода из режима редактирования;
+* нажимаем F2 (или Fn + F2 на некоторых ноутбуках) для перехода к просмотру;
-* приложение начинает работать в реальном режиме;
+* элементы становятся доступны для пользовательского взаимодействия;
-* если логика использует контроллер, нажимаем кнопку '''Загрузить конфигурацию'''.
+* проверяем, что нажатие открывает выбранную страницу.
 ----
@@ Строка 175: / Строка 161: @@
 В верхнем меню можно:
 * менять устройство отображения (телефон, планшет, панель);
-* менять масштаб интерфейса (задаётся параметром font-size).
+* менять масштаб интерфейса (это меняет font-size всего приложения).
 Важно:
-при изменении масштаба меняется *em*, поэтому элементы должны проектироваться в процентах и em — тогда интерфейс будет всегда адаптивным.
-----
+при изменении масштаба меняется '''font-size'''. Использование процентов и em помогает сохранять пропорции, но не заменяет проверку интерфейса на целевых размерах экрана.
+Проверяйте результат на всех целевых размерах экрана. Подробные рекомендации: [[Ui-element-structure-and-responsive-layout|Структура элементов и адаптивный интерфейс]].
+== ✔ Итог ==
+Режим Pro дополняет автоматически сформированный интерфейс Lite:
+вложенная структура, настройки стилей, логика элементов, работа с физическими адресами и характеристиками, страницы, окна и повторное использование элементов между проектами.
-= ✔ Итог =
+'''Клавиша F2 переключает просмотр и редактирование, а не режимы Lite и Pro'''. Порядок входа в редактор: [[Xiot-editor-access|Доступ к XIOT-EDITOR]].
-PRO версия XIOT‑EDITOR — это полноценная среда разработки интерфейсов:
-вложенная структура, CSS‑стили, логика элементов, работа с тэгами и характеристиками, страницы и окна, переносимость элементов между проектами и адаптивность под любые устройства.

Admin (обсуждение | вклад)