# How would you style this dashboard?
**URL:** https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793
**Category:** Dashboard
**Created:** [17 January 2022 12:01 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793 "2022-01-17T12:01:57Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [17 January 2022 12:01 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/1 "2022-01-17T12:01:57Z")
Inspired by Dynamic Dave's ["trainspotting"](https://discourse.nodered.org/t/trainspotting-with-node-red/36508) exercise, I am (again) making a departures board for railway stations.
Looking at the result without any styling overrides, it's very plain.
Clearly it can be enhanced, I just wondered how other Node-red fans would choose to display this data.
Here is the flow. I've included a bit of test data if anyone is interested but doesn't have a National Rail API key.
The stations are on the Oban and Mallaig routes, because who wouldn't want to make a trip to Rannoch Moor or Tyndrum Lower?
```auto
[{"id":"3fd2634d3eb8f47a","type":"tab","label":"Trains","disabled":false,"info":"","env":[]},{"id":"bec02064d7a5561c","type":"group","z":"3fd2634d3eb8f47a","name":"Departures Board - OpenLDBWS","style":{"label":true},"nodes":["3bb4cb26ff0d939a","32c367f59dd1d710","093b5812120c1d5d","b47efe72d2b80320","05bc265edbfe70be","b3469892d693bca6","418cb8f916d2027c"],"x":54,"y":119,"w":872,"h":122},{"id":"492283bddca59038","type":"group","z":"3fd2634d3eb8f47a","name":"Setup Station List","style":{"label":true},"nodes":["fdfbc56a0a08725a","c4279fd4b756290b","92053ffc3885fcfd","0f119829361b7add"],"x":54,"y":19,"w":632,"h":82},{"id":"fd6a03d270cd37e7","type":"group","z":"3fd2634d3eb8f47a","name":"Sample Data","style":{"label":true},"nodes":["de44c4077af65e98","c6eb178668784c60"],"x":54,"y":259,"w":352,"h":82},{"id":"3bb4cb26ff0d939a","type":"natrail","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","name":"","scode":"","destscode":"","property":"payload","api":"02f91ae2b9002a87","x":150,"y":160,"wires":[["093b5812120c1d5d","05bc265edbfe70be"]]},{"id":"32c367f59dd1d710","type":"function","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","name":"Select fields","func":"let payload = msg.payload;\nmsg.payload = {\n Destination: payload.destination.name,\n Due: payload.std,\n Expected: payload.etd,\n Platform: payload.platform,\n}\nmsg.topic = payload.serviceId\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":200,"wires":[["b47efe72d2b80320"]]},{"id":"093b5812120c1d5d","type":"split","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":330,"y":200,"wires":[["32c367f59dd1d710"]]},{"id":"b47efe72d2b80320","type":"join","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","name":"","mode":"auto","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":650,"y":200,"wires":[["418cb8f916d2027c"]]},{"id":"05bc265edbfe70be","type":"switch","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","name":"Empty?","property":"payload","propertyType":"msg","rules":[{"t":"empty"}],"checkall":"true","repair":false,"outputs":1,"x":340,"y":160,"wires":[["b3469892d693bca6"]]},{"id":"b3469892d693bca6","type":"function","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","name":"\"No service\"","func":"msg.payload = [{\n Destination: \"No Service\",\n}]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":630,"y":160,"wires":[["418cb8f916d2027c"]]},{"id":"418cb8f916d2027c","type":"ui_table","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","group":"53edc9958407538c","name":"Departure Board","order":0,"width":"12","height":"6","columns":[],"outputs":0,"cts":false,"x":820,"y":160,"wires":[]},{"id":"fdfbc56a0a08725a","type":"ui_dropdown","z":"3fd2634d3eb8f47a","g":"492283bddca59038","name":"","label":"Station","tooltip":"","place":"Select option","group":"d129285e4b08a665","order":1,"width":"0","height":"0","passthru":true,"multiple":false,"options":[],"payload":"","topic":"topic","topicType":"msg","className":"","x":420,"y":60,"wires":[["0f119829361b7add"]]},{"id":"c4279fd4b756290b","type":"function","z":"3fd2634d3eb8f47a","g":"492283bddca59038","name":"","func":"msg.options = [{\"Ardlui \":\"AUI\"},\n{\"Arisaig \":\"ARG\"},\n{\"Arrochar & Tarbert \":\"ART\"},\n{\"Banavie \":\"BNV\"},\n{\"Beasdale \":\"BSL\"},\n{\"Bridge of Orchy \":\"BRO\"},\n{\"Connel Ferry \":\"CON\"},\n{\"Corpach \":\"CPA\"},\n{\"Corrour \":\"CRR\"},\n{\"Crianlarich \":\"CNR\"},\n{\"Dalmally \":\"DAL\"},\n{\"Dalmuir \":\"DMR\"},\n{\"Dumbarton Central \":\"DBC\"},\n{\"Fort William \":\"FTW\"},\n{\"Garelochhead \":\"GCH\"},\n{\"Glasgow Queen Street \":\"GLQ\"},\n{\"Glenfinnan \":\"GLF\"},\n{\"Helensburgh Upper \":\"HLU\"},\n{\"Lochailort \":\"LCL\"},\n{\"Loch Awe \":\"LHA\"},\n{\"Loch Eil Outward Bound \":\"LHE\"},\n{\"Locheilside \":\"LCS\"},\n{\"Mallaig \":\"MLG\"},\n{\"Morar \":\"MRR\"},\n{\"Oban \":\"OBN\"},\n{\"Rannoch \":\"RAN\"},\n{\"Roy Bridge \":\"RYB\"},\n{\"Spean Bridge \":\"SBR\"},\n{\"Taynuilt \":\"TAY\"},\n{\"Tulloch \":\"TUL\"},\n{\"Tyndrum Lower \":\"TYL\"},\n{\"Upper Tyndrum \":\"UTY\"},\n];\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":280,"y":60,"wires":[["fdfbc56a0a08725a"]]},{"id":"92053ffc3885fcfd","type":"inject","z":"3fd2634d3eb8f47a","g":"492283bddca59038","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"go","payloadType":"str","x":150,"y":60,"wires":[["c4279fd4b756290b"]]},{"id":"0f119829361b7add","type":"change","z":"3fd2634d3eb8f47a","g":"492283bddca59038","name":"","rules":[{"t":"set","p":"station","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":60,"wires":[["3bb4cb26ff0d939a"]]},{"id":"de44c4077af65e98","type":"function","z":"3fd2634d3eb8f47a","g":"fd6a03d270cd37e7","name":"","func":"msg.payload =[{\"std\":\"14:55\",\"etd\":\"On time\",\"platform\":\"8\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"L147ErXMszp5ov0xNUqDmA==\",\"origin\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"},\"destination\":{\"name\":\"Helensburgh Central\",\"crs\":\"HLC\"}},\n{\"std\":\"14:00\",\"etd\":\"On time\",\"platform\":\"4\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"h2K/HSMAiDcwXQ7KuGbVUw==\",\"rsid\":\"SR428600\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"}},\n{\"std\":\"14:07\",\"etd\":\"On time\",\"platform\":\"9\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"/hX5fBuhljgrTu9K9xNIZQ==\",\"origin\":{\"name\":\"Partick\",\"crs\":\"PTK\"},\"destination\":{\"name\":\"Springburn\",\"crs\":\"SPR\"}},\n{\"std\":\"14:15\",\"etd\":\"On time\",\"platform\":\"9\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"kVdqLAqyiERVZkTn2Vq9KA==\",\"origin\":{\"name\":\"Helensburgh Central\",\"crs\":\"HLC\"},\"destination\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"}},\n{\"std\":\"14:16\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"p3wwREWYDgRjVyMbJsQNgQ==\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Alloa\",\"crs\":\"ALO\"}},\n{\"std\":\"14:25\",\"etd\":\"On time\",\"platform\":\"8\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"tQ5TSAszmE1Uy589SCE61w==\",\"origin\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"},\"destination\":{\"name\":\"Helensburgh Central\",\"crs\":\"HLC\"}},\n{\"std\":\"14:26\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"uaZz1VhAhDPvl6EhT8Ix6g==\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Cumbernauld\",\"crs\":\"CUB\"}},\n{\"std\":\"14:30\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"whotXv2qnkYJ22dq8ORe2Q==\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"}},\n{\"std\":\"14:33\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"lr442VWAGOmTTJOwVSJOjg==\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Anniesland\",\"crs\":\"ANL\"}},\n{\"std\":\"14:38\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"NAAgsCP/7WR/m4M/4/6RZw==\",\"rsid\":\"SR045400\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Elgin\",\"crs\":\"ELG\"}},\n{\"std\":\"14:39\",\"etd\":\"On time\",\"platform\":\"8\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"wr0Gtvg5hM81q23CmQQOdg==\",\"origin\":{\"name\":\"Springburn\",\"crs\":\"SPR\"},\"destination\":{\"name\":\"Partick\",\"crs\":\"PTK\"}},\n{\"std\":\"14:44\",\"etd\":\"On time\",\"platform\":\"9\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"w/U0Mx1JmLx7/WUiV/aGGg==\",\"origin\":{\"name\":\"Helensburgh Central\",\"crs\":\"HLC\"},\"destination\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"}},\n{\"std\":\"14:50\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"AXiCxT1wkyDQDm7EMRI4Xw==\",\"rsid\":\"SR025500\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Dundee\",\"crs\":\"DEE\"}},\n{\"std\":\"14:56\",\"etd\":\"On time\",\"platform\":\"8\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"WYnd3WLFSEaySKqD3l4whw==\",\"origin\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"},\"destination\":{\"name\":\"Helensburgh Central\",\"crs\":\"HLC\"}},\n{\"std\":\"15:00\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"Dsf5kpcxGaiOpWGaXjbRQA==\",\"rsid\":\"SR429000\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"}}];\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":320,"y":300,"wires":[["093b5812120c1d5d"]]},{"id":"c6eb178668784c60","type":"inject","z":"3fd2634d3eb8f47a","g":"fd6a03d270cd37e7","name":"Sample Data","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":300,"wires":[["de44c4077af65e98"]]},{"id":"02f91ae2b9002a87","type":"natRail-config","name":""},{"id":"53edc9958407538c","type":"ui_group","name":"Departures","tab":"85850867b381145e","order":2,"disp":true,"width":"20","collapse":false,"className":""},{"id":"d129285e4b08a665","type":"ui_group","name":"Select Station","tab":"85850867b381145e","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"85850867b381145e","type":"ui_tab","name":"Trains","icon":"dashboard","disabled":false,"hidden":false}]
```
---
### Author:  [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [17 January 2022 18:22 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/2 "2022-01-17T18:22:26Z")
You could always build one like this 😉
> **[UK train departure screen — The MagPi magazine](https://magpi.raspberrypi.com/articles/uk-train-departure-screen)**
>
> A Raspberry Pi enthusiast sets about making an accurate train departure time board
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [17 January 2022 18:40 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/3 "2022-01-17T18:40:58Z")
He's done an excellent job of emulating BR's, or whatever it's called now, platform information signs.
No Node-Red though.
---
### Author:  [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [17 January 2022 18:49 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/4 "2022-01-17T18:49:31Z")
I found that while looking for a font, and here is the one he uses -
> **[GitHub - DanielHartUK/Dot-Matrix-Typeface: A simple Dot Matrix style typeface](https://github.com/DanielHartUK/Dot-Matrix-Typeface)**
>
> A simple Dot Matrix style typeface. Contribute to DanielHartUK/Dot-Matrix-Typeface development by creating an account on GitHub.
---
### Author:  [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [17 January 2022 19:28 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/5 "2022-01-17T19:28:21Z")
Now I have the font I will see what I can come up with 😉
---
### Author:  [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [17 January 2022 19:32 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/6 "2022-01-17T19:32:29Z")
Needs a bit of work but how about this ?
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [17 January 2022 19:34 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/7 "2022-01-17T19:34:02Z")
Needs a bit "air"
---
### Author:  [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [17 January 2022 19:40 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/8 "2022-01-17T19:40:42Z")
will work on layout later tonight 😉
---
### Author:  [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [18 January 2022 01:34 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/11 "2022-01-18T01:34:35Z")
Try this for size, not sure it's what you were after but it was fun learning how to do it 😉
I checked lots of pictures on Google and there are a lot of variations in use so this is an "average" look.
You will need to get the fonts and copy into node-red folder. Change names and paths as required.
```auto
[{"id":"3fd2634d3eb8f47a","type":"tab","label":"Trains","disabled":false,"info":"","env":[]},{"id":"bec02064d7a5561c","type":"group","z":"3fd2634d3eb8f47a","name":"Departures Board - OpenLDBWS","style":{"label":true},"nodes":["3bb4cb26ff0d939a","32c367f59dd1d710","093b5812120c1d5d","b47efe72d2b80320","05bc265edbfe70be","b3469892d693bca6","418cb8f916d2027c","93f5f3ea1db58957"],"x":44,"y":119,"w":892,"h":122},{"id":"492283bddca59038","type":"group","z":"3fd2634d3eb8f47a","name":"Setup Station List","style":{"label":true},"nodes":["fdfbc56a0a08725a","c4279fd4b756290b","92053ffc3885fcfd","0f119829361b7add"],"x":54,"y":19,"w":632,"h":82},{"id":"fd6a03d270cd37e7","type":"group","z":"3fd2634d3eb8f47a","name":"Sample Data","style":{"label":true},"nodes":["de44c4077af65e98","c6eb178668784c60"],"x":54,"y":259,"w":352,"h":82},{"id":"32c367f59dd1d710","type":"function","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","name":"Select fields","func":"let payload = msg.payload;\nmsg.payload = {\n Destination: payload.destination.name,\n Due: payload.std,\n Expected: payload.etd,\n Platform: payload.platform,\n}\n\nvar date = new Date()\nvar h = date.getHours();\nvar m = date.getMinutes();\nvar s = date.getSeconds();\nif (m < 10) { var z = m.toString(); m = \"0\" + z; }\nif (h < 10) { var z = h.toString(); h = \"0\" + z; }\nif (s < 10) { var z = s.toString(); s = \"0\" + z; }\nmsg.time = h + \":\" + m + \":\" + s;\n\nmsg.topic = payload.serviceId\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":200,"wires":[["b47efe72d2b80320"]]},{"id":"093b5812120c1d5d","type":"split","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":330,"y":200,"wires":[["32c367f59dd1d710"]]},{"id":"b47efe72d2b80320","type":"join","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","name":"","mode":"auto","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":650,"y":200,"wires":[["418cb8f916d2027c","93f5f3ea1db58957"]]},{"id":"05bc265edbfe70be","type":"switch","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","name":"Empty?","property":"payload","propertyType":"msg","rules":[{"t":"empty"}],"checkall":"true","repair":false,"outputs":1,"x":340,"y":160,"wires":[["b3469892d693bca6"]]},{"id":"b3469892d693bca6","type":"function","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","name":"\"No service\"","func":"msg.payload = [{\n Destination: \"No Service\",\n}]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":630,"y":160,"wires":[["418cb8f916d2027c","93f5f3ea1db58957"]]},{"id":"418cb8f916d2027c","type":"ui_table","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","group":"53edc9958407538c","name":"Departure Board","order":0,"width":"12","height":"6","columns":[],"outputs":0,"cts":false,"x":820,"y":160,"wires":[]},{"id":"fdfbc56a0a08725a","type":"ui_dropdown","z":"3fd2634d3eb8f47a","g":"492283bddca59038","name":"","label":"Station","tooltip":"","place":"Select option","group":"d129285e4b08a665","order":1,"width":"0","height":"0","passthru":true,"multiple":false,"options":[],"payload":"","topic":"topic","topicType":"msg","className":"","x":420,"y":60,"wires":[["0f119829361b7add"]]},{"id":"c4279fd4b756290b","type":"function","z":"3fd2634d3eb8f47a","g":"492283bddca59038","name":"","func":"msg.options = [{\"Ardlui \":\"AUI\"},\n{\"Arisaig \":\"ARG\"},\n{\"Arrochar & Tarbert \":\"ART\"},\n{\"Banavie \":\"BNV\"},\n{\"Beasdale \":\"BSL\"},\n{\"Bridge of Orchy \":\"BRO\"},\n{\"Connel Ferry \":\"CON\"},\n{\"Corpach \":\"CPA\"},\n{\"Corrour \":\"CRR\"},\n{\"Crianlarich \":\"CNR\"},\n{\"Dalmally \":\"DAL\"},\n{\"Dalmuir \":\"DMR\"},\n{\"Dumbarton Central \":\"DBC\"},\n{\"Fort William \":\"FTW\"},\n{\"Garelochhead \":\"GCH\"},\n{\"Glasgow Queen Street \":\"GLQ\"},\n{\"Glenfinnan \":\"GLF\"},\n{\"Helensburgh Upper \":\"HLU\"},\n{\"Lochailort \":\"LCL\"},\n{\"Loch Awe \":\"LHA\"},\n{\"Loch Eil Outward Bound \":\"LHE\"},\n{\"Locheilside \":\"LCS\"},\n{\"Mallaig \":\"MLG\"},\n{\"Morar \":\"MRR\"},\n{\"Oban \":\"OBN\"},\n{\"Rannoch \":\"RAN\"},\n{\"Roy Bridge \":\"RYB\"},\n{\"Spean Bridge \":\"SBR\"},\n{\"Taynuilt \":\"TAY\"},\n{\"Tulloch \":\"TUL\"},\n{\"Tyndrum Lower \":\"TYL\"},\n{\"Upper Tyndrum \":\"UTY\"},\n];\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":280,"y":60,"wires":[["fdfbc56a0a08725a"]]},{"id":"92053ffc3885fcfd","type":"inject","z":"3fd2634d3eb8f47a","g":"492283bddca59038","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"go","payloadType":"str","x":150,"y":60,"wires":[["c4279fd4b756290b"]]},{"id":"0f119829361b7add","type":"change","z":"3fd2634d3eb8f47a","g":"492283bddca59038","name":"","rules":[{"t":"set","p":"station","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":60,"wires":[[]]},{"id":"de44c4077af65e98","type":"function","z":"3fd2634d3eb8f47a","g":"fd6a03d270cd37e7","name":"","func":"msg.payload =[{\"std\":\"14:55\",\"etd\":\"On time\",\"platform\":\"8\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"L147ErXMszp5ov0xNUqDmA==\",\"origin\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"},\"destination\":{\"name\":\"Helensburgh Central\",\"crs\":\"HLC\"}},\n{\"std\":\"14:00\",\"etd\":\"On time\",\"platform\":\"4\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"h2K/HSMAiDcwXQ7KuGbVUw==\",\"rsid\":\"SR428600\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"}},\n{\"std\":\"14:07\",\"etd\":\"On time\",\"platform\":\"9\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"/hX5fBuhljgrTu9K9xNIZQ==\",\"origin\":{\"name\":\"Partick\",\"crs\":\"PTK\"},\"destination\":{\"name\":\"Springburn\",\"crs\":\"SPR\"}},\n{\"std\":\"14:15\",\"etd\":\"On time\",\"platform\":\"9\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"kVdqLAqyiERVZkTn2Vq9KA==\",\"origin\":{\"name\":\"Helensburgh Central\",\"crs\":\"HLC\"},\"destination\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"}},\n{\"std\":\"14:16\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"p3wwREWYDgRjVyMbJsQNgQ==\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Alloa\",\"crs\":\"ALO\"}},\n{\"std\":\"14:25\",\"etd\":\"On time\",\"platform\":\"8\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"tQ5TSAszmE1Uy589SCE61w==\",\"origin\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"},\"destination\":{\"name\":\"Helensburgh Central\",\"crs\":\"HLC\"}},\n{\"std\":\"14:26\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"uaZz1VhAhDPvl6EhT8Ix6g==\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Cumbernauld\",\"crs\":\"CUB\"}},\n{\"std\":\"14:30\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"whotXv2qnkYJ22dq8ORe2Q==\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"}},\n{\"std\":\"14:33\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"lr442VWAGOmTTJOwVSJOjg==\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Anniesland\",\"crs\":\"ANL\"}},\n{\"std\":\"14:38\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"NAAgsCP/7WR/m4M/4/6RZw==\",\"rsid\":\"SR045400\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Elgin\",\"crs\":\"ELG\"}},\n{\"std\":\"14:39\",\"etd\":\"On time\",\"platform\":\"8\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"wr0Gtvg5hM81q23CmQQOdg==\",\"origin\":{\"name\":\"Springburn\",\"crs\":\"SPR\"},\"destination\":{\"name\":\"Partick\",\"crs\":\"PTK\"}},\n{\"std\":\"14:44\",\"etd\":\"On time\",\"platform\":\"9\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"w/U0Mx1JmLx7/WUiV/aGGg==\",\"origin\":{\"name\":\"Helensburgh Central\",\"crs\":\"HLC\"},\"destination\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"}},\n{\"std\":\"14:50\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"AXiCxT1wkyDQDm7EMRI4Xw==\",\"rsid\":\"SR025500\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Dundee\",\"crs\":\"DEE\"}},\n{\"std\":\"14:56\",\"etd\":\"On time\",\"platform\":\"8\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"WYnd3WLFSEaySKqD3l4whw==\",\"origin\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"},\"destination\":{\"name\":\"Helensburgh Central\",\"crs\":\"HLC\"}},\n{\"std\":\"15:00\",\"etd\":\"On time\",\"operator\":\"ScotRail\",\"operatorCode\":\"SR\",\"serviceId\":\"Dsf5kpcxGaiOpWGaXjbRQA==\",\"rsid\":\"SR429000\",\"origin\":{\"name\":\"Glasgow Queen Street\",\"crs\":\"GLQ\"},\"destination\":{\"name\":\"Edinburgh\",\"crs\":\"EDB\"}}];\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":320,"y":300,"wires":[["093b5812120c1d5d"]]},{"id":"c6eb178668784c60","type":"inject","z":"3fd2634d3eb8f47a","g":"fd6a03d270cd37e7","name":"Sample Data","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":170,"y":300,"wires":[["de44c4077af65e98"]]},{"id":"3bb4cb26ff0d939a","type":"natrail","z":"3fd2634d3eb8f47a","name":"","scode":"","destscode":"","property":"payload","api":"02f91ae2b9002a87","x":150,"y":160,"wires":[["093b5812120c1d5d","05bc265edbfe70be"]]},{"id":"93f5f3ea1db58957","type":"ui_template","z":"3fd2634d3eb8f47a","g":"bec02064d7a5561c","group":"53edc9958407538c","name":"table","order":14,"width":"11","height":"16","format":"\n\n\n
\n \n \n | Time | \n Destination | \n Plat | \n Expected | \n\n
\n \n \n\n\n | {{ obj.Due }} | \n {{ obj.Destination }} | \n {{ obj.Platform }}\n | {{ obj.Expected }} | \n\n
\n \n \n | \n Last updated | \n {{msg.time}} | \n\n
\n \n\n
\n
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [18 January 2022 09:03 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/12 "2022-01-18T09:03:17Z")
Ah, you've dumped the node-red-node-ui-table in favour of a hand crafted table in a template!
I'm tempted to do the same thing, the table widget is a nightmare to style.
It's a very authentic and familiar departures board which makes it easy to understand.
There is an interesting gallery of LED and TFT displays at [www.infotec.co.uk/index.php?page=gallery](https://www.infotec.co.uk/index.php?page=gallery) (can that pink and green cupcake look at Manchester be real?)
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [18 January 2022 13:34 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/13 "2022-01-18T13:34:48Z")
This is what I've come up with, based on [flight information boards at LHR](https://www.alamy.com/stock-photo-heathrow-international-airport-departures-board-99732350.html).
I know, wrong yellow.
Life is too short to vertically align "Plat" and platform numbers 🤬
Anyone else?
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [18 January 2022 14:24 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/14 "2022-01-18T14:24:58Z")
It really depends what is the design target. For no target defined you can go as crazy as you like 😃
---
### Author:  [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [18 January 2022 17:11 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/15 "2022-01-18T17:11:43Z")
It's nice and easy to read. If you post code I'm sure someone can tell you how to line up Platform numbers.
I was going for a more photo realistic look with my example. I have been pimping up a lot of my ui cards in a similar way, inspired by @hotNipi
Not sure if its a bit gimmicky, I may post a few for "honest" feedback at some point if I dare 😉
---
### Author:  [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [19 January 2022 15:22 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/16 "2022-01-19T15:22:13Z")
> [@jbudd](#):
>
> There is an interesting gallery of LED and TFT displays at [www.infotec.co.uk/index.php?page=gallery](https://www.infotec.co.uk/index.php?page=gallery) (can that pink and green cupcake look at Manchester be real?)
Looks like they are using LCD Monitors instead of the old yellow matrix, guess the choice of colours sent them mad 😉
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [18 February 2022 15:23 UTC](https://discourse.nodered.org/t/how-would-you-style-this-dashboard/56793/17 "2022-02-18T15:23:05Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.