# Dashboard 2 Beta development

**URL:** <https://discourse.nodered.org/t/dashboard-2-beta-development/83550>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [9 December 2023 10:57 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550 "2023-12-09T10:57:31Z")\
**Posts on this page:** 20\
**Page:** 2

<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:** [10 December 2023 14:13 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/21 "2023-12-10T14:13:16Z")

</div>

Don't forget that emoji's these days are VERY extensive and don't require an extra library to be loaded.

However, you can generally improve the quality of emoji's in web pages with the following in a style sheet.

```css
.emoji { /* Nicer, cross-platform emoji's */
    font-family: 
        "Twemoji Mozilla",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji",
        "EmojiOne Color",
        "Android Emoji",
        sans-serif;
}

```

Then just add a span with the class around the emoji

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [10 December 2023 21:00 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/22 "2023-12-10T21:00:52Z")

</div>

Glad you mentioned that for anyone following, I missed it so ended up doing it the hard way. Got there in the end though. 😄

---

<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:** [11 December 2023 09:58 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/23 "2023-12-11T09:58:48Z")

</div>

What is up with these empty spaces:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/0/009ee0b76204b66b47b188ded63e42ee183990b9.png)

I see every element has a fixed height of 48px - why ? (and paddings are everywhere for some reason)  
Can this be overruled ? Thinking of text - this should be a max line-height of 1.5\*fontsize

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/f/7fd52f989e14c3947c36021c5208aaa96e1bf3e6.png)

Where can one define the classes ?

How can I create a "group" with a transparent background+border and without paddings (why does everything need to live in a group btw?)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [11 December 2023 11:40 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/24 "2023-12-11T11:40:42Z")

</div>

Value Format field missing on [text] widget[s]?

On Dashboard 1 you can tweek data in the widget config - setting number of decimal places, formatting dates etc using the Value format field. This seems to be missing from D2.

I guess these are Angular functions, is there no equivalent in the D2 libraries?

Dashboard 1  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/0423a9aef7bd6767223787d7269dc55d30947a86.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:** [11 December 2023 13:00 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/25 "2023-12-11T13:00:58Z")

</div>

There are several issues already raised covering this area, on GitHub. On my phone at the moment so can't easily look them up.

---

<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:** [11 December 2023 13:25 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/26 "2023-12-11T13:25:52Z")

</div>

Notably [UI Text: Format · Issue #390 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/390) but there are several others mentioning similar uses.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [11 December 2023 13:52 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/27 "2023-12-11T13:52:09Z")

</div>

Ah yes. @Steve-Mcl's comment in that issue

> Making ... dashboards ... almost a non starter without this?

It's a non starter for me too.

IMHO Dashboard 2 is not ready for beta testing. ☹ Good luck with the development.

---

<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:** [11 December 2023 16:31 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/28 "2023-12-11T16:31:27Z")

</div>

> [@jbudd](#):
>
> I guess these are Angular functions

They are referred to as "filters" if I remember my ancient Angular. 😀

Which clearly I do since they are also called that in VueJS:

> **[Filters — Vue.js](https://v2.vuejs.org/v2/guide/filters.html)**
>
> Vue.js - The Progressive JavaScript Framework

So you should also be able to use them in D2.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [11 December 2023 21:01 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/29 "2023-12-11T21:01:06Z")

</div>

A query regarding the `send` function

I have the following snippet in a `template`

```auto
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {
                count: 0,
                btnText : ['On', 'Off'],
                btnState: 0,
            }
        },

        watch: {
            // watch for any changes of "count"
            count: function () {
                if (this.count % 5 === 0) {
                    this.send({topic: 'Once', payload: 'Multiple of 5'})
                }

                this.send(this.btnState)

                this.toggle()
    
            }

        },

```

However, I only get `payload` out of both `send` functions (topic & this.btn are ignored) I obviously have a misunderstanding somewhere. Would someone please point me in the right direction to get these working.

Edit  
OK, I worked it out.  
The send function actually sends a `msg.payload`, and having payload as the key in a sent Object means that any other keys are ignored, so if the Object was `{topic: 'Anything', mode: 'On'}` I get a `msg.payload` with keys topic & mode (NOT msg.topic which is "").

Similarly if `this.btnState` is either 0 or 1 and I send `{payload: this.btnState}` (or `{anyKey: this.btnState}`) I get an output of 0 or 1, but just sending `this.btnState` only sends the 1.

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [11 December 2023 21:01 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/30 "2023-12-11T21:01:16Z")

</div>

```auto
<template>
    <v-btn ref="botao" stacked @click="alternar">
        Banheiro
        <v-icon ref="icon">mdi-lightbulb</v-icon>
    </v-btn>
</template>

<script>
    export default {
        data() {
            return {
                chave: 'a3'
            };
        },
        methods: {
            alternar: function () {
                if (window.localStorage.getItem(this.chave) === 'ON') {
                    this.desligar();
                    this.send({ payload: 'OFF' });
                } else if (window.localStorage.getItem(this.chave) === 'OFF') {
                    this.ligar();
                    this.send({ payload: 'ON' });
                }
            },
            ligar: function () {            
                window.localStorage.setItem(this.chave, 'ON');
                this.$refs.icon.$el.style.color = '#BD9608';
                this.$refs.icon.$el.style.textShadow = '0px 0px 10px #BD9608';                              
            },
            desligar: function () {                
                window.localStorage.setItem(this.chave, 'OFF');
                this.$refs.icon.$el.style.color = '#A9A9A9';
                this.$refs.icon.$el.style.textShadow = '0px 0px 0px';                              
            },
            setState (value) {
                if (value === 'ON') {                    
                    this.ligar();
                } else if (value === 'OFF') {                    
                    this.desligar();
                }
            }
        },
        mounted () {            
            this.setState(window.localStorage.getItem(this.chave));            
            this.$socket.on("msg-input:" + this.id, (msg) => {
                this.setState(msg.payload);
            });
            this.$nextTick(() => {
                this.$refs.icon.$el.style.fontSize = '40px';                
                this.$refs.botao.$el.style.border = '1px solid #808080';
                this.$refs.botao.$el.style.color = 'black';
                this.$refs.botao.$el.style.fontSize = '11px';
                this.$refs.botao.$el.style.backgroundColor = '#4F4F4F';
                this.$refs.botao.$el.style.borderRadius = '10px';
            });                      
            
        }
    }
</script>

```

Guys, I'm going to collaborate here and leave a button that I'm developing. I work with home automation in Brazil and we set up 100% node ui-templat panels.. I hope Vue.js doesn't give me so many nights of sleep. My battle has been to make each ui-template node in the project an isolated component that reacts and issues messages as well as making it fully customizable so that my clients can have the look they request. I gave some suggestions for developers of difficulties I have had over years of learning about dash node-red.

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [11 December 2023 21:15 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/31 "2023-12-11T21:15:04Z")

</div>

![a05](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/2/d2bc83a89576d257008f588370608f0ff40a03ae.jpeg)

I will leave here a small example of what we have assembled here, which ranges from simple buttons to complex time-phased activation elements or data received and sent by devices integrated with node-red via MQTT and zigbee devices. I hope to collaborate and learn from you. Panel shown is from the old version of dash and I'm trying to replicate it in the new project..

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [11 December 2023 22:17 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/32 "2023-12-11T22:17:10Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b912ddc7a8e0ca53a1d7df9b5b966fa7924d888.png)

I believe that this form of navigation in 1.0 is very simple and it would be good to continue it

---

<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:** [11 December 2023 22:43 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/33 "2023-12-11T22:43:23Z")

</div>

It locked us into all sorts of corners we couldn’t get out of. I wouldn’t want to rush there again.

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [11 December 2023 22:45 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/34 "2023-12-11T22:45:48Z")

</div>

I'm just referring to the way of navigating the calf... we really shouldn't go backwards.

---

<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:** [12 December 2023 06:41 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/35 "2023-12-12T06:41:11Z")

</div>

Cars have reverse gears so they can get out of situations and move forwards to somewhere better,

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [12 December 2023 09:50 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/36 "2023-12-12T09:50:29Z")

</div>

> [@bakman2](#):
>
> What is up with these empty spaces:

A lot of this is driven by the default styling for Vuetify, which I've not (yet) overridden. Also scope for including the general padding/sizing values in the `ui-theme` too, which is fairly barebones at the moment. Issue for this [UI Theme - Include padding/sizing metrics](https://github.com/FlowFuse/node-red-dashboard/issues/431).

> [@bakman2](#):
>
> How can I create a "group" with a transparent background+border and without paddings (why does everything need to live in a group btw?)

Inherited from how Dashbaord 1.0 did things. As a first target for us, it was to reproduce this, there could be scope for having widgets bound to a page instead - issues & feature requests on GH welcome.

You can write your own CSS to override this in `ui-template` node, for example:

 ![Screenshot 2023-12-12 at 09.49.33](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8cdd9c5db65416e006016338fa652f514cf36050.png)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [12 December 2023 09:52 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/37 "2023-12-12T09:52:31Z")

</div>

> [@jbudd](#):
>
> On Dashboard 1 you can tweek data in the widget config - setting number of decimal places, formatting dates etc using the Value format field. This seems to be missing from D2.

You are correct - tracked [here](https://github.com/FlowFuse/node-red-dashboard/issues/390) and detailed as missing (at the moment) in our [migration guide](http://localhost:5173/user/migration.html#ui-text) too.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [12 December 2023 09:55 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/38 "2023-12-12T09:55:08Z")

</div>

> [@Buckskin](#):
>
> A query regarding the `send` function

Thanks for finding @Buckskin - found this issue myself after releasing 0.10.0 - tracked [here](https://github.com/FlowFuse/node-red-dashboard/issues/427)

> [@diegodamaceno](#):
>
> I believe that this form of navigation in 1.0 is very simple and it would be good to continue it

Appreciate the feedback @diegodamaceno I think having easier access to the `ui-theme` config nodes here is a definite must-have, but given that we architect things with themes differently to Dashboard 1.0, I hope this particular case _should_ be easier for us to handle.

Issue opened [here](https://github.com/FlowFuse/node-red-dashboard/issues/432) to track this idea

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [12 December 2023 11:56 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/39 "2023-12-12T11:56:16Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/1/b1212735dacfb081e85dfcbe4352d42fc33ec199.png)

I'm probably doing something wrong, but I can't get this to work. I would also like to change the background. In fact, nothing that changes the appearance is working on my instance.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [12 December 2023 12:08 UTC](https://discourse.nodered.org/t/dashboard-2-beta-development/83550/40 "2023-12-12T12:08:13Z")

</div>

hmm, that is odd - that should be working (and is locally on my own version) - can you share a `flow.json` please?

For the `background-color`, you'll need:

```css
.v-main {
    background-color: blue; /* replace with your color here */
}
```

[Previous page](https://discourse.nodered.org/t/dashboard-2-beta-development/83550.md?page=1)

[Next page](https://discourse.nodered.org/t/dashboard-2-beta-development/83550.md?page=3)