Here, I was able to test a bit the SVG node, so I was able to integrate awesome 6 fonts and change the colors. It's a good start
For those who are interested, here is the flow of the demo.
[
{
"id": "13d050e2.8d7627",
"type": "tab",
"label": "Flow 7",
"disabled": false,
"info": ""
},
{
"id": "b1ce89fb.13dd9",
"type": "ui_svg_graphics",
"z": "13d050e2.8d7627",
"group": "23b16fbe.b0541",
"order": 1,
"width": "2",
"height": "2",
"svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" width=\"80\" height=\"80\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 32 32\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"32\" height=\"32\" style=\"fill:none;stroke:none;\"/><g id=\"PV\" style=\"fill:red;\"><rect x=\"0\" y=\"0\" width=\"32\" height=\"32\" fill=\"none\" stroke=\"none\"/><path d=\"M30 26V14H13v12h5v2H2v2h28v-2h-5v-2zm-5-2v-3h3v3zm-2-3v3h-3v-3zm-3-2v-3h3v3zm8 0h-3v-3h3zm-10-3v3h-3v-3zm-3 8v-3h3v3zm8 4h-3v-2h3z\" fill=\"orange\"/><path d=\"M9.333 14.981A4 4 0 1 1 16 12h-2a2 2 0 1 0-3.333 1.49z\" fill=\"orange\"/><path d=\"M11 2h2v4h-2z\" fill=\"orange\"/><path d=\"M2 11h4v2H2z\" fill=\"orange\"/><path d=\"M4.222 5.636l1.414-1.414L8.464 7.05L7.05 8.464z\" fill=\"orange\"/><path d=\"M16.95 8.464L15.535 7.05l2.829-2.828l1.414 1.414z\" fill=\"orange\"/></g></svg>",
"clickableShapes": [
{
"targetId": "path[id^=\"ball_\"]",
"action": "click",
"payload": "circle",
"payloadType": "str",
"topic": "circle"
}
],
"javascriptHandlers": [],
"smilAnimations": [],
"bindings": [],
"showCoordinates": false,
"autoFormatAfterEdit": false,
"showBrowserErrors": false,
"showBrowserEvents": false,
"enableJsDebugging": false,
"sendMsgWhenLoaded": false,
"outputField": "payload",
"editorUrl": "https://drawsvg.org/drawsvg.html",
"directory": "",
"panning": "disabled",
"zooming": "disabled",
"panOnlyWhenZoomed": false,
"doubleClickZoomEnabled": false,
"mouseWheelZoomEnabled": false,
"dblClickZoomPercentage": "150",
"name": "PV",
"x": 570,
"y": 180,
"wires": [
[]
]
},
{
"id": "6b3a391.ed7dec8",
"type": "ui_svg_graphics",
"z": "13d050e2.8d7627",
"group": "23b16fbe.b0541",
"order": 2,
"width": "2",
"height": "2",
"svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" width=\"80\" height=\"80\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 1024 768\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"1024\" height=\"768\" style=\"fill:none;stroke:none;\"/><rect x=\"0\" y=\"0\" width=\"1024\" height=\"768\" fill=\"none\" stroke=\"none\"/><path d=\"M1691.425272,1344.825774H795.425272q-27,0-45.5-18.5T731.425272,1280.825774V832.825774q0-27,18.5-45.5T795.425272,768.825774h896q27,0,45.5,18.5T1755.425272,832.825774v448q0,27-18.5,45.5T1691.425272,1344.825774ZM1019.425272,1024.825774H891.425272q-13,0-22.5,9.5T859.425272,1056.825774t9.5,22.5T891.425272,1088.825774h128q13,0,22.5-9.5T1051.425272,1056.825774t-9.5-22.5T1019.425272,1024.825774Zm576,0h-32v-32q0-13-9.5-22.5T1531.425272,960.825774t-22.5,9.5T1499.425272,992.825774v32h-32q-13,0-22.5,9.5T1435.425272,1056.825774t9.5,22.5T1467.425272,1088.825774h32v32q0,13,9.5,22.5T1531.425272,1152.825774t22.5-9.5T1563.425272,1120.825774v-32h32q13,0,22.5-9.5T1627.425272,1056.825774t-9.5-22.5T1595.425272,1024.825774ZM1435.425272,640.825774q0-27,18.5-45.5T1499.425272,576.825774h64q26,0,45,18.5T1627.425272,640.825774v64H1435.425272V640.825774Zm-576,0q0-27,18.5-45.5T923.425272,576.825774h64q26,0,45,18.5T1051.425272,640.825774v64H859.425272V640.825774Z\" fill=\"lightgray\" id=\"batterie\" transform=\"matrix(0.765615, -0.0040763, 0.0040763, 0.765615, -340.461, -254.704)\"/></svg>",
"clickableShapes": [
{
"targetId": "path[id^=\"ball_\"]",
"action": "click",
"payload": "circle",
"payloadType": "str",
"topic": "circle"
}
],
"javascriptHandlers": [],
"smilAnimations": [],
"bindings": [],
"showCoordinates": false,
"autoFormatAfterEdit": false,
"showBrowserErrors": false,
"showBrowserEvents": false,
"enableJsDebugging": false,
"sendMsgWhenLoaded": false,
"outputField": "payload",
"editorUrl": "https://drawsvg.org/drawsvg.html",
"directory": "",
"panning": "disabled",
"zooming": "disabled",
"panOnlyWhenZoomed": false,
"doubleClickZoomEnabled": false,
"mouseWheelZoomEnabled": false,
"dblClickZoomPercentage": "150",
"name": "Batterie",
"x": 580,
"y": 280,
"wires": [
[]
]
},
{
"id": "5629bd44.dd5d3c",
"type": "ui_svg_graphics",
"z": "13d050e2.8d7627",
"group": "23b16fbe.b0541",
"order": 3,
"width": "2",
"height": "2",
"svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" role=\"img\" width=\"80\" height=\"80\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 72 72\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"72\" height=\"72\" style=\"fill:none;stroke:none;\"/><rect x=\"0\" y=\"0\" width=\"76.5417\" height=\"50.3599\" fill=\"none\" stroke=\"none\"/><path fill=\"#fff\" d=\"M22.87 30.126c-.01 0-.02-.02-.02-.02a4.397 4.397 0 0 1-.52-.36c-.01-.01-.02-.01-.03-.02a6.098 6.098 0 0 1-1.83-2.6a5.998 5.998 0 0 1 3.16-7.51a3.977 3.977 0 0 1 6.76-2.13a5.015 5.015 0 0 1 2.72-2.41a4.924 4.924 0 0 1 3.28-.02a4.975 4.975 0 0 1 7.3-5.21a7.943 7.943 0 0 1 2.83-1.77a7.846 7.846 0 0 1 2.67-.48a5.88 5.88 0 0 1 2.03-1.23a6.003 6.003 0 0 1 7.69 3.58c.06.17.11.34.16.52a3.529 3.529 0 0 1 .56.14a3.948 3.948 0 0 1 2.53 2.42a4.002 4.002 0 0 1-2.39 5.12a3.942 3.942 0 0 1-2.91-.08a7.982 7.982 0 0 1-9.79 5.21a4.96 4.96 0 0 1-8.71 2.36a4.942 4.942 0 0 1-6.82 1.99a5.914 5.914 0 0 1-2.06 2.41\" transform=\"matrix(0.984631, 0, 0, 0.984631, 0.128, 0.0492604)\"/><g id=\"EDF\"><path fill=\"#fff\" d=\"M22.87,30.126c-.01,0,-.02,-.02,-.02,-.02a4.397,4.397,0,0,1,-.52,-.36c-.01,-.01,-.02,-.01,-.03,-.02a6.098,6.098,0,0,1,-1.83,-2.6a5.998,5.998,0,0,1,3.16,-7.51a3.977,3.977,0,0,1,6.76,-2.13a5.015,5.015,0,0,1,2.72,-2.41a4.924,4.924,0,0,1,3.28,-.02a4.975,4.975,0,0,1,7.3,-5.21a7.943,7.943,0,0,1,2.83,-1.77a7.846,7.846,0,0,1,2.67,-.48a5.88,5.88,0,0,1,2.03,-1.23a6.003,6.003,0,0,1,7.69,3.58c.06,.17,.11,.34,.16,.52a3.529,3.529,0,0,1,.56,.14a3.948,3.948,0,0,1,2.53,2.42a4.002,4.002,0,0,1,-2.39,5.12a3.942,3.942,0,0,1,-2.91,-.08a7.982,7.982,0,0,1,-9.79,5.21a4.96,4.96,0,0,1,-8.71,2.36a4.942,4.942,0,0,1,-6.82,1.99a5.914,5.914,0,0,1,-2.06,2.41\" transform=\"matrix(0.984631, 0, 0, 0.984631, 0.128, 0.0492604)\"/><path fill=\"#fff\" d=\"M51 27h6v39h-6z\" transform=\"matrix(0.984631, 0, 0, 0.984631, 0.128, 0.0492604)\"/><path fill=\"#9b9b9a\" d=\"M47 47.262a7.946 7.946 0 0 0-8.187 2.667c-1.111-7.296-1.17-15.131.384-19.929H33v36h14z\" transform=\"matrix(0.984631, 0, 0, 0.984631, 0.128, 0.0492604)\"/><path fill=\"#d0cfce\" d=\"M33 66V30H16c3 9.257 0 29.829-5 36z\" transform=\"matrix(0.984631, 0, 0, 0.984631, 0.128, 0.0492604)\"/><path fill=\"#3f3f3f\" d=\"M47 47.262V66h6V55a7.996 7.996 0 0 0-6-7.738z\" transform=\"matrix(0.984631, 0, 0, 0.984631, 0.128, 0.0492604)\"/></g><path fill=\"#9b9b9a\" d=\"M70.24 10.506a.847.847 0 0 0-.17-.04c-.01-.05-.03-.1-.04-.14a1.68 1.68 0 0 1 .21.18z\"/><path fill=\"#ea5a47\" d=\"M51 31h6v4h-6z\" transform=\"matrix(0.984631, 0, 0, 0.984631, 0.128, 0.0492604)\"/><g fill=\"none\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" transform=\"matrix(0.984631, 0, 0, 0.984631, 0.128, 0.0492604)\"><path d=\"M22.87 30c-.01 0-.02-.02-.02-.02a4.397 4.397 0 0 1-.52-.36c-.01-.01-.02-.01-.03-.02a6.098 6.098 0 0 1-1.83-2.6a5.998 5.998 0 0 1 3.16-7.51a3.977 3.977 0 0 1 6.76-2.13a5.015 5.015 0 0 1 2.72-2.41a4.924 4.924 0 0 1 3.28-.02a4.975 4.975 0 0 1 7.3-5.21a7.943 7.943 0 0 1 2.83-1.77a7.846 7.846 0 0 1 2.67-.48a5.88 5.88 0 0 1 2.03-1.23a6.003 6.003 0 0 1 7.69 3.58c.06.17.11.34.16.52a3.529 3.529 0 0 1 .56.14a3.948 3.948 0 0 1 2.53 2.42a4.002 4.002 0 0 1-2.39 5.12a3.942 3.942 0 0 1-2.91-.08a7.982 7.982 0 0 1-9.79 5.21a4.96 4.96 0 0 1-8.71 2.36a4.942 4.942 0 0 1-6.82 1.99a5.914 5.914 0 0 1-2.06 2.41\"/><path d=\"M44.197 66c-5-6.171-8-26.743-5-36H16c3 9.257 0 29.829-5 36z\"/><path d=\"M53 66h4V27h-6v22.721\"/><path d=\"M44.197 66H53V55a8 8 0 0 0-14.187-5.07\"/></g></svg>",
"clickableShapes": [
{
"targetId": "path[id^=\"ball_\"]",
"action": "click",
"payload": "circle",
"payloadType": "str",
"topic": "circle"
}
],
"javascriptHandlers": [],
"smilAnimations": [],
"bindings": [],
"showCoordinates": false,
"autoFormatAfterEdit": false,
"showBrowserErrors": false,
"showBrowserEvents": false,
"enableJsDebugging": false,
"sendMsgWhenLoaded": false,
"outputField": "payload",
"editorUrl": "https://drawsvg.org/drawsvg.html",
"directory": "",
"panning": "disabled",
"zooming": "disabled",
"panOnlyWhenZoomed": false,
"doubleClickZoomEnabled": false,
"mouseWheelZoomEnabled": false,
"dblClickZoomPercentage": "150",
"name": "EDF",
"x": 570,
"y": 360,
"wires": [
[]
]
},
{
"id": "f831ed6a.055368",
"type": "change",
"z": "13d050e2.8d7627",
"name": "red",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "{\"command\":\"update_style\",\"selector\":\"#batterie\",\"attributeName\":\"fill\",\"attributeValue\":\"red\"}",
"tot": "json"
},
{
"t": "delete",
"p": "topic",
"pt": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 330,
"y": 273,
"wires": [
[
"6b3a391.ed7dec8"
]
]
},
{
"id": "ffe3988f.afc71",
"type": "change",
"z": "13d050e2.8d7627",
"name": "grey",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "{\"command\":\"update_style\",\"selector\":\"#batterie\",\"attributeName\":\"fill\",\"attributeValue\":\"lightgrey\"}",
"tot": "json"
},
{
"t": "delete",
"p": "topic",
"pt": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 330,
"y": 308,
"wires": [
[
"6b3a391.ed7dec8"
]
]
},
{
"id": "550d14d8.cb5b74",
"type": "change",
"z": "13d050e2.8d7627",
"name": "orange",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "{\"command\":\"update_style\",\"selector\":\"#PV\",\"attributeName\":\"fill\",\"attributeValue\":\"orange\"}",
"tot": "json"
},
{
"t": "delete",
"p": "topic",
"pt": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 340,
"y": 200,
"wires": [
[
"b1ce89fb.13dd9"
]
]
},
{
"id": "5bff4b86.4ca364",
"type": "change",
"z": "13d050e2.8d7627",
"name": "grey",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "{\"command\":\"update_style\",\"selector\":\"#PV\",\"attributeName\":\"fill\",\"attributeValue\":\"lightgrey\"}",
"tot": "json"
},
{
"t": "delete",
"p": "topic",
"pt": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 330,
"y": 160,
"wires": [
[
"b1ce89fb.13dd9"
]
]
},
{
"id": "91b117ce.6c335",
"type": "change",
"z": "13d050e2.8d7627",
"name": "EDF - grey",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "{\"command\":\"update_style\",\"selector\":\"#EDF\",\"attributeName\":\"fill\",\"attributeValue\":\"lightgrey\"}",
"tot": "json"
},
{
"t": "delete",
"p": "topic",
"pt": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 350,
"y": 360,
"wires": [
[
"5629bd44.dd5d3c"
]
]
},
{
"id": "f7060980.6f909",
"type": "change",
"z": "13d050e2.8d7627",
"name": "blue",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "{\"command\":\"update_style\",\"selector\":\"#EDF\",\"attributeName\":\"fill\",\"attributeValue\":\"blue\"}",
"tot": "json"
},
{
"t": "delete",
"p": "topic",
"pt": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 330,
"y": 400,
"wires": [
[
"5629bd44.dd5d3c"
]
]
},
{
"id": "809306e1.1483e8",
"type": "change",
"z": "13d050e2.8d7627",
"name": "green",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "{\"command\":\"update_style\",\"selector\":\"#batterie\",\"attributeName\":\"fill\",\"attributeValue\":\"green\"}",
"tot": "json"
},
{
"t": "delete",
"p": "topic",
"pt": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 330,
"y": 240,
"wires": [
[
"6b3a391.ed7dec8"
]
]
},
{
"id": "722c003b.90208",
"type": "inject",
"z": "13d050e2.8d7627",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 140,
"y": 160,
"wires": [
[
"5bff4b86.4ca364"
]
]
},
{
"id": "27df2104.a3316e",
"type": "inject",
"z": "13d050e2.8d7627",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 150,
"y": 200,
"wires": [
[
"550d14d8.cb5b74"
]
]
},
{
"id": "7d6e682c.38852",
"type": "inject",
"z": "13d050e2.8d7627",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 140,
"y": 240,
"wires": [
[
"809306e1.1483e8"
]
]
},
{
"id": "5d19e66.3475718",
"type": "inject",
"z": "13d050e2.8d7627",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 150,
"y": 280,
"wires": [
[
"f831ed6a.055368"
]
]
},
{
"id": "511d1a33.296054",
"type": "inject",
"z": "13d050e2.8d7627",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 140,
"y": 320,
"wires": [
[
"ffe3988f.afc71"
]
]
},
{
"id": "18c3491e.c8cb7f",
"type": "inject",
"z": "13d050e2.8d7627",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 150,
"y": 360,
"wires": [
[
"91b117ce.6c335"
]
]
},
{
"id": "d2fd9c04.35d598",
"type": "inject",
"z": "13d050e2.8d7627",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 140,
"y": 400,
"wires": [
[
"f7060980.6f909"
]
]
},
{
"id": "23b16fbe.b0541",
"type": "ui_group",
"name": "test",
"tab": "3d0faef1.feef72",
"order": 1,
"disp": true,
"width": "12",
"collapse": false
},
{
"id": "3d0faef1.feef72",
"type": "ui_tab",
"name": "test",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]