Node-Red Dashboard LCD
Stunning LCD for Node-Red - needs 3 fonts - you'll find those detailed in the blog entry here
http://tech.scargill.net/lcd-display-for-node-red/
Examples of LCDs in full glorious colour on the blog.
[{"id":"5439cd84.a88ae4","type":"ui_template","z":"c552e8d2.712b48","group":"1e03a2b2.83a61d","name":"Time and Temp","order":0,"width":"6","height":"2","format":"<script>\n var daylist = [\"sun\", \"mon\", \"tue\", \"wed\", \"thu\", \"fri\", \"sat\"];\n (function(scope){ \n scope.$watch('msg', function(msg) {\n if (typeof(msg.payload) != \"undefined\") $(\"#DSEGTemp\").text(msg.payload);\n if (typeof(msg.colour) != \"undefined\") \n { \n if (msg.colour==\"orange\"){ $(\".Clock-Wrapper\").css('background-color', '#fb7c00'); $(\".lcdClock\").css('color', '#222'); } \n if (msg.colour==\"green\") { $(\".Clock-Wrapper\").css('background-color', '#66ac66'); $(\".lcdClock\").css('color', '#222'); } \n if (msg.colour==\"blue\") { $(\".Clock-Wrapper\").css('background-color', '#8888ff'); $(\".lcdClock\").css('color', '#222'); }\n if (msg.colour==\"yellow\"){ $(\".Clock-Wrapper\").css('background-color', '#bbbb44'); $(\".lcdClock\").css('color', '#222'); } \n if (msg.colour==\"white\") { $(\".Clock-Wrapper\").css('background-color', '#aaaaaa'); $(\".lcdClock\").css('color', '#222'); } \n if (msg.colour==\"pink\") { $(\".Clock-Wrapper\").css('background-color', '#ff8888'); $(\".lcdClock\").css('color', '#222'); } \n if (msg.colour==\"red\") { $(\".Clock-Wrapper\").css('background-color', '#aa2222'); $(\".lcdClock\").css('color', '#ccaa22'); } \n }\n });\n })(scope);\n\n function genTimerStrings(tm, num){\n \n \tvar i;\n \tvar ret = tm.toString(10);\n \tvar left = ret.length;\n \n \tif( left < num){\n \t\tfor(i=0; i<( num - left ); i++ ){\n \t\t\tret = String(0) + ret;\n \t\t}\n \t}\n \treturn ret;\n }\n\n function updateTimer(){\n \tvar ret;\n \tvar date = new Date();\n \tvar tm_year, tm_mon, tm_date, tm_hour, tm_min, tm_sec, tm_msec,tm_day;\n \tvar colon;\n \ttm_year = date.getFullYear();\n \ttm_mon = date.getMonth()+1;\n \ttm_date = date.getDate();\n \ttm_day = date.getDay();\n \ttm_hour = date.getHours();\n \ttm_min = date.getMinutes();\n \ttm_sec = date.getSeconds();\n \ttm_msec = date.getMilliseconds();\n \n \ttm_mon = genTimerStrings(tm_mon, 2);\n \ttm_date = genTimerStrings(tm_date, 2);\n \ttm_hour = genTimerStrings(tm_hour, 2);\n \ttm_min = genTimerStrings(tm_min, 2);\n \ttm_sec = genTimerStrings(tm_sec, 2);\n \ttm_day = daylist[tm_day];\n \n \tif( tm_msec > 499 ){\n \t\tcolon = ' ';\n \t}else{\n \t\tcolon = ':';\n \t}\n \n \tdocument.getElementById(\"DSEGClock\").innerHTML = tm_hour + colon + tm_min + \"<span style=\\\"font-size:30px;\\\">\" + tm_sec + \"</span>\";\n \tdocument.getElementById(\"DSEGClock-Year\").innerHTML = \"<span class=\\\"D7MI\\\">\" + tm_year + \"-\" + tm_mon + \"-\" + tm_date + ' ' + \"</span><span class=\\\"D14MI\\\">\" + tm_day + \".\" + \"</span>\";\n \n \tsetTimeout(\"updateTimer()\", 500 - date.getMilliseconds()%500 );\n }\n\n updateTimer();\n</script>\n\n<style type=\"text/css\">\n.lcdClock {\n\tbackground-color:#fbfbfb;\n\tfont-size:100%;\n\tpadding-left:10px;\n\tpadding-right:10px;\n\tpadding-bottom:10px;\n\tmax-width:300px;\n\tline-height:160%;\n\tcolor:#222;\n\tfont-family:Meiryo, 'Lucida Grande','Hiragino Kaku Gothic ProN', sans-serif;\n}\n\n@font-face {\n font-family: \"D7MI\";\n src: url(\"/myfonts/DSEG7Modern-Italic.woff\") format('woff');\n}\n\n@font-face {\n font-family: \"D14MI\";\n src: url(\"/myfonts/DSEG14Modern-Italic.woff\") format('woff');\n}\n\n@font-face {\n font-family: \"D7MBI\";\n src: url(\"/myfonts/DSEG7Modern-BoldItalic.woff\") format('woff');\n}\n\n@font-face {\n font-family: \"DWEATHER\";\n src: url(\"/myfonts/DSEGWeather.woff\") format('woff');\n}\n\n.D7MI {\nfont-family: \"D7MI\";\n}\n\n.D7MBI {\nfont-family: \"D7MBI\";\n}\n\n.D14MI {\nfont-family: \"D14MI\";\n}\n\n.DWEATHER {\nfont-family: \"DWEATHER\";\nfont-size:72px;\nheight:72px;\n}\n\n.Clock-Wrapper{\n\tposition:relative;\n\tborder:6px solid #000;\n\tborder-radius:9px;\n\theight:68px;\n\twidth:280px;\n\tbackground-color:#fb7c00;\n\tbackground-color:#66ac66;\n\n\tbox-shadow: 4px 4px 28px 0px rgba(0,0,0,0.3) inset; \n}\n\n.Clock-Time-Background{\n\tz-index:50;\n\tcolor:rgba(0,0,0,0.15);\n}\n\n.Clock-Time-Front{\n\tz-index:100;\n}\n\n.Clock-Time-Background,.Clock-Time-Front {\n \tposition:absolute;\n\ttop:38px;\n\tleft:5px; \n\tfont-size:42px;\n}\n\n.Clock-Year-Background{\n\tz-index:50;\n;\n\tcolor:rgba(0,0,0,0.1);\n\tfont-size:18px;\n}\n\n.Clock-Year-Front{\n\tz-index:100;\n}\n\n.Clock-Year-Background,.Clock-Year-Front {\n \tposition:absolute;\n\ttop:2px;\n\tleft:5px; \n\tfont-size:18px;\n}\n\n.temp { z-index:100; }\n.tempBack { z-index:50; color:rgba(0,0,0,0.1); }\n.temp,.tempBack {\n \tposition:absolute;\n\ttop:28px;\n\tleft:210px; \n\tfont-size:42px;\n}\n\n.tempc { z-index:100; }\n.tempcBack { z-index:50; color:rgba(0,0,0,0.1); }\n.tempc,.tempcBack {\n \tposition:absolute;\n\ttop:36px;\n\tleft:278px; \n\tfont-size:24px;\n}\n\n#DSEG7_OUTPUT{\n\tfont-family: \"D7MI\";\n}\n\n#DSEG14_OUTPUT{\n\tfont-family: \"D14MI\";\n}\n\n#DSEG14_OUTPUT, #DSEG7_OUTPUT{\n\tfont-size:18px;\n\tmargin-top:2px;\n\tmargin-bottom:10px;\n}\n\n</style>\n\n\n<div class=\"Clock-Wrapper center lcdClock\">\n\t<span class=\"Clock-Time-Background D7MBI\">88:88<span style=\"font-size:30px;\">88</span></span>\n\t<span id=\"DSEGClock\" class=\"Clock-Time-Front D7MBI\"></span>\n\t<span class=\"Clock-Year-Background\"><span class=\"D7MI\">2088-88-88</span><span class=\"D14MI\"> ~~~</span></span>\n\t<span id=\"DSEGClock-Year\" class=\"Clock-Year-Front\"></span>\n\t\n\t<span id=\"DSEGTemp\" class=\"temp D7MBI\">41</span>\n\t<span id=\"DSEGTemp\" class=\"tempBack D7MBI\">88</span>\t\n\t<span id=\"DSEGTempc\" class=\"tempc D7MI\">C</span>\n\t<span id=\"DSEGTempc\" class=\"tempcBack D7MI\">8</span>\t\n</div>\n\n","storeOutMessages":true,"fwdInMessages":false,"x":300,"y":1200,"wires":[[]]},{"id":"e26a920b.fd916","type":"inject","z":"c552e8d2.712b48","name":"21c","topic":"","payload":"21","payloadType":"num","repeat":"","crontab":"","once":false,"x":90,"y":1181,"wires":[["5439cd84.a88ae4"]]},{"id":"a92b9b7a.795228","type":"inject","z":"c552e8d2.712b48","name":"32c","topic":"","payload":"32","payloadType":"num","repeat":"","crontab":"","once":false,"x":90,"y":1221,"wires":[["5439cd84.a88ae4"]]},{"id":"6d378317.dd743c","type":"inject","z":"c552e8d2.712b48","name":"green","topic":"","payload":"green","payloadType":"str","repeat":"","crontab":"","once":false,"x":90,"y":1280,"wires":[["a23865de.5f59b8"]]},{"id":"24a314bf.90927c","type":"inject","z":"c552e8d2.712b48","name":"orange","topic":"","payload":"orange","payloadType":"str","repeat":"","crontab":"","once":false,"x":90,"y":1320,"wires":[["a23865de.5f59b8"]]},{"id":"a23865de.5f59b8","type":"function","z":"c552e8d2.712b48","name":"","func":"msg.colour=msg.payload;\nmsg.payload=undefined;\nreturn msg;","outputs":1,"noerr":0,"x":240,"y":1300,"wires":[["5439cd84.a88ae4"]]},{"id":"c8edfc9b.be6ce","type":"inject","z":"c552e8d2.712b48","name":"blue","topic":"","payload":"blue","payloadType":"str","repeat":"","crontab":"","once":false,"x":90,"y":1360,"wires":[["a23865de.5f59b8"]]},{"id":"18a1c3a.b9c283c","type":"inject","z":"c552e8d2.712b48","name":"yellow","topic":"","payload":"yellow","payloadType":"str","repeat":"","crontab":"","once":false,"x":90,"y":1400,"wires":[["a23865de.5f59b8"]]},{"id":"a5c4dd24.4b6ff","type":"inject","z":"c552e8d2.712b48","name":"white","topic":"","payload":"white","payloadType":"str","repeat":"","crontab":"","once":false,"x":90,"y":1440,"wires":[["a23865de.5f59b8"]]},{"id":"83e6ddc0.ec7bd","type":"inject","z":"c552e8d2.712b48","name":"pink","topic":"","payload":"pink","payloadType":"str","repeat":"","crontab":"","once":false,"x":90,"y":1480,"wires":[["a23865de.5f59b8"]]},{"id":"ebfd33d8.c8b13","type":"inject","z":"c552e8d2.712b48","name":"red and light text","topic":"","payload":"red","payloadType":"str","repeat":"","crontab":"","once":false,"x":120,"y":1520,"wires":[["a23865de.5f59b8"]]},{"id":"1e03a2b2.83a61d","type":"ui_group","z":"","name":"testy","tab":"f9bab960.c839b8","disp":true,"width":"6"},{"id":"f9bab960.c839b8","type":"ui_tab","z":"","name":"testy","icon":"dashboard"}]
