Hello! I'm creating (or at least try to) a new ui node and I'm following mainly How to make custom UI widgets and the linkes pages therein. My basis was the "mylittleuinode" that I modified. I want to have some (three at the moment) buttons in my UI. I understand how to send messages depending on …

In the meantime I was looking for the code the normal button uses, but apparently there is no HTML function in it at all... So there seems to be no example to follow at the moment

I believe that you are using the template node. Did you install Node-red-dashboard? In the dashboard, you can add buttons, charts and other widgets. It is the fastest and easiest way to have a nice UI (buttons, charts, tables) working with little html codes :grinning:

Yes, I installed the dashboard. And it works without problems. Maybe I have to start the story at the beginning: I have several roller shutters and dimmer switches. The dashboard looks like this [image] The corresponding flow is (using Homematic IP switches) [image] The idea was to create a ui…

[image] Simon01011: The idea was to create a ui to encapsulate the 7 buttons Have you considered using a ui_slider node instead? You can make it vertical by setting the size, for example 1x7, instead of 7x1. You could also use this example to simulate how the blinds would look.... Just ide…

[image] Simon01011: I'm lazy, every time I implement a new shutter I have to copy the flow and change the group of all buttons separately. We are all lazy to some extend as this is a desired skill for developers. :smile: In such case an alternative to explore is using a dashboard template no…

Hi Paul! [image] Paul-Reed: Have you considered using a ui_slider node instead? Yes, but that doesn't work for me. It's okay on a computer with a mouse, but on my tablet I'm not able to use the slider, I guess my fingers are to tall :roll_eyes: every time I try it seems I'm missing the slide…

Thank you, Andrei! That seems to be a good idea, I will try. And maybe that's what davidz tried to tell me in his post, but I didn't get his point I'm afraid. Sorry for that. And considering my laziness I must be a really skilled developer :rofl:

I did a quick change on a similar (sort of) widget from a previous project to give you an idea how the CSS grid looks like. [r-1] [{"id":"6ac2866a.dfbd38","type":"tab","label":"Multiple buttons","disabled":false,"info":""},{"id":"70d723e8.c70c5c","type":"template","z":"6ac2866a.dfbd38","name":"HTM…

I think you are getting there. The update you have looks much nicer than before. I am lazy too and had trouble finding information. This forum is amazing and can get feedback very quickly. Andrei's CSS styling looks nice :grin:

Yes, you're right, Andrei's CSS is great! I will use it as a basis for my further experiments. Now that the basics are working I'm searching for a way to make the layout look like the built-in dashboard nodes. Something like "inheriting" the layout of the dashboard, i.e. the theme. It would also be…

Node-RED

Node-RED Forum

Creating a UI with multiple buttons

Developing Nodes

Andrei 4 March 2021 10:57 12

My advice is to have a look on the linked thread below. It is my reference when it comes to using CSS in the dashboard. Also you may want to learn about CSS variables that is another easy to use but powerful resource.

Topic		Replies	Views
Can the ui_button be modify with CSS Dashboard	5	3598	20 July 2018
Send Message to one specific ui object Dashboard	18	517	11 April 2021
How to change the buttons in dashboard Dashboard	5	1119	8 September 2022
Q: Tiles type panels Dashboard	13	1087	20 November 2020
:paintbrush: Customize dashboard CSS Dashboard	16	37745	20 April 2020

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Creating a UI with multiple buttons

Related topics