IoT Project - Creating a Simple Dashboard on NodeRed

thank you hello guys and welcome back to another video in this iot series uh where we're pushing along and building up quite a nice architecture and we're trying to look at each part in that architecture and explain a little bit in detail I'm going to further look at node-red and we're going to look at the user interface that comes with node red um in terms of creating a dashboard okay and this is the same whether you're looking at it locally which we're currently looking at or if you're doing this on the cloud Okay so what I've just done previously is in a previous video we looked at Reading and writing data to the actual PLC hardware and we're using an OPC UA protocol to do that and you can see I have the hardware connected and that is still running I have Tia portal here and I'm still kind of monitoring some of these these values and writing these values as I as I go through it and really we're seeing well okay we can we can read it here anytime we click this button it will read a value okay variable one's at zero and it's at zero currently and I could set that in a timer to read that anytime I want and we can also write to it so I could click this this will write the value of 22 into the variable we see that's happened and we can actually see this has happened on the hardware itself right but now what I want to do is well you know that's not very user friendly I have to go into this code could I create a dashboard that would allow me to do something similar like this and control my PLC now remember this is still all happening at the moment locally but the same procedure once you get node-red installed onto a cloud account which we'll do in later videos this can still be done the exact same way okay so we'll just look at it here locally and then we can start to to look at a cloud later later down the line really what we're going to do you're going to need this dashboard Library installed okay and it gives us access to a number of things that we can do here there can be other libraries in there that can get you further commands and stuff that you can do but really some buttons some sliders and some gauges text boxes things like that is really going to be useful to us so we can play around with it now I'm going to show you a very simple dashboard if you want to style it up a wee bit with you know different colors and fonts and things like that you can delve a little bit more and play around with this um this software and look at the resources lots of resources on YouTube um and things like that to see how you can make the dashboard look a bit fancier but we're just going to look at functionality here currently um so look what I'm going to do is very firstly we're going to see that with node red okay remember we look at this through a dashboard and we say well localhost 1880 will bring us to this user interface okay the programming interface but if you put a slash on it and you type in the UI and you now have the user interface where the dashboard would sit okay now at the moment I haven't added in any of these dashboard commands so there's nothing sitting on this web page okay and it's still locally but there's nothing sitting there so I'm going to start to try and add some stuff to it and play around with it a little bit okay so well a couple of things I might want to view some um some text okay so let's maybe put on some some text here and what I'd like to do is maybe read out the value from that client and display it on some text okay um one thing we got to do I have a couple of I'm going to start from blank here but really you can see here this is the text what's it's going to display I'm going to display variable one and we'll just say variable one from the PLC and it's going to display the payload okay we can play around with some of the labels and stuff I'm going to add it to a new group okay and this is a new group we can I'll continue maybe I'll just call this one just to give something different Siemens PLC um and I'm going to add a new tab and this one is going to be called plc variable one let's just say now I'll explain what maybe these groups and tabs mean in a second but this is just kind of organized in my dashboard a little bit for me now if I go into here I haven't deployed it yet so let's just deploy it okay and you'll see I've got a group for and my variable PLC of what's going to come in here now at the moment you know if we import that's 22 we see the value of 22 coming in here but what been what might be nice is well let's say if I change this timestamp to repeat every let's go on an interval every one second okay let's pop that in now that will change and update as we write data to it okay so maybe what we might want to do is let's say if we input a numeric value okay again we'll put it in the same group okay and maybe if you want to see what a different tab can what that kind of plays around with we can let's go a new tab and just to show you this let's go um right var1 you know you can play around with better names than this but just for the moment I'm going to show you uh Labor's numeric the value we can type in a value between 0 and 10 okay so we could change this we type in a value between 0 and 500 steps are one so whole number is between 0 and 500 obviously you can change that and the payload would be the current value and the topic we want to write to um let me just what is the let me just put this in here and see I might have to spec I have to specify the topic there but let me just um play around with this again so we can see that reading into 22 so often here's where we can select so this is a new tab I can select a numeric value to push in but we're not actually writing in that just yes and so let me just double check that yeah so I need to make sure to add in the topic of where I want to write this data so if I take in that OPC UA item there's my topic okay or the item that I want to write to I'm going to say I'm going to pass this value into that and then put it into and write it to the server so if I deploy that we should see no that as I change this value that value will update in the plc and I should see that in here in the actual Hardware so I've now got a bit of a graphical user fit interface that I can change the value and every one second that will check the value and see what it gets what it gets put to okay so with a nice wee bit of of a setup there and there's something again that might be a little bit more interesting is to actually control the output of a PLC okay so I'm going to have to do something similar but let's you know let's actually use let's say a switch here okay and if we want let's if you want to add a newer dashboard group let's just show what happens here um let's go new group for TLC let's add this um and we also might want to push a new tab so this is all just around organization on PB start it's all around organization of your dashboard so if we deploy that um okay how come that hasn't come in just yet let me start oh yeah so see that now see we can see with the different tabs what that actually does it puts it on a new tab so there you can see the difference between your groups and your your actual tabs so you can put it on the One dashboard you can have a couple of layers and again something for for you guys to play around with we've got to switch um so when we select it it will become true when we deselect the conforms and we want to write that to a particular topic area so again we're going to select our item we're going to pop this in here and we're still going to use the same client we can connect multiple of those now where do I want to write it to well that's interesting because I want to control an output so if I go into my code I actually want to control an output so I want to control this motor but I can't write over the actual Hardware I need to use a memory bit so I need to get the value for that um that memory bit that I created I need to get the OPC value for that so that I can write that correctly so again we did this in a previous video we looked at UA experts to do that so I'm going to quickly pause the video and just double check that value so now that I have my OPC UA opened my SRU expert I can inspect this start push button memory bit and I can see that's namespace index 3 string and then it's called OPC underscore star PB so I need that data to know what I'm controlling so I can come back in here and I can set this up in here um and I gotta write it at the exact same way I see there okay can I actually copy that no so it's OPC All In PC and then it's underscore start PB and then my comments so just double check I have that right I think so so now I can write that value it's not an INT it's a the data type is Boolean again you'll see that here it's Boolean so if I deploy that now I will have a switch that will write to that particular topic and update that in my server so we're not changing the variables we're going to push button start so if I turn this on I should expect to see and output turn on here yeah oh gotta plug in a battery so we've seen that come on now what I'm going to do and I can see that actually my Hardware as well but I'm going to quickly go back and do another push button let's just paste that down the OPC area item is now going to be my reset my reset and I would double check that in my UA expert just to make sure that that is how it is okay we think so I can now make a new Switch I'll put it in that same group okay um sorry I put it in the same tab but I make a new group so let's make a new group this will be the reset PB and it's going to be on that add that just got to make sure I put them in the race it should be in there tub no I'll just update that and see um so this is a new item I'm going to connect that in let me just double check what way I have that on my dashboard yeah there's my other switch brilliant okay and you can play around with some of those names just to make them a bit more identifiable apply that you know we go in here into oh still I'm not updating so I've changed its name there and label reset so it's all about playing around with some of these um you know different views and stuff that we have of it and how we can actually make this look a little bit nicer but anyway sorry so I've hooked that up now when I reset it I need to turn this off and reset this I should see my iPod go off now because this is kind of like a latching switch I can't actually start it if that's off and because this will still not let us through but if I let's just turn the mode off my output's off and then I can turn it on my output will be on I can see this on my real hardware and if I turn that off and put that on the output will go off so I'm controlling my PLC from a dashboard and as I say you can play around with the different tabs and Views and you know comment them on nicely and you can actually change fonts and stuff if you look up further tutorials around this but really we're just looking at functionality and we're just writing that value to our OPC UA client and we've got to use ux purchase to identify those exact tags and this will work with the hardware okay I can see it actually happening in my Hardware um you would need the hardware connected for this to work and we're getting an idea of what an actual dashboard looks like and how we can you know control things from it so that's that's brilliant you can do that with node red this is all done locally and you can do the exact same on the cloud and to do some of these commands you get the same sort of dashboard but we do need to add in some further Links of how we actually push that up to try and then get it down from a cloud but how you go about creating the dashboard using these commands and things like that is the exact same here as you would on a cloud installation of node-red so hopefully that makes some sense you can really play around with it and get some nice dashboards created

Channel: CL Mechatronics

Views: 5,859

Keywords:

Id: V5nLScujqXY

Length: 15min 16sec (916 seconds)

Published: Mon Oct 17 2022