Editor-pro-tools-and-menus - История изменений

Admin: Английские адреса Wiki: обновление ссылок с сохранением русских подписей

2026-10-02T22:12:07Z

Английские адреса Wiki: обновление ссылок с сохранением русских подписей

← Предыдущая версия		Версия от 22:12, 2 октября 2026
Строка 1:		Строка 1:
	{{DISPLAYTITLE:Обзор инструментов и меню PRO версии редактора}}		{{DISPLAYTITLE:Обзор инструментов и меню PRO версии редактора}}
	Режим Pro в XIOT-EDITOR содержит инструменты для ручного создания дополнительных страниц, окон и элементов интерфейса. Перед началом работы прочитайте [[Lite и Pro версии редактора]] и [[Назначение и возможности Pro версии редактора]].		Режим Pro в XIOT-EDITOR содержит инструменты для ручного создания дополнительных страниц, окон и элементов интерфейса. Перед началом работы прочитайте [[Editor-lite-and-pro\|Lite и Pro версии редактора]] и [[Editor-pro-capabilities\|Назначение и возможности Pro версии редактора]].

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

	Проверяйте результат на всех целевых размерах экрана. Подробные рекомендации: [[Структура элементов и адаптивный интерфейс]].		Проверяйте результат на всех целевых размерах экрана. Подробные рекомендации: [[Ui-element-structure-and-responsive-layout\|Структура элементов и адаптивный интерфейс]].

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

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

Admin: Admin переименовал страницу Обзор инструментов и меню PRO версии редактора в Editor-pro-tools-and-menus: Английский адрес статьи, русский заголовок и сохранение истории по поручению владельца

2026-10-02T20:58:01Z

Admin переименовал страницу Обзор инструментов и меню PRO версии редактора в Обзор инструментов и меню PRO версии редактора: Английский адрес статьи, русский заголовок и сохранение истории по поручению владельца

← Предыдущая версия	Версия от 20:58, 2 октября 2026
(нет различий)

Admin: Английский адрес статьи, русский заголовок и сохранение истории по поручению владельца

2026-10-02T20:57:59Z

Английский адрес статьи, русский заголовок и сохранение истории по поручению владельца

← Предыдущая версия		Версия от 20:57, 2 октября 2026
Строка 1:		Строка 1:
			{{DISPLAYTITLE:Обзор инструментов и меню PRO версии редактора}}
	Режим Pro в XIOT-EDITOR содержит инструменты для ручного создания дополнительных страниц, окон и элементов интерфейса. Перед началом работы прочитайте [[Lite и Pro версии редактора]] и [[Назначение и возможности Pro версии редактора]].		Режим Pro в XIOT-EDITOR содержит инструменты для ручного создания дополнительных страниц, окон и элементов интерфейса. Перед началом работы прочитайте [[Lite и Pro версии редактора]] и [[Назначение и возможности Pro версии редактора]].

Admin: OLD-05D: локальное сохранение, облако и загрузка PLC по актуальным исходникам

2026-09-16T06:56:13Z

OLD-05D: локальное сохранение, облако и загрузка PLC по актуальным исходникам

← Предыдущая версия		Версия от 06:56, 16 сентября 2026
Строка 21:		Строка 21:
	'''.xelem — файл элемента, а не всего проекта'''.		'''.xelem — файл элемента, а не всего проекта'''.

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

	=== '''Окна''' ===		=== '''Окна''' ===

Admin: COR-06: единый словарь действий и адресов управления/состояния

2026-08-23T16:11:11Z

COR-06: единый словарь действий и адресов управления/состояния

← Предыдущая версия		Версия от 16:11, 23 августа 2026
Строка 20:		Строка 20:

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

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

	=== '''Окна''' ===		=== '''Окна''' ===
Строка 105:		Строка 107:
	Для этого используется визуальный редактор действий.		Для этого используется визуальный редактор действий.

	=== Привязка характеристик и ~~тэгов~~ ===		=== Привязка характеристик и физических адресов ===
	Вкладка '''Логика''' → раздел '''характеристики устройств''' или '''~~тэги~~'''.		Вкладка '''Логика''' → раздел '''характеристики устройств''' или '''физические адреса'''.

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

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

Строка 133:		Строка 135:
	* изменить текст;		* изменить текст;
	* записать характеристику;		* записать характеристику;
	* записать ~~физический тэг~~;		* записать значение по адресу управления;
	* анимации;		* анимации;
	* системные действия.		* системные действия.
Строка 169:		Строка 171:
	Режим Pro дополняет автоматически сформированный интерфейс Lite:		Режим Pro дополняет автоматически сформированный интерфейс Lite:

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

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

Admin: Updated from local wiki project

2026-08-22T10:11:05Z

Updated from local wiki project

← Предыдущая версия		Версия от 10:11, 22 августа 2026
Строка 1:		Строка 1:
	~~__NOTOC__~~		Режим Pro в XIOT-EDITOR содержит инструменты для ручного создания дополнительных страниц, окон и элементов интерфейса. Перед началом работы прочитайте [[Lite и Pro версии редактора]] и [[Назначение и возможности Pro версии редактора]].

	~~PRO версия редактора XIOT‑EDITOR предоставляет полный набор инструментов~~ для ручного создания ~~адаптивных интерфейсов~~. ~~Ниже приведён обзор всех основных областей~~ и ~~возможностей~~ редактора.

	----		----
Строка 20:		Строка 18:

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

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

	=== '''Окна''' ===		=== '''Окна''' ===
Строка 85:		Строка 85:
	* адаптировать элементы под разные устройства в одном проекте.		* адаптировать элементы под разные устройства в одном проекте.

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

	== 🧭 Навигация внутри блоков ==		== 🧭 Навигация внутри блоков ==
Строка 118:		Строка 118:
	* изменение характеристик;		* изменение характеристик;
	* изменение тегов;		* изменение тегов;
	* ~~события старта (приложение, сервер)~~.		* событие запуска интерфейса.

	=== Верхний набор действий ===		=== Верхний набор действий ===
Строка 136:		Строка 136:
	* анимации;		* анимации;
	* системные действия.		* системные действия.

	~~=== Важное отличие типов ===~~
	* '''Синие элементы''' — выполняются в приложении.
	* '''Красные элементы''' — выполняются на контроллере XIOT‑PLC.

	~~Это позволяет:~~
	* запускать автономную логику на контроллере;
	* обрабатывать события, даже если приложение закрыто;
	* использовать приложение лишь как интерфейс запуска действий.

	== 👆 Пример: тач‑событие ==		== 👆 Пример: тач‑событие ==
Строка 157:		Строка 148:

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

	----		----
Строка 171:		Строка 162:
	Важно:		Важно:

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

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

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

	~~= ✔ Итог =~~		вложенная структура, настройки стилей, логика элементов, работа с тегами и характеристиками, страницы, окна и повторное использование элементов между проектами.
	~~PRO версия XIOT‑EDITOR — это полноценная среда разработки интерфейсов:~~

	~~вложенная структура, CSS‑стили, логика элементов, работа с тэгами и характеристиками, страницы~~ и ~~окна~~, ~~переносимость элементов между проектами~~ и ~~адаптивность под любые устройства~~.		'''Клавиша F2 переключает просмотр и редактирование, а не режимы Lite и Pro'''. Порядок входа в редактор: [[Доступ к XIOT-EDITOR]].

Admin в 11:46, 4 декабря 2025

2025-12-04T11:46:49Z

Внесённые изменения

Admin: Новая страница: «NOTOC = 🛠 Обзор инструментов и меню PRO версии XIOT‑EDITOR = PRO версия редактора XIOT‑EDITOR предоставляет полный набор инструментов для ручного создания адаптивных интерфейсов. Ниже приведён обзор всех основных областей и возможностей редактора. ---- == 📁 Лево...»

2025-12-04T11:43:38Z

Новая страница: «__NOTOC__ = 🛠 Обзор инструментов и меню PRO версии XIOT‑EDITOR = PRO версия редактора XIOT‑EDITOR предоставляет полный набор инструментов для ручного создания адаптивных интерфейсов. Ниже приведён обзор всех основных областей и возможностей редактора. ---- == 📁 Лево...»

Новая страница

__NOTOC__

= 🛠 Обзор инструментов и меню PRO версии XIOT‑EDITOR =

PRO версия редактора XIOT‑EDITOR предоставляет полный набор инструментов для ручного создания адаптивных интерфейсов. Ниже приведён обзор всех основных областей и возможностей редактора.

----

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

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

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

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

---

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

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

---

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

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

----

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

Центральная зона отображает текущее приложение:
* выбранную страницу;
* вложенные элементы;
* открытые окна поверх страницы.

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

Правый клик в рабочей области вызывает меню:
* вставить новый блок;
* вставить скопированный блок;
* вставить из базы;
* загрузить из файла.

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

----

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

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

Меню по правому клику на элементе позволяет:
* копировать;
* клонировать;
* удалить;
* сохранить в файл.

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

---

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

Каждый элемент может иметь собственный набор CSS-стилей.
Доступно несколько хранилищ стилей: *all*, *0*, *1*, *2* и т.д.

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

Полный набор CSS соответствует стандарту веб‑разработки — размеры, тени, фон, шрифты, позиционирование, анимации и др.

----

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

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

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

----

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

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

=== Привязка характеристик и тэгов ===
Вкладка '''Логика''' → раздел *характеристики устройств* или *тэги*.

Процесс:
# выбрать устройство из дерева помещений;
# выбрать характеристику или тэг;
# задать имя — оно появится в визуальном редакторе логики.

=== Типы событий ===
События в левом наборе:
* тач‑события: касание, удержание, отпускание, клик, двойной клик, свайпы, drag‑события;
* изменение характеристик;
* изменение тегов;
* события старта (приложение, сервер).

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

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

=== Важное отличие типов ===
* '''Синие элементы''' — выполняются в приложении.
* '''Красные элементы''' — выполняются на контроллере XIOT‑PLC.

Это позволяет:
* запускать автономную логику на контроллере;
* обрабатывать события, даже если приложение закрыто;
* использовать приложение лишь как интерфейс запуска действий.

----

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

1. Добавляем событие '''Клик''' по элементу.
2. Добавляем действие '''Открыть страницу'''.
3. Выбираем нужную страницу.
4. Закрываем редактор логики.

Проверка:
* нажимаем F2 (или fn+F2) для выхода из режима редактирования;
* приложение начинает работать в реальном режиме;
* если логика использует контроллер, нажимаем кнопку '''Загрузить конфигурацию'''.

----

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

В верхнем меню можно:
* менять устройство отображения (телефон, планшет, панель);
* менять масштаб интерфейса (задаётся параметром font-size).

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

----

= ✔ Итог =
PRO версия XIOT‑EDITOR — это полноценная среда разработки интерфейсов:
вложенная структура, CSS‑стили, логика элементов, работа с тэгами и характеристиками, страницы и окна, переносимость элементов между проектами и адаптивность под любые устройства.