# Opinions on UI design

**URL:** <https://discourse.nodered.org/t/opinions-on-ui-design/16286>\
**Category:** General\
**Created:** [4 October 2019 03:15 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286 "2019-10-04T03:15:28Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [4 October 2019 03:15 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286/1 "2019-10-04T03:15:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [4 October 2019 05:39 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286/2 "2019-10-04T05:39:02Z")

</div>

Which dashboard are you referring to ? Do you mean [node-red-dashboard](https://flows.nodered.org/node/node-red-dashboard) ?

You should have full control over the placement, especially with the layout editor.

![58](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/05870d4fe295ac074515e32c9915b43c28126c95.jpeg)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 October 2019 12:45 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286/3 "2019-10-04T12:45:57Z")

</div>

> [@gerry](#):
>
> Do you use the dashboard or HTML?

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

> [@gerry](#):
>
> If you use HTML is there some trick to getting the controls over into it

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.

> [@gerry](#):
>
> I have looked at some demo's but they do not use any gauges or controls with any complexity to them

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.

> [@gerry](#):
>
> is there some type of controls library for HTML?

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.

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [4 October 2019 13:36 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286/4 "2019-10-04T13:36:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 October 2019 14:28 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286/5 "2019-10-04T14:28:11Z")

</div>

> [@gerry](#):
>
> seems very limited

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.

> [@gerry](#):
>
> Am I missing something?

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?

> [@gerry](#):
>
> HTML is something I have never been good at

Well few of us are visual designers at the end of the day, most of us are tinkerers at best 🙂

> [@gerry](#):
>
> my skill at making something look good is seriously lacking

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.

> [@gerry](#):
>
> not having gauges makes it hard to glance at the data and comprehend it

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:

> **[Integrating vue svg gauge](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Integrating-vue-svg-gauge)**
>
> Easily create data-driven web UI's for Node-RED using any (or no) front-end framework. - TotallyInformation/node-red-contrib-uibuilder

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [4 October 2019 23:07 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286/6 "2019-10-04T23:07:35Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/15d7c1a1fa3643085320f2053bd59aae42281394.png)

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:

```javascript
/** 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}

```

---

<div class="post-metadata">

**Author:** ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)\
**Post date:** [29 November 2019 02:39 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286/7 "2019-11-29T02:39:01Z")

</div>

Can you publish sample flow and codes?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [29 November 2019 17:23 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286/8 "2019-11-29T17:23:58Z")

</div>

Please see the uibuilder WIKI on GitHub.

---

<div class="post-metadata">

**Author:** ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)\
**Post date:** [30 November 2019 01:08 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286/9 "2019-11-30T01:08:02Z")

</div>

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/](https://apexcharts.com/javascript-chart-demos/mixed-charts/multiple-yaxis/)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [30 November 2019 05:55 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286/10 "2019-11-30T05:55:27Z")

</div>

Use the [apexcharts example](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Integrating-ApexCharts-with-VueJS) and apply the options/settings that you found on the apexcharts site.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [30 November 2019 10:56 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286/11 "2019-11-30T10:56:07Z")

</div>

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/](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".

---

<div class="post-metadata">

**Author:** ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)\
**Post date:** [30 November 2019 13:41 UTC](https://discourse.nodered.org/t/opinions-on-ui-design/16286/12 "2019-11-30T13:41:24Z")

</div>

"It will give you some clues. Right-click over the chart and choose "view frame source". "  
Thats I need, now much easier...  
Thanks!