Icons for buttons with two functions - which to display when?

I have a button on my dashboard.

In this instance it is the mute button for audio.

The two icons are:

Screenshot from 2020-05-10 20-11-16

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?

If you look at 'real' remote control icons, that should give you a steer.

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.

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"

That too is possible. :wink: Another option.

that's exactely i just do :sunglasses: :
In my opinion : the icon show the actual state of the speakers . If you clic, it change the state.

[{"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 !


Cute icon animation.

Dunno if I have a direct need for it, but I'll have a look at the code.

the animation is independent of my will, it is included in the library of Dashboard widgets :wink: :

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) :wink:

It may need to be put on the back burner for study at a later time.

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 :slightly_smiling_face:

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.

1 Like

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.

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 image in favour of NETFLX image - sad days :cry:


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.

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?)

1 Like

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