How would you style this dashboard?

Dashboard
1

Inspired by Dynamic Dave's "trainspotting" 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.

Untitled 2
Untitled 21279Ă—576 42 KB

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?

Untitled 1
Untitled 11150Ă—499 63.1 KB 

[{"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}]
1 Like
2

You could always build one like this :wink:

1 Like
3

He's done an excellent job of emulating BR's, or whatever it's called now, platform information signs.
No Node-Red though.

1 Like
4

I found that while looking for a font, and here is the one he uses -

5

Now I have the font I will see what I can come up with :wink:

6

Needs a bit of work but how about this ?

image
image575Ă—773 13.1 KB

2 Likes
7

Needs a bit "air"

8

will work on layout later tonight :wink:

11

Try this for size, not sure it's what you were after but it was fun learning how to do it :wink:

I checked lots of pictures on Google and there are a lot of variations in use so this is an "average" look.

image
image603Ă—698 13.2 KB

You will need to get the fonts and copy into node-red folder. Change names and paths as required.

[{"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":"<style>\n    td {\n        background: #382d22;\n        padding: 0.3rem 0.5rem;\n        font-family: Dot-Matrix-Regular;\n        color: #f9ea51;\n        font-size: 24px;\n    }\n\n    table {\n        border: 11px solid #111;\n        border-radius: 6px;\n        width: 100%;\n        background: #111;\n    }\n\n    th {\n        text-align: left;\n        padding: 0.5rem;\n        font-size: 24px;\n    }\n</style>\n\n<div>\n    <table>\n        <thead>\n            <tr>\n                <th>Time</th>\n                <th>Destination</th>\n                <th>Plat</th>\n                <th>Expected</th>\n\n            </tr>\n        </thead>\n        <tr ng-repeat=\"obj in msg.payload\">\n\n\n            <td>{{ obj.Due }}</td>\n            <td>{{ obj.Destination }}</td>\n            <td style=\"text-align:center\">{{ obj.Platform }}\n            <td style=\"text-align:right\">{{ obj.Expected }}</td>\n\n        </tr>\n        <tfoot>\n            <tr>\n                <td></td>\n                <td>Last updated</td>\n                <td colspan=\"2\" style=\"text-align:right; font-family:Dot-Matrix-Bold; font-size: 38px\">{{msg.time}}</td>\n\n            </tr>\n        </tfoot>\n\n    </table>\n</div>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"train","x":790,"y":200,"wires":[[]],"info":"<style>\r\n        .nr-dashboard-gauge text{\r\n            fill:777;\r\n            font-family: Dot-Matrix-Regular;\r\n            font-size: 46px;\r\n</style>\r\n\r\n\r\n<style>\r\n    @font-face {\r\n        font-family: Dot-Matrix-Regular;\r\n        src: url(\"/fonts/Dot-Matrix-Regular.ttf\");\r\n    }\r\n</style>"},{"id":"916f4d36ad5d04ea","type":"ui_template","z":"3fd2634d3eb8f47a","group":"53b170b3.621b78","name":"Extra Fonts","order":8,"width":0,"height":0,"format":"<style>\n    @font-face {\n        font-family: Dot-Matrix-Bold;\n        src: url(\"/fonts/Dot-Matrix-Bold.ttf\");\n    }\n    @font-face {\n    font-family: Dot-Matrix-Regular;\n    src: url(\"/fonts/Dot-Matrix-Regular.ttf\");\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":810,"y":300,"wires":[[]]},{"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":"02f91ae2b9002a87","type":"natRail-config","name":"sean-mcgann"},{"id":"53b170b3.621b78","type":"ui_group","name":"Whos Home","tab":"dc50fb1.77df988","order":4,"disp":false,"width":"5","collapse":false,"className":""},{"id":"85850867b381145e","type":"ui_tab","name":"Trains","icon":"dashboard","disabled":false,"hidden":false},{"id":"dc50fb1.77df988","type":"ui_tab","name":"Home Page","icon":"","order":1,"disabled":false,"hidden":false}]
7 Likes
12

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 (can that pink and green cupcake look at Manchester be real?)

13

This is what I've come up with, based on flight information boards at LHR.

I know, wrong yellow.
Life is too short to vertically align "Plat" and platform numbers :face_with_symbols_over_mouth:

Untitled 2
Untitled 2773Ă—619 51.1 KB

Anyone else?

3 Likes
14

It really depends what is the design target. For no target defined you can go as crazy as you like :smiley:

image
image410Ă—612 31.8 KB

3 Likes
15

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 :wink:

16

Looks like they are using LCD Monitors instead of the old yellow matrix, guess the choice of colours sent them mad :wink:

17

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