|
"func": "var fcdata = {};\nvar units=flow.get('units');\nif (units===undefined)\n{\n units=\"imperial\";\n}\n\nfunction formatTemp(high, low){\n if (units == \"imperial\") {\n if (low){\n temp = parseFloat(high).toFixed() + '/' + parseFloat(low).toFixed()\n }\n else {\n temp = parseFloat(high).toFixed() + '°F'\n }\n }\n else { // metric\n if (low){\n temp = parseFloat(high).toFixed() + '/' + parseFloat(low).toFixed()\n }\n else {\n temp = parseFloat(high).toFixed() + '°C'\n }\n }\n return temp;\n}\n\nfunction dayName(unixTime){\n var dateObject = new Date(unixTime * 1000);\n return dateObject.toLocaleString(flow.get('lang'), { timezone: msg.payload.timezone, weekday: 'short'});\n // If the line above is not producing the correct short weekday names for the language set by 'lang',\n // you can try upgrading to NodeJS version 13 or higher (when full international support was added for the toLocaleString function),\n // or you can use the code below which is an example for French short weekday names.\n/* \n switch (dateObject.toLocaleString('en', { timezone: msg.payload.timezone, weekday: 'short'})) {\n case 'Mon':\n return 'Lun';\n case 'Tue':\n return 'Mar';\n case 'Wed':\n return 'Mer';\n case 'Thu':\n return 'Jeu';\n case 'Fri':\n return 'Ven';\n case 'Sat':\n return 'Sam';\n case 'Sun':\n return 'Dim';\n }\n*/\n}\n\nfunction timeConvert(UNIX_timestamp){\n var dateObject = new Date(UNIX_timestamp * 1000);\n if (flow.get('hour12')) { // 12 hour time format\n return dateObject.toLocaleString('en', { timezone: msg.payload.timezone, hour12: true, hour: 'numeric'}).toLowerCase();\n } else { // 24 hour time format\n return dateObject.toLocaleString('en', { timezone: msg.payload.timezone, hour12: false, hour: 'numeric'}) + ':00';\n } \n}\n\n// prepare forecast data for CSS based ui widget\nfcdata.payload = {\n rowtext: {\n \tdata01: {\n cell01: timeConvert(msg.payload.hourly[1].dt),\n cell02: timeConvert(msg.payload.hourly[2].dt),\n cell03: timeConvert(msg.payload.hourly[3].dt),\n cell04: timeConvert(msg.payload.hourly[4].dt),\n cell05: timeConvert(msg.payload.hourly[5].dt),\n cell06: timeConvert(msg.payload.hourly[6].dt),\n cell07: dayName(msg.payload.daily[1].dt),\n cell08: dayName(msg.payload.daily[2].dt),\n cell09: dayName(msg.payload.daily[3].dt),\n cell10: dayName(msg.payload.daily[4].dt),\n \t},\n \tdata02: {\n cell01: formatTemp(msg.payload.hourly[1].temp),\n cell02: formatTemp(msg.payload.hourly[2].temp),\n cell03: formatTemp(msg.payload.hourly[3].temp),\n cell04: formatTemp(msg.payload.hourly[4].temp),\n cell05: formatTemp(msg.payload.hourly[5].temp),\n cell06: formatTemp(msg.payload.hourly[6].temp),\n cell07: formatTemp(msg.payload.daily[1].temp.max, msg.payload.daily[0].temp.min),\n cell08: formatTemp(msg.payload.daily[2].temp.max, msg.payload.daily[1].temp.min),\n cell09: formatTemp(msg.payload.daily[3].temp.max, msg.payload.daily[2].temp.min),\n cell10: formatTemp(msg.payload.daily[4].temp.max, msg.payload.daily[3].temp.min),\n \t}\n },\n rowicons: {\n \tdata01: {\n \t\tcell01: msg.payload.hourly[1].weather[0].icon,\n \t\tcell02: msg.payload.hourly[2].weather[0].icon,\n \t\tcell03: msg.payload.hourly[3].weather[0].icon,\n \t\tcell04: msg.payload.hourly[4].weather[0].icon,\n \t\tcell05: msg.payload.hourly[5].weather[0].icon,\n \t\tcell06: msg.payload.hourly[6].weather[0].icon,\n \t\tcell07: msg.payload.daily[1].weather[0].icon,\n \t\tcell08: msg.payload.daily[2].weather[0].icon,\n \t\tcell09: msg.payload.daily[3].weather[0].icon,\n \t\tcell10: msg.payload.daily[4].weather[0].icon,\n \t}\n }\n}\n\nreturn fcdata;", |
|
"func": "var icon = {};\n\nvar units = flow.get('units');\nif (units === undefined) {units = 'imperial';}\n\nfunction timeConvert(UNIX_timestamp){\n var dateObject = new Date(UNIX_timestamp * 1000);\n if (flow.get('hour12')) { // 12 hour time format\n return dateObject.toLocaleString('en', { timezone: msg.payload.timezone, hour12: true, hour: 'numeric', minute: '2-digit'}).toLowerCase();\n } else { // 24 hour time format\n return dateObject.toLocaleString('en', { timezone: msg.payload.timezone, hour12: false, hour: 'numeric', minute: '2-digit'});\n } \n}\n\nvar degreesToCardinal = function(deg){\n if (deg>11.25 && deg<=33.75){return \"NNE\";}\n else if (deg>33.75 && deg<56.25){return \"NE\";}\n else if (deg>56.25 && deg<78.75){return \"ENE\";}\n else if (deg>78.75 && deg<101.25){return \"E\";}\n else if (deg>101.25 && deg<123.75){return \"ESE\";}\n else if (deg>123.75 && deg<146.25){return \"SE\";}\n else if (deg>146.25 && deg<168.75){return \"SSE\";}\n else if (deg>168.75 && deg<191.25){return \"S\";}\n else if (deg>191.25 && deg<213.75){return \"SSW\";}\n else if (deg>213.75 && deg<236.25){return \"SW\";}\n else if (deg>236.25 && deg<258.75){return \"WSW\";}\n else if (deg>258.75 && deg<281.25){return \"W\";}\n else if (deg>281.25 && deg<303.75){return \"WNW\";}\n else if (deg>303.75 && deg<326.25){return \"NW\";}\n else if (deg>326.25 && deg<348.75){return \"NNW\";}\n else {return \"N\";}\n}\n\nif (units == \"imperial\")\n{\n msg.payload.current.temp = msg.payload.current.temp.toFixed() + ' °F';\n msg.payload.current.wind_speed = msg.payload.current.wind_speed.toFixed() + ' mph';\n}\nelse // metric units\n{\n msg.payload.current.temp = msg.payload.current.temp.toFixed(1) + ' °C';\n msg.payload.current.wind_speed = msg.payload.current.wind_speed.toFixed(1) + ' m/s';\n}\n\nmsg.payload.current.wind_cardinal = degreesToCardinal(msg.payload.current.wind_deg);\n\nmsg.payload.current.sunrise = timeConvert(msg.payload.current.sunrise);\nmsg.payload.current.sunset = timeConvert(msg.payload.current.sunset);\n\nvar iconString = 'wi-owm-' + msg.payload.current.weather[0].icon + ' wi-4x';\nicon = {\n ui_control: {\n icon: iconString\n }\n}; \n\nreturn [msg, icon];", |
@smcgann99 .. can you share your code ... it really looks good
code for compass (copied from flows.nodered.org)
[{"id":"f869934b.ecd4c","type":"change","z":"85e9250a.5aabf8","name":"","rules":[{"t":"set","p":"payload.speed","pt":"msg","to":"payload.current.wind_speed","tot":"msg"},{"t":"set","p":"payload.speed_unit","pt":"msg","to":"m/s","tot":"str"},{"t":"set","p":"payload.degrees","pt":"msg","to":"payload.current.wind_deg","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1420,"y":600,"wires":[["9656e32b.c76da"]]},{"id":"9656e32b.c76da","type":"ui_template","z":"85e9250a.5aabf8","group":"d584183c.9eff58","name":"Direction","order":5,"width":4,"height":4,"format":"<!--\npass msg.payload.degrees, msg.payload.speed, msg.payload.speed_unit\n-->\n<script>\n // Watch the incoming message and convert the degrees to a human readable compass direction\n (function(scope){\n scope.$watch('msg', function(msg) {\n if(typeof(msg) === \"object\"){\n // Convert the degrees to cardinal directions\n var deg = msg.payload.degrees;\n var dirs = [\"N\",\"NNE\",\"NE\",\"ENE\",\"E\",\"ESE\",\"SE\",\"SSE\",\"S\",\"SSW\",\"SW\",\"WSW\",\"W\",\"WNW\",\"NW\",\"NNW\",\"N\"];\n var idx = Math.round(deg*(dirs.length-1)/360);\n scope.direction = dirs[idx];\n \n \n // Keep track of the highest speed value, giving it 40 as a rough starting point.\n // Works okay for MPH and KTS, but KMH will show purple at a lower speed than the rest\n scope.max_val = (msg.payload.speed > scope.max_val ? msg.payload.speed : 100);\n \n scope.p_speed = msg.payload.speed;\n scope.p_max_val = scope.max_val;\n //var low_colors = [\n // '#FFFFFF', // white\n // '#d6f7ff', // light blue\n // '#85ffd2', // blue green\n // '#61ff6e' // green 10mph\n // ];\n var low_colors = [\n '#000FFF', // white\n '#0007ff', // light blue\n '#000fd2', // blue green\n '#000f6e' // green 10mph\n ]; \n \n var high_colors = [\n '#61ff6e', // green 10mph\n '#d5ff61', // green yellow\n '#fffc61', // yellow\n '#ffe561', // yellow orange 20mph\n '#ffcd61', // orange\n '#ffad61', // orange red\n '#ff7661', // red\n '#ff61dd', // red purple\n '#e261ff' // purple\n ];\n \n if(msg.payload.speed <= 10){\n scope.color = low_colors[Math.round(msg.payload.speed*(low_colors.length-1)/10)];\n }else{\n scope.color = high_colors[Math.round(msg.payload.speed*(high_colors.length-1) / scope.max_val)];\n }\n \n $(\".compass_container\").css(\"background-color\",scope.color);\n }\n \t});\n })(scope);\n \n // Hacks to improve the layout and make it scale\n $(document).ready(function(){\n setTimeout(function () {\n // Remove the auto scrolling from the parent node\n $(\".compass_container\").parent().css(\"overflow\",\"hidden\");\n \n // Adjust the color to match the theme base color by looking up the toolbar header background color;\n $(\".compass_container .triangle\").css(\"border-bottom-color\",$(\"md-toolbar\").css(\"background-color\"));\n \n // Scale the compass into the box that it's being rendered in\n // This CSS hack helps make sure the line & font size scales appropriately\n // Based on the node's grid size\n $(\".compass_container\").each(function(k,v){\n var scaleWidth = $(v).parent().width() / $(v).width();\n var scaleHeight = $(v).parent().height() / $(v).height();\n \n var translateX = ($(v).width() - $(v).parent().width()) / 2;\n var translateY = ($(v).height() - $(v).parent().height()) / 2;\n \n $(v).css(\"transform\",\"translate(-\"+translateX+\"px,-\"+translateY+\"px) scale(\"+scaleWidth+\",\"+scaleHeight+\") \");\n });\n \n $(\".compass_container\").css(\"display\",\"block\"); // Unhide it now that it's resized\n }, 1000);\n });\n</script>\n<style>\n @import url(https://fonts.googleapis.com/css?family=Dosis:200,400,500,600);\n \n .compass_container{\n transition: 1s ease-in-out;\n position: relative;\n display: none;\n width: 500px;\n height: 500px;\n border-radius: 100%;\n font-family: 'Dosis';\n font-size: 80px;\n box-shadow: inset 0px 0px 0px 30px #777; \n background-color: {{color}};\n }\n \n .compass_container .compass_header{\n font-weight: bold;\n position: absolute;\n text-align: center;\n width: 100%;\n font-size: 75%;\n top: -15px\n }\n .compass_container .text_container{\n height: 100%;\n width: 100%;\n padding: 0px;\n display: block;\n border-radius: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n \n .compass_container .arrow{\n transition: 1s ease-in-out;\n width: 100%;\n height: 100%;\n display: block;\n position: absolute;\n top: 0;\n }\n \n .compass_container .arrow .triangle{\n width: 0;\n\t\theight: 0;\n\t\tborder-left: 45px solid transparent;\n\t\tborder-right: 45px solid transparent;\n\t\tborder-bottom: 90px solid black;\n\t\tposition: absolute;\n\t\ttop: -15px;\n\t\tleft: 50%;\n\t\tmargin-left: -45px;\n\t\tz-index: 99;\n }\n</style>\n\n<div class=\"compass_container\" style=\"\">\n <div class=\"compass_header\">N</div>\n \n <div class=\"nr-dashboard-text text_container\">\n \n <div class=\"direction\" style=\"font-size: 120%\">{{direction}}</div>\n <div style=\"flex-direction: row; font-weight: bold;\">\n <span style=\"font-size: 100%\">{{msg.payload.speed}}</span>\n <span style=\"font-size: 75%\">{{msg.payload.speed_unit}}</span>\n </div>\n </div>\n <div class=\"arrow\" style=\"transform: rotate({{msg.payload.degrees}}deg);\">\n <div class=\"triangle\"></div>\n </div>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1640,"y":600,"wires":[[]]},{"id":"d584183c.9eff58","type":"ui_group","name":"MainGroup","tab":"9e238849.652318","order":1,"disp":true,"width":"15","collapse":true},{"id":"9e238849.652318","type":"ui_tab","name":"Home","icon":"fa-home","order":1,"disabled":false,"hidden":false}]