Dashboard 2 Beta development

Dashboard
101

Yep, this is mine
image

image

As you can see, not good. Are yours in the order that they were created? That is the only reason for this that I can see at the moment.

Or, it may have something to do with the config data as the config ui_page nodes do not have the correct groups or widgets. For example Page 01 has a chart widget, but according to the config it has a button. I have moved widgets about so it would appear that the configs are not keeping up.

102

If you do a full deploy then refresh the browser, are your pages now sorted as per the config layout?

103

Unfortunately no. I even restarted Node-RED. To show what I mean about the mix-up with the config nodes

This is what is on Page 05 in the Dashboard layout
image
This is what is in the config
image
The ui-template icon button is on Page 05 but CSS is on Page 01 and the rest are on Page 02

104

What version of the dashboard are you using?

Any errors in the browser developer console when viewing the dashboard?

Edit: probably worth trying a different browser if you can.

105

I don't understand the second image there. It appears to be two images. The bottom two icons are not aligned with the earlier, and there are two scroll bars. I also don't understand where you are seeing that.

106

Can I get you and @diegodamaceno to open issues on the GH repo with the specifics of this please?

107

You can count on me. I confess that the variations in the possibility that problems occur are not consistent. Sometimes they happen and sometimes they don't.. I have more work to create the conditions than to document what happens. In the YouTube presentation video you made, the changes don't work and it doesn't make sense. I will continue observing and when I find the causative variation, I will report it. Do you have any idea when the new update will come out with new adjustments?

108

Which particular adjustments are you referring to?

109

First I want to congratulate the work that has been done, this will certainly help us a lot in general. I don't intend to demand or expect the things I've suggested to be implemented, but it certainly makes a big difference to my work. I'm going to list some things I hope for my work to flow properly.

1 - Multiple outputs on the node configured as on the function node.

2 - The option to restrict the direct passage of messages from input to output when I need it or not.

3 - Have the option to reload or not the state values ​​of components developed within the node on page updates.

These few resources already make a big difference for those who develop here. Thank you again for the time invested.

110

There are two images, as I could not get the complete menu in one Snip. Seen from clicking on the ui_group configuration node. However, as of this evening all configuration nodes have the correct widgets. (Possibly as a result of shutting down the Browser & PC last night) The Dashboard dropdown menu is also different, but still not in the correct order.

No errors in browser developer console
Browser is Edge
NR is v3.1.3
Dashboard 2 is v0.10.1

111

I have had great fun playing with @diegodamaceno 's button with the slider and I have found the cause of the 'thumb' not changing colour.
Somewhere in the Dashboard 2 CSS
.v-slider-track__background, .v-slider-track__fill, .v-slider-track__tick, .v-slider-thumb__surface
has been set to
background-color: rgb(var(--v-theme-primary));

which overrides the v_slider attribute thumb-color(which has already mentioned by @hotNipi as being the way this is supposed to work)

The way round this is to have a CSS class .

.v-slider-thumb__surface{
        background-color: currentColor;
    }

The 'thumb' then takes on the color specified in the v_slider HTML element (the color attribute was noted by @Steve-Mcl). (this should be able to be changed for any other colour, not tried)

112

@hotNipi @Buckskin

Perfect observation, but these very personal attitudes should not replace universal concepts. I believe this will cause a lot of problems. Discovering that specific CSS modifications must be bypassed to achieve a concept that is universal is strange, isn't it?

113

Certainly, but then Dashboard 1 has similar requirements. I imagine that this was done to make it easy for newcomers to Dashboard.
@joepavitt what would be the impact of removing this CSS class?

.v-slider-track__background,.v-slider-track__fill,.v-slider-track__tick,.v-slider-thumb__surface {
    background-color: rgb(var(--v-theme-primary))
}
114

Perhaps a good idea would be to have the option of not choosing any theme and thus eliminating anything very personal applied by those themes. I myself have never used node-red themes.. What do you think of the idea? @joepavitt

image

115

Doesn't it default to the... default theme? so unless you wish to add a theme, just leave it as 'default'.
Perhaps it would be a good idea to make the 'default' theme un-editable, so users would need to create a new theme to try styling, and if they then get into trouble then they can always revert back to 'default'.

You should try it, it is great to coordinate a colour scheme, and improve the appearance of your dashboards.

116

It's worth nothing, these are not Node-RED themes, but a new "Dashboard Theme" concept driven by ui-theme config nodes.

The default Dashboard Theme here just defines the white/blue theme. May change the default colours in the near future, but that's all that does at the moment. I also want to extend ui-theme to support the definition of padding/margin, as that has come up a lot in the forums and in feedback.

117

I put that in, as to me it made more sense that the thumb, etc. was driven by the primary colour (to match buttons) rather than the screen colour that Vuetify provides me out of the box.

If I removed that line, the thumbs would then be the same colour as the header navigation - which didn't make sense to me.

118

Here at the company, as well as in other automation companies, we do not use absolutely anything offered by node-red as a theme or any other visual configuration precisely to ensure that nothing is the same as another company.

image
image1889×748 68.1 KB

We use a template node to configure the entire front end and handle client requests.

image
.
.
.
image

<style>   
    /* cuida de imagens e cores do fundo da pagina */
    body {        
        background-image: url('/fundo.jpg');        
        background-size: cover; 
        //background-color: #000000;
    }

    /* cuida da transparencia da barra de titulo */
    body.nr-dashboard-theme md-toolbar {
        background-color: transparent !important;
    }
    
    /* cuida da transperancia dos botÔes dos cartÔes */
    body.nr-dashboard-theme md-content md-card {
        background-color: transparent !important;
    }

    /* cuida da transperencia de fundo do menu */
    body.nr-dashboard-theme md-sidenav {        
        background-color: transparent !important;        
    }

    /* cuida do arredondamento do item selecionado no menu */
    button.md-no-style {
        border-radius: 10px !important;        
    } 

    /* cuida da cor da seleção do item selecionado no menu */
    .nr-menu-item-active div button {
        border-right: 4px solid #000000 !important;        
    } 

    /* cuida das configuraçÔes do menu */
    body.nr-dashboard-theme md-sidenav div.md-list-item-inner {
        color: #000000 !important; /* cor das letras dos itens do menu */ 
        background-color: #ffffff !important; /* cor do fundo dos itens do menu */
        border-radius: 10px !important; /* cuida da curva dos cantos dos itens do menu */
    }

    /* cuida das configuraçÔes dos cartÔes de grupo */
    ui-card-panel {      
        background-color: #00000040 !important; /* cuida da cor do fundo dos grupos do menu */
        border-radius: 10px !important; /* cuida da curva dos cantos do cartĂŁo de grupo */
        border: 1px solid #000000 !important;
    }  

    /* cuida da cor do nome do cartĂŁo de grupo */
    .nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {        
        color: #ffffff40 !important;
        
    }

    /* cuida da cor do titulo da pagina */
    body.nr-dashboard-theme md-toolbar .md-toolbar-tools {
        color: #ffffff40 !important;
    }
</style>

I still can't do this or the examples I got just don't work. I don't know why or where I'm going wrong.

119

I can't progress much further now with my energy & weather dashboards, until there are better chart configuration options, such as using 2 y-axis, better labelling, value suffix's (degC, mph etc), line thickness, line styles, etc.
@joepavitt - Does this fit into - Dashboard Backlog · GitHub

I'm not piling on the pressure :wink: I just want to make sure that it's on the list to do, and not forgotten.

120

All warrant their own issues @Paul-Reed - please do the honours, if you want already find an issue for each of them. I'm locked into some product stuff atm, so not able to do much Dashboard work.