Hello , I have a matrix of 5 X 5 Buttons on a dashboard and I want to access per programm one particular button to change it's color. How can it be made ? Have each button a ID?
thx
Yes, each button has to have a unique ID. If you created them using the ui button node, they will already have that but you can just send a msg to the right node of course.
but when go to properties of the button I don't see the ID of the button ... And how can I send a message to this particular ID ?
What I want to do is a matrix with one input and I want to send a message to a specific ID..perhaps it is more clear now.
What are the buttons? Are they node-red-dashboard buttons or what?
You haven't said how you are creating the buttons. From your response to Colin, I would say that you will need a ui template note where you create the buttons so you can add your own ID's there.
Are the number of buttons static or do you need to have different numbers?
Hi , I would say I create the button from the normal dashboard button. The button are differents from the properties of text , color , invisiblility ,id but have the same properties in the shape form .
Do you mean they are actually normal dashboard buttons? So each one has a node in the flow? In that case you just need to wire up to the appropriate button.
Yes but to avoid complicated wiring on node red , perhaps it's better to have a button which react on it's name ( like a broadcast on a network ) . or an architecture like a chain would also be useful.
Do you mean that you are still at the design stage for this? Either you use use the node-red-dashboard button or you don't. You have to decide.
Yes I have not decided what is the best way to implemented this. @collin it is not so simple as this : we have multiple way to do this. per example have the svg composant ( more complex but have lot of drawing possibilities) . The other way is to have simple dashboard nodes ( simple to implement but visually poor )...
And if you want total control over the visuals - maybe Dashboard isn't the right tool.
I'm afraid there is no ideal Tool for Node-red! But in my point of vue , my requirements are not so complicated:
I want to design a dashboard with several objects ( images, simple forms like round,rectangles, or polyforms) .I want to control them ( change the color, change the text, change event the form/size) and have a feedback when a user click on it! that's all..
Oh, is "that all" 
Interesting slip: "point of vue" since VueJS is the default framework included in uibuilder 
The thing that I keep asking myself when using a framework is:
Is the framework getting in the way more than it is helping?
So if you are fighting with Dashboard as a framework, would an alternative be worth dealing with sooner rather than later?
1 Like
ok and In your "Point of vue" , what is the framework I should use to achieve with "normal effort" the expectations? ( I should precise : i'm not a specialist of any framework..)
Doesn't matter the framework. If you don't know them, you even learn them but learning via doing is learning a lot and doing much less. If you want to do more and (well, learning is always good) then use dashboard and respect some limitations the card layout applies but feel free to be clever and inside ui_template it is you in charge so the bare basics - the HTML, CSS and JavaScript. (JQuery also helps)
Just start doing the prototype, do it fast and robust and then start thinking about the real thing. At least you find what is possible and what is reasonable to do.
Here's a little illustrative example about how to start ..
[{"id":"ebe20f22.23a26","type":"ui_template","z":"f56ccabd.7567e8","group":"6358ae36.982e8","name":"One","order":0,"width":"4","height":"4","format":"<div class=\"unit square\" id=\"1\">\n <p>TEXT</p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":210,"y":80,"wires":[[]]},{"id":"29117d1b.9646b2","type":"ui_template","z":"f56ccabd.7567e8","group":"f297183e.cf15f8","name":"Two","order":0,"width":"4","height":"4","format":"<div class=\"unit square\" id=\"2\">\n <p>TEXT</p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":350,"y":80,"wires":[[]]},{"id":"18786fa2.6cb9","type":"ui_template","z":"f56ccabd.7567e8","group":"f370c8c0.1caf78","name":"three","order":0,"width":"4","height":"4","format":"<div class=\"unit square\" id=\"3\">\n <p>TEXT</p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":80,"wires":[[]]},{"id":"7fef4b48.a8d4e4","type":"ui_template","z":"f56ccabd.7567e8","group":"dc3a48a6.624e68","name":"four","order":0,"width":"4","height":"4","format":"<div class=\"unit square\" id=\"4\">\n <p>TEXT</p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":630,"y":80,"wires":[[]]},{"id":"7814c5ce.01d98c","type":"ui_template","z":"f56ccabd.7567e8","group":"577f5429.46475c","name":"Five","order":0,"width":"4","height":"4","format":"<div class=\"unit square\" id=\"5\">\n <p>TEXT</p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":210,"y":140,"wires":[[]]},{"id":"10123f3a.7f3a71","type":"ui_template","z":"f56ccabd.7567e8","group":"cd868c0b.963b9","name":"six","order":0,"width":"4","height":"4","format":"<div class=\"unit square\" id=\"6\">\n <p>TEXT</p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":350,"y":140,"wires":[[]]},{"id":"283d6481.4f177c","type":"ui_template","z":"f56ccabd.7567e8","group":"2327c734.0bec38","name":"seven","order":0,"width":"4","height":"4","format":"<div class=\"unit round\" id=\"7\">\n <p>TEXT</p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":140,"wires":[[]]},{"id":"3c8e0e0a.060542","type":"ui_template","z":"f56ccabd.7567e8","group":"f937048.86aabf8","name":"eigth","order":0,"width":"4","height":"4","format":"<div class=\"unit square\" ind=\"8\">\n <p>TEXT</p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":630,"y":140,"wires":[[]]},{"id":"3625d8fd.d79d08","type":"ui_template","z":"f56ccabd.7567e8","group":"6358ae36.982e8","name":"CSS","order":1,"width":0,"height":0,"format":"<style>\n.nr-dashboard-theme ui-card-panel {\n background-color: #33333300;\n border: 1px solid #55555500;\n}\n.nr-dashboard-theme .nr-dashboard-template {\n background-color: #33333300;\n}\n.nr-dashboard-template {\n padding: 0px;\n}\n.unit{\n width:100%;\n height:100%;\n}\n.unit p{\n background:transparent !important;\n font-size:30px;\n text-align:center;\n}\n.square{\n background-color:blue;\n}\n\n.round{\n background-color:green;\n border-radius:50%;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":170,"y":220,"wires":[[]]},{"id":"b5a317d2.159498","type":"ui_template","z":"f56ccabd.7567e8","group":"a38dbf98.58886","name":"nine","order":0,"width":"4","height":"4","format":"<div class=\"unit round\" id=\"9\">\n <p>TEXT</p>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":770,"y":140,"wires":[[]]},{"id":"d096e6ea.317ae8","type":"ui_template","z":"f56ccabd.7567e8","group":"80cfa711.36e2f8","name":"controller","order":0,"width":"12","height":"1","format":"<script>\n(function(scope) {\n var units = $(\".unit\")\n scope.$watch('msg', function(msg) {\n if (msg) {\n \n if(msg.topic == \"round\"){\n $(\".unit\").map(function(i,e) {\n if($(e).attr(\"id\")== msg.payload){\n if($(e).hasClass(\"round\")){\n $(e).find(\"p\").text(\"hit\")\n var randomColor = \"#\"+Math.floor(Math.random()*16777215).toString(16);\n $(e).css('background-color',randomColor)\n }\n else{\n $(e).css('background-color','')\n $(e).removeClass(\"square\").addClass(\"round\").find(\"p\").text(\"round\")\n }\n \n }\n })\n \n }else{\n $(\".unit\").map(function(i,e) {\n if($(e).attr(\"id\")== msg.payload){\n if($(e).hasClass(\"square\")){\n $(e).find(\"p\").text(\"hit\")\n var randomColor = \"#\"+Math.floor(Math.random()*16777215).toString(16);\n $(e).css('background-color',randomColor)\n }else{\n $(e).css('background-color','')\n $(e).removeClass(\"round\").addClass(\"square\").find(\"p\").text(\"square\")\n \n \n }\n \n }\n })\n }\n \n\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":360,"y":300,"wires":[[]]},{"id":"3a5c5ed3.e0c4b2","type":"inject","z":"f56ccabd.7567e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"round","payload":"$round($random()*9,0)\t\t","payloadType":"jsonata","x":190,"y":280,"wires":[["d096e6ea.317ae8"]]},{"id":"b4c61e24.b17d7","type":"inject","z":"f56ccabd.7567e8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"square","payload":"$round($random()*9,0)\t\t","payloadType":"jsonata","x":190,"y":320,"wires":[["d096e6ea.317ae8"]]},{"id":"6358ae36.982e8","type":"ui_group","name":"1","tab":"1854ea3c.181436","order":1,"disp":false,"width":"4","collapse":false},{"id":"f297183e.cf15f8","type":"ui_group","name":"2","tab":"1854ea3c.181436","order":2,"disp":false,"width":"4","collapse":false},{"id":"f370c8c0.1caf78","type":"ui_group","name":"3","tab":"1854ea3c.181436","order":3,"disp":false,"width":"4","collapse":false},{"id":"dc3a48a6.624e68","type":"ui_group","name":"4","tab":"1854ea3c.181436","order":4,"disp":false,"width":"4","collapse":false},{"id":"577f5429.46475c","type":"ui_group","name":"5","tab":"1854ea3c.181436","order":5,"disp":false,"width":"4","collapse":false},{"id":"cd868c0b.963b9","type":"ui_group","name":"6","tab":"1854ea3c.181436","order":6,"disp":false,"width":"4","collapse":false},{"id":"2327c734.0bec38","type":"ui_group","name":"7","tab":"1854ea3c.181436","order":7,"disp":false,"width":"4","collapse":false},{"id":"f937048.86aabf8","type":"ui_group","name":"8","tab":"1854ea3c.181436","order":8,"disp":false,"width":"4","collapse":false},{"id":"a38dbf98.58886","type":"ui_group","name":"9","tab":"1854ea3c.181436","order":9,"disp":false,"width":"4","collapse":false},{"id":"80cfa711.36e2f8","type":"ui_group","name":"Controller","tab":"1854ea3c.181436","order":10,"disp":false,"width":"12","collapse":false},{"id":"1854ea3c.181436","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
Well I don't like to blow my own trumpet but uibuilder with Vue (or any other framework) gives you a rapid development environment for data-driven front-ends. 
Of course, it does require you to write more code than using Dashboard. But you are already talking about needing code anyway and you may be surprised how little boilerplate you need when using VueJS and bootstrap-vue.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
