Dear my friends, I did it and would like to share my flow (which is based on IRO.JS) and is directly implemented into a template node. Maybe it's useful for you.
[
{
"id": "e03b471f00fe73b4",
"type": "ui-template",
"z": "7845132b7bdf9787",
"group": "ca7441a009eecd98",
"page": "",
"ui": "",
"name": "iro.js",
"order": 1,
"width": "6",
"height": "6",
"head": "",
"format": "<template>\n <div id=\"color-picker\"></div>\n</template>\n\n<script src=\"https://cdn.jsdelivr.net/npm/@jaames/iro@5.5.2/dist/iro.min.js\"></script>\n\n<script>\nexport default {\n mounted() {\n // Initialisiere den Farbpicker\n this.colorPicker = new iro.ColorPicker('#color-picker', {\n width: 250,\n color: { r: 255, g: 0, b: 0 }, // Standardfarbe\n wheelLightness: false,\n layout: [\n {\n component: iro.ui.Wheel,\n options: {\n wheelAngle: 270, // Rot nach oben\n wheelDirection: 'clockwise' // Drehrichtung im Uhrzeigersinn\n }\n }\n ]\n });\n\n // Event-Listener für Farbänderungen\n this.colorPicker.on('input:end', (color) => {\n this.send({ payload: color.rgb });\n });\n\n // Listener für eingehende Nachrichten\n this.$socket.on('msg-input:' + this.id, (msg) => {\n if (msg.payload && msg.payload.r !== undefined) {\n this.colorPicker.color.set(msg.payload);\n }\n });\n }\n}\n</script>",
"storeOutMessages": true,
"passthru": false,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 850,
"y": 300,
"wires": [
[
"0f06582173f7203a"
]
]
},
{
"id": "0f06582173f7203a",
"type": "debug",
"z": "7845132b7bdf9787",
"name": "debug 1",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1020,
"y": 300,
"wires": []
},
{
"id": "38f9ebb55e0285ae",
"type": "inject",
"z": "7845132b7bdf9787",
"name": "red",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "{\"r\": 255, \"g\":0, \"b\":0}",
"payloadType": "json",
"x": 630,
"y": 260,
"wires": [
[
"e03b471f00fe73b4"
]
]
},
{
"id": "567e14c325785168",
"type": "inject",
"z": "7845132b7bdf9787",
"name": "green",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "{\"r\": 0, \"g\":255, \"b\":0}",
"payloadType": "json",
"x": 630,
"y": 300,
"wires": [
[
"e03b471f00fe73b4"
]
]
},
{
"id": "19e59aa24d3a12e7",
"type": "inject",
"z": "7845132b7bdf9787",
"name": "blue",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "{\"r\": 0, \"g\":0, \"b\":255}",
"payloadType": "json",
"x": 630,
"y": 340,
"wires": [
[
"e03b471f00fe73b4"
]
]
},
{
"id": "ca7441a009eecd98",
"type": "ui-group",
"name": "IRO.JS",
"page": "a71e15af5f8a5ba8",
"width": "6",
"height": "6",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "a71e15af5f8a5ba8",
"type": "ui-page",
"name": "Colors",
"ui": "14a551a96b61dade",
"path": "/page1",
"icon": "home",
"layout": "grid",
"theme": "acc4d7417e8a63c7",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "6"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "6"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 1,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "14a551a96b61dade",
"type": "ui-base",
"name": "My Dashboard 2 Next Level",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "default",
"titleBarStyle": "default",
"showReconnectNotification": true,
"notificationDisplayTime": "1",
"showDisconnectNotification": true
},
{
"id": "acc4d7417e8a63c7",
"type": "ui-theme",
"name": "STD_THEME",
"colors": {
"surface": "#ffffff",
"primary": "#0094ce",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"density": "default",
"pagePadding": "0px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "4px"
}
}
]
But what I could not get managed is to implement a function to enable/disable it and greying it out (by sending a msg.enabled true/false). Any help appreciated...
Regards
