# Icons for buttons with two functions - which to display when?
**URL:** https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414
**Category:** Dashboard
**Created:** [10 May 2020 10:14 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414 "2020-05-10T10:14:49Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [10 May 2020 10:14 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/1 "2020-05-10T10:14:49Z")
I have a button on my dashboard.
In this instance it is the `mute` button for audio.
The two icons are:
So it begs the question:
> When the audio is working which icon should be visible?
`volume_off` or `volume_up`?
To me, it is `volume_off`.
Then when pressed it becomes: `volume_up`
That way the icon indicates what to press to get.......
But there is the other school of thought that when you are hearing the sound it should be
`volume_up` and when you press the `mute` button it changes to `volume_off`.
Is there a _preferred_ way?
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [10 May 2020 10:23 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/2 "2020-05-10T10:23:16Z")
If you look at 'real' remote control icons, that should give you a steer.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [10 May 2020 10:25 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/3 "2020-05-10T10:25:05Z")
So you agree with my initial idea.
Good. Thanks.
It was just thrown at me the alternate way and it kind of threw a spanner in the works.
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [10 May 2020 10:25 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/4 "2020-05-10T10:25:30Z")
> [@Trying\_to\_learn](#):
>
> volume\_up
Its an oft debated topic - "show action" or "show status"
Ultimately - its up to you but to me, showing `volume_off` ALWAYS makes more sense. Perhaps change its color instead to indicate it is "muted"
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [10 May 2020 10:27 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/5 "2020-05-10T10:27:58Z")
> [@Steve-Mcl](#):
>
> Perhaps change its color instead to indicate it is "muted"
That too is possible. 😉 Another option.
---
### Author:  [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)
#### Post date: [11 May 2020 08:34 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/6 "2020-05-11T08:34:18Z")
that's exactely i just do 🕶 :
In my opinion : the icon show the actual state of the speakers . If you clic, it change the state.
```auto
[{"id":"b4fa1340.88673","type":"ui_audio","z":"a8b1b208.7036f","name":"","group":"7c26c8d0.c1e658","voice":"fr-FR","always":true,"x":1080,"y":540,"wires":[]},{"id":"80b468e1.e79638","type":"link in","z":"a8b1b208.7036f","name":"resize","links":["7d41908.2497b7","44954d47.d45984","d1f67be4.016c58","ac44f1d0.2def9","1cdef2a.0f8810d"],"x":785,"y":540,"wires":[["c4baeda4.0de42"]]},{"id":"8e45448a.0b36f8","type":"comment","z":"a8b1b208.7036f","name":"audio out","info":"","x":710,"y":540,"wires":[]},{"id":"c8f181fc.70718","type":"inject","z":"a8b1b208.7036f","name":"test","topic":"","payload":"test du son","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"1","x":750,"y":500,"wires":[["c4baeda4.0de42"]]},{"id":"cc051ba6.8f9ed8","type":"ui_button","z":"a8b1b208.7036f","name":"sound","group":"46182ac5.494ea4","order":5,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"volume_up","payload":"actif","payloadType":"str","topic":"","x":910,"y":480,"wires":[["7f92c698.42dac8","c4baeda4.0de42"]]},{"id":"7f92c698.42dac8","type":"debug","z":"a8b1b208.7036f","name":"complet","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","x":1080,"y":480,"wires":[]},{"id":"c4baeda4.0de42","type":"function","z":"a8b1b208.7036f","name":"soundGate","func":"// \nvar soundGate = flow.get('soundGate')|| \"on\";\n//========== Start ===========\nif (msg.payload ==\"test du son\"){\n if (soundGate == \"off\")node.send({ui_control:{\"icon\":\"volume_off\"}});\n if (soundGate == \"on\")node.send({ui_control:{\"icon\":\"volume_up\"}});\n}\n//========== test button ==========\nif (msg.payload ==\"actif\"){\n node.status({\"text\" : soundGate}); //under the node\n if (soundGate == \"on\"){ //before was ON => put OFF\n node.send({ui_control:{\"icon\":\"volume_off\",\"bgcolor\":\"#707070\"}});\n flow.set('soundGate',\"off\");\n node.status({\"text\" : \"off\"}); //under the node\n //block sound\n }\n if (soundGate == \"off\"){ //before was OFF => put ON\n //node.send({ui_control:{\"icon\":\"volume_up\"}});\n flow.set('soundGate',\"on\");\n node.status({\"text\" : \"on\"}); //under the node\n //let sound pass thru\n node.send({ui_control:{\"icon\":\"volume_up\"},payload:msg.payload});\n }\n}\n//========== speak ==========\nelse{\n if (soundGate == \"on\"){ //if ON => put msg.paylod on output\n node.send({payload:msg.payload});\n }\n}\n/* venant de\nvar soundPushed = flow.get('gateSound')|| 0;\nnode.status({\"text\" : gateSound}); //under the node\n\nif (gateSound == \"on\"){\n //gateSound = msg.payload;\n return msg;\n}\n\n*/","outputs":1,"noerr":0,"x":910,"y":540,"wires":[["37f22a2e.7d2056","cc051ba6.8f9ed8","b4fa1340.88673"]]},{"id":"37f22a2e.7d2056","type":"debug","z":"a8b1b208.7036f","name":"complet","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1080,"y":510,"wires":[]},{"id":"a87cd167.7df56","type":"comment","z":"a8b1b208.7036f","name":"===== let sound pass thru =====","info":"","x":940,"y":450,"wires":[]},{"id":"7c26c8d0.c1e658","type":"ui_group","z":"","name":"detection","tab":"b123e6c8.d3e948","order":2,"disp":true,"width":"10","collapse":true},{"id":"46182ac5.494ea4","type":"ui_group","z":"","name":"camAlerte","tab":"250de740.57ee78","order":10,"disp":true,"width":6,"collapse":true},{"id":"b123e6c8.d3e948","type":"ui_tab","z":"","name":"Slide","icon":"dashboard","order":2,"disabled":false,"hidden":false},{"id":"250de740.57ee78","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
Enjoy !
Chris
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [11 May 2020 09:05 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/7 "2020-05-11T09:05:57Z")
Cute icon animation.
Dunno if I have a direct need for it, but I'll have a look at the code.
---
### Author:  [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)
#### Post date: [11 May 2020 09:16 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/8 "2020-05-11T09:16:41Z")
the animation is independent of my will, it is included in the library of Dashboard widgets 😉 :
>
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [11 May 2020 09:18 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/9 "2020-05-11T09:18:42Z")
Well, ok. But I have never journeyed into that part of the _rabbit hole_ at this stage.
I'm messing around with other stuff. (`CSS` comes to mind) 😉
It may need to be put on the back burner for study at a later time.
---
### Author:  [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)
#### Post date: [11 May 2020 09:50 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/10 "2020-05-11T09:50:54Z")
yes you have the choice:
- a button included in the Dashboard library with little flow ( like my example)
- or a CSS in a Template node with HTML knowledge.
That's how you want 🙂
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [11 May 2020 09:53 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/11 "2020-05-11T09:53:02Z")
Yeah, `CSS`...... I am out of my depth with it just now.
I am designing about 5 remote controls and need to use `CSS` for button styles.
This is what I have so far as an example.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [11 May 2020 09:57 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/12 "2020-05-11T09:57:52Z")
That is/was a lot of work.
And it isn't complete yet.
I have to finish the DVD remote then I have another ..... 2 (3?) to capture and design.
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [11 May 2020 10:04 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/13 "2020-05-11T10:04:18Z")
IMO, I'd recommend you stick with replicating a physical device for now (i.e. use the icon that represents the command, not the status) until you have it all working - then tweak the icons to show suitable status.
Getting status feedback is probably the last tweek i'd make.
PS, I note you ditched my lovely **`Netflix`** icon  in favour of **`NETFLX`** - sad days 😢
😉
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [11 May 2020 10:09 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/14 "2020-05-11T10:09:41Z")
Oh, no offence on that.. It is just so much has happened since then.
As I said in my private message (or one of the posts) the \*hit hit the fan and there were so many copies of the code all messing with each other.... It was a total mess.
So I had to fall back to a working version.
I have it somewhere. I may put it back. But I don't have `netflix` anyway.
So there is little chance of me ever using it.
But I may put it there anyway, so I can upload the entire flow for anyone with a Samsung TV.
I just need to do more work on the buttons and `template` nodes as I am sure there is a lot of redundant code.
Each of the _sections_ has their own `template` node so the buttons and styles are all constrained to that _device_.
(But I have a paytv service.... and they have their own icons for channels.)
I am going to make a big bank of buttons with my favourite channels and I want to use their icons. That is going to be fun.
---
### Author:  [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [13 May 2020 15:28 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/15 "2020-05-13T15:28:49Z")
I'd like to thank everyone involved in this conversation because it has introduced me to a bunch of new ideas, Hotnipi for the info on the css for the Dashboard, Trying\_to\_learn for raising the subject in the first place and Steve-Mcl for the button code. (I have to say that I used to do basic (both ways) programming many years ago, and recently some HTML & css for books I am very new to Node-Red and Javascript (plus all the variations used))
I was getting toggle (and multi-toggle) buttons to work but wasn't happy with having the button data in the script. I couldn't work out how to get the current button data into the script without giving them all an ID, something I wasn't keen on.
I have now managed to get Steve's code working with a JSON script in the HTML button code rather than a load of single data items (easier once I realised that the JSON string was automagically converted to an object in the script and did NOT need to be JSON.parsed)
However looking at the code I have questions (wouldn't you know it) - I hasten to add, only because while I have a rough idea of what they do (Google is my friend) I have no idea when or why they should be used;
Why have you used e.preventDefault() & e.stopPropagation() in the RepeatButtons function?
Is there any reason other than style that you use $ other than those places it is required to get the DOM element (is that right?)
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [12 June 2020 15:28 UTC](https://discourse.nodered.org/t/icons-for-buttons-with-two-functions-which-to-display-when/26414/16 "2020-06-12T15:28:52Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.