Creating a UI with multiple buttons

[Simon01011]

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 the button that was pressed. So the fundamentals are so far working. What is not as expected is the look of the UI, so my questions are:

1. How can I use a button that looks the way a normal button would do? Do I have to write all the class and style attributes in my button inside my HTML function by hand? Or is there a way to use the global theme?
2. How can I control the position of my buttons? Do I have to write something like the "md-card" elements by hand?

The image shows the input box from "mylittleuinode", my first button and a second one styled with class='md-raised md-button md-ink-ripple

Any help is highly appreciated!

Simon

[Simon01011]

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

[davidz]

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

[Simon01011]

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

The corresponding flow is (using Homematic IP switches)

The idea was to create a ui to encapsulate the 7 buttons for three reasons:

1. I think it would be nice to have one node (of fixed size 6x4) to create the buttons, the return value would be the desired height of the shutters in e.g. percent.
2. I'm lazy, every time I implement a new shutter I have to copy the flow and change the group of all buttons separately. I could do that only once for the new ui node then.
3. And last but not least I want to learn something new

All this said I tried to start this project, but have problems because there is almost no example to follow. If someone has a good example/tutorial/howto to start with I would be glad!

[Paul-Reed]

@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 ideas to consider.

[Andrei]

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

In such case an alternative to explore is using a dashboard template node configuring buttons with CSS Grid. CSS Grid is quite powerful and may produce astonishing results with almost no effort. There are some nice tutorials out there (here is one) on how to create calculators with CSS Grid. That would be a good starting point.

[Simon01011]

Hi Paul!

@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 every time I try it seems I'm missing the slider pin. The the roller shutter starts for a second and moves one centimeter...

@Paul-Reed

You could also use this example to simulate how the blinds would look....

I did, but my wife didn't want it that way, see [HELP wanted] A Linear Level Indicator - #49 by Simon01011

[Simon01011]

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

[Andrei]

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.

[{"id":"6ac2866a.dfbd38","type":"tab","label":"Multiple buttons","disabled":false,"info":""},{"id":"70d723e8.c70c5c","type":"template","z":"6ac2866a.dfbd38","name":"HTML and CSS ","field":"template","fieldType":"msg","format":"handlebars","syntax":"plain","template":"\n<head>\n    <title>Multi Button</title>\n\n<style>\n\n.grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: 1fr 1fr 1fr 1fr ;\n}\n\n\n.grid > div {\n    text-align: center;\n    font-weight: bold;\n}\n\n.back {\n  width: 360px;\n  margin: 0 auto;\n  padding: 20px;\n  border-radius: 20px;\n  border: 4px solid #000;\n  background-color: orange;\n}\n\n.button {\n\n  line-height: 65px;\n  margin: 3px;\n  padding: 0px;\n  text-align: center;\n  border-radius: 5px;\n  border: 3px solid white;\n  color: white;\n  background-color: grey;\n  font-family: Monospace;\n  font-size: 22px;\n  font-weight: bold;\n}\n\n\n\n\n.b1 {\n     grid-row: 1;\n     grid-column: 1;\n}\n\n.b2 {\n     grid-row: 1;\n     grid-column: 2;\n}\n\n\n.b3 {\n     grid-row: 2 / 4;\n     grid-column: 1;\n}\n\n.b4 {\n     grid-row: 2;\n     grid-column: 2;\n    }\n\n.b5 {\n     grid-row: 3;\n     grid-column: 2;\n}\n\n.b6 {\n     grid-row: 4;\n     grid-column: 1;\n    }\n\n.b7 {\n     grid-row: 4;\n     grid-column: 2;\n}\n\n\n</style>\n\n</head>\n\n\n<body>\n    <div class=\"back\">\n        <div class=\"grid\">\n            <div class=\"button b1\" ng-click=\"send({payload: 'b1'})\">^</div> \n            <div class=\"button b2\" ng-click=\"send({payload: 'b2'})\">80%</div> \n            <div class=\"button b3\" ng-click=\"send({payload: 'b3'})\">###</div> \n            <div class=\"button b4\" ng-click=\"send({payload: 'b4'})\">60%</div> \n            <div class=\"button b5\" ng-click=\"send({payload: 'b5'})\">40%</div> \n            <div class=\"button b6\" ng-click=\"send({payload: 'b6'})\">+</div> \n            <div class=\"button b7\" ng-click=\"send({payload: 'b7'})\">20%</div> \n        </div>\n    </div>\n\n</body>\n","output":"str","x":440,"y":260,"wires":[["e71df6f6.c25bd8"]]},{"id":"ec9e27ed.2a80c8","type":"inject","z":"6ac2866a.dfbd38","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":237.09999084472656,"y":260,"wires":[["70d723e8.c70c5c"]]},{"id":"e71df6f6.c25bd8","type":"ui_template","z":"6ac2866a.dfbd38","group":"816273f1.203f5","name":"Multiple Buttons","order":0,"width":"8","height":"8","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":680.1000518798828,"y":259.9999990463257,"wires":[["3cbc88af.6607c8"]]},{"id":"3cbc88af.6607c8","type":"debug","z":"6ac2866a.dfbd38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":840,"y":260,"wires":[]},{"id":"816273f1.203f5","type":"ui_group","z":"","name":"Flow 1","tab":"4fa0e799.30b058","order":2,"disp":true,"width":"12","collapse":false},{"id":"4fa0e799.30b058","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]

[davidz]

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

[Simon01011]

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 good to use the configuration of e.g. the widget sizes from the node red dashboard configuration. Does anybody have an advice on that?

[Andrei]

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.

Customize dashboard CSS

Couple of things first.. Many things can happen if you start to play with CSS. You may break whole thing, but you can make your page really good looking. But be aware that it can be addictive. The result of your adjustments is art. So if you are changing CSS for your dashboard, you are an artist. (and a little bit a programmer of course) I'm not an expert of art nor the CSS. The tools Browser developer tools. https://developers.google.com/web/tools/chrome-devtools/css The main too…

[Simon01011]

Looks like a topic not to be fully understood in a few hours on a quiet weekend. Maybe something for the next holiday (or two)
But thank you for pointing me to this thread, I didn't find it despite searching