Looking for example - radio button list sending selection to msg.payload

Dashboard
1

Hi All,
Case: I want to display a list of items on the dashboard and select one and return it to the flow in msg.payload.

I can create a radio button list from the results of a ‘File List’ node, but can’t find an example of how to return the selected item to the backend. I’m trying to wrap my head around angular.js (tutorials) but haven’t figured this out yet.

The project is to create a music player using the ‘node-red-contrib-play-sound’ node with a dashboard with sliders for volume and some switches depending on the options of the different players the node supports. Once done I’ll post it in the ‘Share your projects’ category.

I’m doing this because it took me a lot of time to figure out how to pass options in the ‘node-red-contrib-play-sound’ node and wanted to provide examples for others that might use it.

2

Hello Zenofmud,

If you wanted to set a pushbutton for each radio station or make a dropdown menu to select it why not using what you have already on the palette from node-red-dashboard?

image

Regars

3

What I want to do is read a directory (‘file lister’ node) and get all the music files (i.e. mp3’s, wav’s) and display them as a radio button list. Then you select a buttion, adjust the other autio controls (volume, quality, etc) and press a ‘Play’ button. I’d also like to have a ‘Play All’ button to play all the music one after another.

So I want the ability to click a radio button and when the ‘Play’ button is pressed, get the song associated with the radio button that is active.

Does that make sense?

4

I'm so close! I have it working but I have one odd thing I haven't been able to figure out and I've setup a demo (3 nodes) of the flow.
33%20AM
At NR startup, the dashboard looks like this:
15%20AM
The inject node (simulating the response from the file-lister node)just builds an array of two songs:
54%20AM
It feeds the template node that builds the list and now the dashboard looks like this:
40%20AM
selecting a song and you see the feedback on the screen
47%20AM
and when you press the button, the debug shows the returned data:
00%20AM
BUT now the dashboard looks like this:
05%20AM

Anyone have any ideas?

Here is the flow:
[{"id":"eddb3139.c693c","type":"ui_template","z":"e42d06a5.df9ff","group":"fb192efb.ec12e","name":"Display Song List","order":1,"width":"12","height":"6","format":"<script>\n \nthis.scope.action = function(opt) {\n var playSong = opt || \"no data passed to function\";\n// console.warn(playSong)\n return playSong; } \n</script>\n\n\n<div style=\"max-width:400px;\">\n <ul>\n <li ng-repeat=\"song in msg.payload track by $index\" style=\"list-style-type: none;\">\n <label>\n <input type=\"radio\" ng-model=\"$parent.song\" name=\"data\" value=\"{{song}}\" required />{{song}}\n </label>\n </li>\n </ul>\n <p>data entered: {{song}}</p>\n\n <md-button ng-click=\"send({payload:action(song)})\">\n Click to send data to backend\n </md-button>\n\n</div>\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":810,"y":260,"wires":[["683393b5.ea38d4"]]},{"id":"683393b5.ea38d4","type":"debug","z":"e42d06a5.df9ff","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":810,"y":360,"wires":[]},{"id":"fe643496.658588","type":"inject","z":"e42d06a5.df9ff","name":"","topic":"","payload":"[\"song1.mp3\",\"song2.mp3\"]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":810,"y":160,"wires":[["eddb3139.c693c"]]},{"id":"fb192efb.ec12e","type":"ui_group","z":"","name":"Song List","tab":"4f46b96e.86aa9","order":1,"disp":true,"width":"12","collapse":false},{"id":"4f46b96e.86aa9","type":"ui_tab","z":"","name":"Demo","icon":"dashboard","order":7}]

5

What you are seeing is the difference in behavior when iterating over an array of strings, vs. iterating over the characters in a string – unfortunately, this ng-repeat line happily works with either input:

<li ng-repeat="song in msg.payload track by $index" style="list-style-type: none;">

So you will need to ensure that your msg.payload is always an array of strings, even if it only has one song.

But I think the reason you see the display update as soon as you send the selected song is because the option “Add output messages to stored state” is checked. Also, I don’t think you want the option “Pass through messages from input” selected, so that incoming msgs are just used to build the list of radio buttons, not passed to any downstream flows.

Finally, you don’t really need the scope.action function – as you have it defined, it’s just returning the selected song. So you can simplify the template code to just:

<md-button ng-click="send({payload: song})">
  Click to send data to backend
</md-button>

TBH, I’m not entirely clear on why what works, but that is the mystery of Angular…

1 Like
6

Steve! You are my hero!!

The code is in the shape it’s in because I’ve been trying anything I could come up with and that finally got me some data back to the flow. Turns out I don’t need the at all in this case.

I’ll be writting this up as a HINT after I get done babysitting my 15 mth old granddaughter in a couple hours.

Once again THANK YOU!!! and I agree that angular is mysterious.

I did discover one good thing. If you are playing with the templae and having problems, you can add “console.warn(some-variable-or-text)” to your scripts and then use Chrome developer tools and select the console section so see what is being dumped there.

7

If you can share the template and let us know a bit how it works once you have it done… will be great for those like that that have no idea at all but can try to understand to change things a bit to adapt for our own use, if you don’t mind…

Regards

8

From other side If I’m not wrong same could be directly done by the dropdwon node on the dashboard palette.

Regards

9

I would be writing it up now if not for the 15 month old granddaughter asleep on my chest (smile)

I try to get it out later

10

Hello Zenofmud,
Would you mind sharing your working flow? I’m interested in doing something similar and this would help greatly.

Thanks!

11

I’ll be happy to share it but it won’t happen till late Sunday. I’m traveling and away from my desktop where the flow is.

If I forget, nudge me Monday

12

Will do, safe travels!