How to style a custom Node Red Dashboard

hello everyone in this video I will talk about how to create the custom styling for the node-red dashboard here's a preview the color of all the groups is set to red in addition to that they have rounded Corners a light Shadow and a bold title I click on the button shows notification that has the same colors let's get started we start by defining the dashboard layout for this example we need an input and an output tab in the input tab we use all the input nodes provided by the Dashboard now we create the group for every input element we assign our nodes to the groups this is our dashboard now we align the nodes in our flow we name the current flow inputs and create the new one called outputs here we want to use most of the output nodes as we did for the input nodes we assigned the output nodes to their groups before moving on WE align the nodes now we have two separate tabs in our dashboard one tab holds all the input nodes while the other one holds the outputs let's start styling the dashboard we go to the site here you can change the title of the dashboard we use the standard title for this example we can choose between showing and hiding the title bar this is what it looks like with a hidden title bar I prefer it with the title bar there are multiple options for the side menu you can choose between showing it with a click showing it all the time or always showing only the icons first we select click to show side menu with this option we have a burger menu in the top left corner by clicking on it the site menu appears the next option is always show side menu this removes the need for a burger menu and the side menu is always visible the last option is always show icons only but as of now we have the same icon for both tabs which is very confusing here I forgot to assign the four node to the form group we want to change the tab icons I find the best way to do that is to go to The Help menu of the UI button then click on the phone awesome icons link on the website we search for inputs I'll use the keyboard icon the name of the icon is fa-keyboard-0 now we go to the dashboard settings in layout you can click the edit button on the input tab we enter our icon name the icon appears on our dashboard in the side menu for the output tab we use a chart symbol we use a bar chart for this example the icon name is fa dashboard short we already know how to add the icon to our tab now it is way easier to know which tab does what for the output nodes we need some data let us create some we need a bit more space for that we Define a function that generates a random value between 0 and 100. we use the inject node which injects every 10 seconds the data is just a timestamp since we change it in the following function node the name is random value here the random value gets generated if we connect and deploy we see our value in the text field however the value is not rounded we can do that directly in the text node we can use the same data generator for the gauge and the chart as we see the gauge displays our value without rounding it first also the standard limit of it is 0 to 10. we need 0 to 100. that looks good we also want some data for our table we use an inject node where we send two Json objects for more information about the UI table check my video on the topic there is our finished table now we want our button to show a notification in the input flow we Define a link out node the name is button out later it will connect to notification in we Define the link in for our notification and we select the button out as input we want the notification to be an OK cancel dialog by pressing the button our notification appears before we start with the styling we clean up our flows we start by grouping the flows you select the nodes you want to group go to groups and click on group selection from now on I will use the shortcut now we arrange them to align on the left side the last step is to name the groups you can double click the group in the menu you can give it a name since the inputs are mostly adjustable node we don't need to group them now we start with the actual styling of the dashboard we go to theme settings the default is the light style you can also change to the dark Style here you see the dark style in this video we create the custom style for the dashboard the name of the style is node-red tutorials we set the base color to a node red red with the Color Picker you can go to the node red icon in your browser and select the red color you can also change the font I leave it at system default now we have a dark theme with some red elements I would like to have a light theme we set the page background to White same for the sidebar the group text is the same red as our title bar the border and background of the groups are white the widget text and color are red while the background is white this is our style for now all our groups have adapted to the specified colors however the group boundaries are not visible there are multiple ways to fix that you can set the group border to a different color for example a light gray same for the group background in the dashboard we now see where the groups are we have the same issue with the Sideburn let's use the same color for that another option is to give the group custom styling using CSS we create a new flow called sliding in the template node we can add our custom CSS we name it dashboard style and add it to the head of our dashboard here we can specify our custom Style before doing that we want to know how to select the elements we want to change we go to the dashboard as we want to style our groups we right click on one of them and inspect the element almost every browser provides this inspection window we search the UI card panel by clicking through them we see that every group is a different UI card panel this means that we can use this as our CSS selector to style the groups first we Define our style tag we set the styling for all our groups let's start by giving the groups a light Shadow around the edges we see that every group in our dashboard has a light Shadow this applies to all the current groups and also to any groups you add in the future next we want to give the groups rounded corners this is almost as we wanted however if you look closely you'll see that some edges are sticking out of the rounded corners this is because the elements inside the group don't have rounded Corners yet so we need to find those elements one of those elements is our drop down we need to give around the corner to every element in our group we use the following CSS to accomplish that I like to make the radius of the inner element a bit smaller than the one of the outer element now all the elements are rounded but the radius of the group is still a bit too big we set the radius of our groups to 5 pixels and all the other ones to 2.5 that looks how we expected the last addition to our style is a bold group title the inspect the title with the inspection tool the class of this element is nr- dashboard Dash card Dash type let's add that to our template node this time we need to select a clause we set the font weight to bold that didn't work if we inspect the element we see that the font weight is crossed out this is because our dashboard style overwrites our custom CSS if we add the important flag to our CSS the style of the dashboard gets overwritten in the node-red editor you just need to type an exclamation mark and the editor will automatically insert important now our text is bold that's all for the styling of our dashboard I hope you enjoyed the video and could learn something

Channel: RuWindustries

Views: 33,710

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

Id: kHtzghrNzAE

Length: 12min 36sec (756 seconds)

Published: Sat Jan 07 2023