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

[Trying_to_learn]

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?

[Paul-Reed]

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

[Trying_to_learn]

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.

[Steve-Mcl]

@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"

[Trying_to_learn]

@Steve-Mcl

Perhaps change its color instead to indicate it is "muted"

That too is possible. Another option.

[SuperNinja]

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.

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

[Trying_to_learn]

Cute icon animation.

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

[SuperNinja]

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

node-red/node-red-dashboard/blob/master/config-fields.md

[Trying_to_learn]

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.

[SuperNinja]

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

[Trying_to_learn]

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.

[Trying_to_learn]

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.

[Steve-Mcl]

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

[Trying_to_learn]

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.

[Buckskin]

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