menambahkan jam di node red

 [{"id":"f2c0f6d6.4a8d28","type":"ui_template","z":"33aa3711.4e4658","group":"e40eda2.d3c4328","name":"Time and Temp","order":4,"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:#8888ff;\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,"resendOnRefresh":false,"templateScope":"local","x":320,"y":500,"wires":[[]]},{"id":"533a5e69.70965","type":"inject","z":"33aa3711.4e4658","name":"21c","repeat":"","crontab":"","once":false,"topic":"","payload":"21","payloadType":"num","x":110,"y":481,"wires":[["f2c0f6d6.4a8d28"]]},{"id":"20daa903.1fc7f6","type":"inject","z":"33aa3711.4e4658","name":"32c","repeat":"","crontab":"","once":false,"topic":"","payload":"32","payloadType":"num","x":110,"y":521,"wires":[["f2c0f6d6.4a8d28"]]},{"id":"77be8609.44d2a8","type":"inject","z":"33aa3711.4e4658","name":"green","repeat":"","crontab":"","once":false,"topic":"","payload":"green","payloadType":"str","x":110,"y":580,"wires":[["2c82fcf8.77e864"]]},{"id":"20ee64ef.f3d22c","type":"inject","z":"33aa3711.4e4658","name":"orange","repeat":"","crontab":"","once":false,"topic":"","payload":"orange","payloadType":"str","x":110,"y":620,"wires":[["2c82fcf8.77e864"]]},{"id":"2c82fcf8.77e864","type":"function","z":"33aa3711.4e4658","name":"","func":"msg.colour=msg.payload;\nmsg.payload=undefined;\nreturn msg;","outputs":1,"noerr":0,"x":260,"y":600,"wires":[["f2c0f6d6.4a8d28"]]},{"id":"97329d37.24d38","type":"inject","z":"33aa3711.4e4658","name":"blue","repeat":"","crontab":"","once":false,"topic":"","payload":"blue","payloadType":"str","x":110,"y":660,"wires":[["2c82fcf8.77e864"]]},{"id":"be7c160b.d9d848","type":"inject","z":"33aa3711.4e4658","name":"yellow","repeat":"","crontab":"","once":false,"topic":"","payload":"yellow","payloadType":"str","x":110,"y":700,"wires":[["2c82fcf8.77e864"]]},{"id":"bf84192d.d58918","type":"inject","z":"33aa3711.4e4658","name":"white","repeat":"","crontab":"","once":false,"topic":"","payload":"white","payloadType":"str","x":110,"y":740,"wires":[["2c82fcf8.77e864"]]},{"id":"83399d05.ffec4","type":"inject","z":"33aa3711.4e4658","name":"pink","repeat":"","crontab":"","once":false,"topic":"","payload":"pink","payloadType":"str","x":110,"y":780,"wires":[["2c82fcf8.77e864"]]},{"id":"3147281c.c41d68","type":"inject","z":"33aa3711.4e4658","name":"red and light text","repeat":"","crontab":"","once":false,"topic":"","payload":"red","payloadType":"str","x":140,"y":820,"wires":[["2c82fcf8.77e864"]]},{"id":"e40eda2.d3c4328","type":"ui_group","name":"SIMOR","tab":"65447fb7.a3335","order":1,"disp":false,"width":30,"collapse":false},{"id":"65447fb7.a3335","type":"ui_tab","name":"WELCOME TO SIMOR Technology","icon":"dashboard","order":29,"disabled":false,"hidden":false}]