Although I am quite new to node-red I now have a couple of working flows I use not daily but often. They require some interaction so I have done a dashboard with the controls on them. There is little control on placement of the controls (I think, but there may be something I've missed) and when I view the dashboard on different computers the controls shift positions seemingly random. I have looked at HTML but the node-red code has proven challenging enough and what little web site design I've done is laughable and often appropriately derided as I have no composition skills or color co-ordination. My question is what do most people do for their projects? Do you use the dashboard or HTML? If you use HTML is there some trick to getting the controls over into it. I have looked at some demo's but they do not use any gauges or controls with any complexity to them. Is there a trick to anchoring and designing the dashboard I'm missing or is there some type of controls library for HTML?
Thanks
Which dashboard are you referring to ? Do you mean node-red-dashboard ?
You should have full control over the placement, especially with the layout editor.
Personally, I tend to use custom html with uibuilder for my projects because I inevitable end up frustrated by getting the look and feel just right with Dashboard (my OCD). Of course, I'm also biased and need to "eat my own dogfood" since I'm the author of uibuilder. This is much more of a commentary on me than it is on Dashboard.
However, I do use Dashboard for quick tests since it means no need to mess around. And some of those "tests" are still around after more than a year 
So I'm afraid that the "answer" is - it depends!
- How comfortable you are writing HTML
- Whether you find the restrictions of Dashboard (and Angular v1) too intrusive
- Whether you are constantly making tweaks and changes
- Whether the excellent Dashboard extensions mean that you can simply consume them and work on other things rather than writing front-end code
- Whether the performance of Dashboard is an issue
You don't.
Whether using the Dashboard Template node or something like uibuilder, you are sending just the data, the design all sits in the front-end.
In the case of the Dashboard Template node, you are sending the UI code as well as the data but there is limited interaction between that and the other components.
If you are thinking about uibuilder, the focus on examples so far has been on simplicity so that people understand how it works. There is an example in the WIKI of a complex home automation dashboard though it is true that there are no gauges or other charts on it as yet because I've been spending too much time developing uibuilder!
It does, however, show how you can render really complex tabular data very easily with VueJS and bootstrap-vue.
In addition, there are also now examples of using other Vue components, specifically a number of different charting components. This means that you can now easily wire those into you web app and simply send the data to them from Node-RED.
Hopefully, I'll soon be adding some more graphical components to the HA example, I've just changed jobs and now that I am sleeping at night again, I should have more energy to work on this.
Even without charts though, the example shows how the use of buttons can present a nice visual interface with minimal boilerplate code.
I know that you are really referring to the Node-RED Dashboard nodes and I'm sure others will chip in with more information about how to do that using Dashboard but I wanted to make sure you are aware of the other possibilities in case they are of use.
Interesting you bring up UIbuilder as I have played with that somewhat and that is what got this started. But back to the node-red dashboard for a moment. I have played with the layout feature that bakman showed and it seems very limited. For instance if I have 3 groups horizontally and I want to stack them vertically I haven't found how to do that unless you put them all in one group. Am I missing something? HTML is something I have never been good at and again my skill at making something look good is seriously lacking. I can send data back and forth in uibuilder but not having gauges makes it hard to glance at the data and comprehend it. On the other hand the node-red dashboard is easy but when I view on my computer verses my phone the differences are frustrating.
To be fair to it, I think you may be looking at it from the wrong perspective. Dashboard is designed to enable people with little to no experience of building web applications (or indeed any kind of application) to build a UI very quickly and easily.
It is really good at this and very successful. It has also provided a platform under, Dave's stewardship, for being extended with other, equally easy to use components.
However, like most tools aimed at this kind of use-case, it starts to fall down as you want to gain more control. The more scaffolding and hand-holding you provide, the harder it is to be completely flexible.
So you should use it for its strengths and not worry about the limitations. If/when you find limitations are too great - or better still, predict that you will hit these as early as possible - then you need to look at a different toolset.
I'm afraid I couldn't say. I don't really use it that way. Though you may be able to wrangle things using some clever CSS in a Template node.
But that kind of proves my point. If you are having to go to those extremes - are you really getting much benefit out of Dashboard?
Well few of us are visual designers at the end of the day, most of us are tinkerers at best
And that is where things like bootstrap-vue come in and is the reason I've included it as part of the default installation. A very simple scaffold will give you a very nice layout.
Even better, VueJS is the fastest growing framework and so there is loads of support and thousands of examples, templates and components to chose from.
Have you looked at the charting examples in the WIKI? It couldn't be simpler to include a charting library and use a gauge. Try this one for example:
I had a little play this evening using Apex Charts with my home automation dashboard.
This is a radial bar chart showing humidities from various sensors:
It was taken from the demo chart on the Apex site with simply the data array and the labels array updated in a uibuilder.onChange function taking data from Node-RED.
So it was mostly copy/paste with literally just 10 lines of code to rebuild the data each time a suitable msg comes in:
/** Environment Chart */
var tmpHum = [], tmpNames = []
data.homeDetails.forEach( function(room) {
if ( room.hasOwnProperty('CalculatedHumidity') ) {
tmpNames.push(room.Name)
tmpHum.push(room.CalculatedHumidity)
}
})
vueApp.envSeries = tmpHum
vueApp.envChartOptions = {labels: tmpNames}
Can you publish sample flow and codes?
Please see the uibuilder WIKI on GitHub.
I try to do, but I am newbie and seems too hard to me find all needed info .
I need chart in node red there comes 3 flows from temperature/humidity sensor and need to show data in one chart all together 3 temperature lines and 3 humidity lines and 2 y-axis (temperature left and humidity right side)
something like this but customized as I say
https://apexcharts.com/javascript-chart-demos/mixed-charts/multiple-yaxis/
Use the apexcharts example and apply the options/settings that you found on the apexcharts site.
The trick to getting everything on 1 chart is to make sure that you have set the chart's data object from the incoming msg's.
Start with my uibuilder example chart as backman2 says - don't try with your own data yet. Then replace my example with the one from the apex site with their manual data. Next work out how to replace their data with data from Node-RED. Then you should have enough knowledge to change the chart to use your own data.
With your own data, you need to think about how you are sending the data, their example uses a fixed x-axis (years) - if you are wanting a time-axis, you will need to look at how to do that. Their fixed axis would let you put values into fixed places in the data array, you can't do that with a time axis as each new value needs a corresponding new date/time value as well.
Have a look at the source for the chart on this page: https://apexcharts.com/javascript-chart-demos/line-charts/zoomable-timeseries/
It will give you some clues. Right-click over the chart and choose "view frame source".
"It will give you some clues. Right-click over the chart and choose "view frame source". "
Thats I need, now much easier...
Thanks!
