Dashboard buttons easy colour state change?

Dashboard
41

Oh I like that painter.

42

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

43

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

image
image421Ɨ804 96 KB

3 Likes
44

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

45

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

46

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
47

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?

48

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
49

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
50

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.

51

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

52

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
53

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

image
image924Ɨ1286 286 KB

5 Likes
54

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

55

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
56

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