Examples of Colour change button and switch


#1

A simple example of a button that has two states and changes colour/text and icon based on those two states

[{"id":"b9a70965.13e138","type":"ui_button","z":"d511095d.512808","name":"","group":"c070ecdb.6d5ce","order":0,"width":"0","height":"0","passthru":false,"label":"{{payload}}","color":"","bgcolor":"{{colour}}","icon":"","payload":"press","payloadType":"str","topic":"","x":590,"y":615,"wires":[["48aaee20.8d9e1"]]},{"id":"5cc84101.ac6d9","type":"change","z":"d511095d.512808","name":"","rules":[{"t":"set","p":"colour","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"<i class=\"fa fa-rotate-90 fa-folder-open-o\"></i> OPEN","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":570,"wires":[["b9a70965.13e138"]]},{"id":"329e773b.0fdcb8","type":"inject","z":"d511095d.512808","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":215,"y":570,"wires":[["bc5a70e.6f6a29"]]},{"id":"48aaee20.8d9e1","type":"function","z":"d511095d.512808","name":"state","func":"var state = context.state || false;\nstate = !state;\ncontext.state = state;\nif (state) { return [msg,null]; }\nelse { return [null,msg]; }\n","outputs":2,"noerr":0,"x":215,"y":615,"wires":[["5cc84101.ac6d9"],["bc5a70e.6f6a29"]]},{"id":"bc5a70e.6f6a29","type":"change","z":"d511095d.512808","name":"","rules":[{"t":"set","p":"colour","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"<i class=\"fa fa-rotate-90 fa-folder-o\"></i> Closed","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":615,"wires":[["b9a70965.13e138"]]},{"id":"c070ecdb.6d5ce","type":"ui_group","z":"d511095d.512808","name":"Click","tab":"7d974e73.cf8f9","order":1,"disp":true,"width":"5"},{"id":"7d974e73.cf8f9","type":"ui_tab","z":"d511095d.512808","name":"Home","icon":"link","order":1}]

And similarly for the switch widget

[{"id":"e5b337f.ddf04c8","type":"inject","z":"d511095d.512808","name":"","topic":"","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":true,"onceDelay":"","x":200,"y":705,"wires":[["dcbbf896.32fb28"]]},{"id":"695a1cfd.452994","type":"ui_switch","z":"d511095d.512808","name":"","label":"{{label}}","group":"ccbdd82d.3c19b8","order":0,"width":0,"height":0,"passthru":false,"decouple":"true","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-sun-o","oncolor":"red","offvalue":"false","offvalueType":"bool","officon":"fa-cloud","offcolor":"grey","x":590,"y":705,"wires":[["7926b21b.c61b6c"]]},{"id":"7926b21b.c61b6c","type":"delay","z":"d511095d.512808","name":"","pauseType":"delay","timeout":"2","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":600,"y":750,"wires":[["b797b90b.f62108"]]},{"id":"dcbbf896.32fb28","type":"change","z":"d511095d.512808","name":"","rules":[{"t":"set","p":"label","pt":"msg","to":"click for on","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":750,"wires":[["695a1cfd.452994"]]},{"id":"b797b90b.f62108","type":"switch","z":"d511095d.512808","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":200,"y":750,"wires":[["d3cd1f2c.519bd"],["dcbbf896.32fb28"]]},{"id":"d3cd1f2c.519bd","type":"change","z":"d511095d.512808","name":"","rules":[{"t":"set","p":"label","pt":"msg","to":"now turn off","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":705,"wires":[["695a1cfd.452994"]]},{"id":"ccbdd82d.3c19b8","type":"ui_group","z":"","name":"Default","tab":"7d974e73.cf8f9","order":3,"disp":true,"width":"6","collapse":false},{"id":"7d974e73.cf8f9","type":"ui_tab","z":"d511095d.512808","name":"Home","icon":"link","order":1}]

Using switch node to show actual state
Button behavior- blink toggle + audio feeback when pressed
#2

It's a nice example! By using this a lot by now I have noticed a minor bug.
If you change button background color this way, the button hover state (with animations) will be lost.
It's of course nothing special but for design geeks ... you never know :smiley:


#3

For design geeks - they would start with a different dashboard !

(improvement suggestions welcome)


#4

I really like this.

You used fa fa-rotate-90 fa-folder-open-o & closed. Are there other icons available and if so what is available please?


#5

As the info for the button widget says...

(* only Fa-icons 4.7)


#6

Nice one!

Thanks


#10

Well the basis of default set of dashboard widgets is not that bad to not give it a try. For me (miles from being a design geek :smiley: ), the CSS has always been that famous "never properly closing window blinds". No mater that, with slight override of default CSS, I managed to get my dashboard to look quite ok without wasting too much time on it. So It has it's powers. That's for sure.
image


#11

Oh dear... just when I thought I'd created a nice control dashboard - Using switch node to show actual state

@hotNipi - I'm deflated now :disappointed_relieved: .....


#12

Very nice. Are any of those "slight overrides" something generalisable about the layout ? or are they "just" theming ?
PS - sort of a pre-announcement - did you see the PR in master that allows this ? https://github.com/node-red/node-red-dashboard/wiki/Creating-New-Dashboard-Widgets
testing/feedback appreciated before it goes out.


#13

Theming with CSS override on backgrounds and buttons and sliders simple widgets. Default gauges and graphs can't be modified with ease so I created some own widgets. They are done with ui_template by using svg elements.
I definitely will explore the Creating-New-Dashboard-Widgets. The idea itself is promising enough :slight_smile:

Cheers


#14

Hi @hotNipi what I nice dashboard , I trying to learn on how to do something similar like you did, is possible to get sample code of what you did ?


#15

Here is how I did it.

  1. Make full working solution of dashboard, using default settings and default dashboard widgets.

  2. Observe the result with all the devices, you will be using it.

  3. Figure out the best layout for elements as there will be one layout for all devices. (unit size, card sizes ....)

  4. Make the list of the problems you need to solve with custom design. (Colors, fonts, sizes, behavior and look of elements, readability issues ....)

  5. Open your dashboard and explore all the elements with browser dev tools. (same time you may need to educate yourself on topic of html, css, angular... https://www.w3schools.com/)

  6. Place ui_template node somewhere in your project and make sure it is configured like this:
    image

  7. Place<style> tags in it and start overriding all you dont like on your dashboard. Don't miss the thing.

  8. Show us the result :slight_smile:

If some element does not give up and does not look as you might like, ask specific questions here and for sure you'll get help.

Happy styling :slight_smile: