Ui-button size in DB2 question

[Mrb32]

Hi All,

Does anyone know whether it is possible to set a 1x1 size for ui-button in dashboard-2?
Setting the size to this value in the properties produces a 2x1 button on the dashboard for me.

Thanks for letting me know...

[hotNipi]

Here's one of discussions about the shape of the button

The shape of a button

Here are a few buttons, 3 with default styling and 3 with border-radius: 50% and colour changes. The button label shows what size it is - 1x1, 2x1 or 2x4. [image] Perhaps foolishly, I expected a 1x1 or 2x2 button to be square, but it's rectangular. Why? Is there a way to configure the template so they will become square? If I try to make a button square by specifying 2 wide and 4 tall, it becomes almost square. Just sufficiently not square so that it looks wrong. On my browser, full screen …

[Mrb32]

Thanks for the link.

That's the current arrangement I have in DB1.

This is a group, with 8 widgets (4x ui-button, 2x ui-text, 2x ui-led) all sized at 1X1.

Based on the discussion, it looks like I cannot replicate this layout in DB2, correct?

I have seen we have a button group widget in DB2, which is closer, but I think requires a rewrite of the underlying flow, which I'd obviously like to avoid. I have over 40 of the suckers

[Colin]

Have you set the group width to two?

What does it look like?

[jbudd]

I think that you can more or less replicate that layout using dashboard 2 button, led and text widgets and without any custom CSS

If your buttons need to be square, there are some examples at DB2 experiments on styling buttons

I only briefly looked at the DB2 LED widget @flowfuse/node-red-dashboard-2-ui-led and decided to use a ui-template instead. This is described at Interactive template LED designer.
Unfortunately I didn't include options for LED placement in that demo.
The basic LED widget has been enhanced since then; it looks somewhat better now.

@Mrb32

requires a rewrite of the underlying flow

Some degree of rewriting is probably inevitable for migrating to DB2.

@Mrb32

I have over 40 of the suckers

Maybe your best approach is to shun the default widgets and use a ui-template with text, buttons & LED elements and copy it 40 times

[Mrb32]

Thanks for the suggestions.

I had got as far as achieving the same layout as in your example, but I do need the stuff to be 1x1, so I can fit 10 groups in a row across the width of the dashboard on my iPad screen.

Of course, I am expecting an amount of work to be needed to migrate, just not a complete "rewrite". Rewrite is in quotes, because I cannot code, and do everything by connecting nodes/widgets and setting properties.

Styling or the use of Ui-template for the core feature of my dashboard is unfortunately out of my reach.

Thanks again for the input, I shall struggle on and try and find so form of workaround, it is still very early days on dashboard 2 for me, I need to get more familiar with it before choosing a path.

[Colin]

@Mrb32

so I can fit 10 groups in a row across the width of the dashboard on my iPad screen.

That is a completely different issue. Edit the Page Settings for that page, check the Layout is set to Grid, and set the number of columns to 20 for all screen sizes. Then it should fit 10 groups of width two across the display.

[Mrb32]

Thanks! One step in the right direction