Dashboard buttons easy colour state change?

Space conservation is the trickiest thing in ui building for small screens. Even for skilled artist. :wink:

Hah, I just spotted how to add that template to the site - and not just that tab. Sailing now.... Mywife has decided that RED means stop so colour change too - green for go, black for stop. Getting there.
image

Be aware that this selector works only for input container in that tab and group.
I did selector that way for purpose. If you use some other text input with some other input method than color picker, then those others are not affected. Avoiding possible CSS mess :slight_smile:

That's true . the button with colored square doesn't talk much about what will happen if you press it. And the red square is definitely STOP kind of thing.
If that is the "No go" then of course the 1x1 sized color picker can't be an option.
So if needed, something like this can be also figured out :stuck_out_tongue:
image

Oh I like that painter.

Add this (and adjust the vertical position of icon with the top property)

#Home_Default_Group_cards > md-card > md-input-container > label{
    position: relative;
    top: 15px;
}

For #Home_Default_Group_cards > md-card > md-input-container the border-radius:16px; should be given in pixels, (you may change this for all elements where you need rounded corners, then they match)

And the color picker conf - size 2x1 and the label
image

I'd like to take this opportunity to thank both you and DaveCJ - this is all working now...

3 Likes

This looks great..i probably would just colour the Paint Brush the selected colour

You probably don't want to do it cos if it matches the background color then the art means nothing.

As you might expect I spent half the night putting the coding on my blog so others can benefit. https://tech.scargill.net/node-red-dashboard-for-2021/

Thanks again. It's all becoming a lot clearer.For some time I've been determined to stay within Node-Red for my home control dashboard and this new knowledge will make life easier. In the blog entry I've linked back as a memory jogger to an earlier entry where I figured out how to add haptic feedback to the buttons - amazing the things you forget when not used regularly.

1 Like

Great thread Pete and hotnipi. I know you are an Android man Pete, but for us poor iPhone souls out here, did anybody get haptic feedback to work?

Hi Davifdd - yes ages ago I did get haptic workin on an md_button...


The script secion - first item - that will give VIBRATE to an md_button - but it seems beyond me now to figure out how to add that to all my non-custom md_buttons that we;ve been working on... it may come to me. If not if anyone else knows how to do this please do step in.
1 Like

Just make one ui_template per tab (cant be in site head) or abuse one if you have
Fill with that

<script>
$('button').click(function() {
  window.navigator.vibrate([80])
})
</script>

And all buttons will vibrate.

2 Likes

Hah, thats where I went wrong - I had that in the head... I'll make one for each tab. Just tested the first one - vibrates a TREAT. I can add in my other classes from back in 2019 now -- WHEEEE.

Most probably the colorpicker doesn't vibrate. No button involved...

A ton of inspiration can also be found here:
https://community.athom.com/t/node-red-a-widget-based-dashboard-working-with-homey-trough-mqtt/18798

2 Likes

Sure this is not correct place for showcases but I just could not resist ...

5 Likes

And why not - looks pretty. I like the shadow on the backgrounds...

Balancing between kind of old-school fanciness and readability. And meaningful colors in details and so on. Hard if knowledge and skills about the (web)art are low as I have but still something.
A lot of pseudo dashboard design solutions seen, done by real artists and of course, none of such seen in real life cos real life and it's needs differs too much what the photoshop allows to do.
Saying that here out loud, the NR dashboard is full of wonders, if you can take that little time to be friend with it.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.