Dashboard 2 Beta development

Dashboard
161

Thanks some times its just easyier then i can think of.

For anyone new:
Change your settings.js

httpStatic: path.join(__dirname,"public"),

And then here is example code

<template>
    <div>
        <v-img
        :width="300"
        aspect-ratio="16/9"
        cover
        src="/images/logo.svg"
        >              
        </v-img>
    </div>
</template>
1 Like
162

An example of using colored svg as icon for button where every button can have background color adjusted to match some color of icon.

Here's the result:
image

Borrow the icons from iconify and save as "surf.svg" and "dusk-city.svg" to your shared folder.
the surf icon
dusk city icon

CSS for page

/*for all icons define icon url and matching button 
background color as css variables.*/
.surf_icon{
    --icon_src: url("/surf.svg");
    --button_background:#4289c1;
}
.dusk_city_icon{
    --icon_src: url("/dusk-city.svg");
    --button_background:#f4900c;
}

/*change the color of the button to match color of icon. optional*/
.icon_button button{
    background-color: var(--button_background);
}
/*make the text to support multiline, change the layout to grid with 2 columns*/
.icon_button .v-btn__content{    
    white-space: normal;
    text-wrap:pretty;
    width:100%;
    gap:0.25em;
    display: grid;
    grid-template-columns: calc(var(--v-btn-height)) 1fr;
}
/*add the icon to the button using pseudoelement :: before*/
.icon_button .v-btn__content::before{
    content:"";
    background-image: var(--icon_src);
    min-height:calc(var(--v-btn-height));
    min-width:calc(var(--v-btn-height));
}

Make sure your css is targeted properly:
image

And for buttons use defined classes: for surf button icon_button surf_icon and for dusk button icon_button dusk_city_icon

Looks like this:
image

Make sure you have fun.

6 Likes
163

Hope this helps @diegodamaceno: UI Template Examples | Node-RED Dashboard 2.0

It's a small collection (that can grow as we get more requests - and community PRs :wink:) of CSS examples to help customise beyond the variables available in the ui-theme configuration.

164

Yes... I send on and off and the button emits on and off... the noa input can go straight through, but you must toggle the button and it, yes, sends the message. The problem is that if the botoa is on and I refresh the page, it loses the variable data and the botoa returns to the creation configuration.

165

Successes gentlemen. We continue moving forward and in a short time I will be able to offer to customers...

image
image1891×927 38 KB

image
image870×431 14.3 KB

image
image799×712 42.2 KB

image
image875×661 22.1 KB

1 Like
166

Take a look at this video I made for this. See if I can help you.

https://www.youtube.com/watch?v=ittqAMx6RL0&pp=ygUTaW1hZ2VucyBubyBub2RlLXJlZA%3D%3D

1 Like
167

I see that there are new sizing options available, nice.

1252×1402 54.8 KB

Now if only these massive line-heights/padding/height could also be adjusted that would be nice:

image
image2130×710 99.3 KB

Come to think of it - the group setting should actually be done within the group setting and not in the overal theme, ie. each group can have its own color.

168

Iteration - one step at a time :slight_smile:

1 Like
169

They can - the bit you've highlighted is the "Widget Gap" option. The line height is prescribed by Vuetify, and is a little trickier to override, but I'm working on making it more accessible to general override - it was much trickier than the others

170

It's time close this thread I think? With celebrations of official release. :tada:

3 Likes
171

Very nice @hotNipi it opens the door for some great opportunities :+1:

Unfortunately I haven't quite got my head around the way DB2 nodes expand to fill space rather than their allocated size of (in this case) 2x1

butts

172

Wow. How did you get this? Maybe start from clean browser cache and then have you any other CSS manipulation ongoing?

1 Like
173

Yes, that was it!

butts

174

Dashboard 2 is now generally available, so closing this topic, and lets move the conversation to Dashboard 2.0 is now Generally Available

1 Like