Hi everyone
I'm trying to recreate what used to work in dashboard 1, in dashboard 2
As my gate move, the background of the button fill-up the button according to it's position
I use to do it by passing the position to a function node to create a msg.payload with a gradian string that move with the gate position (the position is given by my Logo PLC)
I send this message to a template and put it to the root section of de CSS code.
Si the gradian string is available in the root section.
Then I create a class that use the gradian and apply it to the button.
In dashboard 2, the msg.payload in the root section stay as "msg.payload" and not the content (gradian string).
Here is the code for dashboard 1 and2, for a light button which use the same trick
It's maybe not the right way to do it ?!
Cheers
Pierre
[
{
"id": "c98d320c349fd2c8",
"type": "s7 in",
"z": "da5ea0e3.80dff",
"g": "261a948a9a2b2a7c",
"endpoint": "5ee1b8d9.11d978",
"mode": "single",
"variable": "B028-current time",
"diff": true,
"name": "",
"x": 450,
"y": 2920,
"wires": [
[
"b9b8062a28465fc7"
]
]
},
{
"id": "b9b8062a28465fc7",
"type": "function",
"z": "da5ea0e3.80dff",
"g": "261a948a9a2b2a7c",
"name": "gradian",
"func": "var count;\nlet maxi=global.get(\"lumiere.tempolength\")*60;\nlet tempo=global.get(\"lumiere.tempo\");\nlet etat=flow.get(\"jrd.lumiere.etat\",\"memoryOnly\");\n\nif (etat == false) {\n count = 0 + \"%\";\n} else {\n if (tempo == true) {\n count = (100 - msg.payload / maxi * 100) + \"%\";\n } else {\n count = 100 + \"%\";\n }\n\n }\n\n\n//msg.payload = \"linear-gradient(90deg, rgba(43, 131, 232, 1) 0%, rgba(43, 131, 232, 1) \" + count + \", rgba(0, 0, 0, 0) \" + count + \")\"\nmsg.payload = \"linear-gradient(90deg, var(--clrON1) 0%, var(--clrON1) \" + count + \", rgba(0, 0, 0, 0) \" + count + \")\"\n\n\nreturn msg;",
"outputs": 1,
"timeout": "",
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 680,
"y": 2880,
"wires": [
[
"bdad615566720824",
"0bf2d07e34c5de28",
"83240363ebd7ef1c"
]
]
},
{
"id": "0bf2d07e34c5de28",
"type": "ui-template",
"z": "da5ea0e3.80dff",
"g": "261a948a9a2b2a7c",
"group": "",
"page": "",
"ui": "da8557b3525c7464",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"head": "",
"format": "\n :root {\n --loadingC: {{ msg.payload }};\n }\n \n [id=\"nrdb-ui-widget-49a338e9edb27076\"] > button {\n background-image: var(--loadingC);\n /*background-image: linear-gradient(90deg, rgba(47,117,250,1) 0%, rgba(0,255,219,1) 37%, rgba(124,255,166,1) 100%);*/\n background-color: var(--clrOff);\n }\n",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "site:style",
"className": "",
"x": 860,
"y": 2920,
"wires": [
[
"94202bdb663d8e3f"
]
]
},
{
"id": "bdad615566720824",
"type": "ui_template",
"z": "da5ea0e3.80dff",
"g": "261a948a9a2b2a7c",
"group": "aedadc2eea351ad5",
"name": "loading",
"order": 4,
"width": 0,
"height": 0,
"format": "<style>\n :root {\n --loadingC: {{msg.payload}};\n }\n [node-id=\"999f5afe.16306\"] > button {\n background-image: var(--loadingC);\n /*background-image: linear-gradient(90deg, rgba(47,117,250,1) 0%, rgba(0,255,219,1) 37%, rgba(124,255,166,1) 100%);*/\n background-color: #606060;\n }\n</style>\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 860,
"y": 2880,
"wires": [
[]
]
},
{
"id": "5ee1b8d9.11d978",
"type": "s7 endpoint",
"transport": "iso-on-tcp",
"address": "192.168.1.155",
"port": "102",
"rack": "2",
"slot": "3",
"localtsaphi": "02",
"localtsaplo": "00",
"remotetsaphi": "03",
"remotetsaplo": "00",
"connmode": "rack-slot",
"adapter": "",
"busaddr": "2",
"cycletime": "1000",
"timeout": "5000",
"name": "LOGO",
"vartable": [
{
"addr": "DB1,X1024.0",
"name": "I1.1"
},
{
"addr": "DB1,X1024.1",
"name": "I1.2"
},
{
"addr": "DB1,X1024.2",
"name": "I1.3"
},
{
"addr": "DB1,X1024.3",
"name": "I1.4"
},
{
"addr": "DB1,X1024.4",
"name": "I1.5"
},
{
"addr": "DB1,X1024.5",
"name": "I1.6"
},
{
"addr": "DB1,X1024.6",
"name": "I1.7"
},
{
"addr": "DB1,X1024.7",
"name": "I1.8"
},
{
"addr": "DB1,X1025.0",
"name": "I2.1"
},
{
"addr": "DB1,X1025.1",
"name": "I2.2"
},
{
"addr": "DB1,X1025.2",
"name": "I2.3"
},
{
"addr": "DB1,X1025.3",
"name": "I2.4"
},
{
"addr": "DB1,X1025.4",
"name": "I2.5"
},
{
"addr": "DB1,X1025.5",
"name": "I2.6"
},
{
"addr": "DB1,X1025.6",
"name": "I2.7"
},
{
"addr": "DB1,X1025.7",
"name": "I2.8"
},
{
"addr": "DB1,X1064.0",
"name": "Q1.1"
},
{
"addr": "DB1,X1064.1",
"name": "Q1.2"
},
{
"addr": "DB1,X1064.2",
"name": "Q1.3"
},
{
"addr": "DB1,X1064.3",
"name": "Q1.4"
},
{
"addr": "DB1,X1064.4",
"name": "Q2.1"
},
{
"addr": "DB1,X1064.5",
"name": "Q2.2"
},
{
"addr": "DB1,X1064.6",
"name": "Q2.3"
},
{
"addr": "DB1,X1064.7",
"name": "Q2.4"
},
{
"addr": "DB1,X1065.0",
"name": "Q2.5"
},
{
"addr": "DB1,X1065.1",
"name": "Q2.6"
},
{
"addr": "DB1,X1065.2",
"name": "Q2.7"
},
{
"addr": "DB1,X1065.3",
"name": "Q2.8"
},
{
"addr": "DB1,X4.0",
"name": "Ni4.0"
},
{
"addr": "DB1,X4.1",
"name": "Ni4.1"
},
{
"addr": "DB1,X4.2",
"name": "Ni4.2"
},
{
"addr": "DB1,X4.3",
"name": "Ni4.3"
},
{
"addr": "DB1,X4.4",
"name": "Ni4.4"
},
{
"addr": "DB1,X4.5",
"name": "Ni4.5"
},
{
"addr": "DB1,X4.6",
"name": "Ni4.6"
},
{
"addr": "DB1,X4.7",
"name": "Ni4.7"
},
{
"addr": "DB1,X5.0",
"name": "Nq1"
},
{
"addr": "DB1,X5.1",
"name": "Nq2"
},
{
"addr": "DB1,X5.2",
"name": "Nq3"
},
{
"addr": "DB1,X5.3",
"name": "Nq4"
},
{
"addr": "DB1,X5.4",
"name": "Nq5"
},
{
"addr": "DB1,X5.5",
"name": "Nq6"
},
{
"addr": "DB1,X5.6",
"name": "Nq7"
},
{
"addr": "DB1,X5.7",
"name": "Nq8"
},
{
"addr": "DB1,WORD600",
"name": "NAI1"
},
{
"addr": "DB1,WORD700",
"name": "NAQ1"
},
{
"addr": "DB1,WORD602",
"name": "NAI2bis"
},
{
"addr": "DB1,WORD300",
"name": "B028-delay"
},
{
"addr": "DB1,WORD302",
"name": "B028-remainning time"
},
{
"addr": "DB1,BYTE304",
"name": "B028-unit"
},
{
"addr": "DB1,WORD305",
"name": "B028-current time"
},
{
"addr": "DB1,X6.0",
"name": "Ni6.0"
},
{
"addr": "DB1,X6.1",
"name": "Ni6.1"
},
{
"addr": "DB1,WORD307",
"name": "B043-OffDelay"
},
{
"addr": "DB1,WORD309",
"name": "B043-RemainingTime"
},
{
"addr": "DB1,WORD311",
"name": "B043-Unit"
},
{
"addr": "DB1,WORD312",
"name": "B043-CurrentTime"
},
{
"addr": "DB1,WORD314",
"name": "B025-CurentTime"
},
{
"addr": "DB1,WORD316",
"name": "B025-OffDelay"
},
{
"addr": "DB1,WORD318",
"name": "B025-RemainingTime"
},
{
"addr": "DB1,WORD312",
"name": "B025-Unit"
},
{
"addr": "DB1,WORD321",
"name": "B030-CurentTime"
},
{
"addr": "DB1,WORD323",
"name": "B0305-OffDelay"
},
{
"addr": "DB1,WORD325",
"name": "B030-RemainingTime"
},
{
"addr": "DB1,WORD327",
"name": "B030-Unit"
},
{
"addr": "DB1,WORD328",
"name": "B006-CurrentTime"
},
{
"addr": "DB1,WORD330",
"name": "B006-OnDelay"
},
{
"addr": "DB1,WORD332",
"name": "B006-RemainingTime"
},
{
"addr": "DB1,WORD334",
"name": "B006-DelayTimeBase"
},
{
"addr": "DB1,X6.2",
"name": "NI6.2"
},
{
"addr": "DB1,DWORD335",
"name": "B055-Counter"
},
{
"addr": "DB1,X6.3",
"name": "NI6.3"
},
{
"addr": "DB1,X6.4",
"name": "NI6.4"
},
{
"addr": "DB1,X6.5",
"name": "NI6.5"
},
{
"addr": "DB1,X6.6",
"name": "NI6.6"
},
{
"addr": "DB1,X6.7",
"name": "NI6.7"
},
{
"addr": "DB1,DWORD347",
"name": "B055-ONthreshold"
},
{
"addr": "DB1,DWORD351",
"name": "B055-OFFthreshold"
},
{
"addr": "DB1,WORD339",
"name": "B063-Freq"
},
{
"addr": "DB1,WORD341",
"name": "B063-ONthreshold"
},
{
"addr": "DB1,WORD343",
"name": "B063-OFFthreshold"
},
{
"addr": "DB1,WORD355",
"name": "B052-OffDelay"
},
{
"addr": "DB1,WORD357",
"name": "B056-OffDelay"
},
{
"addr": "DB1,X1065.4",
"name": "Q3.1"
},
{
"addr": "DB1,X1065.5",
"name": "Q3.2"
},
{
"addr": "DB1,X1065.6",
"name": "Q3.3"
},
{
"addr": "DB1,X1065.7",
"name": "Q3.4"
},
{
"addr": "DB1,X1066.0",
"name": "Q3.5"
},
{
"addr": "DB1,X1066.1",
"name": "Q3.6"
},
{
"addr": "DB1,X1066.2",
"name": "Q3.7"
},
{
"addr": "DB1,X1066.3",
"name": "Q3.8"
},
{
"addr": "DB1,X1026.0",
"name": "I3.1"
},
{
"addr": "DB1,X1026.1",
"name": "I3.2"
},
{
"addr": "DB1,X1026.2",
"name": "I3.3"
},
{
"addr": "DB1,X1026.3",
"name": "I3.4"
},
{
"addr": "DB1,X1026.4",
"name": "I3.5"
},
{
"addr": "DB1,X1026.5",
"name": "I3.6"
},
{
"addr": "DB1,X1026.6",
"name": "I3.7"
},
{
"addr": "DB1,X1026.7",
"name": "I3.8"
},
{
"addr": "DB1,WORD359",
"name": "B098-CurrentTime"
},
{
"addr": "DB1,WORD361",
"name": "B098-OffDelay"
},
{
"addr": "DB1,WORD363",
"name": "B098-RemainingTime"
},
{
"addr": "DB1,WORD365",
"name": "B111-Counter"
}
]
},
{
"id": "da8557b3525c7464",
"type": "ui-base",
"name": "Bullion",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"showPageTitle": true,
"navigationStyle": "default",
"titleBarStyle": "default"
},
{
"id": "aedadc2eea351ad5",
"type": "ui_group",
"name": "Arrosage",
"tab": "b30fa2cf.b0f918",
"order": 14,
"disp": false,
"width": "4",
"collapse": false,
"className": ""
},
{
"id": "b30fa2cf.b0f918",
"type": "ui_tab",
"name": "Maison",
"icon": "fa-home",
"order": 1,
"disabled": false,
"hidden": false
}
]
