Node-Red Dashboard Tutorial

you can build dashboards in node-red if your web dev you might call this a user interface or if you're in the industrial world you might call this an HMI or human machine interface either way a dashboard is where you can view gauges trends there's buttons places for user input and of course to view data before we get into the node-red dashboard module I'd like to show you really quick that you can create custom web pages so we start with the HTTP in node this is going to create our endpoint did we need a template and an HTTP response so why are these together and we're gonna go ahead and just say what do we want our your URL to be so let's just say test1 and then we're gonna put some custom HTML in here deploy so now it was that easy to create web service a web page so of course you can make these as dynamic as you want but there's definitely coding involved HTML not everyone was to do that so node-red dashboard if you don't have the node-red dashboard simply go over to the manage palette and then under install type in dashboard and install the node-red dashboard so let's start with a simple hello example here we've got a button of course we can do a debug if we wanted but then we're gonna go ahead and display it text so when we click the button we want the payload to be hello world we don't care about the topic right now the UI elements are organized into groups and those groups will be on a tab so first thing is we need to assign this thing to a group we don't have one and we don't have any tabs so let's start by building a tab and we're gonna call it demo and then we want this group to be called button and the button group is on the demo tab now this textbox all we have to do is make sure that it's on the group that we want we're gonna go ahead and deploy so the URL is gonna be our same web address only we're gonna do slash UI you can see there's a button I push it we've got a hello world now to customize the dashboard in general if we go over to this dashboard tab you can see we can edit the order of the elements on the tabs we can also do the theme I like dark and then site is some other information so if you want to format the date change the the spacing and so forth of the widgets I'm gonna hit deploy and show you that it turned to black and I dragged the button down below the text alright let's do a few more examples here so let's do a gauge and slider and let's make our another group we're gonna call this analog and we're gonna leave it on that same demo tab and whenever we slide it it's gonna be a value from zero to 200 and we got to set up the gauge and we want the gauge to be zero to 200 we can also add these color sectors so for instance between zero and seventy five is green between 75 and 150 is yellow and then 150 to 200 would be red let's go and deploy we'll go ahead and try this thing out it's pretty slick notice that I accidentally added the original group and I just called it analog so if I go back in this guy I want to do a new UI group and I'm gonna put it back on a discreet and this one wants to be on that one as well now you see these two groups now the cool thing is as you add groups to a page they scale and sort themselves dynamically so let's say you were viewing this on a mobile phone and it looked a lot like this well you can just the groups will order themselves and it'll give you scroll bar so that you can access your user interface regardless of the size of your screen all right I'm gonna do a little more hair we've got this analog value let's go ahead and do a chart let's do two charts and one of these charts let's make it be a line chart that looks great and the other one we can do a bar chart we can go ahead and make sure it's on the analog tab deploy so there's no data yet but as we start moving this thing you can see that it works out pretty well let's go ahead and put these charts next to each other we can customize how big they are so this line chart I want it to be just this big four by three and I'm going to save the other two this chart is going to be two by three deploy and it's going to automatically stick them together because there's room for me sitting side by side now we can see one chart next to the other let's go ahead and fix our axises as well so we know this thing's going to be 0 to 250 and we also want the date range let's give this to be 3-minute date range on this chart now if we come look at this you can see we've got a fixed date range this shows us the value this shows us the history of the value and so forth so the audio output can play text-to-speech so if you input text like our hello world you should be able to speak it we do want to go ahead and put it on the discrete group hello world let's go ahead and get let's go ahead and get the lady zero hello world okay so a notification can bring out the little slider notification and then there are a few more things template is where you can make almost a completely custom thing so you can actually pull in icons and create a custom symbol and custom behaviors or custom text UI control allows you to dynamically control the dashboard let's go ahead and deploy watch the notification hello world looks like the notification comes up on the web browser

Channel: FreeWave Technologies

Views: 271,892

Keywords: Node-Red, dashboard, tutorial

Id: X8ustpkAJ-U

Length: 9min 52sec (592 seconds)

Published: Fri Oct 06 2017