UI_template & changing button background colour on click

Dashboard
1

Hi all, I am trying to make a button change color and output a corresponding variable when clicked. It is required to stay this colour until it is clicked again, then it is to change back.

I am using the UI_template nodes as they have been more flexible. So I am trying to figure out how to pass CSS styling to the button after it has been clicked, and then retain the settings until next time it is clicked.

Does anyone have any ideas on how to achieve this? Not sure if this is possible. Thanks

2

Did you search the forum? I thought I'd seen something like this in the last couple of days.

found it: take a read of this A little bit of a flow that others may like
If might help you

3

Thanks for taking time to answer.

Yes I have searched this forum high and low but, just like the link you posted, in all the cases posted (that I could find) people are using the inbuilt button or inbuilt switch nodes. You just need to feed in the color in a msg which seems is fairly straight forward.

I would prefer to use the UI_template node as this is what I have used for buttons on other pages, Any ideas of doing it this way? Thanks

4

Excuse my curiosity but can you explain the flexibility issue you are trying to resolve with using template instead of ready made button node. What is the goal you are targeted on?

5

Excuse my curiosity but can you explain the flexibility issue you are trying to resolve with using template instead of ready made button node.

Sure, using class / css functions I can get detailed control of

putting an image inside the button
background color
border on/off
border color
border size
border radius
text color
text size
text font
printing combinations of text and msg data within the button

I dont think I can do that with the inbuilt buttons and switches?

What is the goal you are targeted on?

Sure. I need to build a scheduling interface on the webpage that can be interacted on by the user. All the scheduling systems I have seen require the user to log into the node-red webpage to change it. I dont want that. I want to make it easy for the user so needs to be thrugh the web interface.

I have a 24hr / 7 day week schedule in 30min blocks
On the interface, each 30 min block is actually a button that the user can interact with on the touchscreen
Selecting the 30min block changes the buttons color and sends out a message with the setting

So......... if the schedule says on from 03:00 to 05:00 then the 4 buttons making up that time block (4 buttons representing 30min time blocks) will all be the same color. In picture below they are shown blue (I have hard coded them blue for visual representation). I have pushed all the buttons together with no borders and no gaps so I have the look correct but I need to change the color and send a message on button press.

The intention is the user would just swipe their finger left or right over the buttons and it will look and feel like they are selecting blocks of time.

schedule
schedule864×167 22.2 KB

6

Thak you. Seems like far from basics. If not only the buttons, have you looked over https://flows.nodered.org/node/node-red-contrib-uibuilder I think you'll get much more freedom with it and seems to me you'll need it.