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.
-
-
Save scargill/1ff06cc6809fda08d2b53c7ce4adb4a8 to your computer and use it in GitHub Desktop.
Node-Red Dashboard LCD
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [{"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"}] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment