# \[Announce\] Dashboard Version 2.16.0, 1, 2, 3, 4

**URL:** <https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391>\
**Category:** Dashboard\
**Created:** [16 August 2019 12:00 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391 "2019-08-16T12:00:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 August 2019 12:00 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/1 "2019-08-16T12:00:30Z")

</div>

So here is Node-RED-Dashboard 2.16.0: Milestone Release

**Enhancements**

- Add Dashboard Layout tool - Major contribution - Thanks @KazuhiroItoh - PR #482
- Add ui.isDark() returns true/false if overall theme is dark or light, so the widget could switch appropriately. (can already use getTheme() to get actual colors if needs be.)

**Fixes**

- Make spacer transparent so background is really the background.
- Fix text\_input to only send duplicates if enter key hit multiple times and not on loss of focus. Issue #513
- Fix color-picker to not emit on tab change, and fix background overlay. Issue #514
- Fix IE11 loading issue #515 (reversion)
- Improve embedded node-red dashboard full path resolve - Issue #517
- Let ui-form input be full width on IE11 - Issue #524

The main thing is the layout editor contribution from @KazuhiroItoh at Hitachi - Many thanks for that.  
It is an initial release so the functionality is limited. but some quick notes to get you started.  
The [layout] button is currently ONLY at the tab level within the Dashboard sidebar. IE you are only editing the layout of one tab at a time.

![06](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/58cee01dc174539bdf79ded1f20a761093409dad.png)

Once you open that you should see your existing page represented as a series of blocks - They are not meant to be 1:1 . From here you can move widgets around within a group - and drag between groups as you want.

 ![43](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a7160ba3ae2cb658f0ff9343748f369e465ac051.png)

A zoomed in version show several icons....  
The lock/unlock symbol (eg on Gauge6 below) is the same as auto sizing mode - and will try to fit the available width. If you click the unlock symbol it will lock and then allow you to resize the widget. If you drag the size control (arrow bottom right of each locked widget) then you can change the size of the widget. Clicking the lock symbol will unlock it and revert to auto sizeing. If the widths are all locked then the group width can't be shrunk below the total width (but can be increased of course).

![56](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/ea0d4333aa256e59563ee1f8086ee7dd999196ae.png)

You can drag widgets around and the spacers will be automatically inserted - giving a result like  
 ![23](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/dac604421389d1ebab5e40f66f6ebdc04061b65b.png)

As usual feedback and comments appreciated.  
(and don't forget to flush browser caches etc to ensure you get latest code where it's needed)

---

<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:** [16 August 2019 12:44 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/2 "2019-08-16T12:44:51Z")

</div>

Awesome stuff. Looking at the layout mode, somehow the lock/unlock work in reverse here ?  
ie. if it is "locked" I can resize it, when unlocked, I cannot. Is this WAD and should I read it differently ?

 ![25](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/8813b1a35ea02a8ee6a9abb010420ba21a3385da.jpeg)

additional request, if possible, the scaling works nicely for the gauge, except for the title, would be awesome if that could scale too.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 August 2019 13:01 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/3 "2019-08-16T13:01:18Z")

</div>

Sorry - yes.. should have said click on the unlock to lock it then you can resize it... it is a toggle from manual to auto. (edited above to try to clarify)  
Scaling - tries to do its best. they are two separate items.

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [16 August 2019 13:02 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/4 "2019-08-16T13:02:10Z")

</div>

Great work Dave and others, thanks 🙂  
Guess I’ll be updating from the beta version back to stable now

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [16 August 2019 13:04 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/5 "2019-08-16T13:04:09Z")

</div>

> [@bakman2](#):
>
> if it is "locked" I can resize it, when unlocked, I cannot.

I think the lock means that it is locked to the size you set it to, but you can resize it. Unlocked means the s/w will autosize it for you. It is a bit non-intuitive as normally locked means the user cannot change it. Or perhaps I am misunderstanding.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [16 August 2019 13:26 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/6 "2019-08-16T13:26:01Z")

</div>

I seem to have a bit of an issue, it is basically working but for example:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/17a761196652289ba54bdd21019a37fb13b2e1cb.png)  
gives  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9a7d5ae70ff0ad7158290dee045045575f7006e5.png)

```auto
16 Aug 14:14:55 - [info] Node-RED version: v0.20.7
16 Aug 14:14:55 - [info] Node.js version: v10.16.3

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [17 August 2019 13:12 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/7 "2019-08-17T13:12:04Z")

</div>

Am I misunderstanding something in my post just above, or is it not functioning as expected?

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [17 August 2019 14:18 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/8 "2019-08-17T14:18:03Z")

</div>

If you really want it 4 wide. Set the overall width to 4. :-). But yes you have hit a degenerate case where the default layout engine still kicks in.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [17 August 2019 14:32 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/9 "2019-08-17T14:32:28Z")

</div>

> [@dceejay](#):
>
> If you really want it 4 wide. Set the overall width to 4.

I was just playing to see how it works. However this not particularly degenerate example shows the same problem. Note I am not complaining just testing 🙂  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/27e71c6cb9f4d4afadcd2bfbca266a0f818197fe.png)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [19 August 2019 09:59 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/10 "2019-08-19T09:59:53Z")

</div>

Odd - having a play now I'm not seeing that - are you sure you have flushed cache etc...

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e2bfa39837cde1abd6b9bb1ca83e5285c5cc75db.png)  
gives me

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/55e0b0f68e6da0fdd99f14b0285f68f707b015cf.png)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 August 2019 10:34 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/11 "2019-08-19T10:34:14Z")

</div>

Something rather odd is going on. This is in Waterfox, it appears to be ok with Chrome and Firefox. I have cleared the cache and it still shows the problem. If I look in the developer console I can see that it is attempting to get `http://localhost:1880/ui/components/ui-component/templates/spacer.html` and that fails. However, if I select `Disable cache` on the Network tab in the developer tools and reload then it does not try to get spacer.html and the display is correct. When I deselect `Disable cache` then it fails again. Very odd.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [19 August 2019 10:46 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/12 "2019-08-19T10:46:01Z")

</div>

So it is cached then

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 August 2019 10:49 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/13 "2019-08-19T10:49:52Z")

</div>

Something is cached, apparently, but it won't clear. Is spacer.html no longer used, but is being pulled in by one of the cached files?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [19 August 2019 11:05 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/14 "2019-08-19T11:05:18Z")

</div>

Ah, found it. In the dialog for clearing history there is an option to clear the cache, which I had selected, but there is another for clearing Offline Website Data, which I had not selected. Selecting that has fixed it. Quite what the difference between the cache and offline data is I am not sure. Anyway, all working now, sorry about the red herring.

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [19 August 2019 11:05 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/15 "2019-08-19T11:05:20Z")

</div>

Have you tried to let Waterfox clear everything that’s part of the site data? Last night someone on a different slack workspace mentioned that following the Firefox instructions for it worked: [https://support.mozilla.org/en-US/kb/storage](https://support.mozilla.org/en-US/kb/storage)

Edit: our messages intercepted, that was exactly the option I meant, site preferences and offline data. Checking those will also delete things like localStorage and cache from service workers.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [22 August 2019 11:46 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/16 "2019-08-22T11:46:03Z")

</div>

And added 2.16.1 with a few small fixes

### 2.16.1: Maintenance Release

**Fixes**

- Fix toast to show border correctly and better timing. Issue #525
- Stop colour picker sending on page refresh. Issue #514
- Fix layout tool group locations. PR #526
- Fix slider not sending if past end of widget.

---

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [28 August 2019 16:12 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/17 "2019-08-28T16:12:36Z")

</div>

I guess the most annoying part that I found, personally, while working on customized templates in the dashboard is that it uses an old client-side techno (old version of angular and material design). Plus, MD is quite cumbersome and hard to master, so I was wondering if there is any plan to move to a more recent client framework ?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [28 August 2019 17:06 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/18 "2019-08-28T17:06:35Z")

</div>

Hi Mathieu (@T0T4R4), see this [discussion](https://discourse.nodered.org/t/new-dashboard-idea/7998)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [30 August 2019 09:27 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/19 "2019-08-30T09:27:47Z")

</div>

Now released 2.16.2 - with a couple of minor fixes

### 2.16.2: Maintenance Release

**Enhancements**

- Ui-control can be set to only report connect events, or change tab events.

**Fixes**

- Stop slider sending twice (after fixing endstop issue). Issue #527
- Fix Theme colour swatch size.

---

<div class="post-metadata">

**Author:** ![T0T4R4](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/t0t4r4/32/10850_2.png) [@T0T4R4](https://discourse.nodered.org/u/T0T4R4)\
**Post date:** [3 September 2019 13:13 UTC](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391/20 "2019-09-03T13:13:07Z")

</div>

That version of the dashboard is only for node-red 1.x+ ?

[Next page](https://discourse.nodered.org/t/announce-dashboard-version-2-16-0-1-2-3-4/14391.md?page=2)