Tutorial: Basic Node-RED Dashboard UI

once you've installed and configured your groov io nodes you may want to start doing something more interesting with your data if you haven't already installed these nodes and configured your device go ahead and watch our previous video that goes over that process in this video i'll be downloading some new nodes to create a simple ui dashboard within node-red that i can use to access and control my device [Music] now before i dive into going ahead and using these groove nodes i'll first need to do some other setup and specifically i'll need to come up to the manage palette and install my new nodes since you'll notice that there's no dashboard or ui nodes here i do have all the core nodes that come pre-installed with node-red and the groov i o nodes that i'll need to communicate with my groov rio that i'm using for this demo and before i can come up to this install tab and search for nodes i will need to have a gateway to the internet but since my rio here is connected to my home router over ethernet i can go ahead and type in here dashboard now it's really important you select the correct result for dashboard you want this node-red dashboard not this cn dashboard nodes so it's node-red dashboards this set of dashboard nodes for node-red and you'll always get the latest version in this case we're using 2.27.0 so now that i'm connected to the internet and i can click install confirm the installation and then i can click view log to make sure that everything comes down correctly now depending on the device you're running it on the version of node red you're using and the version of the node package you're installing you may see some errors in here but don't worry as long as you get a return code of zero and see the nodes show up in your dashboard you should be good to go so after just a couple of seconds of waiting we'll see that the nodes are going to start coming down here and there we go i've got my return code of 0 and we'll see a pop-up of all these new nodes that i can now use in node-red if i close this and close out of the manage palette window i can scroll down and see that they're added to the bottom of my palette over here so now i can start setting up my dashboard page if i come back to groov manage and select io channels i'll first decide on what data i want to display and what i want to control i'll do a short example of each and that should be enough to get you started for example let's start with this fuel level you'll see i'm at 4.2 gallons but i'm easily able to turn this up and there we go i'm up all the way to 10 gallons almost and scroll it all the way back down and i'm down to 1.4 so i do have control over this with a potentiometer so it'll be really easy to test this is on channel 2 and we are on module 0. you can see that up there in the url so i want to bring in this this module zero that's the only module installed on the rio the this one module device and i want to get channel two for this fuel level so back in node red i'll bring in my groov i o input node and double click it to configure it now but i won't be leaving my dead band at one gallon of change since i only have 10 gallons i want more readings than that so i'm going to change it to 0.1 so i get really good resolution in node-red i'll give this node a name like read fuel level and click done that's all i need to do for that part of the groove now i want to decide how to display this i could simply pick a text field that will show the numerical value of my fuel level but instead i'm going to create a gauge so i'll just drag that in and double click it to configure it we can see here that i need to configure a group that red outline there means this is misconfigured since you don't have any groups by default just select the pencil icon to add a new one once you create that group you'll notice that again you have to go a level deeper and create a tab to hold that group i'll again click the pencil icon and we can see here this is where i get to create my tab i'm going to simply leave this at the default name home and the dashboard icon is just fine but you should note that you can use different types of icon packs like material design font awesome and weather icons to better describe what that page does so i'll leave this enabled and click add now you can see i do in fact have a tab selected and i'm able to create a new group within this tab i can also change the width but the default width of 6 is fine since i'm not going to be adding too many gadgets it's very simple to increase this width if you would like you just do select this drop down and select how wide you would like it to be so now i'll click add once again to create that group and we're ready to actually add our gadget to that group within that tab and you can better organize your page once you create more complex uis let's take a look at a finished more advanced page so that you have a better idea of what you just created the first thing you created you can see up in the top left is this home tab inside of it you can see that first default group and this is the group that will be adding this gauge gadget to this fuel level you can also add different groups like this chart group example i have that plots the change in fuel level over time you can also have multiple gadgets within a single group for example the default group also has an led control switch in it finally you can further organize your data by using these extra tabs up in the top left here here you can see i've got my home tab that i just created and i've added an extra tab number two there so that you can see what that looks like each of these tabs can hold multiple groups and each of the groups can hold multiple gadgets and they can all be rearranged freely so now that you've seen all that let's get back to setting up these specific gadgets now moving down this list we'll see that i have this type option and i will actually select the level option since this is a fuel level and i want to see it like a tank filling up and becoming empty again and instead of labeling engage i will leave it label it fuel level finally i can name my units gallons since that's what i'm measuring in and my range does in fact go from 0 to 10. so i'll call this the fuel level and click done you can see once i clicked done that red triangle disappeared and we've got our renamed node right here my fuel level so now i can simply wire that in and to confirm that it's working correctly i'll press and hold left control on my keyboard and left click on the screen now i can add in a debug node really quickly right here and we want to see exactly what the fuel level is as it's being read in so let's switch over to the debug pane so that we can see it come in and select deploy now we've actually created a dashboard so i'm going to open a new tab so that i can actually view what's on that dashboard right now so on my new tab i'll type in rio dash dev that's my device's host name and then i'll do slash node red and then i'll do slash ui again with a trailing slash after that it's very important you have this trailing slash here or you won't be sent to the right place so i'll go ahead and click enter and we'll see the dashboard load up here we'll be able to see in the top left we've got this home at the top here that's that tab i created and we've got this default group here that i'm using right now we can also see my fuel level at 4.2 gallons and if i turn that up we'll in fact see the fuel level rise and when i turn it all the way down we'll see it drop down we can see that this is sort of happening in bursts and we'll see if we check the node-red debug pane we can see exactly what's happening here it's getting a message every 0.1 gallons of change and then updating the node-red dashboard every time i twist the potentiometer so there we go we're easily able to display data directly served from the rio using just node-red so now i want to change a value on my groov rio from within node dashboard so let's quiet up this debug node by disabling it clear up the debug pane and deploy again now we just need to figure out exactly what point we're going to be writing to so let's go back to groov manage return to the channel listing and we'll see here on digital output 4 i have this blue ring led from within groov manage i can toggle it on and off and i can view the status of it so we'll have this ready so that we can check to make sure everything's working i'll go back to node-red bring open the groove via write node and again select my localhost value i will leave it as the digital output channel state name because you did see back here we do have it on in fact a digital output listed right there under the channel type so with digital output state correctly configured we'll put in my module index of zero the only module on the rio and we'll put in my channel index of 4. now we will be writing message.payload to it and we'll give this a name like control led now when i click done that's this part of the groove taken care of now i just need to select an item that i'm going to be using to control it here i could use a switch or a button and i'm going to start at the top i'm going to pick a switch so now when i drop that in you'll again see we have the red triangle since we'll need to configure this but we don't have to reconfigure our group we can use the same default group that we put on our home tab earlier and just add this switch to that group i'll give the label a better name like led control and we could in fact add a tool tip like toggle led on and off you can also pick a custom icon for this one as well both for on and off but i'm going to leave that as default now i will be sending a message.payload with the values true and false here depending on what you're controlling you may want to send different values but because this groov io node is expecting a value coming in on message.payload and if we check the help tab we can see that the turn on the channel we should send the boolean true or the string true or on and then to turn it off we send the boolean value of false or the strings false or off so in this case our boolean values of true and false coming on message.payload are the correct control messages that we're looking for again i'll give this node a name like led control and click done so now when i wire this node in we'll have this new button added to our dashboard and it'll control the led so if i bring up my dashboard now you'll see we only have the fuel level but if i come over here back to node-red and deploy this node we can see as soon as i bring up in the dashboard again i don't even have to refresh the page we've added this led control right here so i can confirm that it is in fact the state is off if i come to the dashboard and toggle it on we'll see that we toggled the led on and there we go in groove manage it's reflected and i can see the light on next to me if i go back and turn it off we'll see again the light has in fact turned off so there we go we've got our node-red dashboard setup with an item at the top that toggles the led on and off and we can easily display our fuel level or as many other values as we would like we can also see that the led control is off while we're working within our node-red flow and we can also rearrange things by coming over here to the top right and selecting dashboard you can see this is where we have all of the devices we have listed we have our tabs at the top here our groups underneath that and then each of the individual gadgets if i were to grab one of these items and reorder them so that the fuel level is on top and led controllers on bottom and then deploy back in the dashboard we can see that they have in fact swapped places so it's very easy to rearrange your dashboard in a way that's intuitive and easy for you to use using a simple flow like this you can interface with your groov rio without having to set up any other uis just within node-red

Channel: Opto Video

Views: 34,548

Keywords: automation, opto 22, opto, opto22, automatizacion y control industrial, Node-RED, Node-RED dashboard, groov, groov RIO, RIO, Learn Node-RED, PLC programming, learn automation

Id: Ho1vMuA43ks

Length: 11min 10sec (670 seconds)

Published: Wed Mar 10 2021