Node-Red Dashboard 2.0 — использование шаблона пользовательского интерфейса для создания кнопки, которую можно нажимать ⇐ CSS

[Anonymous]

Когда я нажимаю кнопку на панели управления, ничего не происходит. Форматирование поля, текста и изображения не меняется при нажатии, а реле не включается. При нажатии на узлы ввода Set Off и Set On в потоке узла красного цвета срабатывает реле. В моем шаблоне возникла проблема, которую мне трудно определить.
JSON конфигурации потока:

Код: Выделить всё

[
{
"id": "f81abdae852f91a6",
"type": "rpi-gpio out",
"z": "a4a0218f2135997c",
"name": "",
"pin": "2",
"set": true,
"level": "1",
"freq": "",
"out": "out",
"bcm": true,
"x": 480,
"y": 260,
"wires": []
},
{
"id": "ea5563793dce06bd",
"type": "ui-template",
"z": "a4a0218f2135997c",
"group": "7b7cd476eb00b2df",
"page": "",
"ui": "",
"name": "Test",
"order": 0,
"width": "0",
"height": "0",
"format": "\n    (function(scope) {\n        scope.$watch('msg', function(msg) {\n            const button = document.getElementById('toggleButton');\n            const icon = document.getElementById('buttonIcon');\n            const text = document.getElementById('buttonText');\n\n            console.log('Incoming message:', msg);\n\n            if (msg && msg.payload === '0') {\n                button.classList.add('on');\n                icon.src = './assets/winch_black.png';\n                text.style.color = '#000000';\n            } else if (msg && msg.payload === '1') {\n                button.classList.remove('on');\n                icon.src = './assets/winch_white.png';\n                text.style.color = '#ffffff';\n            }\n        });\n\n        scope.toggleButton = function() {\n            const button = document.getElementById('toggleButton');\n            const icon = document.getElementById('buttonIcon');\n            const text = document.getElementById('buttonText');\n\n            if (button.classList.contains('on')) {\n                button.classList.remove('on');\n                icon.src = './assets/winch_white.png';\n                text.style.color = '#ffffff';\n                scope.send({ payload: '1', topic: scope.msg.topic });\n            } else {\n                button.classList.add('on');\n                icon.src = './assets/winch_black.png';\n                text.style.color = '#000000';\n                scope.send({ payload: '0', topic: scope.msg.topic });\n            }\n        };\n    })(scope);\n\n\n\n    .button {\n        width: 128px;\n        height: 128px;\n        background-color: #2d3136;\n        border-radius: 20px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: flex-start;\n        padding: 12px;\n        cursor: pointer;\n        transition: background-color 0.3s;\n    }\n\n    .button img {\n        width: 64px;\n        height: 64px;\n        margin-top: 14px;\n    }\n\n    .button p {\n        margin: 0;\n        margin-top: 8px;\n        color: #ffffff;\n        font-size: 14px;\n        transition: color 0.3s;\n    }\n\n    .button.on {\n        background-color: #66b5f8;\n    }\n\n    .button.on img {\n        content: url('./assets/winch_black.png');\n    }\n\n    .button.on p {\n        color: #000000;\n    }\n\n\n\n    
[img]\[/img]
\n    
Winch
\n",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 310,
"y": 260,
"wires": [
[
"f81abdae852f91a6"
]
]
},
{
"id": "fb1784fe33113bdc",
"type": "inject",
"z": "a4a0218f2135997c",
"name": "Set Off",
"props": [
{
"p": "payload",
"v": "1",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 150,
"y": 220,
"wires": [
[
"ea5563793dce06bd"
]
]
},
{
"id": "68fcf6f4a0223cf9",
"type": "inject",
"z": "a4a0218f2135997c",
"name": "Set On",
"props": [
{
"p": "payload",
"v": "0",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 150,
"y": 300,
"wires": [
[
"ea5563793dce06bd"
]
]
},
{
"id": "7b7cd476eb00b2df",
"type": "ui-group",
"name": "Winch",
"page": "9b39b0acf751f2fc",
"width": "2",
"height": "1",
"order": 1,
"showTitle": false,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "9b39b0acf751f2fc",
"type": "ui-page",
"name": "Control",
"ui": "544efb97afe2f6dc",
"path": "/home",
"icon": "home",
"layout": "grid",
"theme": "65dfab5792fc2a06",
"order": 1,
"className": "",
"visible": false,
"disabled": "false"
},
{
"id": "544efb97afe2f6dc",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"navigationStyle": "none"
},
{
"id": "65dfab5792fc2a06",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#2d3136",
"primary": "#66b5f8",
"bgPage": "#212529",
"groupBg": "#212529",
"groupOutline": "#212529"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "20px",
"widgetGap":  "12px"
}
}
]

Вот содержимое шаблона для наглядности:

Код: Выделить всё

(function(scope) {
scope.$watch('msg', function(msg) {
const button = document.getElementById('toggleButton');
const icon = document.getElementById('buttonIcon');
const text = document.getElementById('buttonText');

console.log('Incoming message:', msg);

if (msg && msg.payload === '0') {
button.classList.add('on');
icon.src = './assets/winch_black.png';
text.style.color = '#000000';
} else if (msg && msg.payload === '1') {
button.classList.remove('on');
icon.src = './assets/winch_white.png';
text.style.color = '#ffffff';
}
});

scope.toggleButton = function() {
const button = document.getElementById('toggleButton');
const icon = document.getElementById('buttonIcon');
const text = document.getElementById('buttonText');

if (button.classList.contains('on')) {
button.classList.remove('on');
icon.src = './assets/winch_white.png';
text.style.color = '#ffffff';
scope.send({ payload: '1', topic: scope.msg.topic });
} else {
button.classList.add('on');
icon.src = './assets/winch_black.png';
text.style.color = '#000000';
scope.send({ payload: '0', topic: scope.msg.topic });
}
};
})(scope);



.button {
width: 128px;
height: 128px;
background-color: #2d3136;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 12px;
cursor: pointer;
transition: background-color 0.3s;
}

.button img {
width: 64px;
height: 64px;
margin-top: 14px;
}

.button p {
margin: 0;
margin-top: 8px;
color: #ffffff;
font-size: 14px;
transition: color 0.3s;
}

.button.on {
background-color: #66b5f8;
}

.button.on img {
content: url('./assets/winch_black.png');
}

.button.on p {
color: #000000;
}


[img]./assets/winch_white.png[/img]
Winch

Я пытаюсь сделать поле на панели управления доступным для щелчка, изменяя формат поля и переключая реле, подключенное к GPIO Raspberry Pi 5.
В выключенном состоянии поле должно выглядеть так, и реле должно быть выключено:
[img]https://i .sstatic.net/jt2qH3yF.png[/img]

Когда включено, поле должно выглядеть так, и реле должно быть включено:
< img alt="введите здесь описание изображения" src="https://i.sstatic.net/gCyLgiIz.png" />

Подробнее здесь: https://stackoverflow.com/questions/784 ... ck-to-togg