Dashboard 2 Beta development

[TotallyInformation]

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.

.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

[Buckskin]

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

[bakman2]

What is up with these empty spaces:

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

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?)

[jbudd]

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

[Colin]

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

[Colin]

Notably UI Text: Format · Issue #390 · FlowFuse/node-red-dashboard · GitHub but there are several others mentioning similar uses.

[jbudd]

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.

[TotallyInformation]

@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

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

[Buckskin]

A query regarding the send function

I have the following snippet in a template

    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.

[diegodamaceno]

<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.

[diegodamaceno]

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..

[diegodamaceno]

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

[dceejay]

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

[diegodamaceno]

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

[dceejay]

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

[joepavitt]

@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.

@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:

[joepavitt]

@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 and detailed as missing (at the moment) in our migration guide too.

[joepavitt]

@Buckskin

A query regarding the send function

Thanks for finding @Buckskin - found this issue myself after releasing 0.10.0 - tracked here

@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 to track this idea

[diegodamaceno]

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.

[joepavitt]

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:

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