¶ Редактор интерфейса
Редактор интерфейса - это модуль, представляющий собой блочный конструктор для создания интерфейса (веб-сайт, с помощью которого происходит управление устройств мультимедийного контроллера без необходимости знания программирования). Интерфейс в конструкторе собирается из готовых блоков, с возможностью адаптации его под нужный размер экрана.
¶ Состав редактора интерфейса
Редактор интерфейса состоит из следующих ключевых частей:
1. Рабочая область — основная часть редактора интерфейса, где происходит создание и редактирование макета интерфейса путём размещения и настройки блоков;
2. Toolbar с инструментами — панель инструментов, содержащая набор элементов для работы с интерфейсом, таких как добавление новых блоков, выравнивание существующих и другие функции;
3. Блок дерева проекта область, где отображается структура проекта, позволяющая легко перемещаться между различными элементами интерфейса и управлять ими;
4. Блок с параметрами виджетов — секция, в которой можно настраивать свойства и параметры выбранных виджетов, такие как размер, цвет, поведение и другие характеристики;
5. Statusbar — информационная строка внизу экрана, которая отображает текущие параметры виджетов.
¶ Авторизация
Запустите браузер. В адресной строке браузера введите: http://:<IP адресс контроллера>. Выберите модуль "Редактор интерфейса"
После будет осуществлен переход на страницу авторизации. Введите логин и пароль, выданный вендором системы, и выполните вход.
После успешной авторизации в редакторе интерфейса Вы будете перенаправлены на стартовую страницу
Для того чтобы вернуться на главную страницу нажмите на 
в Toolbar.
Из редактора интерфейса есть возможность перейти в модуль "Редактора логики" нажав на 
в Toolbar.
¶ Управление проектом
¶ Как создать первый проект
Для начала работы необходимо создать проект, что можно сделать, нажав на иконку 
и выбрав "Создать проект" из выпадающего списка
Далее в появившемся модальном окне требуется заполнить данные проекта, такие как его название и ID, указать ширину и высоту экрана, соответствующие размерам устройства, на котором будет запущен создаваемый интерфейс, а также указать IP адрес основного контроллера.
По умолчанию в поле "IP адрес основного контроллера" будет указан адрес контроллера, на котором установлена система управления контроллером. Вы можете указать IP адрес другого устройства, на котором также находится программное обеспечение. Далее при загрузке интерфейса на контроллер и при открытии его он будет отправлять события по указанному адресу (см. п. Как настроить взаимодействие с редактором логики через виджет кнопка и Как настроить взаимодействие с редактором логики через виджет слайдер).
После заполнения всех полей и нажатия кнопки "Создать" будет создан новый проект.
¶ Как изменить настройки проекта
После создания проекта Вы можете изменить настройки проекта при необходимости. Для этого в блоке дерева проекта нужно нажать на иконку 
.
В открывшемся модальном окне можно задать новое название проекта и ID, изменить ширину и высоту экрана, а также поменять значения IP адресов основного и резервного контроллера. Чтобы изменения сохранились необходимо нажать на кнопку "Сохранить"
¶ Как закрыть проект
Если текущий проект больше не требуется, его можно закрыть, выбрав в меню пункт "Закрыть проект", проект при этом не будет сохранен (о том, как сохранить проект см. в п. Как сохранить проект на диск)
¶ Как сохранить проект на диск
Разработанный интерфейс можно сохранить к себе на диск. Для этого необходимо выбрать в меню пункт "Сохранить проект". В появившемся проводнике выбрать папку для сохраниения и нажать кнопку "Сохранить".
Если проект не сохранился в выбранной папке, проверте область "Последние скаченные файлы" в web-браузере и повторно нажмите "Сохранить" напротив названия проекта.
¶ Как загрузить шаблон проекта
Если у вас есть архив с шаблоном проекта, его можно загрузить в редактор.
Для загрузки шаблона проекта откройте меню и выберите опцию "Открыть проект". В появившемся проводнике найдите необходимый архив шаблона проекта. Выберите архив и загрузите его в редактор.
Обратите внимание, что для успешной загрузки, архив должен быть в формате ZIP. Внутри архива должен находиться JSON-файл, содержащий проект, а также все изображения, используемые в проекте.
¶ Как отправить проект на контроллер и запустить интерфейс
После создания и настройки проекта, необходимо загрузить его на контроллер для дальнейшего использования интерфейса.
Для этого нажмите на иконку 
и выберите "Отправить проект на контроллер" из выпадающего списка. Появится модальное окно со слотами, где нужно выбрать свободный слот и нажать кнопку "Загрузить". После этого проект будет загружен и появится в выбранном слоте.
Для того чтобы открыть проект введите адрес: http://<IP-адрес контроллера>:<порт>
Где
<IP-адрес контроллера> - реальный IP-адрес вашего контроллера
<порт> - 2001-2010, где последняя цифра указывает номер слота, на который был загружен проект интерфейса.
Для корректного отображения интерфейса необходимо настроить поток в Редакторе логики. Для этого перейдите в редактор логики, нажав на иконку 
. В открывшемся редакторе добавьте узел "Панель" в рабочую область и в настройках узла укажите ID интерфейса, после чего нажмите кнопку "Развернуть". Обновите интерфейс, чтобы изменения вступили в силу.
Обратите внимание, что если логика не будет настроена, интерфейс не загрузится.
¶ Как получить проект с контроллера
Чтобы получить проект с контроллера, нажмите на меню и выберите опцию "Получить проект с контроллера" из выпадающего списка. В открывшемся окне выберите необходимый проект и нажмите кнопку "Загрузить". После этого проект появится в редакторе, где вы сможете вносить изменения и управлять им.
¶ Как изменить и удалить загруженный проект на контроллер
Вы можете изменить настройки проекта, такие как название, ID проекта, IP адрес основного и резервного контроллера.
Для этого откройте модальное окно получения проекта с контроллера или отправки проекта на контроллер, наведите на проект, настройки которого требуется изменить, и нажмите на иконку 
. В открывшемся модальном окне внесите необходимые изменения и нажмите "Сохранить".
Если проект необходимо удалить, то в модальном окне получения проекта с контроллера или отправки проекта на контроллер нажмите на иконку 
. После подтверждения удаления проект будет удален с контроллера.
¶ Работа со страницами
¶ Какие виды страниц есть в редакторе
В редакторе вы можете работать со стандартными страницами и всплывающими страницами.
Стандартная страница - это страница, которая содержит основное содержимое интерфейса. Размер страницы определяется при создании проекта и применяется ко всем созданным в последующем стандартным страницам. Размер страницы можно изменить только в настройках проекта настройках проекта
Всплывающая страница - это диалоговое окно, которое всегда расположено поверх стандартной страницы. Всплывающая страница всегда расположена поверх стандартной страницы.
Список всех созданных стандартных и всплывающих страниц находится в дереве проекта. Чтобы их увидеть, необходимо в соответствующем пункте раскрыть список страниц.
¶ Как создать стандартную и всплывающую страницы
После создания проекта в нем уже будет добавлена стандартная страница, как в рабочей области, так и в дереве проекта.
Для того чтобы создать дополнительную стандартную или всплывающую страницу необходимо в блоке дерева проекта нажать на иконку 
и выбрать "Создать стандартную страницу" или "Создать всплывающую страницу" из выпадающего списка соответственно.
Новая страница будет добавлена в рабочую область и в дереве проекта.
Для улучшения навигации по проекту с множеством открытых страниц вы можете воспользоваться функцией скрытия страниц. Для этого просто нажмите на иконку 
. Это действие временно свернет страницу в рабочей области. Чтобы вновь открыть страницу, кликните по ней в дереве проекта, она будет восстановлена в рабочем пространстве.
Дополнительно вы можете воспользоваться функцией масштабирования страниц. Выберите страницу, масштаб которой хотите изменить, и используйте панель инструментов для корректировки масштаба. Это позволит вам более комфортно ориентироваться в деталях проекта.
¶ Как удалить стандартную или всплывающую страницу
Для удаления созданных страниц наведите на страницу в блоке дерева проекта. При наведении появится иконка удаления, при нажатии на нее страница будет удалена из проекта.
¶ Как изменить наименование стандартной и всплывающей страницы
При наведении на страницу в блоке дерева проекта появится иконка редактирования, при нажатии на нее будет открыто модальное окно изменения имени страницы. Введите новое имя и нажмите сохранить, чтобы изменения применились.
¶ Как скопировать стандартную и всплывающую страницы
Вы можете сделать копию созданных страниц. При наведении на страницу в блоке дерева проекта появится иконка копирования, при нажатии на нее в проекте будет создана копия страницы.
¶ Как экспортировать и импортировать страницы
В редакторе есть возможность экспорта настроенных страниц, вы можете экспортировать страницу, нажав на иконку экспорта. При экспорте шаблон страницы будет сохранен в директорию ПК, которая указана в настройках браузера.
Вы также можете загрузить шаблон страницы, для этого воспользуйтесь опцией импорта. При загрузке настроенная страница будет добавлена в проект.
¶ Как настроить расположение всплывающей страницы
При добавлении всплывающей страницы в рабочую область во вкладке "Основное" у нее будут заблокированы поля "Позиция X" и "Позиция Y", значения в них не будут установлены, также рядом с полями будет добавлена кнопка "Настроить расположение".
При нажатии на кнопку будет появляться модальное окно, в котором будет находиться стандартная страница и поверх нее всплывающая.
Для того чтобы настроить расположение всплывающей страницы необходимо нажать мышкой всплывающую страницу и поместить ее в нужную область на стандартной странице.
После настройки расположения необходимо нажать кнопку "Применить"
При открытии модального окна в нем будет отображена стандартная страница, которая является первой в блоке дерева проекта. Если необходимо увидеть, как всплывающая страница будет расположена на другой стандартной странице, то необходимо выбрать нужную страницу из выпадающего списка.
¶ Стили для стандартных и всплывающих страниц
¶ Цвет фона
Для стандартных и всплывающих страниц в редакторе есть возможность настроить цвет фона. Для этого перейдите на вкладку "Стили" и найдите параметр "Цвет фона". Кликнув на значение цвета, вы откроете диалоговое окно для выбора цвета.
В этом окне доступны два основных способа настройки цвета:
- Выбор цвета с помощью цветовой палитры — просто кликните на желаемый оттенок
- Ввод значения цвета вручную — это позволит задать точный оттенок с помощью кода цвета.
Кроме того, для всплывающих страниц вы также можете настроить уровень прозрачности с помощью ползунка или задав значение прозрачности вручную
¶ Градиент
Для стандартных и всплывающих страниц в редакторе есть возможность настроить градиент. Для этого перейдите на вкладку "Стили" и найдите параметр "Цвет фона". Кликнув на значение цвета, вы откроете окно для выбора цвета, в котором нужно выбрать "Градиент"
На странице можно настроить как линейный 
, так и радиальный градиент 
По умолчанию для градиента заданы два цвета. Чтобы добавить больше цветов, щелкните на панели с цветами в любую область.
Кроме того, для всплывающей страницы вы также можете настроить уровень прозрачности с помощью ползунка или задав значение прозрачности вручную.
¶ Фоновое изображение
В редакторе добавлена возможность использовать изображение в качестве фона стандартной и всплывающей страницы. Для этого нажмите кнопку "Добавить изображение". Добавить изображение можно формата jpg, png, svg.
Скорость загрузки страницы напрямую зависит от размера фоновых изображений. Выбирайте для основной и всплывающих страниц изображения с небольшим весом (размером файла) и подходящим разрешением. Это ускорит работу загрузки интерфейса для пользователей.
Откроется окно галереи изображений
При первом использовании нажмите +, выберите файл в проводнике. Затем выделите нужное изображение и нажмите "Применить". Добавленные в галерею изображения можно использовать для других страниц и виджетов.
После добавления вы можете настроить размер и расположение изображения.
При добавлении изображения ему задается автоматический размер, изображение также можно растянуть, вписать или задать ручной размер.
Если для настройки размера изображения выбрано значение "вписать", то изображение масштабируется с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если для настройки размера изображения выбрано значение "растянуть", то изображение масштабируется так, чтобы его ширина и высота равнялась ширине и высоте блока.
¶ Дополнительные стили для всплывающей страницы
Для всплывающей страницы можно задать бордюр. Для того чтобы его настроить установите значение "Да" в параметре "Бордюр". Затем выберите цвет бордюра, размер, а также тип линии бордюра: точечная, двойная, прерывистая или сплошная.
Также можно настроить закругление углов страницы. Вы можете установить одинаковое закругление для всех углов или указать различные значения для каждого угла отдельно.
В настройках имеется возможность задать тень страницы, внешнюю или внутреннюю.
¶ Как настроить показ всплывающей страницы в интерфейсе
При первой загрузке интерфейса всплывающие страницы не будут показаны на экране.
Для вызова всплывающей страницы необходимо воспользоваться командой popupPageShow (см. Отображение всплывающей страницы)
Команду можно выполнить с использованием виджета «Кнопка» (см. Как управлять интерфейсом через виджет кнопка?), либо направив ее из "Редактора логики".
Также для корректного отображения вслывающей страницы необходимо настроить ее расположение (см. Как настроить расположение всплывающей страницы?).
¶ Работа с виджетами
¶ Для чего нужен виджет "Кнопка" и как его настроить
Кнопка — это элемент управления в интерфейсе, который выполняет определенное действие при его активации пользователем.
Для кнопки может быть выполнено отображение в различных формах. В зависимости от настроек в редакторе интерфейса кнопки могут быть различными размеру, цвету и расположению.
Нажатие кнопки может вызывать выполнение определенной команды, которая задана в редакторе и включает:
Открытие/закрытие стандартных/всплывающих страниц
Изменение состояния других виджетов
Отправку событий и значений в проект логики
¶ Как добавить кнопку
Выберите в toolbar иконку виджета "Кнопка" и нажмите на нее/
Далее, удерживая кнопку мыши, перенесите виджет в рабочую область для того, чтобы добавить его на страницу.
Обратите внимание, виджет можно добавить только на выбранную страницу.
Вы можете настроить расположение кнопки, выбрав ее в рабочей области и переместив в нужное место на странице.
Вы также можете настроить позицию кнопки в блоке параметров во вкладке основное.
¶ Как настроить вид кнопки?
По умолчанию для кнопки уже заданы значения ширины и высоты. Вы можете изменить их, задав новое значение размеров в блоке параметров во вкладке "Основное"
Для того чтобы настроить видимость кнопки и активность вы можете выбрать соответствующие значения в параметрах "Показать" и "Активность":
- Если для настройки "Показать" выбрано значение "Да", то кнопка будет видима в интерфейсе, в обратном случае кнопка будет скрыта.
- Если для настройки "Активность" выбрано значение "Да", то кнопка будет доступна для нажатия в интерфейсе, иначе кнопка не будет реагировать на нажатие.
Вы можете настроить кнопку таким образом, чтобы она всегда отображалась поверх всплывающих страниц. Для этого в параметре "Поверх страниц" укажите значение "Да".
¶ Как настроить стили для виджета "Кнопка"
Во вкладке Стили для виджета "Кнопка" вы можете настроить стили в разных состояниях.
Состояние - набор стилей для кнопки.
При добавлении кнопки она имеет два предопределенных состояния.
- Состояние 1 (Неактивное) - применяется к кнопке по умолчанию при открытии интерфейса.
- Состояние 2 (Активное) - применяется к кнопке, когда на нее происходит нажатие.
Также кнопка имеет специальное состояние "Все", которое функционирует как шаблон для остальных состояний, но не может быть прямо применено к кнопке в качестве ее текущего состояния.
Изначально, настройки для неактивного и активного состояний совпадает с настройками заданными в состоянии "Все". Это означает, что при создании кнопки все три состояния имеют идентичные настройки.
Для того чтобы настроить состояние необходимо выбрать нужное состояние в выпадающем списке и задать нужные стили.
При изменении настроек в состояниях "Состояние 1" или "Состояние 2", атрибуты состояния "Все" автоматически переопределяются на "незаданное" значение, указывая на отсутствие универсальных настроек для всех состояний.
Для того чтобы задать всем состояниям универсальные настройки необходимо задать стили в состоянии "Все", для этого поставьте галочку в соответствующем поле и задайте необходимые стили, после чего они применяются ко всем остальным состояниям.
Помимо состояний по умолчанию для кнопки можно дополнительно создать новые состояния. Для этого нажмите на кнопку 
рядом со списком состояний. При нажатии будет создано новое состояние, которое будет показано в выпадающем списке.
При добавлении новых состояний они будут иметь настройки, как и у последнего состояния, если в новых состояниях настройки будут отличны от других состояний, то в состоянии "Все" настройки также автоматически переопределяются на "незаданное" значение.
¶ Какие стили можно настроить для Кнопки?
В разделе настроек стиля предоставляется возможность настройки цвета кнопки. Для этого перейдите на вкладку "Стили" и найдите параметр "Цвет фона". Кликнув на значок цвета, вы откроете окно для выбора цвета.
В окне доступны два способа настройки цвета
- Выбор цвета с помощью цветовой палитры;
- Ввод значения цвета вручную
В редакторе добавлена возможность настройки изображение в качестве фона кнопки, а также задания иконки. Для этого выберите добавить изображение/иконку и в открывшейся галерее выберите необходимое изображение. Добавить изображение можно формата jpg, png, svg.
После добавления вы можете настроить размер и расположение изображения. При добавлении изображения ему задается автоматический размер, изображение также можно растянуть, вписать или задать ручной размер.
Для кнопки можно настроить бордюр. По умолчанию бордюр у кнопки не задан. Для того чтобы его настроить, в параметре "Бордюр" установите значение "Да". Затем выберите цвет бордюра, размер, а также тип линии: точечная, двойная, прерывистая или сплошная.
Для кнопки можно настроить скругление углов. Вы можете задать:
- Общее скругление для всех углов;
- Индивидуальное значение скругления для каждого угла.
В настройках можно выбрать тень для кнопки, выбрав между внешней и внутренней.
Кнопка может содержать текст.
Для текста возможно определить следующие настройки:
- Шрифт, размер и стиль (жирный, курсив или подчеркнутый);
- Текст кнопки;
- Цвет текста кнопки;
- Расположение текста;
- Тень для текста.
Для кнопки можно задать общую прозрачность и общее размытие.
Общая прозрачность определяет, насколько видимым будет элемент на экране. Изменяя уровень прозрачности, вы можете сделать элемент полностью непрозрачным, полупрозрачным или полностью прозрачным.
- 0 означает полную прозрачность (элемент полностью невидим);
- 1 означает полную непрозрачность (элемент полностью видим);
- Значения между 0 и 1 позволяют достичь различных уровней полупрозрачности, например, 0.5 сделает элемент на 50% прозрачным.
Общее размытие применяется для создания эффекта размытости на элементе. Оно делает границы и контуры элемента менее четкими, создавая мягкий, размытый вид. Чем больше значение размытия, тем сильнее размытость.
Для настройки во вкладке "Стили" у кнопки найдите соответствующие настройки и задайте нужное значение.
¶ Как настроить анимацию для кнопки
В редакторе можно настроить анимацию кнопки при переходе из неактивного состояния (Состояние 1) в активное (Состояние 2) и обратно.
Обратите внимание, прежде чем перейти к настройке анимации для кнопки нужно добавить хотя бы одно дополнительное состояние.
После создания нового состояния в панели инструментов нажмите кнопку «Анимация». Откроется модальное окно для настройки анимации.
В модальном окне задайте время между изменениями состояний кнопки, время задается в секундах.
Выберите состояния, которые будут использоваться в анимации, для этого в колонке «Состояния кнопки» отметьте состояния для анимации. Нажмите кнопку 
для перемещения выбранных состояний в колонку "Состояния анимации".
Порядок воспроизведения задается в той последовательности, в которой находятся состояния в колонке "Состояния анимации".
Для удаления состояния из "Состояния анимации" выберите его и нажмите 
.
Нажмите «Загрузить» для сохранения настроек.
При заданной анимации кнопка будет менять состояния в соответствии с вашими настройками.
¶ Как управлять интерфейсом через виджет кнопка
В редакторе интерфейса с помощью виджета "Кнопка" можно настроить управление другими элементами, такое как открытие и закрытие страниц, а также изменение стилей и параметров страниц и других виджетов.
Управление осуществляется с помощью специальных команд, которые будут выполнены при нажатии на кнопку в интерфейсе.
Чтобы настроить управление с помощью команд, переместите виджет «Кнопка» в рабочую область вашего проекта, перейдите во вкладку «Взаимодействие» и установите значение порта на 0.
После этого в настройках вкладки "Взаимодействие" будет отображено поле "Ввод команды", куда нужно будет ввести одну или несколько команд. Возможные команды приведены в пунктах:
Какие есть команды для стандартных и всплывающих страниц?
Какие есть команды для виджета «Кнопка»?
Какие есть команды для виджета «Слайдера»?
Какие есть команды для виджета «Панель»?
Например, если необходимо показать всплывающую страницу на текущей стандартной странице, то в поле «Ввод команды» необходимо вставить команду:
{
"type": "popupPageShow",
"payload": {
"popupPageName": "Всплывающая страница 1",
"pageName": ""
}
}
Если же нужно показать всплывающую страницу на текущей стандартной странице, а также поменять цвет всплывающей страницы, то в поле «Ввод команды» необходимо вставить несколько команд:
[
{
"type": "popupPageShow",
"payload": {
"popupPageName": "Всплывающая страница 1",
"pageName": ""
}
},
{
"type": "popupPageParams",
"payload": {
"popupPageName": "Всплывающая страница 1",
"data": {
"background": "#75e97aff"
}
}
}
]
¶ Какие есть команды для стандартных и всплывающих страниц?
¶ Переход на стандартную страницу с указанным именем.
Команда выполняет переход на стандартную страницу. В поле "pageName" указывается страница, на которую нужно осуществить переход.
Пример команды:
{
"type": "staticPageSwitch",
"payload": {
"pageName": "Страница 1"
}
}
В примере команда выполняет переход на Страницу 1.
¶ Скрытие всех всплывающих страниц
Скрывает все всплывающие страницы на стандартной странице "Страница 1". В поле "pageName" указывается страница, на которой нужно скрыть все страницы.
Если имя стандартной страницы не задано или неверное, то команда выполнится для всех стандартных страниц.
Пример команды:
{
"type": "staticPageHidePopups",
"payload": {
"pageName": "Страница 1"
}
}
¶ Изменение параметров отображения стандартной страницы
Команда изменяет параметры стандартной страницы
Пример команды:
{
"type": "staticPageParams",
"payload": {
"pageName": "Страница 1",
"data": {
"background": "#807ab7ff"
}
}
}
В примере команда изменяет цвет фона стандартной страницы.
¶ Отображение всплывающей страницы
Показывает всплывающую страницу на стандартной странице. В поле "pageName" указывается страница, на которой нужно открыть всплывающую страницу, а в поле "popupPageName" указывается всплывающая страница.
Пример команды:
{
"type": "popupPageShow",
"payload": {
"popupPageName": "Всплывающая страница 1",
"pageName": "Страница 1"
}
}
В примере команда открывает всплывающую страницу "Всплывающая страница 1" на стандартной странице "Страница 1".
¶ Скрытие всплывающей страницы
Команда скрывает всплывающую страницу на стандартной странице.
Если имя стандартной страницы не задано или не верное, команда выполнится для всех стандартных страниц.
Пример команды:
{
"type": "popupPageHide",
"payload": {
"popupPageName": "Всплывающая страница 1",
"pageName": "Страница 1"
}
}
В примере команда закрывает всплывающую страницу "Всплывающая страница 1" на стандартной странице "Страница 1".
¶ Отображение или скрытие всплывающей страницы
Команда отображает или скрывает всплывающую страницу на определённой или текущей статичной странице, в зависимости от текущего состояния.
Пример команды:
{
"type": "popupPageToggle",
"payload": {
"popupPageName": "Всплывающая страница 1",
"pageName": "Страница 1"
}
}
В примере команда показывает/скрывает всплывающую страницу "Всплывающая страница 1" на стандартной странице "Страница 1".
¶ Изменение параметров отображения всплывающей страницы.
Команда изменяет параметры всплывающей страницы.
Пример команды:
{
"type": "popupPageParams",
"payload": {
"popupPageName": "Всплывающая страница 1",
"data": {
"positionX": "200px",
"positionY": "100px",
"width": "100px",
"height": "200px",
"backgroundColor": "#75e97aff"
}
}
}
- Доступные параметры: background, positionX, positionY, width, height
В примере команда изменяет цвет фона, позицию и размер всплывающей страницы.
¶ Какие есть команды для виджета «Кнопка»
¶ Изменение состояния виджета «Кнопка»
Изменяет состояния кнопки в той последовательности, в которой они заданы в команде. В течение указанного времени.
В полях "channel" и "port" указываются канал и порт кнопки соответственно.
В поле "from" указывается начальное состояние, с которого будет происходить смена состояний. В поле "to" указывается конечное состояние. В поле "time" указывается время, за которое будет происходить смена состояний.
Пример команды:
{
"type": "buttonSetState",
"payload": {
"channel": 10,
"port": 2,
"from": 1,
"to": 2,
"time": 2.5
}
}
Команда в примере изменяет состояние кнопки с channel = 10 и port = 2 из состояния 1 в состояние 10, последовательно, в течение 2.5 сек.
¶ Изменение текста виджета «Кнопка»
Изменяет текст кнопки в указанном состоянии.
Пример команды:
{
"type": "buttonSetText",
"payload": {
"channel": 10,
"port": 2,
"state": 2,
"text": "Текст"
}
}
Команда изменяет текст в состоянии 2 кнопки с channel = 10 и port = 2 на «Текст».
¶ Изменение видимости виджета «Кнопка»
Управляет параметром видимости кнопки. В полях "channel" и "port" указываются канал и порт кнопки видимость, которой необходимо изменить.
В поле "value" необходимо указать "true", если необходимо сделать кнопку видимой, и "false", если нужно скрыть кнопку.
Пример команды:
{
"type": "buttonSetVisible",
"payload": {
"channel": 10,
"port": 2,
"value": true
}
}
Делает кнопку с channel = 10 и port = 2 видимой.
¶ Изменение активности виджета «Кнопка»
Управляет параметром активности кнопки. В полях "channel" и "port" указываются канал и порт кнопки активность, которой необходимо изменить.
В поле "value" необходимо указать "true", если необходимо сделать кнопку активной, и "false", если нужно сделать кнопку неактивной.
Пример команды:
{
"type": "buttonSetEnable",
"payload": {
"channel": 10,
"port": 2,
"value": true
}
}
Делает кнопку с channel = 10 и port = 2 активной.
¶ Изменение параметров виджета «Кнопка»
Изменяет параметры виджета «Кнопка» для указанного состояния. В полях "channel" и "port" указываются канал и порт кнопки, в поле "state" указывается номер состояния кнопки. В поле "data" необходимо указать список параметров, которые необходимо изменить.
Пример команды:
{
"type": "buttonSetParams",
"payload": {
"channel": 100,
"port": 20,
"state": 2,
"data": {
"activity": false,
"style": {
"border": "5px solid #ed0909ff"
}
}
}
}
Команда изменяет активность и бордюр кнопки с channel = 100 и port = 20 для состояния 2.
¶ Какие есть команды для виджета «Слайдера»
¶ Изменение значения виджета «Слайдер»
Устанавливает новое значение для слайдера. В полях "channel" и "port" указываются канал и порт слайдера. В поле value необходимо задать новое значение слайдера.
Пример команды:
{
"type": "levelSetValue",
"payload": {
"channel": 10,
"port": 2,
"value": 50
}
}
В примере команда устанавливает значение слайдера с channel = 10 и port = 2 на 50.
¶ Инкремент значения виджета «Слайдер»
Увеличивает значение слайдера на заданное значение. В полях "channel" и "port" указываются канал и порт слайдера. В поле "value" необходимо задать значение, на которое необходимо увеличить уровень слайдера.
Пример команды:
{
"type": "levelIncrementValue",
"payload": {
"channel": 10,
"port": 2,
"value": 5
}
}
Команда в примере увеличивает значение слайдера с channel = 10 и port = 2 на 5.
¶ Декремент значения виджета «Слайдер»
Уменьшает значение слайдера на указанное значение. В полях "channel" и "port" указываются канал и порт слайдера. В поле "value" необходимо задать значение, на которое необходимо уменьшить уровень слайдера.
Пример команды:
{
"type": "levelDecrementValue",
"payload": {
"channel": 10,
"port": 2,
"value": 5
}
}
Команда в примере уменьшает значение слайдера с channel = 10 и port = 2 на 5.
¶ Изменение активности виджета «Слайдер»
Команда делает слайдер активным или неактивным. В полях "channel" и "port" указываются канал и порт слайдера активность, которого необходимо изменить.
В поле "value" необходимо указать "true", если необходимо сделать слайдер активным, и "false", если нужно сделать слайдер неактивным.
Пример команды:
{
"type": "levelSetEnable",
"payload": {
"channel": 10,
"port": 2,
"value": true
}
}
Делает слайдер с channel = 10 и port = 2 активным.
¶ Изменение параметров виджета «Слайдер»
Команда изменяет параметры виджета "Слайдер".
В полях "channel" и "port" указываются канал и порт слайдера, а в поле "data" необходимо указать список параметров, которые необходимо изменить.
Пример команды:
{
"type": "levelSetParams",
"payload": {
"channel": 100,
"port": 20,
"data": {
"activity": false,
"style": {
"border": "5px solid #ed0909ff"
}
}
}
}
Команда изменяет активность и бордюр слайдера с channel = 100 и port = 20.
¶ Какие есть команды для виджета «Панель»
¶ Изменение текста виджета «Панель»
Изменяет текст панели.
Пример команды:
{
"type": "rectSetText",
"payload": {
"channel": 10,
"port": 2,
"text": "Текст"
}
}
В примере команда изменяет текст панели с channel = 10 и port = 2 на «Текст».
¶ Изменение видимости виджета «Панель»
Управляет параметром видимости панели. В полях "channel" и "port" указываются канал и порт панели видимость, которой необходимо изменить.
В поле "value" необходимо указать "true", если необходимо сделать панель видимой, и "false", если нужно скрыть панель.
Пример команды:
{
"type": "rectSetVisible",
"payload": {
"channel": 10,
"port": 2,
"value": true
}
}
В примере команда делает панель с channel = 10 и port = 2 видимой.
¶ Изменение параметров виджета «Панель»
Команда изменяет параметры виджета "Панель".
В полях "channel" и "port" указываются канал и порт панели, а в поле "data" необходимо указать список параметров, которые необходимо изменить.
Пример команды:
{
"type": "rectSetParams",
"payload": {
"channel": 130,
"port": 30,
"data": {
"style": {
"innerHtml": `${img}`
}}}
Команда изменяет бордюр панели с channel = 100 и port = 20.
¶ Вставка HTML кода в тело виджета «Панель»
Пример команды:
{
"type": "rectInsertHtml",
"payload": {
"channel": 2,
"port": 1,
"data": {
"innerHtml": "<style>div#iy36h { transition: All 0.5s ease; left: 240px; }</style>",
"states": []
}
}
}
¶ Как настроить взаимодействие с редактором логики с помощью виджета "Кнопка"?
В редактор логики можно отправлять различные события при взаимодействии с кнопкой, что позволяет сделать интерфейс более интерактивным и функциональным. Существует несколько типов событий, которые можно настроить:
- Событие при нажатии: срабатывает, когда кнопка нажата.
- Событие при удержании: срабатывает, когда кнопка удерживается в нажатом состоянии.
- Событие при отпускании: срабатывает, когда кнопка отпускается после удержания.
Для того чтобы получить события в редакторе логики в нем необходимо настроить узел "Панель", который будет получать отправленные события в виде объектов в формате json и выводить их на соответствующем выходе в зависимости от типа сообщения (msgtype). События при нажатии/удержании/отпускании будут иметь тип "channel" и будут получены на выходе "Канальные сообщения" узла "Панель". (Подробнее о том, как настроить работу узлов в редакторе логике см. в Руководстве пользователя редактора логики)
Также можно настроить отправку пользовательских сообщений в редактор логики в виде строки при нажатии кнопки. Это помогает передавать дополнительную информацию или команды. Такие сообщения будут иметь тип "string" и будут получены на выходе "Строковые сообщения" узла "Панель".
Настройка отправки событий:
- Установите значение порта больше нуля.
- Установите значение канала на "Да" и задайте значение канала.
После установки значения канала кнопки появится возможность настроить события при удержании и отпускании кнопки. Для того чтобы события отправлялись необходимо в соответствующих настройках установить значение "Отправлять"
Для события удержания потребуется задать время, в течение которого кнопка должна быть удержана. Время задается в секундах.
Когда взаимодействие кнопки настроено и проект загружен на контроллер, поведение кнопки будет следующим:
При нажатии: Отправляется сообщение с типом "channel" и значением "value" равным 1 в редактор логики, указывая, что кнопка была нажата. Поля "port" и "channel" соответствуют порту и каналу нажатой кнопки.
{
"panel": value,
"msgtype": "channel",
"port": value,
"channel": value,
"value": 1
}
При удержании: Если кнопка удерживается в течение определенного времени, отправляется сообщение с типом "channel" и значением "value" равным 2, показывая, что кнопка удерживается. Поля "port" и "channel" соответствуют порту и каналу удерживаемой кнопки.
Пример сообщения:
{
"panel": value,
"msgtype": "channel",
"port": value,
"channel": value,
"value": 2
}
При отпускании: После отпускания кнопки отправляется сообщение с типом "channel" и значением "value" равным 0, означая, что кнопка была отпущена. Поля "port" и "channel" соответствуют порту и каналу отпущенной кнопки.
Пример сообщения:
{
"panel": value,
"msgtype": "channel",
"port": value,
"channel": value,
"value": 0
}
Настройка отправки пользовательских сообщений:
- Указать номер порта больше нуля.
- Задать номер канала для кнопки.
- Определить текст сообщения, которое будет отправлено в поле "Строка" во вкладке "Взаимодействие".
Пример сообщения:
{
"panel": value,
"msgtype": "string",
"port": value,
"channel": value,
"value": "строка"
}
¶ Поведение кнопки в интерфейсе
При первом запуске интерфейса, загруженного на контроллер, кнопке автоматически присваивается состояние "Состояние 1", что определяет её начальное поведение.
Зависимость поведения кнопки от настроек:
Отображение кнопки: Если в настройках кнопки параметр "Показать" установлен в значение "нет", кнопка не будет отображаться в интерфейсе.
Активность кнопки: Если в настройках кнопки параметр "Активность" установлен в значение "нет", кнопка не будет реагировать на нажатия. Это означает, что она будет отключена, и никакие события не будут отправляться в редактор логики при попытке нажатия/удержания/отпускания.
Поведение кнопки в зависимости от настройки "Обратная связь":
Нет: Кнопка не будет показывать визуальные изменения при нажатии или при применении команды изменения состояния (buttonSetState), при этом события при нажатии/удержании/отпускании все равно отправляются в систему логики.
Мгновенное: Кнопка будет сразу показывать визуальные изменения при нажатии/отпускании, но не будет реагировать команду изменения состояния (buttonSetState). События при нажатии/удержании/отпускании будут отправляться в редактор логики.
Канал: В режиме канала кнопка визуально реагирует только на команды управления, но не на нажатия. При нажатии/удержании/отпускании события будут отправляться в редактор логики.
Для того чтобы настроить обратную связь у кнопки в редакторе интерфейса выберете вкладку "Взаимодействие" и установите тип обратной связи: нет, канал, мгновенное.
¶ Для чего нужен виджет "Слайдер" и как его настроить
Виджет "Слайдер" - это элемент интерфейса, который позволяет пользователю выбирать значение из диапазона, перемещая ползунок по шкале.
В интерфейсе значение уровня слайдера можно изменить с помощью ползунка или по нажатию на кнопку.
¶ Как добавить слайдер?
Выберите в toolbar иконку виджета "Слайдер" вертикального или горизонтального и нажмите на нее.
Далее, удерживая кнопку мыши, перенесите виджет в рабочую область для того, чтобы добавить его на страницу.
Обратите внимание, виджет можно добавить только на выбранную страницу.
Вы можете настроить расположение слайдера, выбрав его в рабочей области и переместив в нужное место на странице.
Вы также можете настроить позицию во вкладке основное.
¶ Как настроить стили для виджета "Слайдера"
В разделе настроек стиля предоставляется возможность изменения цвета фона и цвета заполнения слайдера. Для этого перейдите на вкладку "Стили" и найдите параметр "Цвет фона" и "Цвет заполнения". Кликните на цветной квадрат для открытия окна выбора цвета.
Для слайдера предусмотрена возможность добавления иконки. Для этого выберите добавить иконку и в открывшейся галерее выберите необходимое изображение. Добавить изображение можно формата jpg, png, svg.
После добавления вы можете настроить размер и расположение иконки. При добавлении иконки ей задается автоматический размер. Иконку также можно растянуть, вписать или задать ручной размер.
Для слайдера можно настроить бордюр. По умолчанию бордюр не задан. Для того чтобы его настроить, в параметре "Бордюр" установите значение "Да". Затем выберите цвет бордюра, размер, а также тип линии: точечная, двойная, прерывистая, сплошная.
Для слайдера можно настроить скругление углов, установив общее значение, которое будет применяться ко всем углам, или задать отдельные значения скругления для каждого угла.
В настройках имеется возможность задать тень слайдера, внешнюю или внутреннюю.
Для слайдера можно задать общую прозрачность и общее размытие. Для настройки во вкладке "Стили" найдите соответствующие настройки и задайте значение.
¶ Как настроить слайдер?
Для того чтобы стало возможным изменять значения на слайдере в интерфейсе необходимо установить его в активный режим. Для этого во выделите виджет слайдер и во вкладке Взаимодействие для настройки "Режим работы" установите значение "Активный". Если для слайдера установить неактивный режим, то он не будет реагировать на нажатия.
Для слайдера необходимо установить диапазон значений. Слайдер по умолчанию настроен на диапазон от 0 до 100. Однако, при необходимости, можно задать и другие значения, включая отрицательные.
Установите шаг изменения. Эта настройка определяет величину при изменении значения слайдера.
При перемещении ползунка слайдера новое значение вычисляется с учетом заданного шага. Значение слайдера всегда должно быть кратно этому шагу. Если пользователь пытается установить значение, не кратное шагу, оно будет автоматически округлено до ближайшего допустимого значения, кратного заданному шагу.
Например:
- Шаг: 10.
- Минимальное значение: 0.
- Максимальное значение: 100.
В этом случае ползунок может принимать значения: 0, 10, 20, 30, ..., 100.
Настройте, каким образом будет происходить взаимодействие со слайдером в интерфейсе с помощью настройки "Установка касанием". Эта функция добавляет дополнительную гибкость в использовании слайдера.
- Если установка касанием выключена, пользователи могут перемещать слайдер только плавно, что подходит для более точных регулировок.
- Если настройка включена, пользователи могут устанавливать значения слайдера с помощью простого касания, что ускоряет процесс выбора нужного значения и делает интерфейс более интерактивным и удобным.
¶ Как управлять слайдером через виджет кнопка?
В редакторе доступна настройка "Тип управления уровнем", с помощью которой можно управлять слайдером через виджет "Кнопка". По умолчанию эта настройка имеет значение "нет", что означает, что нажатие кнопки не будет изменять уровень слайдера.
Вы также можете выбрать один из двух типов управления: абсолютный или относительный.
Абсолютный тип: при выборе этого типа после нажатия на кнопку слайдер автоматически установится на значение, указанное в настройке. Это удобно, если вы хотите, чтобы слайдер всегда устанавливался в определенное значение.
Относительный тип: при выборе этого типа и нажатии на кнопку значение слайдера изменится на заданную величину. Положительное значение увеличит уровень, а отрицательное — уменьшит. Это полезно, если вы хотите регулировать уровень слайдера на фиксированные шаги вверх или вниз.
Для настройки работы слайдера в обоих типах управления вам потребуется указать порт, канал и величину изменения уровня.
¶ Как настроить взаимодействие с редактором логики для виджета слайдер?
Для настройки отправки сообщений от слайдера в редактор логики, укажите во вкладке "Взаимодействие" слайдера значения порта и канала. Это позволит передавать значение слайдера при нажатии на него в интерфейсе в редактор логики.
Для того чтобы получить сообщение в редакторе логики с новым значением уровня слайдера в нем необходимо настроить узел "Панель". Сообщение будет отправлено в виде объекта в формате json с типом (msgtype) "level" и будут получены на выходе "Уровневые сообщения" узла "Панель". (Подробнее о том, как настроить работу узлов в редакторе логике см. в Руководстве пользователя редактора логики)
Вы можете настроить отправку событий в редактор логики при нажатии и отпускании для слайдера.
Для этого:
- Установите значение порта больше нуля.
- Установите значение канала на "Да" и задайте значение канала.
- После установки значения канала слайдера появится возможность настроить события при нажатии и отпускании слайдера. Для того чтобы события отправлялись необходимо в соответствующих настройках установить значение "Отправлять".
Для получения событий в редакторе логики необходимо настроить узел "Панель". События при нажатии/отпускании будут иметь тип "channel" и будут получены на выходе "Канальные сообщения" узла "Панель".
При нажатии: Отправляется сообщение с типом "channel" и значением "value" равным 1 в редактор логики при нажатии на слайдер.
{
"panel": value,
"msgtype": "channel",
"port": value,
"channel": value,
"value": 1
}
При отпускании: Отправляется сообщение с типом "channel" и значением "value" равным 1 в редактор логики при отпускании слайдера.
{
"panel": value,
"msgtype": "channel",
"port": value,
"channel": value,
"value": 0
}
¶ Для чего нужен виджет "Панель" и как его настроить
Панель — это элемент пользовательского интерфейса, который часто используется для отображения информации и/или элементов управления.
¶ Как добавить панель
Выберите в toolbar иконку виджета "Слайдер" вертикального или горизонтального и нажмите на нее.
Далее, удерживая кнопку мыши перенесите виджет в рабочую область для того чтобы добавить его на страницу.
Обратите внимание, виджет можно добавить только на выбранную страницу.
Вы можете настроить расположение слайдера, выбрав его в рабочей области и переместив в нужное место на странице.
Вы также можете настроить позицию во вкладке основное.
¶ Как настроить стили для виджета "Панель"
В разделе настроек стиля предоставляется возможность настройки цвета панели. Для этого перейдите на вкладку "Стили" и найдите параметр "Цвет фона". Кликнув на цветной квадрат, вы откроете диалоговое окно для выбора цвета.
В редакторе добавлена возможность использовать изображение в качестве фона панели, а также возможность добавить иконку. Для этого выберите добавить изображение/иконку и в открывшейся галерее выберите необходимое изображение. Добавить изображение можно формата jpg, png, svg.
После добавления вы можете настроить размер и расположение изображения.
При добавлении изображения ему задается автоматический размер, изображение также можно растянуть, вписать или задать ручной размер.
Для панели можно настроить бордюр и скругление, тень, внешнюю или внутреннюю, текст, общее размытие и общую прозрачность. Настройки аналогичны настройкам для кнопки.
¶ Управление панелью через виджет "Слайдер"
Для передачи значения слайдера в виджет "Панель" и обеспечения их взаимодействия выполните следующие шаги:
Сначала создайте виджет "Панель" и укажите для нее порт и канал, чтобы задать параметры для взаимодействия.
Затем выберите виджет "Слайдер" в интерфейсе. Перейдите во вкладку "Взаимодействие" в настройках слайдера. Найдите настройку "Отправлять значение в виджет" и установите ее в положение "Да". После активации этой настройки появятся дополнительные поля для ввода. Укажите в них порт и канал ранее созданной панели.
При каждом перемещении ползунка слайдера новое значение будет автоматически отправляться в панель.
¶ Предпросмотр для виджетов
Для открытия модального окна предпросмотра выберите «Предпросмотр» 
.
Кнопка "Предпросмотр" будет доступна только после выделения виджета. При нажатии на кнопку откроется окно "Предпросмотр", в котором будет отображаться выбранный виджет.
Если виджет открыт в окне "Предпросмотр", изменения его свойств будут отображены в этом окне.
Виджет "Кнопка" будет отображен в окне предпросмотра в выключенном состоянии. В окне «Предпросмотр» для кнопки будут показаны статусы: нажатия, активности и видимости.
Состояние кнопки можно менять нажатием левой кнопки мыши. При нажатии и удержании выводится статус "Нажатие: Да", при отпускании - "Нажатие: Нет". Если для кнопки настроена анимация, она будет воспроизводиться в окне предпросмотра.
Если видимость кнопки установлена на "нет", она не будет показана в окне предпросмотра, и будет выведен статус "Видимость: нет". Если видимость установлена на "да", кнопка будет показана, и будет выведен статус "Видимость: да".
Если активность кнопки установлена на "нет", кнопка будет недоступна для нажатия, и будет выведен статус "Активность: нет". Если активность установлена на "да" , кнопка будет доступна для нажатия, и будет выведен статус "Активность: да".
При выборе виджета "Панель" он будет отображен в окне предпросмотра. Для панели будет показан статус видимости.
Если видимость панели установлена на "нет", она не будет показана в окне предпросмотра, и будет выведен статус "Видимость: нет".
При выборе виджета "Слайдер" он будет отображен в окне предпросмотра. Уровень слайдера можно менять плавно, а также касанием.
Состояние слайдера можно менять с помощью нажатия левой кнопкой мыши. При нажатии на слайдер и удержании выводится статус "Нажатие: Да", при отпускании - "Нажатие: Нет".
Если видимость слайдера установлена на "нет", он не будет показан в окне предпросмотра, и будет выведен статус "Видимость: нет". Если видимость установлена на "да", слайдер будет показан, и будет выведен статус "Видимость: да".
Если активность слайдера установлена на "неактивен", слайдер будет недоступен для нажатия, и будет выведен статус "Активность: нет". Если активность установлена на "активен", слайдер будет доступен для нажатия, и будет выведен статус "Активность: да".
¶ Как работать с инструментами
Используя различные инструменты и настройки, вы можете легко управлять расположением, видимостью и поведением виджетов, а также выполнять различные действия с помощью горячих клавиш и контекстного меню.
¶ Доступные инструменты
¶ Перемещение виджетов
Перемещение на передний план:
- При выделении виджета или группы виджетов и нажатии на кнопку "Перемещение на передний план", выбранные элементы будут перемещены поверх всех других виджетов на странице. Это полезно, когда необходимо, чтобы определенный элемент всегда был виден и не перекрывался другими элементами.
Перемещение на задний план:
- При выделении виджета или группы виджетов и нажатии на кнопку "Перемещение на задний план", выбранные элементы будут перемещены под все другие виджеты на странице. Это позволяет скрыть элемент под другими слоями, сохраняя его на странице.
Перемещение на передний план на один уровень:
- При выделении виджета или группы виджетов и нажатии на кнопку "Перемещение на передний план на один уровень", выбранные элементы будут перемещены на один уровень вверх, т.е. поверх ближайшего вышележащего виджета. Это удобно для точной настройки порядка отображения элементов.
Перемещение на задний план на один уровень:
- При выделении виджета или группы виджетов и нажатии на кнопку "Перемещение на задний план на один уровень", выбранные элементы будут перемещены на один уровень вниз, т.е. под ближайший нижележащий виджет. Это позволяет точно управлять порядком слоев на странице.
¶ Выравнивание виджетов
Выравнивание по левому краю:
- Все выделенные виджеты будут выровнены по левому краю главного виджета. Это означает, что левые края всех выделенных виджетов будут находиться на одной вертикальной линии с левым краем главного виджета. Это полезно для создания аккуратного и организованного интерфейса.
Выравнивание по центру (по вертикали):
- Все выделенные виджеты будут выровнены по вертикали относительно центра главного виджета. Это означает, что центры всех выделенных виджетов будут находиться на одной вертикальной линии с центром главного виджета. Этот инструмент помогает визуально центрировать элементы, улучшая симметрию интерфейса.
Выравнивание по центру (по горизонтали):
- Все выделенные виджеты будут выровнены по горизонтали относительно центра главного виджета. Это означает, что центры всех выделенных виджетов будут находиться на одной горизонтальной линии с центром главного виджета. Такое выравнивание улучшает восприятие и удобство использования интерфейса.
Выравнивание по правому краю:
- Все выделенные виджеты будут выровнены по правому краю главного виджета. Это означает, что правые края всех выделенных виджетов будут находиться на одной вертикальной линии с правым краем главного виджета. Это помогает поддерживать визуальную гармонию в расположении элементов.
Выравнивание по верхнему краю:
- Все выделенные виджеты будут выровнены по верхнему краю главного виджета. Это означает, что верхние края всех выделенных виджетов будут находиться на одной горизонтальной линии с верхним краем главного виджета. Это полезно для создания ровных верхних границ элементов.
Выравнивание по нижнему краю:
- Все выделенные виджеты будут выровнены по нижнему краю главного виджета. Это означает, что нижние края всех выделенных виджетов будут находиться на одной горизонтальной линии с нижним краем главного виджета. Это упрощает создание аккуратных и выровненных нижних границ.
¶ Центрирование относительно страницы
При нажатии на соответствующую иконку выделенный виджет или группа виджетов будут выровнены по центру страницы. Это позволяет быстро разместить элементы в центре экрана, создавая симметричный интерфейс.
¶ Действия с виджетами
Копирование:
- Выделенные виджеты можно копировать с помощью горячих клавиш Ctrl + C или через контекстное меню, вызываемое правым кликом мыши.
Вставка:
- Вырезанные или скопированные виджеты можно вставить с помощью горячих клавиш Ctrl + V или через контекстное меню.
Вырезание:
- Выделенные виджеты можно вырезать с помощью горячих клавиш Ctrl + X или через контекстное меню. Вырезанные виджеты перемещаются в буфер обмена и могут быть вставлены в другое место интерфейса.
Выделение виджетов:
-
В редакторе есть возможность выделить несколько виджетов на странице одновременно. Для этого используйте горячие клавиши Ctrl + клик. Для выделения всех виджетов на странице используйте клавиши Ctrl + A.
-
Для отмены выделения используйте ESC.
Перемещение виджетов и группы виджетов:
-
Для перемещения виджета используйте стрелки на клавиатуре. Нажатие на стрелки двигает элемент на 1 пиксель. Если удерживать Shift, движение происходит на 10 пикселей.
-
При выделении нескольких виджетов на странице они будут перемещаться группой.
Отмена действия (на шаг назад) и возврат действия (на шаг вперед):
-
Для отмены действия используйте горячие клавиши Ctrl + Z на Windows и Command + Z на Mac.
-
Для возврата действия используйте горячие клавиши Ctrl + Y на Windows и Command + Shift + Z на Mac.
Перемещение холста:
- Для перемещения холста Shift + зажатая левая кнопка мыши.
¶ Словарь терминов
| Термин | Определение |
|---|---|
| Анимация кнопки | Последовательное изменение состояний кнопки с определенной скоростью. Анимация создается для плавного перехода между различными состояниями кнопки. |
| Виджет | Интерактивный элемент интерфейса, который можно добавить на страницу для выполнения определенных функций. Пример виджета: "Кнопка", "Слайдер", "Панель". |
| Всплывающая страница | Диалоговое окно, отображаемое поверх стандартной страницы. Используется для дополнительной информации или действий, которые требуют временного взаимодействия. |
| Дерево проекта | Область, где отображается структура проекта, позволяющая пользователю легко навигировать между различными элементами интерфейса и управлять ими. |
| Диапазон значений слайдера | Это предопределенные минимальные и максимальные значения, в пределах которых может изменяться уровень слайдера. Диапазон задается в настройках слайдера, и по умолчанию он установлен от 0 до 100, но может быть изменен в зависимости от требований интерфейса. |
| IP-адрес контроллера | Сетевой адрес устройства, на котором установлен программный контроллер, обеспечивающий работу интерфейса и обработку событий. |
| ID проекта | Уникальный идентификатор, присваиваемый проекту для его различения среди других проектов в системе. |
| Кнопка | Элемент управления в интерфейсе, предназначенный для выполнения определенного действия при нажатии. Она может быть настроена по размеру, цвету и расположению в редакторе интерфейса. Кнопка может выполнять различные функции, такие как открытие/закрытие страниц, изменение состояния других виджетов или отправка команд в проект логики. |
| Командное управление | Способ взаимодействия с интерфейсом через текстовые команды, которые задаются в поле "Ввод команды" и выполняются при активации кнопки. |
| Команда | Это инструкция или набор инструкций, задаваемых в системе для выполнения определенного действия. В контексте программного обеспечения команда используется для управления элементами интерфейса, такими как кнопки, страницы или виджеты. Команды определяют, какое действие должно быть выполнено системой в ответ на определенное событие, например нажатие кнопки. |
| Контроллер | Устройство, предназначенное для домашней и промышленной автоматизации и мониторинга: опроса датчиков и счетчиков, использования в качестве УСПД, в системах АСКУЭ, а также в системах «умного офиса». |
| Обратная связь | Параметр, определяющий, как кнопка будет визуально реагировать на взаимодействие пользователя или на команды изменения состояния. Имеет три значения: "нет" (без визуальных изменений), "мгновенная" (мгновенная реакция на нажатие) и "канал" (реакция только на команды). |
| Панель | Элемент пользовательского интерфейса, предназначенный для отображения информации, инструментов или элементов управления. Панель может содержать различные виджеты. |
| Параметры виджетов | Секция, в которой можно настраивать свойства и параметры выбранных виджетов, такие как размер, цвет, поведение и другие характеристики. |
| Предпросмотр | Функция в пользовательском интерфейсе, позволяющая увидеть, как будет выглядеть и работать выбранный виджет до его окончательного размещения или сохранения изменений. В режиме предпросмотра можно тестировать взаимодействие с виджетом, проверять его визуальные параметры и поведение, такие как нажатие кнопок, изменение значений слайдера или видимость элементов. |
| Проект | Создаваемая пользователем рабочая среда, включающая в себя настройки интерфейса, такие как название, ID, размеры экрана и IP-адрес контроллера, в которой разрабатывается и настраивается интерфейс для управления устройствами. |
| Рабочая область | Основная часть редактора интерфейса, где происходит создание и редактирование проекта интерфейса путём размещения и настройки блоков. |
| Редактор интерфейса | Модуль, представляющий собой блочный конструктор для создания пользовательских интерфейсов, которые позволяют управлять устройствами мультимедийного контроллера без необходимости знания программирования. |
| Редактор логики | Это модуль, представляющий собой конструктор для создания логики управления устройств мультимедийного контроллера без необходимости знания программирования, а также управления интерфейсом созданным в редакторе интерфейса |
| Слайдер | Элемент интерфейса, позволяющий пользователю выбирать значение из заданного диапазона, перемещая ползунок по шкале. Слайдеры могут быть настроены на изменение цвета, добавление иконок, скругление углов и другие стили. |
| Состояние "Все" | Шаблонное состояние, задающее базовые стили для всех других состояний кнопки. Настройки в этом состоянии распространяются на все остальные состояния кнопки, если они не изменены отдельно. |
| Состояние кнопки | Набор стилей, применяемых к кнопке в определенные моменты взаимодействия с ней. Состояние может быть "неактивным" (при обычном отображении кнопки) и "активным" (при нажатии на кнопку). |
| Слот | Ячейка памяти на контроллере, в которую загружается проект интерфейса. Номер слота используется для доступа к интерфейсу. |
| Statusbar | Информационная строка внизу экрана, которая отображает текущий статус работы, полезные сообщения, информацию об ошибках и другие сведения о процессе редактирования. |
| Стандартная страница | Основная страница интерфейса, на которой отображается содержимое проекта. Её размер задаётся в настройках проекта и применяется ко всем страницам этого типа. |
| Toolbar с инструментами | Панель инструментов, содержащая набор элементов для работы с интерфейсом, таких как добавление новых блоков, редактирование существующих и другие функции. |
| Уровень слайдера | Текущее значение, отображаемое на шкале слайдера, которое пользователь может изменять, перемещая ползунок. Этот уровень определяется положением ползунка на шкале и может варьироваться в пределах заданного диапазона значений, от минимального до максимального. |
| Шаг изменения слайдера | Величина, на которую изменяется уровень слайдера при его перемещении. Настройка шага определяет кратность изменения значений, что гарантирует точное позиционирование ползунка в пределах заданного диапазона. |