A node-RED flow that uses the Dark Sky API - injects the skycons script tag element to prevent jquery cache busting behaviour

node-RED.NEW_STYLE.darksky.weather.flow.json

[
    {
        "id": "c1f1fc46.4bb3b",
        "type": "tab",
        "label": "Weather"
    },
    {
        "id": "76c2790c.78f858",
        "type": "inject",
        "z": "c1f1fc46.4bb3b",
        "name": "Every 15mins",
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "repeat": "900",
        "crontab": "",
        "once": true,
        "x": 120,
        "y": 100,
        "wires": [
            [
                "d4ec5840.36c928"
            ]
        ]
    },
    {
        "id": "d4ec5840.36c928",
        "type": "http request",
        "z": "c1f1fc46.4bb3b",
        "name": "GET Darksky JSON",
        "method": "GET",
        "ret": "obj",
        "url": "https://api.darksky.net/forecast/[YOUR_API_KEY]/[YOUR_LATITUDE],[YOUR_LONGITUDE]?units=[YOUR_UNITS]",
        "tls": "",
        "x": 320,
        "y": 100,
        "wires": [
            [
                "326d66fa.003b7a",
                "e7dd3e73.3dde",
                "6dde8cf.a3ae574"
            ]
        ]
    },
    {
        "id": "6dde8cf.a3ae574",
        "type": "function",
        "z": "c1f1fc46.4bb3b",
        "name": "Day icons",
        "func": "try {\n    var icons = { icon:[] };\n    icons.icon.push({\"name\":msg.payload.currently.icon});\n    icons.icon.push({\"name\":msg.payload.daily.data[1].icon});\n    icons.icon.push({\"name\":msg.payload.daily.data[2].icon});\n    icons.icon.push({\"name\":msg.payload.daily.data[3].icon});\n    icons.icon.push({\"name\":msg.payload.daily.data[4].icon});\n    icons.icon.push({\"name\":msg.payload.daily.data[5].icon});\n    msg.payload = icons\n    node.send(msg);\n}\ncatch(e) {}",
        "outputs": 1,
        "noerr": 0,
        "x": 560,
        "y": 220,
        "wires": [
            [
                "99451b5c.d51df8",
                "90cfd7f8.631108",
                "bb3e166f.46db58",
                "a3148d0a.a5b1c",
                "63fce300.8dab7c",
                "d1ff0fe8.dc074"
            ]
        ]
    },
    {
        "id": "c0e1ecd4.90ea1",
        "type": "ui_template",
        "z": "c1f1fc46.4bb3b",
        "group": "d8a153f5.076c7",
        "name": "CSS",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<style>\n    .nr-dashboard-template { padding: 0; margin: 0; }\n    .daywrap { text-align: left; margin:8px 0 0 8px; }\n    .daywrap span { width:16%;margin-left:4px; }\n    .hilo { text-align: left; margin:-3px 0 0 4px; }\n    .hilo .wrap { width:16%;margin-left:6px; }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "x": 750,
        "y": 40,
        "wires": [
            []
        ]
    },
    {
        "id": "99451b5c.d51df8",
        "type": "ui_template",
        "z": "c1f1fc46.4bb3b",
        "group": "d8a153f5.076c7",
        "name": "Day 0",
        "order": 4,
        "width": "1",
        "height": "1",
        "format": "<canvas id=\"icon0\" width=\"48\" height=\"48\"></canvas>\n \n<script>\n    var ngscope = scope;\n    \n    var skycons_script = document.createElement(\"script\");\n    skycons_script.setAttribute(\"src\", \"/myjs/skycons.js\" );\n    \n    skycons_script.onload = function() {\n        \n        var skycons_opts = {\n            \"monochrome\": false, \n            \"colors\": { \n                  \"main\": \"#779966\", \n                  \"moon\":\"#666666\",\n                  \"fog\": \"#555522\",\n                  \"fogbank\": \"#884488\",\n                  \"cloud\": \"#999999\",\n                  \"snow\": \"#aaaaaa\",\n                  \"leaf\":\"#00ff00\",\n                  \"rain\": \"#0000ff\",\n                  \"sun\": \"#ff3300\"\n                } \n        };\n        \n        var skycons_arr = [];\n        for(var dayidx = 0; dayidx < 6; dayidx++) {\n            var skycon = new Skycons(skycons_opts);\n            skycon.play();\n            skycons_arr.push(skycon);\n        }\n        \n        function setWeatherIcon(dayidx, data) {\n           \n            var canvasid = \"icon\" + dayidx.toString();\n            var skycon = skycons_arr[dayidx];\n            var icon_name = data.icon[dayidx].name;\n            \n            switch(icon_name) {\n                case \"clear-day\":\n                    skycon.set(canvasid, Skycons.CLEAR_DAY);\n                    break;\n                case \"clear-night\":\n                    skycon.set(canvasid, Skycons.CLEAR_NIGHT);\n                    break;\n                case \"partly-cloudy-day\":\n                    skycon.set(canvasid, Skycons.PARTLY_CLOUDY_DAY);\n                    break;\n                case \"partly-cloudy-night\":\n                    skycon.set(canvasid, Skycons.PARTLY_CLOUDY_NIGHT);\n                    break;\n                case \"cloudy\":\n                    skycon.set(canvasid, Skycons.CLOUDY);\n                    break;\n                case \"rain\":\n                    skycon.set(canvasid, Skycons.RAIN);\n                    break;\n                case \"sleet\":\n                    skycon.set(canvasid, Skycons.SLEET);\n                    break;\n                case \"snow\":\n                    skycon.set(canvasid, Skycons.SNOW);\n                    break;\n\t\t        case \"wind\":\n                    skycon.set(canvasid, Skycons.WIND);\n                    break;\n\t\t        case \"fog\":\n                    skycon.set(canvasid, Skycons.FOG);\n                    break;\n            }            \n        }\n        \n        (function(scope) {\n            scope.$watch('msg.payload', function(data) {\n                for(var dayidx = 0; dayidx < 6; dayidx++) {\n                    setWeatherIcon(dayidx, data);    \n                }\n            });\n        })(ngscope);\n        \n    };\n    document.head.appendChild(skycons_script);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "x": 750,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "90cfd7f8.631108",
        "type": "ui_template",
        "z": "c1f1fc46.4bb3b",
        "group": "d8a153f5.076c7",
        "name": "Day 1",
        "order": 5,
        "width": "1",
        "height": "1",
        "format": "<canvas id=\"icon1\" width=\"48\" height=\"48\"></canvas>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "x": 750,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "bb3e166f.46db58",
        "type": "ui_template",
        "z": "c1f1fc46.4bb3b",
        "group": "d8a153f5.076c7",
        "name": "Day 2",
        "order": 6,
        "width": "1",
        "height": "1",
        "format": "<canvas id=\"icon2\" width=\"48\" height=\"48\"></canvas>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "x": 750,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "a3148d0a.a5b1c",
        "type": "ui_template",
        "z": "c1f1fc46.4bb3b",
        "group": "d8a153f5.076c7",
        "name": "Day 3",
        "order": 7,
        "width": "1",
        "height": "1",
        "format": "<canvas id=\"icon3\" width=\"48\" height=\"48\"></canvas>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "x": 750,
        "y": 340,
        "wires": [
            []
        ]
    },
    {
        "id": "63fce300.8dab7c",
        "type": "ui_template",
        "z": "c1f1fc46.4bb3b",
        "group": "d8a153f5.076c7",
        "name": "Day 4",
        "order": 8,
        "width": "1",
        "height": "1",
        "format": "<canvas id=\"icon4\" width=\"48\" height=\"48\"></canvas>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "x": 750,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "d1ff0fe8.dc074",
        "type": "ui_template",
        "z": "c1f1fc46.4bb3b",
        "group": "d8a153f5.076c7",
        "name": "Day 5",
        "order": 9,
        "width": "1",
        "height": "1",
        "format": "<canvas id=\"icon5\" width=\"48\" height=\"48\"></canvas>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "x": 750,
        "y": 420,
        "wires": [
            []
        ]
    },
    {
        "id": "326d66fa.003b7a",
        "type": "function",
        "z": "c1f1fc46.4bb3b",
        "name": "Days",
        "func": "(function() {\n    var days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];\n\n    var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n    Date.prototype.getMonthName = function() {\n        return months[ this.getMonth() ];\n    };\n    Date.prototype.getDayName = function() {\n        return days[ this.getDay() ];\n    };\n    \n    Date.prototype.addDays = function(days) {\n        this.setDate(this.getDate() + parseInt(days));\n        return this;\n    };\n})();\n\nmsg = {};\nvar now = new Date();\nmsg.d0 = now.getDayName();\nmsg.d1 = new Date().addDays(1).getDayName(); //+1 days\nmsg.d2 = new Date().addDays(2).getDayName(); //+2 days\nmsg.d3 = new Date().addDays(3).getDayName(); //+3 days\nmsg.d4 = new Date().addDays(4).getDayName(); //+4 days\nmsg.d5 = new Date().addDays(5).getDayName(); //+5 days\n\nmsg.payload=msg.d0;\nvar month = now.getMonthName();\n        node.status({text:msg.payload});\n        \nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 570,
        "y": 100,
        "wires": [
            [
                "6fd684c3.10f87c"
            ]
        ]
    },
    {
        "id": "6fd684c3.10f87c",
        "type": "ui_template",
        "z": "c1f1fc46.4bb3b",
        "group": "d8a153f5.076c7",
        "name": "Days",
        "order": 2,
        "width": "6",
        "height": "1",
        "format": "<div class=\"daywrap\" layout=\"row\" layout-align=\"space-between\">\n    <span>{{msg.d0}}</span>\n    <span>{{msg.d1}}</span>\n    <span>{{msg.d2}}</span>\n    <span>{{msg.d3}}</span>\n    <span>{{msg.d4}}</span>\n    <span>{{msg.d5}}</span>\n</div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "x": 750,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "e7dd3e73.3dde",
        "type": "function",
        "z": "c1f1fc46.4bb3b",
        "name": "T° Hi/Lo",
        "func": "msg.tmin1=Math.round(msg.payload.daily.data[0].temperatureMin);\nmsg.tmin2=Math.round(msg.payload.daily.data[1].temperatureMin);\nmsg.tmin3=Math.round(msg.payload.daily.data[2].temperatureMin);\nmsg.tmin4=Math.round(msg.payload.daily.data[3].temperatureMin);\nmsg.tmin5=Math.round(msg.payload.daily.data[4].temperatureMin);\nmsg.tmin6=Math.round(msg.payload.daily.data[5].temperatureMin);\n\nmsg.tmax1=Math.round(msg.payload.daily.data[0].temperatureMax);\nmsg.tmax2=Math.round(msg.payload.daily.data[1].temperatureMax);\nmsg.tmax3=Math.round(msg.payload.daily.data[2].temperatureMax);\nmsg.tmax4=Math.round(msg.payload.daily.data[3].temperatureMax);\nmsg.tmax5=Math.round(msg.payload.daily.data[4].temperatureMax);\nmsg.tmax6=Math.round(msg.payload.daily.data[5].temperatureMax);\n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 560,
        "y": 160,
        "wires": [
            [
                "59f39037.40d22"
            ]
        ]
    },
    {
        "id": "59f39037.40d22",
        "type": "ui_template",
        "z": "c1f1fc46.4bb3b",
        "group": "d8a153f5.076c7",
        "name": "T° Hi/Lo",
        "order": 3,
        "width": "6",
        "height": "1",
        "format": "<div class=\"hilo\" layout=\"row\" layout-align=\"space-between\">\n    <div class=\"wrap\">\n        <div><span>&#8679;</span>{{msg.tmax1 + \"°\"}}</div>\n        <div><span>&#8681;</span>{{msg.tmin1 + \"°\"}}</div>\n    </div>\n    <div class=\"wrap\">\n        <div><span>&#8679;</span>{{msg.tmax2 + \"°\"}}</div>\n        <div><span>&#8681;</span>{{msg.tmin2 + \"°\"}}</div>\n    </div>\n    <div class=\"wrap\">\n        <div><span>&#8679;</span>{{msg.tmax3 + \"°\"}}</div>\n        <div><span>&#8681;</span>{{msg.tmin3 + \"°\"}}</div>\n    </div>\n    <div class=\"wrap\">\n        <div><span>&#8679;</span>{{msg.tmax4 + \"°\"}}</div>\n        <div><span>&#8681;</span>{{msg.tmin4 + \"°\"}}</div>\n    </div>\n    <div class=\"wrap\">\n        <div><span>&#8679;</span>{{msg.tmax5 + \"°\"}}</div>\n        <div><span>&#8681;</span>{{msg.tmin5 + \"°\"}}</div>\n    </div>\n    <div class=\"wrap\">\n        <div><span>&#8679;</span>{{msg.tmax6 + \"°\"}}</div>\n        <div><span>&#8681;</span>{{msg.tmin6 + \"°\"}}</div>\n    </div>\n</div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "x": 740,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "d8a153f5.076c7",
        "type": "ui_group",
        "z": "",
        "name": "The Week Ahead",
        "tab": "6eb3fbb3.d8f724",
        "disp": true,
        "width": "6"
    },
    {
        "id": "6eb3fbb3.d8f724",
        "type": "ui_tab",
        "z": "",
        "name": "Weather Forecast",
        "icon": "wb_sunny",
        "order": 4
    }
]