Команда RectInsertHtml используется для вставки HTML-кода в виджет "Панель" с указанными портом и каналом.
Синтаксис команды:
{
"type": "rectInsertHtml",
"payload": {
"channel": 3,
"port": 2,
"data": {
"innerHtml": "",
"states": []
}
}
}
Переменные команды:
| Переменные | Обязательность | Описание | |
|---|---|---|---|
| channel | Да | Канал виджета или диапазон каналов виджета(ов). Канал для панели задается во вкладке "Взаимодействие". | |
| port | Да | Порт виджета. Порт для панели задается во вкладке "Взаимодействие". | |
| data | Да | Объект, содержащий HTML-код и массив состояний. | |
| innerHtml | Да | Параметр внутри data, содержащий HTML-код, который будет вставлен в указанный контейнер или элемент.
Для корректного выполнения команды необходимо обязательно прописать innerHtml в data. Значение внутри кавычек может быть не указано. |
|
| states | Да | Параметр внутри data, представляющий массив, который содержит информацию о состояниях или параметрах, применяемых к виджету.
Для корректного выполнения команды необходимо обязательно прописать states в data. Если для вставки используется html-код, не создающий виджеты, то параметр передаётся как пустой массив []. |
Предварительно создайте в редакторе интерфейса виджет "Панель". На вкладке "Взаимодействие" установите порт и канал, которые будут использоваться в команде.
В редакторе логики для отправки команды вы можете использовать узел Вставка.
С помощью команды RectInsertHtml создать виджеты кнопка, панель или слайдер внутри панели.
Синтаксис команд указан в разделах:
При создании виджета в команде нужно прописать уникальный id виджета, который не должен совпадать с id других виджетов.
Вы можете задать произвольное количество символов в параметре id. Виджеты, созданные в редакторе интерфейса, получают идентификатор, состоящий преимущественно из 4 символов. Чтобы избежать пересечений между виджетами, созданными командой, и теми, что добавлены в интерфейсе, используйте в id для командных виджетов 5 или 6 символов.
Id указывается в параметре "innerHtml":
"innerHtml": "<button type='button' id='ikvjv'></button>"
Такой же id должен быть в состояниях:
"states":
[
{
"type": "button",
"feedback": "instant",
...
"id": "ikvjv",
}
]
Механизм сопоставляет id в HTML-коде с id в списке состояний, обеспечивая корректную работу виджета.
При создании виджета через команду необходимо указать следующие обязательные параметры для состояний в объектах массива states:
| Параметр | Описание |
|---|---|
| "type" | Тип виджета. Возможные значения: 1. Виджет кнопка: "type": "button" 2. Виджет вертикальный слайдер: "type": "verticalSlider" 3. Виджет горизонтальный слайдер: "type": "horizontalSlider" 4. Виджет панель: "type": "panel" |
| "id" | Уникальный идентификатор (ID) виджета. Значение должно быть уникальным. |
| "stateId" | Идентификатор состояния, к которому будут применены настройки. У кнопки может быть несколько состояний, аналогично настройке состояний кнопки во вкладке «Стили» в редакторе интерфейса. |
| "numberOfStates" | Количество состояний. Для кнопки количество может быть больше 1. |
Необязательные параметры для состояний можно оставить пустыми; в этом случае при создании виджета будут применены значения по умолчанию. Значения по умолчанию для состояний указаны в Приложении 1.
При создании виджета с помощью команды можно настроить его стили и основные параметры, такие как размер, положение внутри панели, активность и другие.
Чтобы задать нужные параметры, укажите соответствующие значения. Например:
Полный список параметров и допустимых значений представлен в Приложении 1.
Виджету, созданному через команду, можно также задать логику для взаимодействий, например, отправлять событие в редактор логики при нажатии или отпускании кнопки:
Синтаксис команды:
{
"type": "rectInsertHtml",
"payload": {
"channel": 50,
"port": 1,
"data": {
"innerHtml": "<button type='button' id='ikvjv'></button>",
"states": [{
"type": "button",
"feedback": "instant",
"port": "0",
"channel": "",
"holdTime": 0.1,
"levelControlType": "none",
"portSlider": "",
"channelSlider": "",
"valueSlider": "",
"string": "",
"textArea": "",
"hasChannel": false,
"mouseUp": false,
"hold": false,
"activity": true,
"visible": true,
"abovePages": false,
"numberOfStates": 1,
"id": "ikvjv",
"stateId": 1,
"styles": "",
"text": "Содержимое кнопки",
"storyboard": [],
"animationTime": null,
"style": {
"border-radius": "20px 20px 20px 20px",
"border-top-left-radius": "20px",
"border-top-right-radius": "20px",
"border-bottom-right-radius": "20px",
"border-bottom-left-radius": "20px",
"color": "#ffffff",
"border": "1px solid #000",
"opacity": "0.9",
"background": "#2363ba9c",
"box-shadow": "none",
"font-family": "Arial",
"font-size": "13px",
"font-weight": "400",
"text-shadow": "#000 1px 0px 10px",
"filter": "blur(1px)",
"text-decoration": "unset",
"width": "180px",
"height": "41px",
"left": "249px",
"top": "241px"
},
"textStyles": {
"x": "0",
"y": "0",
"position": "absolute",
"xCenter": false,
"yCenter": false,
"top": true,
"left": true,
"bottom": false,
"right": false
},
"iconStyles": {
"x": "0",
"y": "0",
"position": "absolute",
"width": "auto",
"height": "auto",
"size": "auto"
},
"images": {
"icon": "bf49.jpg",
"background": null
}
}
}]
}
}
При создании виджета вы можете добавить ему несколько состояний. Для этого в команде укажите несколько объектов с состояниями и задайте соответствующие стили.
{
"type": "rectInsertHtml",
"payload": {
"channel": 50,
"port": 1,
"data": {
"innerHtml": "<button type='button' id='ikvjv'></button>",
"states": [{
"type": "button",
"feedback": "instant",
"port": "1",
"channel": "1",
"holdTime": 0.1,
"levelControlType": "none",
"portSlider": "",
"channelSlider": "",
"valueSlider": "",
"string": "",
"textArea": "",
"hasChannel": false,
"mouseUp": false,
"hold": false,
"activity": true,
"visible": true,
"abovePages": false,
"numberOfStates": 2,
"id": "ikvjv",
"stateId": 1,
"styles": "",
"text": "Пример текста",
"storyboard": [],
"animationTime": null,
"textStyles": {
"x": "0",
"y": "0",
"position": "absolute",
"xCenter": false,
"yCenter": false,
"top": true,
"left": true,
"bottom": false,
"right": false
},
"iconStyles": {
"x": "0",
"y": "0",
"position": "absolute",
"width": "auto",
"height": "auto",
"size": "auto"
},
"images": {
"icon": null,
"background": null
}
},
{
"type": "button",
"feedback": "instant",
"port": "1",
"channel": "1",
"holdTime": 0.1,
"levelControlType": "none",
"portSlider": "",
"channelSlider": "",
"valueSlider": "",
"string": "",
"textArea": "",
"hasChannel": false,
"mouseUp": false,
"hold": false,
"activity": true,
"visible": true,
"abovePages": false,
"numberOfStates": 2,
"id": "ikvjv",
"stateId": 2,
"styles": "",
"text": "Пример текста",
"storyboard": [],
"animationTime": null,
"textStyles": {
"x": "0",
"y": "0",
"position": "absolute",
"xCenter": false,
"yCenter": false,
"top": true,
"left": true,
"bottom": false,
"right": false
},
"iconStyles": {
"x": "0",
"y": "0",
"position": "absolute",
"width": "auto",
"height": "auto",
"size": "auto"
},
"images": {
"icon": null,
"background": null
}
}]
}
}
}
}
}
При создании виджета "Слайдер" с помощью команды можно настроить его стили и основные параметры, такие как размер, положение, активность и прочее. Полный перечень параметров и допустимых значений приведен в Приложении 1.
Для слайдера также доступна настройка логики взаимодействия, включая отправку текущего уровня при изменении и событий нажатия или отпускания:
Синтаксис команды:
{
"type": "rectInsertHtml",
"payload": {
"channel": 50,
"port": 1,
"data": {
"innerHtml": "<div data-slider=\"true\" id=\"ixn3l2\" class=\"rootVerticalSlider ixn3l\"><div draggable=\"false\" class=\"levelVerticalSlider\"></div></div>",
"states": [{
"port": "1",
"channel": "2",
"hasChannel": true,
"onPush": false,
"onRelease": false,
"activity": true,
"valueMin": "0",
"valueMax": "100",
"touchInstallation": true,
"stepValue": "1",
"sendToWidget": false,
"portWidget": "",
"channelWidget": "",
"visible": true,
"type": "verticalSlider",
"id": "ixn3l2",
"numberOfStates": 1,
"stateId": 1,
"styles": "ixn3l2",
"style": {
"border-radius": "20px 20px 20px 20px",
"border-top-left-radius": "20px",
"border-top-right-radius": "20px",
"border-bottom-right-radius": "20px",
"border-bottom-left-radius": "20px",
"color": "#ffffff",
"border": "1px solid #000",
"opacity": "0.9",
"background": "#2363ba9c",
"box-shadow": "none",
"filter": "blur(1px)",
"text-decoration": "unset",
"width": "180px",
"height": "41px",
"left": "249px",
"top": "241px"
},
"iconStyles": {
"x": "0",
"y": "0",
"position": "absolute",
"width": "auto",
"height": "auto",
"size": "auto"
},
"images": {
"icon": null,
"background": null
}
}]
}
}
}
При создании виджета "Панель" вы также можете настроить его стили и основные параметры, включая размеры, расположение, активность и многое другое. Полный список параметров доступен в Приложении 1.
Важно: если id панели совпадает с id существующей панели, команда попытается бесконечно рендерить панель внутри самой себя. Для корректной работы задавайте уникальные id в полях states и innerHtml, обеспечивая, чтобы каждому HTML-тегу соответствовало собственное состояние или список состояний с уникальным id.
Синтаксис команды:
{
"type": "rectInsertHtml",
"payload": {
"channel": 50,
"port": 1,
"data": {
"innerHtml": "<div data-panel=\"true\" id=\"il3p2\" class=\"il3p2\">4 состояния</div>",
"states": [{
"type": "panel",
"port": "1",
"channel": "50",
"hasChannel": false,
"visible": true,
"id": "il3p2",
"numberOfStates": 1,
"stateId": 1,
"styles": "il3p2",
"text": "4 состояния",
"style": {
"border-radius": "20px 20px 20px 20px",
"border-top-left-radius": "20px",
"border-top-right-radius": "20px",
"border-bottom-right-radius": "20px",
"border-bottom-left-radius": "20px",
"color": "#ffffff",
"border": "1px solid #000",
"opacity": "0.9",
"background": "#2363ba9c",
"box-shadow": "none",
"font-family": "Arial",
"font-size": "13px",
"font-weight": "400",
"text-shadow": "#000 1px 0px 10px",
"filter": "blur(1px)",
"text-decoration": "unset",
"width": "180px",
"height": "41px",
"left": "249px",
"top": "241px"
},
"textStyles": {
"x": "89",
"y": "0",
"position": "absolute",
"xCenter": true,
"yCenter": false,
"top": true,
"left": false,
"bottom": false,
"right": false
},
"iconStyles": {
"x": "0",
"y": "0",
"position": "absolute",
"width": "auto",
"height": "auto",
"size": "auto"
},
"images": {
"icon": null,
"background": null
}
}]
}
}
}
Таблица 1. Значения по умолчанию для кнопки
| Параметр | Наименование ключа | Значение по умолчанию, если параметр не задан | |
|---|---|---|---|
| Тип | "type" | Обязательно для заполнения. Значения по умолчанию нет "type": "button" | |
| ID | "id" | Обязательно для заполнения. Значения по умолчанию нет. Строка | |
| ID состояния | "stateId" | Обязательно для заполнения. Значения по умолчанию нет. Число по порядку. | |
| Кол-во состояний | "numberOfStates" | Обязательно для заполнения. Значения по умолчанию 2. | |
| Обратная связь | feedback | "feedback": "instant" Возможные значения: "instant" - мгновенная "channel" - канал "none" - нет |
|
| Порт | port | "0" | |
| Канал | channel | "" | |
| Время удержания | holdTime | 0.1 | |
| Тип управления уровнем | levelControlType | "levelControlType": "none" | |
| Порт слайдера | portSlider | "portSlider": "" | |
| Канал слайдера | channelSlider | "channelSlider": "" | |
| Значение для уровня слайдера | valueSlider | "valueSlider": "" | |
| Строка | string | "string": "", | |
| Ввод команды | textArea | "textArea": "" | |
| hasChannel | "hasChannel": false, | ||
| Событие при отпускании | "hasChannel": false, | "mouseUp": false, | |
| Событие при нажатии | hold | "hold": false, | |
| Поверх страниц | abovePages | "abovePages": false, | |
| Активность | activity | "activity": true | |
| Показать | visible | "visible": true | |
| Текст | text | Значение текст берется отсюда, а не из верстки (свойство innerHtml)."text": "Содержимое кнопки" | |
| Стили виджета | style | Ниже указаны стили по умолчанию. При желании можно добавить любые css стили. Параметр не обязательный. Если его не указать, то описанные стили будут применены автоматически. | |
| Позиция X | left | "0px" | |
| Позиция Y | top | "0px" | |
| Ширина | width | "180px" | |
| Высота | height | "41px" | |
| Цвет фона | background | "#3b4552", | |
| text-decoration | “unset” | ||
| overflow | “hidden” | ||
| Бордюр | border | “none” | |
| Общее скругление | border-radius | "0px 0px 0px 0px" | |
| Верхнее левое скругление | border-top-left-radius | "0px" | |
| Верхнее правое скругление | border-top-right-radius | "0px" | |
| Нижнее левое скругление | border-bottom-right-radius | "0px" | |
| Нижнее правое скругление | border-bottom-left-radius | "0px" | |
| Тень | box-shadow | box-shadow: none Возможные значения: box-shadow:inset 1px 2px 3px 4px #000, где inset - указывает, что тень внутренняя если параметр отсутствует, то тень будет внешняя. 1px - смещение тени по X 2px- смещение тени по Y 3px- размытие тени 4px- размер тени #000 - Цвет тени box-shadow:none - тень не задана |
|
| Цвет текста | color | #ffffff | |
| Шрифт | font-family | "font-family": "Arial" | |
| Размер текста | font-size | "font-size": "13px" | |
| Тень текста | text-shadow | "text-shadow": none, | |
| Координата по Z | z-index | 1 | |
| Отступы | padding | 0 | |
| Позиционирование | position | absolute | |
| Общая прозрачность | opacity | “opacity": "1" | |
| Общее размытие | filter | "filter": "blur(1px)" | |
| Настройки текста | textStyles | ||
| Смещение текста по X | x | Задается без пикселей. Работает, только если все флаги позиционирования равны false. Значение по умолчанию - "0" | |
| Смещение текста по Y | y | Задается без пикселей. Значение по умолчанию - "0" | |
| Позиционирование | position | “absolute” | |
| Флаг позиционирования по центру горизонтали. | xCenter | false | |
| Флаг позиционирования по центру вертикали. | yCenter | false | |
| Флаг центрирования наверх. | top | true | |
| Флаг центрирования влево. | left | true | |
| Флаг центрирования вниз. | bottom | false | |
| Флаг центрирования вправо. | right | false | |
| Настройки иконки | "iconStyles" | ||
| Смещение иконки по X. | "x": "0" | "x": "0" | |
| Смещение иконки по Y. | "y": "0" | "y": "0" | |
| Позиционирование | "position": "absolute" | "position": "absolute" | |
| Ширина иконки | "width": "auto" | "width": "auto" | |
| Высота иконки | "height": "auto" | "height": "auto" | |
| Высота иконки | "size": "auto" | "size": "auto" | |
| Добавление изображений | "images" | ||
| Ссылка на иконку | "icon": null | "icon": null | |
| Ссылка на картинку заднего фона. | "background": null | "background": null | |
Таблица 2. Значения по умолчанию для панели
| Параметр | Наименование ключа | Значение по умолчанию, если параметр не задан | |
|---|---|---|---|
| Тип | "type" | Обязательно для заполнения. Значения по умолчанию нет "type": "panel" | |
| ID | "id" | Обязательно для заполнения. Значения по умолчанию нет. | |
| ID состояния | "stateId" | Обязательно для заполнения. Значения по умолчанию нет. Число по порядку. | |
| Кол-во состояний | numberOfStates | Значения по умолчанию нет. Не меняется для панели. Всегда нужно задавать 1. | |
| Класс | "styles" | "" | |
| Порт | port | "0" | |
| Канал | channel | "" | |
| Показать | visible | "visible": true | |
| Текст | text | "text": "Содержимое панели" | |
| Стили виджета | style | ||
| Позиция X | left | "0px" | |
| Позиция Y | top | "0px" | |
| Ширина | width | "300px" | |
| Высота | height | "300px" | |
| Цвет фона | background | "#3b4552", | |
| Бордюр | border | "border": "0px solid #000", | |
| Общее скругление | border-radius | "0px 0px 0px 0px" | |
| Верхнее левое скругление | border-top-left-radius | "0px" | |
| Верхнее правое скругление | border-top-right-radius | "0px" | |
| Нижнее левое скругление | border-bottom-right-radius | "0px" | |
| Нижнее правое скругление | border-bottom-left-radius | "0px" | |
| Тень | box-shadow | box-shadow: none Возможные значения: box-shadow:inset 1px 2px 3px 4px #000, где inset - указывает, что тень внутренняя если параметр отсутствует, то тень будет внешняя. 1px - смещение тени по X 2px- смещение тени по Y 3px- размытие тени 4px- размер тени #000 - Цвет тени box-shadow:none - тень не задана |
|
| Цвет текста | color | #ffffff | |
| Шрифт | font-family | "font-family": "Arial" | |
| Размер текста | font-size | "font-size": "13px" | |
| Тень текста | text-shadow | "text-shadow": none, | |
| Общая прозрачность | opacity | “opacity": "1" | |
| Общее размытие | filter | "filter": "blur(1px)" | |
| Настройки иконки | "iconStyles" | ||
| Смещение иконки по X. | "x": "0" | "x": "0" | |
| Смещение иконки по Y. | "y": "0" | "y": "0" | |
| Позиционирование | "position": "absolute" | "position": "absolute" | |
| Ширина иконки | "width": "auto" | "width": "auto" | |
| Высота иконки | "height": "auto" | "height": "auto" | |
| Размер иконки | "size": "auto" | "size": "auto" | |
| Стили текста | "textStyles" | ||
| Смещение текста по X | x | "x": "0", | |
| Смещение текста по Y | y | "y": "0" | |
| Позиционирование | position | “absolute” | |
| Флаг позиционирования по центру горизонтали. | xCenter | false | |
| Флаг позиционирования по центру вертикали. | yCenter | false | |
| Флаг центрирования наверх. | top | true | |
| Флаг центрирования влево. | left | true | |
| Флаг центрирования вниз. | bottom | false | |
| Флаг центрирования вправо. | right | false | |
| Добавление изображений | "images" | ||
| Иконка | "icon": null | "icon": null | |
| Изображение | "background": null | "background": null | |
Таблица 3. Значения по умолчанию для слайдера
| Параметр | Наименование ключа | Значение по умолчанию, если параметр не задан | |
|---|---|---|---|
| Тип | "type" | Обязательно для заполнения. Значения по умолчанию нет. Вариации: “verticalSlider” “horizontalSlider” |
|
| ID | "id" | Обязательно для заполнения. Значения по умолчанию нет. Уникальное значение. Строка | |
| ID состояния | "stateId" | Обязательно для заполнения. Значения по умолчанию нет. Число по порядку. | |
| Кол-во состояний | numberOfStates | Значение не меняется для слайдера. Всегда нужно задавать 1. | |
| Порт | port | "1" | |
| Канал | channel | "" | |
| Отправление события при нажатии | onPush | false | |
| Отправлять событие при отпускании. | onRelease | false | |
| Показать | visible | "visible": true | |
| Режим работы | activity | "activity": true | |
| Минимальное значение | valueMin | "valueMin": "0" | |
| Максимальное значение | valueMax | "valueMax": "100" | |
| Шаг изменения | stepValue | "stepValue": "10" | |
| Установка касанием | touchInstallation | "touchInstallation": false | |
| Отправлять значение в виджет | sendToWidget | "sendToWidget": false | |
| Порт панели | portWidget | "portWidget": "" | |
| Канал панели | channelWidget | "channelWidget": "" | |
| Количество состояний | numberOfStates | Обязательно для заполнения. Значения по умолчанию нет. | |
| Стили виджета | style | ||
| Позиция X | left | "left": "0px" | |
| Позиция Y | top | "top": "0px" | |
| Ширина | width | "300px" | |
| Высота | height | "30px" | |
| Цвет фона | background | ||
| Бордюр | border | "border": "0px solid #000", | |
| Общее скругление | border-radius | "0px 0px 0px 0px" | |
| Верхнее левое скругление | border-top-left-radius | "0px" | |
| Верхнее правое скругление | border-top-right-radius | "0px" | |
| Нижнее левое скругление | border-bottom-right-radius | "0px" | |
| Нижнее правое скругление | border-bottom-left-radius | "0px" | |
| Тень | box-shadow | box-shadow: none Возможные значения: box-shadow:inset 1px 2px 3px 4px #000, где inset - указывает, что тень внутренняя если параметр отсутствует, то тень будет внешняя. 1px - смещение тени по X 2px- смещение тени по Y 3px- размытие тени 4px- размер тени #000 - Цвет тени box-shadow:none - тень не задана |
|
| Общая прозрачность | opacity | “opacity": "1" | |
| Общее размытие | filter | "filter": "blur(1px)" | |
| Настройки иконки | "iconStyles" | ||
| Смещение иконки по X. | "x": "0" | "x": "0" | |
| Смещение иконки по Y. | "y": "0" | "y": "0" | |
| Позиционирование | "position": "absolute" | "position": "absolute" | |
| Ширина иконки | "width": "auto" | "width": "auto" | |
| Высота иконки | "height": "auto" | "height": "auto" | |
| Размер иконки | "size": "auto" | "size": "auto" | |
| Добавление изображений | "images" | ||
| Иконка | "icon": null | "icon": null | |
| Изображение | "background": null | "background": null | |
Для создания списка, в редакторе интерфейсов, на страницу необходимо добавить два элемента "Панель". Первый элемент - сам список. Второй элемент нужен для применения CSS стилей и его можно скрыть. Обоим элементам необходимо настроить порт и канал, для взаимодействия с логикой.
Ниже приведены два варианта списков.
Ниже приведен код узла "функция", который принимает данные, строит список и отправляет его на интерфейс управления.
Пример данных для передачи в функцию может выглядеть так:
{"1":{"title":"Элемент списка 1"},"2":{"title":"Элемент списка 2"},"3":{"title":"Элемент списка 3"}}
Внимание! Переменная list_id берётся из структуры интерфейса. Необходимо открыть интерфейс в браузере, открыть инструменты разработчика(F12) и в дереве документа найти элемент списка и скопировать его ID.
const list_id = "irht"; // данный параметр необходимо посмотреть, открыв в браузере инструменты разработчика
const start_channel = 1000;
let button = "";
let states = [];
let html = `<selection class="verlist1">`;
Object.entries(msg.payload).forEach(([key, title], index) => {
let id = list_id + item_id(parseInt(key));
node.warn(key);
node.warn((index + 1) % 2);
const state = ((index + 1) % 2) === 1 ? 1 : 2;
node.warn(state);
html += `
<p class="listItem">
<button type='button' id='${id}'></button>
</p>`;
button = {
"type": "button",
"feedback": "instant",
"port": "1",
"channel": parseInt(index + 1) + start_channel,
"holdTime": 0.1,
"levelControlType": "none",
"portSlider": "",
"channelSlider": "",
"valueSlider": "",
"string": "{ \"payload\": \"\", \"type\": \"\"}",
"textArea": "",
"hasChannel": false,
"mouseUp": false,
"hold": false,
"activity": true,
"visible": true,
"abovePages": false,
"numberOfStates": 2,
"id": id,
"stateId": 1,
"styles": "",
"text": title.title,
"storyboard": [],
"animationTime": null,
"position": "static",
"style": {
"background": "#3b4552",
"font-size": "18px"
},
"textStyles": {
"x": "50",
"y": "13",
"position": "absolute",
"xCenter": true,
"yCenter": true,
"top": false,
"left": false,
"bottom": false,
"right": false
},
"iconStyles": {
"x": "0",
"y": "0",
"position": "absolute",
"width": "auto",
"height": "auto",
"size": "auto"
},
"images": {
"icon": null,
"background": null
}
};
states.push(button);
button = {
"type": "button",
"feedback": "instant",
"port": "1",
"channel": parseInt(index + 1) + start_channel,
"holdTime": 0.1,
"levelControlType": "none",
"portSlider": "",
"channelSlider": "",
"valueSlider": "",
"string": "{ \"payload\": \"\", \"type\": \"\"}",
"textArea": "",
"hasChannel": false,
"mouseUp": false,
"hold": false,
"activity": true,
"visible": true,
"abovePages": false,
"numberOfStates": 2,
"id": id,
"stateId": 2,
"styles": "",
"text": title.title,
"storyboard": [],
"animationTime": null,
"position": "static",
"style": {
"background": "#00ff00",
"font-size": "18px"
},
"textStyles": {
"x": "50",
"y": "13",
"position": "absolute",
"xCenter": true,
"yCenter": true,
"top": false,
"left": false,
"bottom": false,
"right": false
},
"iconStyles": {
"x": "0",
"y": "0",
"position": "absolute",
"width": "auto",
"height": "auto",
"size": "auto"
},
"images": {
"icon": null,
"background": null
}
};
states.push(button);
});
html += `</selection>`;
msg.payload = {
"type": "rectInsertHtml",
"payload": {
"channel": 1,
"port": 1,
"data": {
"innerHtml": `${html}`,
"states": states
}
}
};
return msg;
function item_id(value) {
if(value < 1 || value > 255 || !Number.isInteger(value)) {
return null;
}
const hex = value.toString(16);
return hex.padStart(2, '0');
}
Ниже приведен код узла "функция", который принимает данные, строит список и отправляет его на интерфейс управления.
Пример данных для передачи в функцию может выглядеть так:
{"1":{"title":"Название 1","description":"Описание 1"},"2":{"title":"Название 2","description":"Описание 2"},"3":{"title":"Название 3","description":"Описание 3"}}
Внимание! Переменная list_id берётся из структуры интерфейса. Необходимо открыть интерфейс в браузере, открыть инструменты разработчика(F12) и в дереве документа найти элемент списка и скопировать его ID.
const list_id = "ip5q";
const start_channel = 1000;
let states = [];
let state = "";
let html = `<selection class="verlist2">`;
Object.entries(msg.payload).forEach(([key, item], index) => {
let id = list_id + item_id(key);
html += `
<p class="listItem">
<span class="info">
<span class="title">${item.title}</span>
<span class="description">${item.description}</span>
</span>
<button type='button' id='${id}'></button>
</p>`
state = {
"type": "button",
"feedback": "instant",
"port": "1",
"channel": parseInt(index + 1) + start_channel,
"holdTime": 0.1,
"levelControlType": "none",
"portSlider": "",
"channelSlider": "",
"valueSlider": "",
"string": "{ \"payload\": \"\", \"type\": \"\"}",
"textArea": "",
"hasChannel": false,
"mouseUp": false,
"hold": false,
"activity": true,
"visible": true,
"abovePages": false,
"numberOfStates": 1,
"id": id,
"stateId": 1,
"styles": "",
"text": "",
"storyboard": [],
"animationTime": null,
"position": "static",
"style": {},
"textStyles": {
"x": "50",
"y": "13",
"position": "absolute",
"xCenter": true,
"yCenter": true,
"top": false,
"left": false,
"bottom": false,
"right": false
},
"iconStyles": {
"x": "0",
"y": "0",
"position": "absolute",
"width": "auto",
"height": "auto",
"size": "auto"
},
"images": {
"icon": null,
"background": null
}
};
states.push(state);
});
html += `</selection>`;
msg.payload = {
"type": "rectInsertHtml",
"payload": {
"channel": 1,
"port": 2,
"data": {
"innerHtml": `${html}`,
"states": states
}
}
};
return msg;
function item_id(value) {
if (value < 1 || value > 255 || !Number.isInteger(value)) {
return null;
}
const hex = value.toString(16);
return hex.padStart(2, '0');
}
Готовый пример интерфейса и потока можно скачать по ссылкам:
Интерфейс - lists.zip
Поток - lists.json