Node-Red Dashboard 2: a quick 1 hour intro into what the new Dashboard looks like

welcome to a new video in my home automation series and today I'm looking at something uh completely new which is uh the dashboard 2.0 and I'm seeing completely new because the version 1.0 just got released um recently but um it is also completely new to me I haven't really followed this project right from the beginning and right from the you know the first release which was available before version one so my knowledge of this is also very recent so I think in this video we are going to have a first look and I'm going to give you just like an overview of uh how it works and how it is different and also I've created a lot of examples where I was playing with it so we can look at that one as well and uh maybe in followup videos I will dive deeper into some of the you know the intricate details that uh makes it you know more unique or more customizable than the existing dashboard so with this new dashboard 2.0 we are moving away from the existing dashboard mostly because it is based on some old technology which is being depreciated now so uh that was angularjs in the past and now um this dashboard 2.0 or flow fuse as I'm going to refer it in a couple of times in the future so that is based on the vue.js which is the new you know well I guess the newer JavaScript library which is also used quite a lot by you know web developers as well and uh we don't have to think about something completely new because the dashboard 2.0 inherits most of the the things and Concepts that was uh that existed in the dash dashboard 1.0 or the original dashboard so I think actually migrating from the old dashboard or the new dashboard or getting you know started in the new dashboard is going to be fairly easy so there's going to be familiar structures and familiar notes and the way I understood it is there is well besides moving to different technology there is a lot of emphasis on extensibility and customizability so we will see that we can do a lot more in terms of look and feel and and different applications that we can run uh on the same dashboard and there are of course some new noes as well so we are going to see some markdown notes which uh can give some you know interesting use cases uh in in a d to a dashboard there is a new table View and because we are using the vue.js uh it is using the VY component Library which is going to well potentially give a lot of extensibility in terms of like new widgets that we able to use uh on the dashboard even though if they are not created by nodes but we should be able to use them in templates or at least I think that's the idea and also there is one interesting feature which is the uh the support for multi-user dashboard which actually I'm quite interested in I I know this is not something that you know most people really want or interested in uh but I definitely want to explore that area but uh that's I didn't have time to do that just yet and actually before I before I continue with the slides I just want to give you uh some things that I'm going to talk about in the rest of the video so you just have a quick understanding of uh how this dashboard looks like actually let me just move my face here so I don't know what's the best position maybe here now so as you can see the um uh it looks it feels and looks very similar to the previous dashboard so we have the same sort of like header layout and we have different tabs these Tabs are called different nowadays but uh we have like you know widgets where you can display data we also have chart just like previously and we can have buttons we can have notifications we have data entry fields dropdowns and you know various editors and you know sliders and and of of course we can do something and that's the markdown thing that I'm going to talk about later on and of course we do have charts so I was playing r with the charts a lot uh uh you know how you pass data into charts how you pass live data into charts how you pass you know uh pre-made data into charts I think there is a lot of functionality here but uh probably this is the area which is uh um lacking features from the previous dashboard zero not that it is lacking the most most um you know crucial features but maybe there are some things that uh you won't be able to find and I also play more things around like the theming you know changing colors how to represent the dashboard in a different way not that I have done a lot so just like you know now it has a different background color and some of the accent colors are different and also there is a new whole new uh controls on tables and displaying data which is actually quite good because I think the previous dashboard was lacking in that area quite a bit so as I said it's not a huge amount of stuff but I wanted to just uh gather all the basics uh to in this video and I think I managed to use most of these basic controls uh Within These couple of pages that I created in the past couple of days and before we begin let me just add one more slide and that's about like you know what I'm going to talk about in this video so as I said um my Persona or you know my viewing had for this video is going to be the you know the guy who creates a dashboard for his home automation system because based on the comments I think this is the uh uh the ones that you guys use the uh the system or sorry node red the most so that's how you sort of creating the dashboard and then you know how you use the dashboard but again if I'm mistaken just you know let me know in the comment section so first of all I uh want to go through some of the resources uh that where you can find information and the current state of the of the dashboard and uh do a couple of uh words about the installation and then I will go through the same pages that you have just seen so talk about the basic UI structure how the um you know the the screen and the different dashboards and the pages look like and then we go through the different uh simple controls how you display information how you display charts and you know notifications how the data entry forms look like and what you can do with some these new stuff like the markdowns and the tables and um I think we use the charts quite a lot so I'm again was spending a little bit more time just to understand how you can pass data to the charts so this is the main page for the dashboard 2. uh UI uh and uh so as you can see previously I mentioned that this is part of the flow fuse um I would say project uh that is uh you know is supposed to bring this new UI so I think part of the few flows is the dashboard 2.0 and as you can see from this video Nik lri is one of the sort of the founders and the main I guess developer for the for the node R stuff so I'm guessing he is spending considerable amount of his time just to get this uh flow fusees up and running and just beside the dashboard um as as far as I can understood from some of the documentation and the online sources so this flow VI is a lot of it contains a lot of additional Enterprise ready functionality for node red and the dashboard as well so there is a lot of stuff here which I think like normal like DIY no rad users will never use but that's also part of this whole uh flow fuse and so there's a lot of things about deployment and uh you know like how you you know scale instances and how to deploy instances which uh yeah I mean it's interesting stuff and very uh interesting and very important for Enterprises but I don't think that we really need to care about that or maybe not for now so this is the main uh page for the dashboard 2.0 and the reason I it is good to know uh find or good to find because there is a lot of stuff in here on the documentation so this is what I usually use for the documentation and by the way uh there is a latest blog section which doesn't have an awful lot here just uh one single blog and as you can see the um it was uh so it was General availability on so first release was uh back in June but I think the or that was the date here oh this was published just the end of January so their version 1.0 1.0 is actually fairly recent and of course just like with any other no red component there is a GitHub behind it and uh it Con contains you know pretty much the same documentation and the link to the uh the previous page and um the other thing I want to say is that even though this is 1.0 it is you know far from the you know the complete functionality of the dash of the current dashboard there are definitely some missing features and as you can see from the number of issues there are you know certainly problems and I have already run into some smaller um mostly annoying issues and probably I will be able to show you a few of them um but not to say that the whole thing is not working it's working but you know there are some stuff with it which uh is you know not as polished or maybe you know run deployment I have f a couple of issues and that that's pretty much it and if you go into the getting started it gives you it takes you into the documentation and there is a fairly you know good documentation on um on the various components but I think when I move into yeah certain pages you can see that it is definitely you know work in progress and also since we are talking about like you know versioning and you know how to get started and uh things like that there is a section here which is called the migration guide and for example it talks about the differences what uh um version 2.0 is not supporting yet so you you can see like for example in a button icons tool tips colors backgrounds are not supported yet the issue is created so that's probably being toed in or you know put into a future release and you can go through you know pretty much all the um the main uh controls and see what is missing and um whether that's you know expected to be released so for example if you really want to use the icons you can go into this issue maybe you can just SC quickly go through it and maybe there is going to be some stuff around you know when is expected and in which uh releas we might expect that piece of function to be added okay so that would be the you know the current state uh section so maybe we can go over to the getting started which is going to be very easy uh because after all this is just another you know custom node that we can just uh easily uh install actually it is already documented here or mentioned here it's basically just that much and if I go into my node red dashboard then I can go into the manage pallet and you can see that I have this new dashboard so it is called add F flow fuse no red dashboard and you can just find it in the installation um just like any other component and uh you install it you know this it works just like the dashboard I think I might have to restart not Rad but I'm not even sure about that and once you install it then if you scroll all the way down to the well for me it's at the end of my pallet so dashboard 2.0 and you can see the the various uh uh notes here and I think most of them are going to be fairly um similar there are some new stuff here and there are some stuff which I think it's missing because if I scroll up to the older dashboard definitely there is more stuff in here uh but also keep in mind that I think the E editor and the E table is not something which uh is part of the dashboard but I separated I installed it separately it just got added to the same group as the basic dashboard and just like the original dashboard we get uh dashboard 2.0 in this sidebar and by the way you might ask this like can I use dashboard 1.0 and 2.0 together yes you can definitely do that I'm using the same stuff so you can see that I have dashboard 1.0 and 2.0 so this is my 2.0 stuff and I can also show you 1.0 and that is also running so the two things are not exclusive um in each other and um within the dashboard you can see that it is again fairly similar to the previous one so again that's why I'm seeing the widgets here it's I think probably like a bug uh but it has the same thing you can have Pages you can edit them and then you have the various groups and the individual nodes or UI elements and uh yeah you can edit them but there are some additional things here so there are some you know settings and there is different themes that you can have which is really about the extensibility which uh I wanted to point out okay let me talk about the basic structure of of the new UI or the new dashboard and that is going to be fairly similar to the previous one but uh again there has been a couple of additional layers at it again mostly for um customizability and in in order to separate you know different dashboards uh from each other so if I select a simple text uh it's not the it's just a simple UI text then you can see that we still put this into a group and the group itself is very similar to the um to the to the group that we had previously so we have a couple of additional options here like but the name the page and the size is the same whether we want to show the group name we have some additional things for custom class if you want to add it a give it a different class and we can do it like visible and interactivity interactivity to it but then if I go to the uh onto the page then we already see a couple of different things so for example I can assign it to a different UI so I would be able to build completely separate uis from each other and uh so you know they would be like completely different web pages you won't be able to navigate from one UI to another I mean I think this is uh probably the reason you would want to use the different uis and also the the whole URL changes as well so now we are going to see that every single page gets a like a name which appears in the in the URL instead of that you know complicated code that usually shows up in the uh um in the URL and you can assign different themes for the pages that's what I'm going to show you a little bit later and there are also three different layouts and um I think the layout we had in dashboard 1.0 is actually the fix F layout but now we have a grid and a fixed layout I still don't quite understand the difference between the different uh layouts because for me they appear very very simple so you can see that U you know the uh um sorry oh so here in the documentation you can read about the layouts so we have the grid layout which uh I think it's uh as I said it's very similar to the um to the existing layout but the the limitation is that it is it by default it provides a TW 12 wide layout and then in in a grid again it looks very similar but you can define a wider layout or any sort of layout size uh which uh uh which you know works best for you and you can see that you you have to Define these unit widths and this is the the layout which was available in dash uh dashboard 1.0 I think we are mostly going to use the the grid layout instead of the fixed but um you know if you useed to uh you know rigorously specify audio units then I don't think there is going to be a lot of difference between the two the one thing I can definitely see that in the old dashboard what had happened is that if you use different um you know sizes like if you had these smaller groups and then you had this wider group then sometimes the wider group would render through render over another group which doesn't seem to be happening here so as you can see the the tallest group will determine what's the uh the width of the row whereas in the old dashboard this would probably come up to up to here especially if you have uh smaller ones they would definitely populate the space here so that's not happening anymore and we also have this new notebook uh layout which uh um it it it looks more like a web page so all of the um the the groups are uh under each other so yeah I mean you know you can use the grid layout to look like a notebook as well but maybe if you want to control it that uh that everything is below each other just like a web page or a blog or something like that then you have a dedicated layout for that okay so that's all about the layouts and the different um you know the structures and since I talk about you know these these changes I also want to mention these themes so what you can do in the themes is uh you can specify the colors and this is something that we had in the old dashboard as well but now you can have different themes for each of the pages so here you can see that I use one theme where I have a gray background and the the groups uh the group borders are gray and for this last when the new theme I was I I was picking you know uh green colors but if you look closely for example I specifi the navigation should be um this blue just like the match the old one but for some reason it is still showing up as white and even on the new theme this is white whereas um sorry whereas in oh I need to get go all the way back so whereas in the green theme I specified that the navigation should be dark green so probably probably this is something which is not working and you can change the sizes as well and the widget gaps and of course there is a lot more customizability because in um in the template node whenever you place a template node which is act again very similar how we use the templates in 1.0 but you can see that you can have a uh you can use the template as a widget which is uh you know scoped the group group or page or UI I think mostly we will use the group scope layout but you can also use this uh template new to also uh store CSS ties which are all pages or single page CSS di so that's where you can specify that like I want a background picture as my sorry I want a picture as my background to my dashboard which uh I don't think it was possible in 1.0 but with here it's definitely possible um so by the way I I'm not sure if you have seen there was I made a video on some very fancy gauges that somebody made uh in in the dashboard 1.0 so that was using template node as well to create all the custom CSS classes that we used for you know displaying the numbers and the dial and you know some of the graphics so now it is more built-in and more accessible within the ye template node so that should be enough about the structure and everything so let's go over to the um to the basic controls and these basic controls are not really going to be any different so let me just talk about the text so that's what we use the most to display anything and as you can see it is very similar to the um to the previous one again you can style it here separately you just like with all the other components you have additional field here that you can provide a CSS class so that's the CSS that you can Define in a template node and you know you can specify a size and you know the name of it so the only thing which is not available here that I'm lacking is that in the previous version you could specify what part of the message to display which is by default the message. payload and you could use the same field to provide suffixes so for example units of measure so that's not available here so so I'm hoping that that would be added a little bit later so that's what I used on the first to just show you know measurement data which is coming through mqdt so it looks the same as previously and it you know it used it exactly the same way and then um well the other way you usually want to display stuff is using charts and we have a chart component here or a chart node and by the way we don't have a gauge yet um so uh that might be a little bit disappointed to for some of you so this is how a chart looks like and uh there are two notable differences here uh well again we have the CSS class which is new but um you can only Define these three times at the moment so line bar and Scatter and um scatter is basically just a line chart which doesn't have the uh um you know the lines it just only have the data points and okay we have a separate U you know pointers as well and there is a um an option that if a message is received then you that uh data is appended to the data which is already displayed in the chart or replaces it is a nice feature but uh you can still you know delete the whole content of the chart by sending an imp empty array to the chart so I can definitely live without this feature and I think in most of the charts that we use you would use append anyway so it's nice but uh I it's not something that I was missing but then you know you can format the um the x-axis again you had a lot more options in uh in uh chart 1.0 so if you wanted to customize how the time is displayed time stamp for example you only wanted to display the name names or you know day and the name of the day you could um create some formatting options here you just have a drop down now it says time scale or linear and the other big change okay I think I mentioned two but it's already like three or four is that uh there is a lot of um customizability of what part of the message is the uh shows the data series which is by default the message. topic and then what part of the message is are the X and A Y data and of course there are some defaults so by default message. topic is the name of the series message. payload is the X sorry the Y value and the x value is always the time when the message is received but uh you can change all of these so if you have a specific data structure that you want to pass over to the Chart you don't need to reformat it um well in not all cases you would need to reformat that message you can just specify these three values here and then the chart component would know where to pull the data from uh from the incoming message but again if you are just passing data through like you know in I just specify that okay the temperature is now called temperature and the payload is I just didn't done some formatting to the uh the data just remove the decimal places and I did the same for the humidity and uh again I created a filter so it doesn't uh it only posted differences to the chart and if you just pass it to the Chart you see series is message. topic I haven't specified these I left the action on append then we get a nice chart just like we expected it looks a little bit fuzzy because uh now it shows each data point with a circle and there are a lot of data in here uh and we have a legend just like before we have title you know everything is autof formatted the scale is auto scaled uh the the date is automatically formatted that's the thing which I can't uh um change at the moment so I mean I would probably use other than you know the US time format but it just says time or time stamp and you can't um change that so not an awful lot of change here some minor functionalities some more functionalities you're definitely missing some chart types but uh you know the line the bar is here which I think is the most uh frequently used I'm not really sure how much you are into like notifications I use notifications a lot and these haven't really changed you can specify that uh um you well you can even specify the scope of this notification you can specify where to show it sorry oops what did I do yeah you can specify where to show the notification the time out whether you want to dismiss button and uh I tried some of these not all of them didn't not all of them work for example buttom Center that did not work but um you know it just like it does this and it counts down and then it disappears if you don't want to see you can dismiss it sooner simple but effective okay so that was that was the that was the so this was the grid layout that you can see here so as as you can see by default the grid page is 20 12 units wide and all of my uh groups are six units wide so I have just two uh next to each other and of course if I oops if I make this uh smaller then as long as it can fit two next to each other then uh it does two then it will you know do only one so this is this would be like a mobile view but again it won't put three okay so the next page is this is also grid layout and um uh yeah that's also G layout and um I just wanted to play R with controls sorry entry uh form controls and I wanted to play around with this new template um node that you can see here so but be let's look at the form controls first so the form controls where are we yeah they are here and also if you look at the side you can see that definitely we have much fewer notes what we had in dashboard 1.0 but we have the form which to be honest I never use the form because I rather handle all the data myself I'm not really sure how much you are using the form but I know you can use the form and then you can you know specify all the different controls and then basically it submits the data in one go but um as I said I usually do all my entry handling so I don't use the form so the next thing we have we have input text we have buttons dropdowns radio groups sliders and switches so the only thing which I did not use from this group was the switch but I used all the other things and um so we have a title which is a dropd down and you know it has a label and it has all the values it works exactly the same way as before uh and again you can you know create some Dynamic classes and so you can see these classes everywhere so you can have like you can even have a groups which you can have a group which has different borders and different background color if you want to highlight that you can do this with input components as well um but the rest of it is you know it's pretty much standard uh as you can see you specify the topic of the outgoing message and then you have the entry form so the big difference here is that instead of having different forms for all the date input and the date picker and the time picker and Color Picker and everything it's part of the input text you just specify the different modes so you still have multi-line email password number Color Picker date time week picker month picker so all of them are available here the one thing I really like is that you can set it up to create a message when uh the focus leaves or Focus enters so uh maybe not even use this but I think in most cases that's the that will be the most useful so as you click somewhere else you press tab then it will send them message of the current state and then you can still specify the topic and yeah everything else is same as before so this is my name first name and a last name and then as you can see the birth date is a date picker and uh uh okay that's a radio Group which is is just like a drop down in terms of configuration but you can um it looks different obviously and the slider is again just like a slider you set uh specify the mean step Max and uh output on release or continuously without sliding exactly the same as it was before so what I was doing here is I whenever you make some selection uh the information is stored in the context so in the flow context you can see that everything that I entered is here and when I press the button so the button is you know it has a label and then it sends out a payload and a topic then I collect all these details so I pick up the details from this flow object I put it into the payload and I put it into this markdown component so what this markdown component looks like is um if you have ever edited a GitHub and you edited the read me file of the GitHub that is the same markdown formatting as the GitHub so um you have heading one two three you can do bold italic you can do um ordered list um unordered list quote Yeah horizontal Ru and links um well but you can do a lot more so what is really happening here is for example I have a simple sort of like a page or letter and now you can see that I can create uh these markdown so the double curly brackets and a reference to any part of the message which is sent to this node and it would automatically update so you can see that John do actually it should be the other way around yeah so again it's very simple and you can see the different formatting options here I put the birthday here and this one goes to here so this now updates um again very simple to add a information render some information specific to what you have here um and just um I mean in the old dashboard you would have to use the uh template node and you actually have to code all the HTML document but you can use the markup language here just to create some you know headings and and sort of like goodlook content HTML type document here and also if I go into the documentation marked on and so you can see that you can do have the these placeholders and then I mean actually that's the example that they have given I just made some few changes but um you can also use these mermaid charts and here you can use each of these charts have again a markdown language format which can then now render you know simple charts in your documentation so that's one way to add very simple charts as well but again if you look at the mermaid documentation there is a lot of things you can do like flow charts and uh it's like flow diagrams and sequence diagrams and class diagrams and you know States I mean you can go through here and uh there's a whole load of I mean Gan charts you can create Gan charts from here so there's a whole load of things here that you can do and uh uh mind map um which again in a home automation scenario I'm not sure if this is going to be very useful but again yeah great functionality um if you look at my example um I was just passing this information through like you know part chart and I put the number here which comes from this slider and it just doesn't do it and this gives a syntax error so that's what of the other bug which I noticed and by the way if I close this and I refresh the screen you see it shows I mean for example this part of the chart is not even changed I mean there is nothing dynamic in here all I do is I click on update and it fails to render this part of the chart so no idea what's going going on here you see this one is fine as soon as I you know change it then it breaks so me no I don't even need to provide the percentage because even if you look at the basic um uh yeah you don't need a percentage so this is where the the age goes and then the other one is always 50 and it it renders correctly for the first time but it doesn't do it for the next time so yeah I have no idea the um issue list is just too long to go through all of them to see if this has been reported or not okay next one is uh everyone's favorite the chart and um so as I said uh we have line charts bar charts and sorry scatter charts uh and I try to use all three of them and as you can see the scatter chart the scatter plot is basically just a line chart without the numbers and what I wanted to show you here is that uh the how you pass the data has change but it hasn't changed a lot actually I think in this regard it actually it was made easier to pass data to the chart and it is clearly documented in uh in the document here because uh and I to be honest I was sticking to these examples here uh that were provided here so if oops if I clear all the charts and I can send a data with a topic and a payload so these are just random numbers uh that are getting generated and I'm generating various different series which are always a you know a a set number of difference from each other so you can see how the uh you know the line chart draws the lines and then connects all the dots and it automatically determines or you know finds all the different uh uh data series and also the bar chart just you know shows the latest um value obviously it won't be able to show any differences but all I'm doing here is uh as you can see I'm you know sending four set sorry five sets of data in in an array which has temperature 1 2 3 4 five and the random values with a set difference and then it you know it renders all these like that and you can see the scatter chart actually it you know it's just like the line chart without the uh the the sorry the lines and if I do um what I can also do is instead of just sending a payload with a number I can send the payload which has a y attribute and the number which does exactly the same one as before so you can do that as well and you can also do X and Y value where you can send the data sorry the date in as a value so what you can see here now is I program this button to send in again some random Val values but it always sends them 1 second apart so even if I press really quickly then you don't get that um you know dots very uh close to each other because for the previous examples it was taking the actual time stamp and the data was received and here I'm passing the uh the x value as well so that was the previous one when I only passed the Y value and it behaves exactly the same way as you're just passing the value in the payload but here I was passing the X as well which is the time and as you can see I always increment the time by 1,000 which is one 1,000 millisecs or 1 second and that's how you you send data in if you also want to send the time uh with the data value and you can see these are 1 second aparts and finally yeah and you can just do the clear R just like before so the clear all sends a an empt array and I can also send multiple values in so what you're going to see here that for the temperature one I'm actually sending two values um 01 second apart so if I do this then you would notice that the first series which is temperature one always has some extra Valu so you're sending like two values at the same time um probably this is the one which makes the least uh sense but again you might be receiving you know a lot of readings together you just wait for some readings to be sent and then you want to send like two values in a particular Series so you can do that and then finally of course we can send full series in so this is my example when I send you know full series into the uh data set into the chart and of course the B chart only displays the last values so seven six and two 2 six 7 and the line charg just displays the lines and here if I send the full series you can see that again I am oops I should have deleted this that was just an example and actually I should delete this as well because we don't need any of the others so just to show you clear full series okay that's done so I'm sending in a again I need to send the topic and in the payload you can see that I'm sending a whole uh array with dates and values and dates and sorry time stamp and values time stamp and values for all the various Series so you can see that the final Valu is 267 and 267 so free for a b and c and uh it works so it's it's pretty much possible to do exactly the the same functionality as we used to in 1.0 the data structure is slightly bit different and also in um if I go back to the documentation uh there is uh there is some additional examples how you can send in some nested values and it says in the documentation there is quite POS quite common that to use these nested value formats so when you have to um Series in different keys and to be honest I have no idea where I would use this uh I mean I got used to converting my data before sending into charts so maybe that's why I don't need so such a uh complicated um you know structure where you have a value here and you have a nested do value as well but as the um um the documentation clearly explains so now you can see that you can specify that the value and the nest do value is actually different Series in the data set and then the x value is in this case that's the x value so for this x value it's going to plot 19 and 75 as a different Series so uh what was the x value 23 so 23 is here so that's the two different points that is going to plot from this data set if you have configured the series and the X like this in the line chart so again lot of possibilities here I think this is probably going to help you to just process the data whatever format comes in directly in the chart I mean probably there are some um uh restrictions but as long as the data is coming in an array with an with each data point points or each set of data points in an object you most probably will be able to use the series and the X values to configure that for me it might be just easier to convert to one of the standard formats and finally I just wanted to give you another example so um here I have a function node which um um picks up a random radian number so and then it calculates the sign and the cosine for that radi so that degree and as you can see I'm passing the X in degree and the Y it calculates a s and a cosine so it picks up random numbers from the you know the S cosine curve and it displays them in a scatter plot and uh in a scatter plot I have configured I've given the uh that the uh say sorry the shape is star and I said okay the series is still comes from the top topic and then well actually I haven't really configured here but the you know the x is the X and the Y is the Y so if you look at this one scatter plot so it's now empty and if I add the point then it just picks up a random uh degree uh so radian so point 0.053 and it calculates a sign and a cosine if I keep adding these random numbers you will notice that the the shape of the sign and a cosine Curve will start to be visible in the chart okay not that it's any useful I again I just wanted to show you how you can pass these X and A Y coordinates separately I mean in the previous version you had to have a different uh uh data series and lab not label um no I think the data series was in in a two dimensional array now it's a little bit easier because you can just you know specify them as X and Y or whatever other things that so if my data would be you know this would be degree and this would be value then I could um here I could I could put here degree and value which are the keys that contain the X and Y data for the chart to display okay I think that should be all about the charts um I hope it's s explanatory well not SX M but it's it's um it gives you all the different flavors that you can choose and uh really there's a lot of options here even though that we don't have some of the types that you might use so going back and so that was the data entry and we have done the charts so let's go into this new theme so the the difference here is uh well first of all the theme which I already mentioned when we talked about by the pages and this is using notebook notebook layout but really what I wanted to show here so you can see that all the groups are one below each other so one thing I wanted to show here uh since we are talking about the bugs you can see it has temperature and temperature here but if you look at the flow this is the part of the flow it only has one temperature and if you go to the dashboard and new theme Weather Station it has one temperature but I had another temperature which uh like had another temperature uh or UI input or label which was called temperature but I deleted it and then it it did not delete from the from the UI so this guy is still here and I can't even delete it because it doesn't uh appear anywhere else another bug but what I wanted to show you the the table and the template so you can see table and the template here so by now I accidentally missed the switch but switch is just like the switch before and I missed the well I didn't talk about the event and the UI control but I think and I also mention the form but we pretty much covered all the rest of it so the the final ones are the uh the template and the table so the table is uh something that oh yeah it did not exist previously at all because we had oh we had the table but this is the UI table that's not part of the um dashboard 1.0 and I also have another table which is called E table which again wasn't part of the um dashboard 1.0 so we always had to use the template to create a simple you know table /table kind of component so this is what is going now because if you want something very simple representation of a table data so rows and columns then you can just p uh uh place this table um node and you can put it a size uh put it yeah give it a size um you can give it you know Max rows you can say that you want it to Auto calculate the column so it would just display all the data which is coming or you can specify the various keys and the labels for you know the key in the database or the data set and the label which you know should be displayed in the first uh in the column header but if you just do this and I have a simple data set here which contains a list of people so if I name email address City Mac address timestamp and a credit card details and it comes in an array so if I send this in then it just displays it so very simple you don't have to do anything it just automatically displays all the information which is in the table again I don't understand why I can specify Max rows here but it doesn't give a hoot about the max rows because it's definitely displaying more than 10 so with this form there is no you know any special formatting it just shows the data but it's a very you know nice representation of your data it's very easy to do you just throw it onto your dashboard and it's done if I had created the labels uh myself uh I mean here in this list what I could have done is I have uh I could have given it a more you know friendly name here or I could have excluded some of the fields like the MAC address and a credit card if I don't want or a timestamp and just have a subset of the data which is coming into the node and uh I have a separate list here which just so you know shows temperatures rooms ID Target and column Uh current if I do this then uh yeah it just shows the value nothing special okay let's go back to to the people because the other thing I have is this template notes so we already talked about the template when I talked about the CSS and the sky uh and the sty but let's talk about the widgets the group scope widgets and here the big difference is that um besides doing actual HTML code here we can create all these templates which come from the viy template and if I go to this documentation so if I go to template and then it says provides custom um JS or HTML so you can do still custom HTML or JS uh in this but you can also use the beauy components to render something and if you look at this there is absolute this huge selection of various UI controls that you could create like toolbars overlays tool tips navigation stuff uh you know tabs text Fields so you might not use all of them because there is a separate note for that but there is things here for the uh um for the table layout you know you can create a color cell for example I wanted to create a C cell here using the template node I followed the documentation and when I deployed it it looked like that the whole dashboard died fortunately not R didn't die so so uh it's definitely working for a table it might not work for all of them or maybe I we just you know not following the documentation properly but if you would be able to do all these then uh there is a lot of stuff here look at padges alerts banners ratings and uh I think it's quite powerful and this is why and I think it um um yeah it mentioned somewhere that with this you you can print pretty much get the functionality what was available in the E table so that's one of the custom node that I also installed for dashboard 1.0 and I used in the past so so this is the normal table and then the template is here so now you can see that I am you know still displaying the same set of data but here I have you know proper colum headers now uh I have the you know the the number of Records are appearing in different pages and I can scroll through the different pages I can set the how many items to show in uh this and I can also search so Queen and then it automatically filters so how easy is that and for this I had to do very very little well actually well I specifically had to do very very little because that was the example that was given so I just copied the example but um it's actually this example was was given to something else this example was given for the temperature list because now you have still the search you have the different pages although there is very little data here and then you what you can see here that for example this um title is Center Line oh yeah by the way you can click on the column headers and it automatically Source the data so how cool is that and you can see that this here is Center lined and you have a of like a viget layout for one of the The Columns and again if you go into the UI template and if you scroll down again just to talk about the various examples so you can use all these beautifi T data table components so here there is a lot of um options here maybe it takes you to to that subset of the documentation of how you can you know conf sorry format some of the fields so you can see now here here you know this is currency so this is right aligned and uh you can make this to scroll uh within the data and um okay you can add measurements here and pagination and what's in here so you can see you can add icons you can do selections and you can select different items or you can have some additional you know graphical Fields you can have what's available here okay I'm not really sure maybe you can do some translation between the data and and tables uh you can also exclude tables so you can just edit the table component and um like you can create widgets like this or you know you can group the data together so you just have to configure these in the template and then it will automatically render the table with all the sort of like the rich controls uh that you need so you can see see you can add actions I mean that would be useful because then it sends you know sort of like selecting an item for editing and uh you know yeah more info and um and there was a lot of other stuff here for sort of like yeah progress bars and you can do you know progress bars which actually move and you know you can do ratings as well and um and actually yeah circular progresses and you can also animate them um maybe you can display data like this sort of like a gauge uh you can use the progress for that so for in this example here this is also made by the linear progress and if I show you the example actually it is I mean it it it takes a little bit getting used to but uh it is very similar how the template component worked uh previously I mean this is a template compon component but you can see that you define that I want this template um you know a template based on the the array which is coming from the from the payload and that's the thing which uh renders the search bar on the top and then you define that I I want to create a data table based on the message. payload and the search is this search and then you do the headers and uh and you can see that uh for the field current I want the header to look like this so Center Line and the text is called Center align so this is how you can rename the field headers and um for the um for the item Target so instead of like you know defining all the different items you just have to call on the items that you want to specify separately so the the item Target or the field Target yet uh I want to you know render the item Target and I want to add oops uh degree Centigrade so all these are added here just the sort of like the the unit of measure as a suffix to the number and then for the item current which is this one or basically that column I want to create a linear progress bar with the value of the item current and the minimum is that the maximum is that the height of the sort of the current bar is that and then it should get a color um the color should be defined by a function and you can Define the function here and as you can see uh then I just want the again the item the current value to be rendered with a um Centigrade so it shows 20 centigrade and the N sorry the g col function is basically this if the current is higher than the Target and it's red other than otherwise it's green so that specifies the color of the uh the progress bar I mean damn it's very simple it's uh it's such an easy way to configure this and you know if I've set instead of like you know progress linear I could have used any of the others uh any of the other in the examples like ratings or you know progress circular or I could have used alerts I mean it's not a good example for this particular data set but you know you can use Badges and alerts and timelines okay I mean yeah so really it it needs a different set of uh data but you can do all these with these uh simple templates which I think it is uh you know it's pretty good and it is pretty you know powerful so I wanted to use this template to uh do a carousell so I had a set of data which basically just contained URLs and I instead of the v data table I wanted to do a v Carell I think uh here so yeah it's here so you can do something like this I mean you know it's a image Rotator and all you have to do is it's it should be V Carell and V Carell item and then in the source you just specify the um the image source and you can just replace this with you know double curly brackets item do URL or something like that and then um it it should render it but it just didn't do and it seemed that the dashboard was just hanging so I must have made some mistake but if all this is working then again you can probably understand the uh the amount of different UI elements that now we can just add without thinking about the HTML clo than classes you just have to figure out how to configure these templates and uh it will be just as easy so I definitely want to spend more time on this because I think it gives a lot of additional stuff and I think the reason they haven't added the gauges because with this beauy components and the template you can probably render very nice gauges and probably much better than um uh just the standard gauge that we had in 1.0 we are coming up to one hour and I never realized that this review is well sorry this yeah this video is going to that take that long um and it was probably maybe it was a little bit more details than I originally anticipated but yeah it's not a simple I mean dashboard was never a simple stuff because there is a lot of you know functioning in it and now there is even more functionality not to mention the things that I haven't even mentioned because I haven't really tested it so I think that really should be the end of this presentation so let's just recap what we talked about today so I think in this very long video I managed to give you a well I want to say overview but well maybe 15 minutes would have been an overview but like a very good understanding what uh what is new in dashboard 2.0 and how that really compares to the original dashboard uh the you know the old dashboard that we are all love and used to or maybe just hate a little bit but definitely get used to I think even though it feels quite different I think there is a lot of different concepts uh so at least it should uh feel familiar enough to get started and I would say that I think probably everyone should think about or consider migrating to dashboard 2.0 eventually because as I said the all technology in the angularjs is no longer supported so even though everything is working fine I'm pretty sure that some point the you know the support for it will be dropped and maybe in a certain um node.js version that is not going to be supported anymore so I think sooner or later we will have to get uh say goodbye to the O dashboard and basically just move everything over to the new one but if you're just using you know some simple charts and usual input fields and display element displaying stuff it should be fairly easy to migrate this stuff over so that basically explains how the two different each other and what they isue Margate and besides that I think now you have a very good basic understanding of the basic nodes and you know how to display information how to create input Fields how you can make charts and I think I managed to just show you some of the new stuff which is coming mostly on the markdowns and the templates and the table notes which are also very powerful maybe some of them are not going to get used in the usual sort of like home automation dashboard scenario but if you're using not red for something else maybe those are the functions that you were really looking for in in a new dashboard implementation but I think that would be the scope of this video I'm planning to well definitely experiment more with you know the uh the small details within dashboard uh 2.0 and once I got some you know some chunks of new functionality or new things that I can show I cover in new uh videos if you have any particular uh things that you want to you know figure out or you get stuck or you want me to look into just you know leave some comments in the comment section below and of course just like with any of my previous flows if you want this particular flow this particular example I'm going to put the link to this uh this flow in the video description but thanks for watching this tutorial video I think that will be all for today and hopefully see you next video

Channel: Csongor Varga

Views: 6,427

Keywords: node-red, iot, node red, node-red tutorial, node-red dashboard, learn node-red, vue, tutorial, how to build dashboard, what is the difference between dashboard 1.0 and dahsboard 2.0, build dashboard in node-red, node-red ui, how to build a ui for node-red, user interface, ux, ux design, ui design, ui ux

Id: 0Hhns_DcyKQ

Length: 64min 53sec (3893 seconds)

Published: Thu Feb 08 2024