Build a simple Node-Red Weather Dashboard using OpenWeatherMap

dear viewer welcome to this video about open weather map and API requests in node-red in the coming weeks we're going to take a deeper dive also in different apis but right now we're going to start with a easier API which is also able to function with their own node so the developer provides an own node so we don't need to make a lot of configuration and we can get data into our node-red project fairly easily we're going to start by installing the required nodes to request weather data from open weather map for this click on the top right hand side and then click manage palette click install type in open weather and you will see here it appears open weather map I've already installed it just click on the install button wait until the message appeared that the notes have been installed successfully quick information to this you need to have internet connected so the node-red project can actually download these notes so if you're working on a Raspberry Pi first make sure that the internet is working when everything is installed down here two new nodes will appear and we're going to drag one of them in our project now and let's make a double click on it and we will see that there's a API key required an API key is basically an access token which grants you access to this requests so the open weather map will allow you to get through your API you have to get from the open weather map home page I've opened it right here you have to make an account and then you can click on my API keys and then you will see right here a key which has been provided for you so click in the top right hand side copy this key by copy Ctrl and c and then go back to your node wrap project insert it to the API key field and then we can select already a place for where or for which we want to get a better data so let's select Los Angeles in the U.S and let's already try the API with this static input so we will connect the inject as well as a debug node deploy and we will inject timestamp and after some seconds we will see a object appears with information about the weather in Los Angeles let's say we want to display the the temperature Celsius on our dashboard we can do this by first let's put a text field on our dashboard in which we can insert the value of the temperature and then let's take a change node this one right here connect it and connect the back side of the open weather map to this change now we will set the message.payload object which is right here as you can see this is brought to you by this debug we can grab different values out of this object by selecting their path for example if you want temperature Celsius we want to set our msg.payload object to the value of msg.payload and Dot temp c like this and it will take only this value which is listed here on the right side and we can insert this then to our dashboard important a dashboard node or any other node which will transform the data you have here you can't directly connect the back side of here it doesn't know which one of these values to take so you have to first you have to filter it by taking for example a change node so I need to create a new dashboard Tab and the new flow so like this and then we will call this the label temperature loss or LA and we can even add label on the back side of it so let's deploy and let's open the dashboard of course now there's no temperature we need to inject first and right now we see there's a temperature on our dashboard which appeared now our goal is to make the city and Country Dynamic so we can change the city while the program is running for this we will create first a form on our dashboard which will make us able to input data to our project and we will test the form first and then from this form we will put it into our open weather map node which then will change the location according to what we put in the form let's create a new dashboard group and call it dynamic input let's add the form to this Dynamic input and we need of course two values first we need a city and then we need also a country which are both required otherwise we can't and let's try first form what comes out of here so let's say we want the city of Berlin Germany so de you need to use the short term this is also described when you click on the Node and the book right here we will use it further afterwards and as you can see two sub-object to City and Country definitions have appeared right here and we can use them further right now we're going to connect the output of the form to a global variable a global variable means that the variable the value can be called upon from any node in any flow in the project so we will do this by taking a change note and and setting Global dots whatever we want that will call it input to the value of msg. payload this will mean that we can reach this variable from this flow but we can reach it also from other flows we might create right here note that if we select here instead of global flow the variable will only be reachable in the flow so let's test this out go back to the dashboard put in put in Berlin in Germany submit and then we can switch right here drop down to context data and we can update right here by pressing refresh and as you can see the variable input has been defined now we're going to use these values to adopt our input or open weather map requests and we will put a new one in our project note that you need to copy again your API key because you can't copy it from here it's uh it's locked right here if I copy this I won't get a correct API key for safety reasons so we need to copy it again insert current weather 4 we can leave everything like this because right now we're going to make the city and Country variable and we will also use the inject and between this open weather map and the inject we will need a function and to understand what we need to do in the open weather map we need to open the description of this node and as you can see here it's defined that we can use the lsg.location.ct part of an object to read the data from the specific location that you want so let's do this right now we need to overwrite the whole MSG object and we will need to pass only the required values so let's put MSG equals brackets and then location and then dots and here we will have two sub objects which are City and country and of course these two we want to set to the values that we inputted to the global dot input so let's get in our function right here the global.input by calling by creating first a variable you can make it war or cons whatever you prefer let's create a vore and call it input inp equals to global.get and then brackets the name is input this name needs to be the same as the one you have defined right here and now we know that we if we will call this we will have in the variable imp we will have two sub object CT and Country so we can just put here in dot City and here of course you need this one the double dots and the country double dot imp Dot country like this everything is set up and the function will be able to pause the information to open weather map to the node since we already have information about City and Country we can already test the node let's inject and as we can see right here location has been set to Berlin and the temperatures are recording now we want to display the information that everything worked to the user we will do this by adding some informational fields in the dashboard so let's use some change notes to grab certain parts of this object right here let's use msg.payload dot location first to confirm that location has been set correctly let's copy this and let's as well display the temperature to the user right here I will copy the node for the temperature because we already created a similar one of course I need to adjust the place of this node to the lower so to this part right here Dynamic input and it's not in La so it's just temperature I will connect this one and I will copy it again because it's just a text input we will delete the Celsius and the end and we will call it location and it's also in the dynamic input let's go to the dashboard Tab and arrange everything let's put the location above the temperature and like this we're set to go and one thing we will add now as well to this one right here is we will make that the request will automatically update every few seconds we can do that by double clicking on the timestamp Node or the inject node and then up down here on repeat we can select interval and let's say we want to update every two seconds deploy this and if we switch we see automatically an update has been made let's put in another city let's put in London the United Kingdom submit let's wait for one two seconds and as we can see the city has been changed to London right now thank you for watching this tutorial we would like to adjust our content according to the needs of our viewers that's why we ask you to input into the comments what you're currently working on and what your problems are with node red and we will try to focus our content on your inputs

Channel: RuWindustries

Views: 6,652

Keywords: Node-Red, Industry 4.0, IOT, JavaScript

Id: jRF0HwzdXGE

Length: 14min 16sec (856 seconds)

Published: Sat Feb 18 2023