It is diplayed in the clock.
my flow
[{"id":"6bc50f94.1dba4","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"4c49dd26.cee034","type":"ui_template","z":"6bc50f94.1dba4","group":"72cdc2ca.9d9cec","name":"Time and Temp","order":1,"width":15,"height":5,"format":"<script>\n var daylist = [\"zondag\", \"maandag\", \"dinsdag\", \"woensdag\", \"donderdag\", \"vrijdag\", \"zaterdag\"];\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.masonry-container {\n overflow: hidden;\n}\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:#00cc55;\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:#000000;\n\n\tbox-shadow: 4px 4px 28px 0px rgba(0,0,0,0.3) inset;\n\t-moz-transform: scale(2.52); /* for Firefox, default 1*/\nzoom:252%; /* For Chrome, IE, default 100%*/\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:18px;\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":360,"y":260,"wires":[[]]},{"id":"e796e59c.744638","type":"inject","z":"6bc50f94.1dba4","name":"21c","topic":"","payload":"21","payloadType":"num","repeat":"","crontab":"","once":false,"x":150,"y":241,"wires":[["4c49dd26.cee034"]]},{"id":"5a75cabc.dd548c","type":"inject","z":"6bc50f94.1dba4","name":"32c","topic":"","payload":"32","payloadType":"num","repeat":"","crontab":"","once":false,"x":150,"y":281,"wires":[["4c49dd26.cee034"]]},{"id":"25c161.b26d26a","type":"inject","z":"6bc50f94.1dba4","name":"green","topic":"","payload":"green","payloadType":"str","repeat":"","crontab":"","once":false,"x":150,"y":340,"wires":[["f9c1154a.88a4b8"]]},{"id":"4885793e.0d1cd","type":"inject","z":"6bc50f94.1dba4","name":"orange","topic":"","payload":"orange","payloadType":"str","repeat":"","crontab":"","once":false,"x":150,"y":380,"wires":[["f9c1154a.88a4b8"]]},{"id":"f9c1154a.88a4b8","type":"function","z":"6bc50f94.1dba4","name":"","func":"msg.colour=msg.payload;\nmsg.payload=undefined;\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":360,"wires":[["4c49dd26.cee034"]]},{"id":"254f1cd.ac04a64","type":"inject","z":"6bc50f94.1dba4","name":"blue","topic":"","payload":"blue","payloadType":"str","repeat":"","crontab":"","once":false,"x":150,"y":420,"wires":[["f9c1154a.88a4b8"]]},{"id":"331593f1.7a3964","type":"inject","z":"6bc50f94.1dba4","name":"yellow","topic":"","payload":"yellow","payloadType":"str","repeat":"","crontab":"","once":false,"x":150,"y":460,"wires":[["f9c1154a.88a4b8"]]},{"id":"3e1abe0b.adb2f2","type":"inject","z":"6bc50f94.1dba4","name":"white","topic":"","payload":"white","payloadType":"str","repeat":"","crontab":"","once":false,"x":150,"y":500,"wires":[["f9c1154a.88a4b8"]]},{"id":"a39faec2.3fc6e","type":"inject","z":"6bc50f94.1dba4","name":"pink","topic":"","payload":"pink","payloadType":"str","repeat":"","crontab":"","once":false,"x":150,"y":540,"wires":[["f9c1154a.88a4b8"]]},{"id":"624b007c.9d0ec","type":"inject","z":"6bc50f94.1dba4","name":"red and light text","topic":"","payload":"red","payloadType":"str","repeat":"","crontab":"","once":false,"x":180,"y":580,"wires":[["f9c1154a.88a4b8"]]},{"id":"af432f5b.089378","type":"inject","z":"6bc50f94.1dba4","name":"","topic":"","payload":"","payloadType":"date","repeat":"15","crontab":"","once":false,"onceDelay":"1","x":150,"y":40,"wires":[["8ac49fa9.3f8a48"]]},{"id":"8ac49fa9.3f8a48","type":"rpi-dht22","z":"6bc50f94.1dba4","name":"","topic":"rpi-dht22","dht":22,"pintype":"0","pin":"17","x":360,"y":40,"wires":[["94602188.46f148","3af49491.9103a4","328bc58e.c747ca","4c49dd26.cee034"]]},{"id":"94602188.46f148","type":"function","z":"6bc50f94.1dba4","name":"","func":"msg.payload = msg.payload\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":80,"wires":[["b6914c51.b585b8"]]},{"id":"3af49491.9103a4","type":"function","z":"6bc50f94.1dba4","name":"","func":"msg.payload = msg.humidity\nreturn msg;","outputs":1,"noerr":0,"x":530,"y":200,"wires":[["c3ba06f5.bb37e"]]},{"id":"328bc58e.c747ca","type":"debug","z":"6bc50f94.1dba4","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":660,"y":40,"wires":[]},{"id":"b6914c51.b585b8","type":"debug","z":"6bc50f94.1dba4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":680,"y":120,"wires":[]},{"id":"c3ba06f5.bb37e","type":"debug","z":"6bc50f94.1dba4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":680,"y":200,"wires":[]},{"id":"72cdc2ca.9d9cec","type":"ui_group","z":"","name":"Group 3","tab":"f6671a4d.05349","order":3,"disp":false,"width":15,"collapse":false},{"id":"f6671a4d.05349","type":"ui_tab","z":"","name":"Lab","icon":"dashboard","order":1,"disabled":false,"hidden":false}]