Hi, I'm trying to make a dashboard that changes a rack image when value passes 15 centigrade for example, I've already tried several ways but I still can't solve it, I saw that I could also do it with an svg but I still don't understand why the widget is not displayed
Here is my code_
[
{
"id": "54f6b0b8fca26abd",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "4362cdbc9ff50684",
"type": "mongodb out",
"z": "54f6b0b8fca26abd",
"d": true,
"mongodb": "ff8c43c5a0777bc8",
"name": "",
"collection": "c_node",
"payonly": true,
"upsert": false,
"multi": false,
"operation": "store",
"x": 400,
"y": 160,
"wires": []
},
{
"id": "93c3480f103cce8a",
"type": "mqtt in",
"z": "54f6b0b8fca26abd",
"name": "",
"topic": "company/zentinel/1",
"qos": "2",
"datatype": "auto-detect",
"broker": "0628d80477a443bf",
"nl": false,
"rap": true,
"rh": 0,
"inputs": 0,
"x": 130,
"y": 300,
"wires": [
[
"4362cdbc9ff50684",
"70243a5e6d40a653"
]
]
},
{
"id": "70243a5e6d40a653",
"type": "json",
"z": "54f6b0b8fca26abd",
"name": "",
"property": "payload",
"action": "obj",
"pretty": false,
"x": 330,
"y": 440,
"wires": [
[
"59a2dd0a7d1c0b71",
"ecc22a80dff061a4",
"12bcbd5c9b4d51ce",
"dbafbb06e89f0197",
"c170b2b8458303e6",
"6a80d4b659b4149f"
]
]
},
{
"id": "59a2dd0a7d1c0b71",
"type": "debug",
"z": "54f6b0b8fca26abd",
"name": "debug 1",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 520,
"y": 260,
"wires": []
},
{
"id": "ecc22a80dff061a4",
"type": "change",
"z": "54f6b0b8fca26abd",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "payload.Temperature",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 540,
"y": 320,
"wires": [
[
"803e9b74924d5b79",
"1a4cc00759e84f78",
"4fb079779109004f"
]
]
},
{
"id": "803e9b74924d5b79",
"type": "ui_gauge",
"z": "54f6b0b8fca26abd",
"name": "",
"group": "9fd78c3557eccc31",
"order": 1,
"width": 0,
"height": 0,
"gtype": "gage",
"title": "",
"label": "C°",
"format": "{{value}}",
"min": 0,
"max": 10,
"colors": [
"#00b500",
"#e6e600",
"#ca3838"
],
"seg1": "",
"seg2": "",
"x": 730,
"y": 320,
"wires": []
},
{
"id": "1a4cc00759e84f78",
"type": "ui_gauge",
"z": "54f6b0b8fca26abd",
"name": "",
"group": "5e9d4c019c0c1e3d",
"order": 0,
"width": 0,
"height": 0,
"gtype": "gage",
"title": "gauge",
"label": "units",
"format": "{{value}}",
"min": 0,
"max": 10,
"colors": [
"#00b500",
"#e6e600",
"#ca3838"
],
"seg1": "",
"seg2": "",
"x": 730,
"y": 360,
"wires": []
},
{
"id": "12bcbd5c9b4d51ce",
"type": "change",
"z": "54f6b0b8fca26abd",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "payload.Humidity",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 540,
"y": 440,
"wires": [
[
"571bd410f23db9cb",
"950315806f944775",
"5bae8126d621b2f5",
"430bc0c78a7205f6",
"721c6519f5fa5616",
"25266efedb3cb8e0"
]
]
},
{
"id": "571bd410f23db9cb",
"type": "ui_gauge",
"z": "54f6b0b8fca26abd",
"name": "",
"group": "3b8ccfff0273771a",
"order": 1,
"width": 0,
"height": 0,
"gtype": "gage",
"title": "",
"label": "units",
"format": "{{value}}",
"min": 0,
"max": 10,
"colors": [
"#00b500",
"#e6e600",
"#ca3838"
],
"seg1": "",
"seg2": "",
"x": 730,
"y": 400,
"wires": []
},
{
"id": "808a520b9023ca72",
"type": "ui_template",
"z": "54f6b0b8fca26abd",
"group": "c3eb264c623728ed",
"name": "",
"order": 1,
"width": "7",
"height": "14",
"format": "<style>\n #divs{\n background: red;\n }\n</style>\n<div id=\"divs\" ng-bind-html=\"msg.payload\"></div>\n<div>{{msg.payload + ' 12345'}}</div>\n\n<div id=\"container-rack\">\n <div ng-show=\"msg.payload > 100\">\n <h1>Prueba ngIf</h1>\n </div>\n <!--<div id=\"magenta\">\n <img src=\"/gabinete2-magenta2.png\" width=\"250px\" height=\"250px\">\n <h2 id=\"magenta1\">Temperatura</h2>\n </div>\n <div id=\"abierto\">\n <img src=\"/gab-abierto.png\" width=\"250px\" height=\"250px\">\n <h2 id=\"magenta1\">Puerta abierta</h2>\n </div>\n <div id=\"verde\">\n <img src=\"/gabinete-verde.png\" width=\"250px\" height=\"250px\">\n <h2 id=\"magenta1\">Humedad</h2>\n </div>-->\n <div id=\"blanco\">\n </div>\n</div>\n\n<script>\n var imprimir = document.getElementById(\"blanco\");\n imprimir.innerHTML = \"<img src='/gabinete2-magenta2.png' width='300px' height='300px'>\";\n \n (function(scope) {\n console.log('Position 1');\n console.dir(scope);\n console.log(scope);\n scope.$watch('msg.payload', function(data) {\n console.log('Position 2');\n console.dir(data);\n console.log(data);\n });\n })(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"x": 740,
"y": 440,
"wires": [
[]
]
},
{
"id": "4fb079779109004f",
"type": "ui_chart",
"z": "54f6b0b8fca26abd",
"name": "",
"group": "9b910ec4679dd572",
"order": 1,
"width": 12,
"height": 4,
"label": "",
"chartType": "line",
"legend": "false",
"xformat": "HH:mm:ss",
"interpolate": "linear",
"nodata": "",
"dot": false,
"ymin": "0",
"ymax": "100",
"removeOlder": 1,
"removeOlderPoints": "",
"removeOlderUnit": "3600",
"cutout": 0,
"useOneColor": false,
"useUTC": false,
"colors": [
"#1f77b4",
"#aec7e8",
"#ff7f0e",
"#2ca02c",
"#98df8a",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"outputs": 1,
"useDifferentColor": false,
"x": 730,
"y": 280,
"wires": [
[]
]
},
{
"id": "950315806f944775",
"type": "ui_chart",
"z": "54f6b0b8fca26abd",
"name": "",
"group": "4cceea86c345a084",
"order": 1,
"width": 12,
"height": 4,
"label": "",
"chartType": "line",
"legend": "false",
"xformat": "HH:mm:ss",
"interpolate": "linear",
"nodata": "",
"dot": false,
"ymin": "",
"ymax": "",
"removeOlder": 1,
"removeOlderPoints": "",
"removeOlderUnit": "3600",
"cutout": 0,
"useOneColor": false,
"useUTC": false,
"colors": [
"#1f77b4",
"#aec7e8",
"#ff7f0e",
"#2ca02c",
"#98df8a",
"#d62728",
"#ff9896",
"#9467bd",
"#c5b0d5"
],
"outputs": 1,
"useDifferentColor": false,
"x": 730,
"y": 480,
"wires": [
[]
]
},
{
"id": "0417ca4ef9d5fdbe",
"type": "mqtt out",
"z": "54f6b0b8fca26abd",
"name": "",
"topic": "company/zentinel/1/command",
"qos": "",
"retain": "",
"respTopic": "",
"contentType": "",
"userProps": "",
"correl": "",
"expiry": "",
"broker": "0628d80477a443bf",
"x": 970,
"y": 540,
"wires": []
},
{
"id": "303dc662c828cdaa",
"type": "ui_switch",
"z": "54f6b0b8fca26abd",
"name": "",
"label": "Beacon",
"tooltip": "",
"group": "03247b3d4be3ec04",
"order": 1,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "topic",
"topicType": "msg",
"style": "",
"onvalue": "1",
"onvalueType": "num",
"onicon": "",
"oncolor": "",
"offvalue": "0",
"offvalueType": "num",
"officon": "",
"offcolor": "",
"animate": false,
"x": 740,
"y": 540,
"wires": [
[
"0417ca4ef9d5fdbe"
]
]
},
{
"id": "dbafbb06e89f0197",
"type": "change",
"z": "54f6b0b8fca26abd",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "payload.BEACON",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 540,
"y": 540,
"wires": [
[
"303dc662c828cdaa"
]
]
},
{
"id": "c170b2b8458303e6",
"type": "change",
"z": "54f6b0b8fca26abd",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "payload.FAN",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 540,
"y": 600,
"wires": [
[
"c15883781847c424"
]
]
},
{
"id": "c15883781847c424",
"type": "ui_switch",
"z": "54f6b0b8fca26abd",
"name": "",
"label": "Fan",
"tooltip": "",
"group": "03247b3d4be3ec04",
"order": 2,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "topic",
"topicType": "msg",
"style": "",
"onvalue": "1",
"onvalueType": "num",
"onicon": "",
"oncolor": "",
"offvalue": "0",
"offvalueType": "num",
"officon": "",
"offcolor": "",
"animate": false,
"x": 730,
"y": 600,
"wires": [
[]
]
},
{
"id": "6a80d4b659b4149f",
"type": "change",
"z": "54f6b0b8fca26abd",
"name": "",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "payload.ACCESS",
"tot": "msg"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 540,
"y": 660,
"wires": [
[
"ed578748a18ea58a"
]
]
},
{
"id": "ed578748a18ea58a",
"type": "ui_switch",
"z": "54f6b0b8fca26abd",
"name": "",
"label": "Access",
"tooltip": "",
"group": "03247b3d4be3ec04",
"order": 3,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "topic",
"topicType": "msg",
"style": "",
"onvalue": "1",
"onvalueType": "num",
"onicon": "",
"oncolor": "",
"offvalue": "0",
"offvalueType": "num",
"officon": "",
"offcolor": "",
"animate": false,
"x": 740,
"y": 660,
"wires": [
[]
]
},
{
"id": "5bae8126d621b2f5",
"type": "function",
"z": "54f6b0b8fca26abd",
"name": "function 1",
"func": "if(msg.payload==11){\n return msg\n}",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 300,
"y": 640,
"wires": [
[
"ccfaf58987c75ded",
"808a520b9023ca72"
]
]
},
{
"id": "ccfaf58987c75ded",
"type": "debug",
"z": "54f6b0b8fca26abd",
"name": "debug 2",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 400,
"y": 760,
"wires": []
},
{
"id": "eb443f377e074c3a",
"type": "ui_template",
"z": "54f6b0b8fca26abd",
"d": true,
"group": "c3eb264c623728ed",
"name": "",
"order": 1,
"width": "7",
"height": "14",
"format": "<style>\n #divs{\n background: red;\n }\n</style>\n<!--<div id=\"divs\" ng-bind-html=\"msg.payload\"></div>\n<div>{{msg.payload}}</div>-->\n\n<script>\n function color(){\n var temp = document.getElementById(\"magenta\");\n magenta.style.background ='white';\n }\n \n (function(scope){\n scope.$watch('msg', function(msg) {\n if (scope==50){\n var imprimir2 = document.getElementById(\"container-rack\");\n imprimir2.innerHTML = \"hola\";\n }\n });\n })(scope)\n\n var imprimir = document.getElementById(\"blanco\");\n imprimir.innerHTML = \"<img src='/gabinete2-magenta2.png' width='300px' height='300px'>\";\n //imprimir.innerHTML = \"<strong>hola</strong>\";\n //imprimir.innerHTML = \"<strong>\"+payload+\"</strong>\";\n //if(payload>0){\n // imprimir.innerHTML = \"<img src='/gabinete2-magenta2.png' width='250px' height='250px'>\";\n //}\n</script>\n\n<div id=\"container-rack\">\n <!--<div id=\"magenta\">\n <img src=\"/gabinete2-magenta2.png\" width=\"250px\" height=\"250px\">\n <h2 id=\"magenta1\">Temperatura</h2>\n </div>\n <div id=\"abierto\">\n <img src=\"/gab-abierto.png\" width=\"250px\" height=\"250px\">\n <h2 id=\"magenta1\">Puerta abierta</h2>\n </div>\n <div id=\"verde\">\n <img src=\"/gabinete-verde.png\" width=\"250px\" height=\"250px\">\n <h2 id=\"magenta1\">Humedad</h2>\n </div>-->\n <div id=\"blanco\">\n </div>\n</div>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"x": 940,
"y": 380,
"wires": [
[]
]
},
{
"id": "940924a9dd294f82",
"type": "debug",
"z": "54f6b0b8fca26abd",
"name": "debug 3",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 920,
"y": 440,
"wires": []
},
{
"id": "430bc0c78a7205f6",
"type": "function",
"z": "54f6b0b8fca26abd",
"name": "function 2",
"func": "const s = (scope) => {\n console.dir(scope);\n console.log(scope);\n scope.$watch(msg.payload, (data) => {\n console.log('Position 2');\n console.dir(data);\n console.log(data);\n return data;\n });\n}\n",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 720,
"y": 740,
"wires": [
[
"940924a9dd294f82"
]
]
},
{
"id": "721c6519f5fa5616",
"type": "ui_template",
"z": "54f6b0b8fca26abd",
"group": "9fd78c3557eccc31",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"format": "<script>\n var imprimir = document.getElementById(\"blanco\");\n if(msg.payload == 10){\n imprimir.innerHTML = \"<h1>Prueba</h1>\";\n }\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"x": 860,
"y": 320,
"wires": [
[]
]
},
{
"id": "25266efedb3cb8e0",
"type": "ui_svg_graphics",
"z": "54f6b0b8fca26abd",
"group": "d94002057e164c3f",
"order": 2,
"width": "4",
"height": "5",
"svgString": "<svg viewBox=\"0 0 500 500\" preserveAspectRatio=\"xMaxYMid\" width=\"500px\" height=\"500px\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <defs></defs>\n <g style=\"fill:rgb(4,4,250);fill-rule:evenodd;stroke:rgb(4,4,250);stroke-width:0.1\" id=\"l7\"\n transform=\"matrix(1, 0, 0, 1, 70.77079, 44.973785)\">\n <path d=\"M208,16h6l1,249v1l-1,4h-6z\"></path>\n </g>\n</svg>",
"clickableShapes": [],
"javascriptHandlers": [],
"smilAnimations": [
{
"id": "17",
"targetId": "17",
"classValue": "",
"attributeName": "",
"transformType": "rotate",
"fromValue": "",
"toValue": "",
"trigger": "msg",
"duration": "1",
"durationUnit": "s",
"repeatCount": "0",
"end": "restore",
"delay": "1",
"delayUnit": "s",
"custom": ""
}
],
"bindings": [],
"showCoordinates": false,
"autoFormatAfterEdit": false,
"showBrowserErrors": false,
"showBrowserEvents": false,
"enableJsDebugging": false,
"sendMsgWhenLoaded": false,
"noClickWhenDblClick": false,
"outputField": "payload",
"editorUrl": "//drawsvg.org/drawsvg.html",
"directory": "",
"panning": "disabled",
"zooming": "disabled",
"panOnlyWhenZoomed": false,
"doubleClickZoomEnabled": false,
"mouseWheelZoomEnabled": false,
"dblClickZoomPercentage": 150,
"cssString": "div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit;\n}",
"name": "",
"x": 820,
"y": 120,
"wires": [
[]
]
},
{
"id": "93e5258f71cbf88e",
"type": "ui_template",
"z": "54f6b0b8fca26abd",
"d": true,
"group": "c3eb264c623728ed",
"name": "",
"order": 3,
"width": 0,
"height": 0,
"format": "<svg viewBox=\"0 0 500 500\" preserveAspectRatio=\"xMaxYMid\" width=\"500px\" height=\"500px\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <defs></defs>\n <g style=\"fill:rgb(4,4,250);fill-rule:evenodd;stroke:rgb(4,4,250);stroke-width:0.1\" id=\"l7\"\n transform=\"matrix(1, 0, 0, 1, 70.77079, 44.973785)\">\n <path d=\"M208,16h6l1,249v1l-1,4h-6z\"></path>\n </g>\n</svg>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"x": 820,
"y": 220,
"wires": [
[]
]
},
{
"id": "ff8c43c5a0777bc8",
"type": "mongodb",
"hostname": "localhost",
"topology": "direct",
"connectOptions": "",
"port": "27017",
"db": "db_node",
"name": ""
},
{
"id": "0628d80477a443bf",
"type": "mqtt-broker",
"name": "",
"broker": "192.168.1.82",
"port": "1883",
"clientid": "",
"autoConnect": true,
"usetls": false,
"protocolVersion": "4",
"keepalive": "60",
"cleansession": true,
"birthTopic": "",
"birthQos": "0",
"birthPayload": "",
"birthMsg": {},
"closeTopic": "",
"closeQos": "0",
"closePayload": "",
"closeMsg": {},
"willTopic": "",
"willQos": "0",
"willPayload": "",
"willMsg": {},
"userProps": "",
"sessionExpiry": ""
},
{
"id": "9fd78c3557eccc31",
"type": "ui_group",
"name": "Temperature",
"tab": "91d0c7ea688ee562",
"order": 2,
"disp": true,
"width": "6",
"collapse": false
},
{
"id": "5e9d4c019c0c1e3d",
"type": "ui_group",
"name": "Group 1",
"tab": "68cdac2d49de816e",
"order": 1,
"disp": true,
"width": 6
},
{
"id": "3b8ccfff0273771a",
"type": "ui_group",
"name": "Humidity",
"tab": "91d0c7ea688ee562",
"order": 4,
"disp": true,
"width": "6",
"collapse": false
},
{
"id": "c3eb264c623728ed",
"type": "ui_group",
"name": "Rack",
"tab": "91d0c7ea688ee562",
"order": 1,
"disp": false,
"width": "7",
"collapse": false
},
{
"id": "9b910ec4679dd572",
"type": "ui_group",
"name": "Temperature Chart",
"tab": "91d0c7ea688ee562",
"order": 3,
"disp": true,
"width": 12,
"collapse": false
},
{
"id": "4cceea86c345a084",
"type": "ui_group",
"name": "Humidity Chart",
"tab": "91d0c7ea688ee562",
"order": 5,
"disp": true,
"width": 12,
"collapse": false
},
{
"id": "03247b3d4be3ec04",
"type": "ui_group",
"name": "Buttons",
"tab": "91d0c7ea688ee562",
"order": 6,
"disp": true,
"width": "6",
"collapse": false
},
{
"id": "d94002057e164c3f",
"type": "ui_group",
"name": "svg",
"tab": "91d0c7ea688ee562",
"order": 7,
"disp": true,
"width": "6",
"collapse": false
},
{
"id": "91d0c7ea688ee562",
"type": "ui_tab",
"name": "Zentinel 32U",
"icon": "dashboard",
"disabled": false,
"hidden": false
},
{
"id": "68cdac2d49de816e",
"type": "ui_tab",
"name": "Zentinel C2A",
"icon": "dashboard",
"order": 2,
"disabled": false,
"hidden": false
}
]
