The attached flows make up a working dashboard displaying weather info (worldwide) from the Norwegian Met. Office, chosen because it requires no API key.
There is a flow to retrieve the data and cache it to avoid breaking their conditions of use & a flow for each of the dashboard layouts Grid, Fixed, Notebook & Tabs.
The only CSS styling used is to draw borders around widgets and groups which makes it easier to observe how each dashboard layout is assembled.
If you download these, please pay attention to the requirements listed in the comment nodes on the first flow.
How would you improve the presentation of this data?
- The many ways of picking a location are just a way to include different widgets. Which is most pleasing to the eye?
- Are there better config choices for individual widgets?
- What theme settings do you prefer? Are the default column/row heights the best?
- Do the core widgets share an overall style? Can you use CSS to beautify the dashboard & give it a coherent look?
- Maybe pick a single dashboard layout to enhance.
- Consider setups for different display sizes.
No 1. yr.no connection
[{"id":"4acfb18b34dffa18","type":"tab","label":"Weather - YR.NO ","disabled":false,"info":"","env":[]},{"id":"a7dde7584846a5ea","type":"group","z":"4acfb18b34dffa18","name":"Fetch & cache forecasts from yr.no","style":{"label":true},"nodes":["7d01f69176328855","b2ed74cc5a434824","a4cdcbf15bdd3234","c4943cd89b5306df","193bd9bfa4a24efb","d4785b74e14d73a9","107fefb010e5d1fa","71d96107a171e3fe"],"env":[{"name":"EMAILADDRESS","value":"foo@bar.com","type":"str"}],"x":14,"y":399,"w":872,"h":122},{"id":"dc3fb155bf7df03e","type":"group","z":"4acfb18b34dffa18","name":"Fetch meteogram from yr.no unless one exists < 1hr old. ======>>> NB Define Environment Variables!","style":{"label":true},"nodes":["9135f5649b320258","65bc6205c41f5cc4","89ad44300b448c7e","07a4062d2c323d9c","d42ac7c1b5719dd1","464b8b89b801411f"],"env":[{"name":"STATICROOT","value":"/home/pi/.node-red/node-red-static/","type":"str"},{"name":"SUBDIRECTORY","value":"yr.no/","type":"str"}],"x":8,"y":119,"w":878,"h":268},{"id":"e22c0085760720e7","type":"group","z":"4acfb18b34dffa18","name":"Setup locations of interest","style":{"label":true},"nodes":["2e3967a1027bc4d3","d8054d40c543f1f7","75121ecf14095b8c"],"x":14,"y":19,"w":872,"h":82},{"id":"9135f5649b320258","type":"group","z":"4acfb18b34dffa18","g":"dc3fb155bf7df03e","name":"Time to download a new copy?","style":{"label":true,"label-position":"ne"},"nodes":["c231b94182c4636d","bd19ecd670f569b6","2ab9447939b5dc72","e934c57663be7fe2","a6431771f1c8806d","852c6ce2310a0e76","7e92783328c7e594","72f301c0e6975103","17e55033247ce0cf"],"x":34,"y":199,"w":702,"h":162},{"id":"7d01f69176328855","type":"http request","z":"4acfb18b34dffa18","g":"a7dde7584846a5ea","name":"","method":"GET","ret":"obj","paytoqs":"ignore","url":"","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[{"keyType":"other","keyValue":"User-Agent","valueType":"msg","valueValue":"whoami"},{"keyType":"other","keyValue":"If-Modified-Since","valueType":"msg","valueValue":"modified"}],"x":630,"y":460,"wires":[["c4943cd89b5306df"]]},{"id":"b2ed74cc5a434824","type":"link in","z":"4acfb18b34dffa18","g":"a7dde7584846a5ea","name":"Get Forecast","links":[],"x":55,"y":480,"wires":[["d4785b74e14d73a9"]]},{"id":"a4cdcbf15bdd3234","type":"link out","z":"4acfb18b34dffa18","g":"a7dde7584846a5ea","name":"ReturnGot","mode":"return","links":[],"x":845,"y":480,"wires":[]},{"id":"c4943cd89b5306df","type":"function","z":"4acfb18b34dffa18","g":"a7dde7584846a5ea","name":"Cache","func":"var forecastdata = flow.get('forecastdata') || {}\nconst now = new Date()\nforecastdata[msg.location.code] = {\n //\"location\": msg.location,\n \"cached\": now,\n \"expires\": msg.headers.expires,\n \"modified\": msg.headers[\"last-modified\"],\n \"meta\": msg.payload.properties.meta,\n \"timeseries\": msg.payload.properties.timeseries\n}\nflow.set('forecastdata', forecastdata)\nmsg.payload= forecastdata[msg.location.code]\nmsg.payload.fromcache = false\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":770,"y":460,"wires":[["a4cdcbf15bdd3234"]]},{"id":"193bd9bfa4a24efb","type":"function","z":"4acfb18b34dffa18","g":"a7dde7584846a5ea","name":"Cached?","func":"var forecastdata = flow.get('forecastdata') || {}\n//node.warn (msg.location.name + \" (\" + msg.location.code + \")\")\nconst cache = forecastdata[msg.location.code]\nmsg.modified = \"\"\nif (cache) {\n msg.modified = cache.modified\n const cachexpires = new Date(cache.expires).getTime()\n const now = new Date().getTime()\n if (now > cachexpires) \n {\n //node.warn (\"cache expired, will request again\")\n }\n else { // \"don't repeat requests until the time indicated in the Expires response header\"\n //node.warn (\"Returning cached forecast\") // return cached data\n msg.payload = cache\n msg.payload.fromcache = true\n return [null, msg]\n }\n}\nelse {\n //node.warn (\"Not cached, new request\")\n}\nmsg.url = \"https://api.met.no/weatherapi/locationforecast/2.0/compact?lat=\" + msg.location.lat + \"&lon=\" + msg.location.lon\nreturn [msg, null]\n","outputs":2,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":340,"y":480,"wires":[["107fefb010e5d1fa"],["a4cdcbf15bdd3234"]]},{"id":"d4785b74e14d73a9","type":"change","z":"4acfb18b34dffa18","g":"a7dde7584846a5ea","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"location","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":170,"y":480,"wires":[["193bd9bfa4a24efb"]]},{"id":"c231b94182c4636d","type":"fs-ops-stats","z":"4acfb18b34dffa18","g":"9135f5649b320258","name":"","path":"/.","pathType":"str","filename":"fullpathname","filenameType":"msg","stats":"stats","sizeType":"msg","x":260,"y":240,"wires":[["bd19ecd670f569b6"]]},{"id":"bd19ecd670f569b6","type":"function","z":"4acfb18b34dffa18","g":"9135f5649b320258","name":"How old is it?","func":"const now= new Date()\nconst age = now.getTime() - Math.round(msg.stats.mtimeMs) \nmsg.payload = age/1000 // age in seconds\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":410,"y":240,"wires":[["e934c57663be7fe2"]]},{"id":"2ab9447939b5dc72","type":"fs-ops-access","z":"4acfb18b34dffa18","g":"9135f5649b320258","name":"File?","path":"/.","pathType":"str","filename":"fullpathname","filenameType":"msg","read":true,"write":true,"throwerror":false,"x":110,"y":240,"wires":[["c231b94182c4636d"],["a6431771f1c8806d"]]},{"id":"e934c57663be7fe2","type":"switch","z":"4acfb18b34dffa18","g":"9135f5649b320258","name":"> 1hr?","property":"payload","propertyType":"msg","rules":[{"t":"gt","v":"3600","vt":"num"},{"t":"else"}],"checkall":"false","repair":false,"outputs":2,"x":270,"y":280,"wires":[["852c6ce2310a0e76"],["72f301c0e6975103"]]},{"id":"a6431771f1c8806d","type":"change","z":"4acfb18b34dffa18","g":"9135f5649b320258","name":"No file","rules":[{"t":"set","p":"payload","pt":"msg","to":"10000","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":130,"y":280,"wires":[["e934c57663be7fe2"]]},{"id":"852c6ce2310a0e76","type":"change","z":"4acfb18b34dffa18","g":"9135f5649b320258","name":"Setup curl","rules":[{"t":"set","p":"payload","pt":"msg","to":"\"curl https://www.yr.no/en/content/\" & location.code & \"/meteogram.svg -o \" & fullpathname & \" --create-dirs\"","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":280,"wires":[["7e92783328c7e594"]]},{"id":"7e92783328c7e594","type":"exec","z":"4acfb18b34dffa18","g":"9135f5649b320258","command":"","addpay":"payload","append":"","useSpawn":"false","timer":"","winHide":false,"oldrc":false,"name":"get pic","x":590,"y":260,"wires":[["72f301c0e6975103"],[],[]]},{"id":"464b8b89b801411f","type":"comment","z":"4acfb18b34dffa18","g":"dc3fb155bf7df03e","name":"README About Downloading Meteograms","info":"Meteogram images are downloaded from yr.no by curl and saved in a static data directory.\n\nYou must have httpStatic defined in settings.js so it knows where to put them\n\nDefine env vars STATICROOT & SUBDIRECTORY in the environment for this group\neg STATICROOT = /home/pi/.node-red/node-red-static/ (same as httpStatic in settings.js)\nand SUBDIRECTORY = yr.no/\n\nso filenames will be downloaded eg /home/pi/.node-red/node-red-static/yr.no/filename.svg\nand served from /yr.no/filename.svg\n\nThe age of the file is used as a rudimentary cache","x":200,"y":160,"wires":[]},{"id":"65bc6205c41f5cc4","type":"fs-ops-access","z":"4acfb18b34dffa18","g":"dc3fb155bf7df03e","name":"Directory?","path":"","pathType":"str","filename":"directory","filenameType":"msg","read":true,"write":true,"throwerror":false,"x":670,"y":160,"wires":[["2ab9447939b5dc72"],["89ad44300b448c7e"]]},{"id":"89ad44300b448c7e","type":"function","z":"4acfb18b34dffa18","g":"dc3fb155bf7df03e","name":"Error","func":"node.warn (\"Directory \" + msg.payload + \" is not readable. Is httpStatic setup?\")","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":810,"y":200,"wires":[[]]},{"id":"07a4062d2c323d9c","type":"change","z":"4acfb18b34dffa18","g":"dc3fb155bf7df03e","name":"","rules":[{"t":"set","p":"location","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"directory","pt":"msg","to":"STATICROOT","tot":"env"},{"t":"set","p":"subdirectory","pt":"msg","to":"SUBDIRECTORY","tot":"env"},{"t":"set","p":"filename","pt":"msg","to":"location.code & \".svg\" ","tot":"jsonata"},{"t":"set","p":"fullpathname","pt":"msg","to":"directory & subdirectory & filename","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":160,"wires":[["65bc6205c41f5cc4"]]},{"id":"d42ac7c1b5719dd1","type":"link in","z":"4acfb18b34dffa18","g":"dc3fb155bf7df03e","name":"Get Meteogram","links":[],"x":385,"y":160,"wires":[["07a4062d2c323d9c"]]},{"id":"72f301c0e6975103","type":"change","z":"4acfb18b34dffa18","g":"9135f5649b320258","name":"Tweek","rules":[{"t":"set","p":"payload","pt":"msg","to":"subdirectory & filename","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":320,"wires":[["17e55033247ce0cf"]]},{"id":"17e55033247ce0cf","type":"link out","z":"4acfb18b34dffa18","g":"9135f5649b320258","name":"Got Meteogram","mode":"return","links":[],"x":695,"y":320,"wires":[]},{"id":"2e3967a1027bc4d3","type":"link out","z":"4acfb18b34dffa18","g":"e22c0085760720e7","name":"Setup locations","mode":"link","links":["4c4910cb28922165","8fcca52857e4ad81","301624436e7afd02","eede667125cf087c"],"x":780,"y":60,"wires":[],"l":true},{"id":"d8054d40c543f1f7","type":"inject","z":"4acfb18b34dffa18","g":"e22c0085760720e7","name":"Define your locations here!","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"Canberra\",\"icon\":\"grass\",\"code\":\"2-2172517\",\"lat\":-35.3067,\"lon\":149.1912},{\"name\":\"Lima\",\"icon\":\"tree-outline\",\"code\":\"2-3936456\",\"lat\":-12.0242,\"lon\":-77.1103},{\"name\":\"Kampala\",\"icon\":\"palm-tree\",\"code\":\"2-232422\",\"lat\":0.044,\"lon\":32.4414},{\"name\":\"Madrid\",\"icon\":\"tree\",\"code\":\"2-3117735\",\"lat\":40.4951,\"lon\":-3.569},{\"name\":\"Pyongyang\",\"icon\":\"forest-outline\",\"code\":\"2-1871859\",\"lat\":39.2007,\"lon\":125.675},{\"name\":\"Seattle\",\"icon\":\"pine-tree\",\"code\":\"2-5809844\",\"lat\":47.4435,\"lon\":-122.3058}]","payloadType":"json","x":440,"y":60,"wires":[["2e3967a1027bc4d3"]]},{"id":"75121ecf14095b8c","type":"comment","z":"4acfb18b34dffa18","g":"e22c0085760720e7","name":"README About Locations","info":"You can define a group of locations as an array of objects.\nSorry, I couldn't find an easy way to avoid having both location code and latitude/longitude.:\n[\n {\n \"name\": \"Canberra\", // Used everywhere\n \"icon\": \"grass\", // Icon for button group\n \"code\": \"2-2172517\", // The yr.no location code used to retrieve the meteogram - use search option on yr.no\n \"lat\": -35.3067, // Latitude & longitude used to retrieve the forecast\n \"lon\": 149.1912 // yr.no terms state max 4dp\n },\n]","x":150,"y":60,"wires":[]},{"id":"107fefb010e5d1fa","type":"change","z":"4acfb18b34dffa18","g":"a7dde7584846a5ea","name":"email","rules":[{"t":"set","p":"whoami","pt":"msg","to":"\"Node-RED foo@bar.com\"","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":490,"y":460,"wires":[["7d01f69176328855"]]},{"id":"71d96107a171e3fe","type":"comment","z":"4acfb18b34dffa18","g":"a7dde7584846a5ea","name":"README About Email Address","info":"The yr.no terms of service say you may be banned unless you identify yourself in http headers.\nThey require a site name and contact email (I use \"Node-RED myname@gmail.com\")\n\nTo comply, please put your details in the \"email\" node","x":170,"y":440,"wires":[]}]
No 2 Grid layout
[{"id":"7cbab40455148818","type":"tab","label":"Grid layout","disabled":false,"info":"","env":[]},{"id":"7d4dc1d92148e514","type":"group","z":"7cbab40455148818","name":"Current Weather","style":{"label":true},"nodes":["51f434a5cae8205f","c1534aab37af0fe7","e72095c3c957fa28","5924dba7ae857d85","7fe54a223140edd1","76f76fb5bbf14592","cd3ae270cc151264","89c27384c32f3f40","d95533dff0506135","0f78871f5accc1be"],"x":474,"y":239,"w":392,"h":242},{"id":"4a3b7fdba3b765f5","type":"group","z":"7cbab40455148818","name":"Statistics","style":{"label":true},"nodes":["de933fb7d9913984","49639fb6d42fd0c4","422bb58242222c78","cf094d9bcd67e11d","5fe578a8840fdf04","0f338e9e6035dc28","b50876501a9e8e02"],"x":14,"y":379,"w":452,"h":162},{"id":"c8ded7141c7ee18e","type":"group","z":"7cbab40455148818","name":"Meteogram","style":{"label":true},"nodes":["931667020aadabb8","b1220308c3ee3924","b786cdc988aa4d18","936c716a94a76d08"],"x":14,"y":239,"w":452,"h":122},{"id":"e63e8134815e9780","type":"group","z":"7cbab40455148818","name":"Select location","style":{"label":true},"nodes":["6d13cb98d3a5e7e5","10549f2bf19d2c26","85eec4abb03aed2c","4c4910cb28922165","815aae0ecc4dcf74","2d6158161566d46c","f82d955b78f722fb","a95f216608ee4277","466c94fc2dd0ebdc","9fb8b4ca7888a91a","d86a822e247e1ab6","035e652b043062ee","f6d2132f7f890273"],"x":14,"y":19,"w":852,"h":202},{"id":"cd3ae270cc151264","type":"junction","z":"7cbab40455148818","g":"7d4dc1d92148e514","x":500,"y":320,"wires":[["7fe54a223140edd1","e72095c3c957fa28","c1534aab37af0fe7","89c27384c32f3f40"]]},{"id":"422bb58242222c78","type":"junction","z":"7cbab40455148818","g":"4a3b7fdba3b765f5","x":40,"y":460,"wires":[["49639fb6d42fd0c4","cf094d9bcd67e11d","0f338e9e6035dc28"]]},{"id":"936c716a94a76d08","type":"junction","z":"7cbab40455148818","g":"c8ded7141c7ee18e","x":40,"y":300,"wires":[["931667020aadabb8","b786cdc988aa4d18"]]},{"id":"035e652b043062ee","type":"junction","z":"7cbab40455148818","g":"e63e8134815e9780","x":240,"y":180,"wires":[["6d13cb98d3a5e7e5","10549f2bf19d2c26","9fb8b4ca7888a91a","85eec4abb03aed2c"]]},{"id":"d86a822e247e1ab6","type":"junction","z":"7cbab40455148818","g":"e63e8134815e9780","x":640,"y":180,"wires":[["035e652b043062ee","815aae0ecc4dcf74"]]},{"id":"de933fb7d9913984","type":"ui-text","z":"7cbab40455148818","g":"4a3b7fdba3b765f5","group":"1a9825529c80e354","order":1,"width":"3","height":"1","name":"","label":"Chosen location","format":"{{msg.payload}}","layout":"row-left","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":340,"y":420,"wires":[]},{"id":"49639fb6d42fd0c4","type":"change","z":"7cbab40455148818","g":"4a3b7fdba3b765f5","name":"Location Name","rules":[{"t":"move","p":"location.name","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":160,"y":420,"wires":[["de933fb7d9913984"]]},{"id":"b786cdc988aa4d18","type":"link call","z":"7cbab40455148818","g":"c8ded7141c7ee18e","name":"GetForecast","links":["b2ed74cc5a434824"],"linkType":"static","timeout":"30","x":170,"y":320,"wires":[["cd3ae270cc151264","422bb58242222c78"]]},{"id":"51f434a5cae8205f","type":"ui-gauge","z":"7cbab40455148818","g":"7d4dc1d92148e514","name":"","group":"0f521086ccb8d932","order":2,"width":"2","height":"2","gtype":"gauge-34","gstyle":"needle","title":"Pressure","units":"hPa","icon":"","prefix":"","suffix":"","segments":[{"from":"920","color":"#a8f5ff"},{"from":"953","color":"#55dbec"},{"from":"986","color":"#53b4fd"},{"from":"1020","color":"#2397d1"}],"min":"920","max":"1050","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":760,"y":320,"wires":[]},{"id":"c1534aab37af0fe7","type":"change","z":"7cbab40455148818","g":"7d4dc1d92148e514","name":"Pressure","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.timeseries[0].data.instant.details.air_pressure_at_sea_level","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":320,"wires":[["51f434a5cae8205f"]]},{"id":"e72095c3c957fa28","type":"change","z":"7cbab40455148818","g":"7d4dc1d92148e514","name":"Temp","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.timeseries[0].data.instant.details.air_temperature","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":280,"wires":[["5924dba7ae857d85"]]},{"id":"5924dba7ae857d85","type":"ui-gauge","z":"7cbab40455148818","g":"7d4dc1d92148e514","name":"","group":"0f521086ccb8d932","order":1,"width":"2","height":"2","gtype":"gauge-34","gstyle":"needle","title":"Temperature","units":"°C","icon":"","prefix":"","suffix":"","segments":[{"from":"-20","color":"#a8f5ff"},{"from":"0","color":"#f4fe43"},{"from":"20","color":"#52fe6b"},{"from":"40","color":"#ff5959"}],"min":"-20","max":"50","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":770,"y":280,"wires":[]},{"id":"7fe54a223140edd1","type":"change","z":"7cbab40455148818","g":"7d4dc1d92148e514","name":"Humidity","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.timeseries[0].data.instant.details.relative_humidity","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":360,"wires":[["76f76fb5bbf14592"]]},{"id":"76f76fb5bbf14592","type":"ui-gauge","z":"7cbab40455148818","g":"7d4dc1d92148e514","name":"","group":"0f521086ccb8d932","order":3,"width":"2","height":"2","gtype":"gauge-34","gstyle":"needle","title":"Humidity","units":"%","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ff5959"},{"from":"23","color":"#52fe6b"},{"from":"56","color":"#f4fe43"},{"from":"80","color":"#a8f5ff"}],"min":"0","max":"100","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":760,"y":360,"wires":[]},{"id":"931667020aadabb8","type":"link call","z":"7cbab40455148818","g":"c8ded7141c7ee18e","name":"Getmeteogram","links":["d42ac7c1b5719dd1"],"linkType":"static","timeout":"30","x":180,"y":280,"wires":[["b1220308c3ee3924"]]},{"id":"b1220308c3ee3924","type":"ui-template","z":"7cbab40455148818","g":"c8ded7141c7ee18e","group":"7d68db5e2078459f","page":"","ui":"","name":"Meteogram","order":1,"width":0,"height":0,"head":"","format":"<template>\n <p>{{msg.payload}}</p>\n <div class=\"meteogram\">\n <img :src=\"`/${msg.payload}`\" alt=\"Check httpStatic in settings.js\" style =\"max-width:100%; height:auto; border: 1px solid silver;\">\n </div>\n</template>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":370,"y":280,"wires":[[]]},{"id":"89c27384c32f3f40","type":"function","z":"7cbab40455148818","g":"7d4dc1d92148e514","name":"Massage","func":"let myarray = []\n\nfunction myFunction(value, index, array) {\n //node.warn (value);\n if (value.data.next_1_hours) { // let's only use hourly forecast\n const ts = dayjs(value.time)\n const dddhhmm = ts.format(\"ddd HH:mm\")\n const obj = {\n \"dddhhmm\": dddhhmm,\n \"timestamp\": value.time,\n \"temperature\": value.data.instant.details.air_temperature,\n \"pressure\": value.data.instant.details.air_pressure_at_sea_level,\n \"humidity\": value.data.instant.details.relative_humidity,\n \"rain\": (value.data.next_1_hours) ? \n value.data.next_1_hours.details.precipitation_amount : (value.data.next_6_hours) ?\n value.data.next_6_hours.details.precipitation_amount : 0\n }\n myarray.push (obj)\n } \n} \nmsg.payload.timeseries.forEach (myFunction)\nmsg.payload = myarray\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[{"var":"dayjs","module":"dayjs"}],"x":600,"y":420,"wires":[["0f78871f5accc1be","d95533dff0506135"]]},{"id":"0f78871f5accc1be","type":"ui-chart","z":"7cbab40455148818","g":"7d4dc1d92148e514","group":"0f521086ccb8d932","name":"","label":"Temperature","order":4,"chartType":"line","category":"Temperature","categoryType":"str","xAxisLabel":"","xAxisProperty":"timestamp","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"ccc HH:mm","xmin":"","xmax":"","yAxisLabel":" °C","yAxisProperty":"temperature","yAxisPropertyType":"property","ymin":"","ymax":"","bins":10,"action":"replace","stackSeries":false,"pointShape":"false","pointRadius":"2","showLegend":true,"removeOlder":"4","removeOlderUnit":"604800","removeOlderPoints":"1000","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"6","height":"4","className":"","interpolation":"bezier","x":770,"y":400,"wires":[[]]},{"id":"d95533dff0506135","type":"ui-chart","z":"7cbab40455148818","g":"7d4dc1d92148e514","group":"0f521086ccb8d932","name":"","label":"Rain","order":5,"chartType":"bar","category":"Rain","categoryType":"str","xAxisLabel":"","xAxisProperty":"dddhhmm","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"ccc HH:mm","xmin":"","xmax":"","yAxisLabel":"mm","yAxisProperty":"rain","yAxisPropertyType":"property","ymin":"","ymax":"","bins":10,"action":"replace","stackSeries":false,"pointShape":"false","pointRadius":"2","showLegend":true,"removeOlder":"4","removeOlderUnit":"604800","removeOlderPoints":"1000","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"6","height":"4","className":"","interpolation":"bezier","x":750,"y":440,"wires":[[]]},{"id":"cf094d9bcd67e11d","type":"function","z":"7cbab40455148818","g":"4a3b7fdba3b765f5","name":"Format dates","func":"let ts = dayjs(msg.payload.meta.updated_at)\nmsg.payload.updated = ts.format(\"ddd HH:mm:ss\")\nts = dayjs(msg.payload.cached)\nmsg.payload.cached = ts.format(\"ddd HH:mm:ss\")\nts = dayjs(msg.payload.expires)\nmsg.payload.expires = ts.format(\"ddd HH:mm:ss\")\nts = dayjs(msg.payload.modified)\nmsg.payload.modified = ts.format(\"ddd HH:mm:ss\")\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[{"var":"dayjs","module":"dayjs"}],"x":150,"y":500,"wires":[["5fe578a8840fdf04"]]},{"id":"5fe578a8840fdf04","type":"ui-table","z":"7cbab40455148818","g":"4a3b7fdba3b765f5","group":"1a9825529c80e354","name":"","label":"Metadata","order":3,"width":"6","height":"1","maxrows":"0","passthru":false,"autocols":false,"showSearch":false,"selectionType":"none","columns":[{"title":"Updated","key":"updated","keyType":"key","type":"text","width":"","align":"start"},{"title":"Cached","key":"cached","keyType":"key","type":"text","width":"","align":"start"},{"title":"Expires","key":"expires","keyType":"key","type":"text","width":"","align":"start"},{"title":"Modified","key":"modified","keyType":"key","type":"text","width":"","align":"start"}],"mobileBreakpoint":"sm","mobileBreakpointType":"defaults","action":"replace","x":320,"y":500,"wires":[[]]},{"id":"6d13cb98d3a5e7e5","type":"ui-slider","z":"7cbab40455148818","g":"e63e8134815e9780","group":"c8ef9086d862df90","name":"","label":"Slider","tooltip":"","order":4,"width":"4","height":"1","passthru":false,"outs":"all","topic":"slider","topicType":"str","thumbLabel":"false","showTicks":"always","min":0,"max":"5","step":1,"className":"","iconPrepend":"","iconAppend":"","color":"","colorTrack":"","colorThumb":"","showTextField":false,"x":350,"y":180,"wires":[["a95f216608ee4277"]]},{"id":"10549f2bf19d2c26","type":"ui-radio-group","z":"7cbab40455148818","g":"e63e8134815e9780","group":"c8ef9086d862df90","name":"","label":"Radio Group","order":3,"width":"2","height":"1","columns":1,"passthru":false,"options":[],"payload":"","topic":"radio","topicType":"str","className":"","x":370,"y":140,"wires":[["d86a822e247e1ab6"]]},{"id":"85eec4abb03aed2c","type":"ui-button-group","z":"7cbab40455148818","g":"e63e8134815e9780","name":"","group":"c8ef9086d862df90","order":1,"width":"6","height":"1","label":"Button Group","className":"","rounded":true,"useThemeColors":true,"passthru":false,"options":[{"label":"","icon":"","value":"option_0","valueType":"str","color":"#009933"},{"label":"","icon":"","value":"option_1","valueType":"str","color":"#999999"}],"topic":"button","topicType":"str","x":370,"y":60,"wires":[["d86a822e247e1ab6"]]},{"id":"4c4910cb28922165","type":"link in","z":"7cbab40455148818","g":"e63e8134815e9780","name":"locations","links":["2e3967a1027bc4d3"],"x":100,"y":100,"wires":[["f6d2132f7f890273"]],"l":true},{"id":"815aae0ecc4dcf74","type":"function","z":"7cbab40455148818","g":"e63e8134815e9780","name":"Interpret","func":"const places = flow.get(\"places\") ?? []\nmsg.payload = places[msg.payload]\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":760,"y":180,"wires":[["f82d955b78f722fb","936c716a94a76d08"]]},{"id":"2d6158161566d46c","type":"ui-text","z":"7cbab40455148818","g":"e63e8134815e9780","group":"c8ef9086d862df90","order":5,"width":"2","height":"1","name":"","label":"Selected","format":"{{msg.payload}}","layout":"row-left","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":780,"y":60,"wires":[]},{"id":"f82d955b78f722fb","type":"change","z":"7cbab40455148818","g":"e63e8134815e9780","name":"name","rules":[{"t":"move","p":"payload.name","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":60,"wires":[["2d6158161566d46c"]]},{"id":"a95f216608ee4277","type":"trigger","z":"7cbab40455148818","g":"e63e8134815e9780","name":"slow","op1":"","op2":"","op1type":"nul","op2type":"payl","duration":"500","extend":true,"overrideDelay":false,"units":"ms","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":470,"y":180,"wires":[["d86a822e247e1ab6"]]},{"id":"0f338e9e6035dc28","type":"change","z":"7cbab40455148818","g":"4a3b7fdba3b765f5","name":"From Cache?","rules":[{"t":"move","p":"payload.fromcache","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":160,"y":460,"wires":[["b50876501a9e8e02"]]},{"id":"b50876501a9e8e02","type":"ui-text","z":"7cbab40455148818","g":"4a3b7fdba3b765f5","group":"1a9825529c80e354","order":2,"width":"3","height":"1","name":"","label":"Served from cache","format":"{{msg.payload}}","layout":"row-left","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":350,"y":460,"wires":[]},{"id":"466c94fc2dd0ebdc","type":"ui-template","z":"7cbab40455148818","g":"e63e8134815e9780","group":"","page":"0c1609bc6c95c49a","ui":"","name":"Show widget borders","order":0,"width":0,"height":0,"head":"","format":".nrdb-ui-widget {\n border: 1px solid yellowgreen;\n}\n.nrdb-ui-group {\n border: 1px solid crimson;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":140,"y":60,"wires":[[]]},{"id":"9fb8b4ca7888a91a","type":"ui-dropdown","z":"7cbab40455148818","g":"e63e8134815e9780","group":"c8ef9086d862df90","name":"","label":"Dropdown","tooltip":"","order":2,"width":"2","height":"1","passthru":false,"multiple":false,"chips":false,"clearable":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"drop","topicType":"str","className":"","typeIsComboBox":true,"msgTrigger":"onChange","x":370,"y":100,"wires":[["d86a822e247e1ab6"]]},{"id":"f6d2132f7f890273","type":"function","z":"7cbab40455148818","g":"e63e8134815e9780","name":"Setup locations","func":"const places = msg.payload\nflow.set (\"places\", places)\n\nlet buttonoptions = []\nplaces.forEach(function (item, index) { \n buttonoptions.push({ \"dropdown\": \"Location\", \"label\": item.name, \"value\": index, \"icon\": item.icon }) \n});\nlet buttonmsg = { \"ui_update\": { \"options\": buttonoptions, \"max\": places.length - 1 } } // max is for length of slider\n\nreturn buttonmsg","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":120,"y":140,"wires":[["035e652b043062ee"]]},{"id":"1a9825529c80e354","type":"ui-group","name":"Stats","page":"0c1609bc6c95c49a","width":"6","height":1,"order":3,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"0f521086ccb8d932","type":"ui-group","name":"Weather","page":"0c1609bc6c95c49a","width":"6","height":1,"order":4,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"7d68db5e2078459f","type":"ui-group","name":"Meteogram","page":"0c1609bc6c95c49a","width":"5","height":1,"order":2,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c8ef9086d862df90","type":"ui-group","name":"Select the location","page":"0c1609bc6c95c49a","width":"6","height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"0c1609bc6c95c49a","type":"ui-page","name":"Weather - Grid layout","ui":"d45641ed6d39fea1","path":"/grid","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"d45641ed6d39fea1","type":"ui-base","name":"This is my ui-base","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":5,"showDisconnectNotification":false},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"2px","density":"default"}}]
