Font colour change scrolling table

[ReeceD]

Hi all,

I have created the code below to indicate when a RFID tag has been scanned to trigger a relay. I have also managed to source a scrolling text UI showing all the tags I have scanned.

I would like to be able to change the colour of the text for the tag that is "Unrecognizable" from black to red. Would anyone be able to point me in the right direction with some advice?

Many thanks,
Reece

[{"id":"39874e85.6db4b2","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"f2c62674.f686f8","type":"function","z":"39874e85.6db4b2","name":"Add word to scrolling table","func":"let pay = msg.payload.epc.value;\n\n// Read scrolling table from context\nlet sctab = flow.get(\"sctab\");\n\n// Modify scrolling table by adding msg.payload as first element\nlet size = sctab.unshift(pay);\n\n// Remove last element from scrolling table\nif (size >14) sctab.pop();\n\n// Update context for scrolling text\nflow.set(\"sctab\",sctab);\n\n// Shalow copy updated scrolling table to msg.payload\nmsg.payload.epc.value = [...sctab];\n\nreturn msg;","outputs":1,"noerr":0,"x":1000,"y":680,"wires":[["c828b07d.27622"]]},{"id":"c828b07d.27622","type":"ui_template","z":"39874e85.6db4b2","group":"3bddc066.5a7d3","name":"Scrolling feed","order":3,"width":"0","height":"0","format":"<style>\n\n    #tex1 {\n        \n        font-weight:normal;\n        font-size: 10;\n        letter-spacing: 4px;\n        fill: black;\n        \n    }\n        #tex2 {\n        \n        font-weight:normal;\n        font-size: 10;\n        letter-spacing: 4px;\n        fill: red;\n        \n    }\n</style>\n\n\n<svg height=\"300\" width=\"700\" >\n\n<text id=\"tex1\" x=\"10\" y=\"30\" > {{msg.payload.epc.value[0]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"50\" > {{msg.payload.epc.value[1]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"70\" > {{msg.payload.epc.value[2]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"90\" > {{msg.payload.epc.value[3]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"110\" > {{msg.payload.epc.value[4]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"130\" > {{msg.payload.epc.value[5]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"150\" > {{msg.payload.epc.value[6]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"170\" > {{msg.payload.epc.value[7]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"190\" > {{msg.payload.epc.value[8]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"210\" > {{msg.payload.epc.value[9]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"230\" > {{msg.payload.epc.value[10]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"250\" > {{msg.payload.epc.value[11]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"270\" > {{msg.payload.epc.value[12]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"290\" > {{msg.payload.epc.value[13]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"310\" > {{msg.payload.epc.value[14]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"330\" > {{msg.payload.epc.value[15]}} </text>\n</svg>\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":1240,"y":680,"wires":[[]]},{"id":"85ac60b1.c2dda","type":"inject","z":"39874e85.6db4b2","name":"Unrecognized Tag","topic":"","payload":"{\"epc\":{\"value\":\"urn:epc:raw:96.x2017030608725A011A603D58\"},\"tag\":null,\"rawHex\":null,\"rawDecimal\":null,\"extension\":null}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":410,"y":740,"wires":[["f2c62674.f686f8"]]},{"id":"5dead3c1.354b8c","type":"inject","z":"39874e85.6db4b2","name":"Recognized Tag","topic":"","payload":"{\"epc\":{\"value\":\"urn:epc:raw:80.x66666666666666666666\"},\"tag\":null,\"rawHex\":null,\"rawDecimal\":null,\"extension\":null}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":420,"y":660,"wires":[["f2c62674.f686f8"]]},{"id":"3bddc066.5a7d3","type":"ui_group","z":"","name":"Teste","tab":"977b72ab.186b2","disp":false,"width":"6"},{"id":"977b72ab.186b2","type":"ui_tab","z":"","name":"LAB","icon":"dashboard"}]

[zenofmud]

It would be helpful if you could create a small flow sending data to the table. You could do that by attachng a debug node (set to display the complete msg object) and then putting that data in an inject node and connecting it to the bottom part of your flow.

That will make it easier to help you out.

[ReeceD]

Sorry about that! I have edited my response to include a simplified example of the code

[zenofmud]

In you r example flow, try adding a debug node on the output of your function node and see what shows up.

[ReeceD]

I am getting an array of the strings I want-

[zenofmud]

Interesting because using the flow you posted I get an error:

[ReeceD]

Oh that is strange? Im not too sure why. I have just copied the code to another Flow tab and am having the same issue as yourself Ahhhhhh!!

[hotNipi]

Fix for that

let sctab = flow.get("sctab") || [];

[ReeceD]

Thanks hotNipi

[ReeceD]

I have tried to include a script in the UI code, which defines the colour of the text within , to no avail. Thoughts?

[{"id":"f2c62674.f686f8","type":"function","z":"39874e85.6db4b2","name":"Add word to scrolling table","func":"let pay = msg.payload.epc.value;\n\n// Read scrolling table from context\nlet sctab = flow.get(\"sctab\") || [];\n\n// Modify scrolling table by adding msg.payload as first element\nlet size = sctab.unshift(pay);\n\n// Remove last element from scrolling table\nif (size >14) sctab.pop();\n\n// Update context for scrolling text\nflow.set(\"sctab\",sctab);\n\n// Shalow copy updated scrolling table to msg.payload\nmsg.payload.epc.value = [...sctab];\n\nswitch (msg.payload.epc.value) {\n\ncase (msg.payload.epc.value.includes('raw:96')) : \n    msg.color = \"red\";\n    break;\n    \ndefault : \n    msg.color = \"black\";\n    break;\n}\n    \n\nreturn msg;","outputs":1,"noerr":0,"x":860,"y":700,"wires":[["c828b07d.27622","a9c0edda.37cb5"]]},{"id":"c828b07d.27622","type":"ui_template","z":"39874e85.6db4b2","group":"3bddc066.5a7d3","name":"Scrolling feed","order":3,"width":"0","height":"0","format":"\n<script>\n//switch (msg.payload.epc.value) {\n\n//case (msg.payload.epc.value.includes('raw:96')) : \n//    color: \"red\";\n  //  break;\n    \n//default : \n  //  msg.color = \"black\";\n    //break;\n//    }\n{\n  if (msg.payload.epc.value.includes(\"raw:96\"));\n        msg.color: red;\n    \n    else;\n        msg.color: black;\n\n\nreturn msg;\n}\n</script>\n\n<style>\n    #tex1 {\n        \n        font-weight:normal;\n        font-size: 10;\n        letter-spacing: 4px;\n        font: {{msg.color}};\n    }\n</style>\n\n<svg height=\"300\" width=\"700\" >\n    \n\n\n<text id=\"tex1\" x=\"10\" y=\"30\" > {{msg.payload.epc.value[0]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"50\" > {{msg.payload.epc.value[1]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"70\" > {{msg.payload.epc.value[2]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"90\" > {{msg.payload.epc.value[3]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"110\" > {{msg.payload.epc.value[4]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"130\" > {{msg.payload.epc.value[5]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"150\" > {{msg.payload.epc.value[6]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"170\" > {{msg.payload.epc.value[7]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"190\" > {{msg.payload.epc.value[8]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"210\" > {{msg.payload.epc.value[9]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"230\" > {{msg.payload.epc.value[10]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"250\" > {{msg.payload.epc.value[11]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"270\" > {{msg.payload.epc.value[12]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"290\" > {{msg.payload.epc.value[13]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"310\" > {{msg.payload.epc.value[14]}} </text>\n<text id=\"tex1\" x=\"10\" y=\"330\" > {{msg.payload.epc.value[15]}} </text>\n</svg>\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":1180,"y":700,"wires":[[]]},{"id":"85ac60b1.c2dda","type":"inject","z":"39874e85.6db4b2","name":"Unrecognized Tag","topic":"","payload":"{\"epc\":{\"value\":\"urn:epc:raw:96.x2017030608725A011A603D58\"},\"tag\":null,\"rawHex\":null,\"rawDecimal\":null,\"extension\":null}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":410,"y":720,"wires":[["f2c62674.f686f8"]]},{"id":"5dead3c1.354b8c","type":"inject","z":"39874e85.6db4b2","name":"Recognized Tag","topic":"","payload":"{\"epc\":{\"value\":\"urn:epc:raw:80.x66666666666666666666\"},\"tag\":null,\"rawHex\":null,\"rawDecimal\":null,\"extension\":null}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":400,"y":680,"wires":[["f2c62674.f686f8"]]},{"id":"a9c0edda.37cb5","type":"debug","z":"39874e85.6db4b2","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":1170,"y":660,"wires":[]},{"id":"3bddc066.5a7d3","type":"ui_group","z":"","name":"Teste","tab":"977b72ab.186b2","disp":false,"width":"6"},{"id":"977b72ab.186b2","type":"ui_tab","z":"","name":"LAB","icon":"dashboard"}]

[hotNipi]

Slight modifications to get first results but be aware, the solution is far from complete.

[{"id":"60d20d15.e63144","type":"function","z":"94f3e22a.5d351","name":"Add word to scrolling table","func":"let pay = msg.payload.epc.value;\n\nvar color = \"black\";\nif(pay.includes('raw:96')) { \n   color = \"red\";\n}\n\n// Read scrolling table from context\nlet sctab = flow.get(\"sctab\") || [];\n\n// Modify scrolling table by adding msg.payload as first element\nlet size = sctab.unshift({val:pay,col:color});\n\n// Remove last element from scrolling table\nif (size >14) sctab.pop();\n// Update context for scrolling text\nflow.set(\"sctab\",sctab);\n\n// Shalow copy updated scrolling table to msg.payload\nmsg.payload = [...sctab];\n    \n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":680,"y":580,"wires":[["54aa1394.f5915c","cc54c514.4bace8"]]},{"id":"54aa1394.f5915c","type":"ui_template","z":"94f3e22a.5d351","group":"142cb5d9.dc74ca","name":"Scrolling feed","order":3,"width":"0","height":"0","format":"<style>\n    .tex1 {\n        font-weight:normal;\n        font-size: 10;\n        letter-spacing: 4px;\n    }\n</style>\n\n<svg height=\"300\" width=\"700\" >\n    <text class=\"tex1\" x=\"10\" y=\"30\" fill={{msg.payload[0].col}} > {{msg.payload[0].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"50\" fill={{msg.payload[1].col}}> {{msg.payload[1].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"70\" fill={{msg.payload[2].col}}> {{msg.payload[2].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"90\" fill={{msg.payload[3].col}}> {{msg.payload[3].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"110\" fill={{msg.payload[4].col}}> {{msg.payload[4].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"130\" fill={{msg.payload[5].col}}> {{msg.payload[5].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"150\" fill={{msg.payload[6].col}}> {{msg.payload[6].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"170\" fill={{msg.payload[7].col}}> {{msg.payload[7].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"190\" fill={{msg.payload[8].col}}> {{msg.payload[8].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"210\" fill={{msg.payload[9].col}}> {{msg.payload[9].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"230\" fill={{msg.payload[10].col}}> {{msg.payload[10].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"250\" fill={{msg.payload[11].col}}> {{msg.payload[11].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"270\" fill={{msg.payload[12].col}}> {{msg.payload[12].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"290\" fill={{msg.payload[13].col}}> {{msg.payload[13].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"310\" fill={{msg.payload[14].col}}> {{msg.payload[14].val}} </text>\n    <text class=\"tex1\" x=\"10\" y=\"330\" fill={{msg.payload[15].col}}> {{msg.payload[15].val}} </text>\n</svg>\n\n","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":920,"y":580,"wires":[[]]},{"id":"57bf70c8.37296","type":"inject","z":"94f3e22a.5d351","name":"Unrecognized Tag","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"epc\":{\"value\":\"urn:epc:raw:96.x2017030608725A011A603D58\"},\"tag\":null,\"rawHex\":null,\"rawDecimal\":null,\"extension\":null}","payloadType":"json","x":430,"y":600,"wires":[["60d20d15.e63144"]]},{"id":"11e79626.d4023a","type":"inject","z":"94f3e22a.5d351","name":"Recognized Tag","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"epc\":{\"value\":\"urn:epc:raw:80.x66666666666666666666\"},\"tag\":null,\"rawHex\":null,\"rawDecimal\":null,\"extension\":null}","payloadType":"json","x":420,"y":560,"wires":[["60d20d15.e63144"]]},{"id":"cc54c514.4bace8","type":"debug","z":"94f3e22a.5d351","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":910,"y":540,"wires":[]},{"id":"142cb5d9.dc74ca","type":"ui_group","z":"","name":"Teste","tab":"fe5d4c66.034fc","order":1,"disp":false,"width":"6"},{"id":"fe5d4c66.034fc","type":"ui_tab","z":"","name":"LAB","icon":"dashboard"}]

[ReeceD]

You are a star! Thank you