# Font colour change scrolling table

**URL:** <https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670>\
**Category:** Dashboard\
**Created:** [7 July 2020 15:41 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670 "2020-07-07T15:41:04Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![ReeceD](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@ReeceD](https://discourse.nodered.org/u/ReeceD)\
**Post date:** [7 July 2020 15:41 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/1 "2020-07-07T15:41:05Z")

</div>

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

```auto
[{"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"}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 July 2020 17:33 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/2 "2020-07-07T17:33:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ReeceD](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@ReeceD](https://discourse.nodered.org/u/ReeceD)\
**Post date:** [8 July 2020 09:07 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/3 "2020-07-08T09:07:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [8 July 2020 10:59 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/4 "2020-07-08T10:59:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ReeceD](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@ReeceD](https://discourse.nodered.org/u/ReeceD)\
**Post date:** [8 July 2020 11:51 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/5 "2020-07-08T11:51:37Z")

</div>

I am getting an array of the strings I want-

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/7269104a62de48e5fd632031a6a5a9c16d191244.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [8 July 2020 14:45 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/6 "2020-07-08T14:45:26Z")

</div>

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

 ![Screen Shot 2020-07-08 at 10.44.10 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/c/dc44568f3b643348967e5790201ae062f912dc9b.png)

---

<div class="post-metadata">

**Author:** ![ReeceD](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@ReeceD](https://discourse.nodered.org/u/ReeceD)\
**Post date:** [8 July 2020 15:03 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/7 "2020-07-08T15:03:24Z")

</div>

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!!

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [8 July 2020 15:04 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/8 "2020-07-08T15:04:51Z")

</div>

Fix for that

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

```

---

<div class="post-metadata">

**Author:** ![ReeceD](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@ReeceD](https://discourse.nodered.org/u/ReeceD)\
**Post date:** [8 July 2020 15:06 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/9 "2020-07-08T15:06:19Z")

</div>

Thanks hotNipi

---

<div class="post-metadata">

**Author:** ![ReeceD](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@ReeceD](https://discourse.nodered.org/u/ReeceD)\
**Post date:** [9 July 2020 11:04 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/10 "2020-07-09T11:04:42Z")

</div>

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

```auto
[{"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"}]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 July 2020 11:28 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/11 "2020-07-09T11:28:06Z")

</div>

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

```auto
[{"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"}]

```

---

<div class="post-metadata">

**Author:** ![ReeceD](https://avatars.discourse-cdn.com/v4/letter/r/7feea3/32.png) [@ReeceD](https://discourse.nodered.org/u/ReeceD)\
**Post date:** [9 July 2020 16:33 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/12 "2020-07-09T16:33:15Z")

</div>

You are a star! Thank you

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [23 July 2020 16:33 UTC](https://discourse.nodered.org/t/font-colour-change-scrolling-table/29670/13 "2020-07-23T16:33:18Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.