The shape of a button

Dashboard
21

I have not posted any dashboard 2 code. Yet.

The code I posted was for dashboard 1, the button I am trying to migrate to the new dashboard.

I have made some progress - I can now style a DB2 button so that it stays round (or square) as the browser window changes size. Fixed size though.

And, briefly and tantalisingly, a round button that both scaled and stayed round at different resolutions. It looked horrible though and in attempting to improve it I broke it.

Perhaps in the new day I'll be able to post these.

22

From my previous example, to make the button consistently round:

.square {
    width: var(--sq, 5em);
    height: var(--sq, 5em);
    border-radius: var(--sq, 5em);
}

The border radius needs to be the same as the width & height.

23

Replica based on your image.

[{"id":"26226084d8643fce","type":"ui-button","z":"08cec6dca3b7191e","group":"ca22afd36f4e1904","name":"","label":"","order":1,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"round-button power-button","icon":"power mdi-36px","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"#e7e7e7","textColor":"","iconColor":"gray","x":790,"y":540,"wires":[[]]},{"id":"5a6d5e44e99eaf9d","type":"ui-template","z":"08cec6dca3b7191e","group":"","page":"","ui":"538ceff32af2078f","name":"","order":0,"width":0,"height":0,"head":"","format":".square-button, .round-button{\n    aspect-ratio: 1;   \n    width: var(--widget-row-height);\n}\n.round-button button{\n    border-radius:var(--widget-row-height);    \n}\n.power-button button{\n    border: 2px solid #858585;\n}\n.power-button button .v-icon{    \n    filter: drop-shadow(0px 0px 1px black);\n}\n.power-button.on button .v-icon{\n    color:rgb(19, 189, 19);\n}\n.power-button.off button .v-icon{\n    color:rgb(248, 53, 53);\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":800,"y":500,"wires":[[]]},{"id":"7bc92efc8a4cfbab","type":"inject","z":"08cec6dca3b7191e","name":"on","props":[{"p":"class","v":"on","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":550,"y":540,"wires":[["26226084d8643fce"]]},{"id":"33cf8bc18ad7ac24","type":"inject","z":"08cec6dca3b7191e","name":"off","props":[{"p":"class","v":"off","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":550,"y":580,"wires":[["26226084d8643fce"]]},{"id":"ca22afd36f4e1904","type":"ui-group","name":"G3","page":"ce26d025b6983eb8","width":"6","height":"1","order":1,"showTitle":true,"className":"special-grid","visible":"true","disabled":"false"},{"id":"538ceff32af2078f","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"ce26d025b6983eb8","type":"ui-page","name":"Page 1","ui":"538ceff32af2078f","path":"/page1","icon":"home","layout":"grid","theme":"69a62bf96d1279fd","order":1,"className":"","visible":"true","disabled":"false"},{"id":"69a62bf96d1279fd","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#1c1c1c","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

image

1 Like
24

My best efforts with DB2: a round button with a fixed size and an oval "pill" button that is responsive.
firefox_oMdqvULJJi

image
image720×230 19.1 KB

[{"id":"bd54913827144c1e","type":"ui-button","z":"69594495cf1ea8a1","group":"97fe32d54dfd638a","name":"Round, fixed","label":"","order":1,"width":"2","height":"2","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"round","icon":"power","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"#fff","textColor":"","iconColor":"","x":150,"y":180,"wires":[["69bc3449af677fe2"]]},{"id":"3ff699673ad11a6b","type":"ui-template","z":"69594495cf1ea8a1","page":"dd9e211ef4e39083","name":"","order":0,"width":0,"height":0,"head":"","format":".round i, .pill i {\ntext-shadow:\n-1px -1px 1px #444444,\n1px -1px 1px #444444,\n-1px 1px 1px #444444,\n1px 1px 1px #444444,\n0px 0px 10px #888888;\n}\n\n.round button {\n    font-size: 3em;\n    border-radius: 50%;\n    min-height: 6rem;\n    max-height: 6rem;\n    min-width: 6rem;\n    max-width: 6rem;\n    border: 3px solid #888888;\n    box-shadow: inset rgba(20, 70, 85, 0.7) 0px 0px 20px -10px;\n}\n\n.pill button {\n    font-size: 4vw;\n    border-radius: 5rem;\n    background-color:white;\n    border: 3px solid #888888;\n    box-shadow: inset rgba(20, 70, 85, 0.7) 0px 0px 20px -10px;\n}\n","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":150,"y":120,"wires":[[]]},{"id":"a4a5c7edbcbc8a80","type":"ui-button","z":"69594495cf1ea8a1","group":"97fe32d54dfd638a","name":"Oval, Responsive","label":"","order":2,"width":"3","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"pill","icon":"power","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":430,"y":180,"wires":[["014e9f063e8532d5"]]},{"id":"69bc3449af677fe2","type":"function","z":"69594495cf1ea8a1","name":"Change foreground","func":"let color = context.get(\"roundbuttoncolor\") || \"white\"\nif (color === \"white\") {\n    color = \"red\"\n}\nelse {\n    color = \"white\"\n}\nmsg.ui_update = {}\nmsg.ui_update.iconColor = color \nmsg.ui_update.buttonColor = \"white\"\ncontext.set (\"roundbuttoncolor\", color)\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":170,"y":220,"wires":[["bd54913827144c1e"]]},{"id":"014e9f063e8532d5","type":"function","z":"69594495cf1ea8a1","name":"Change foreground","func":"let color = context.get(\"roundbuttoncolor\") || \"white\"\nif (color === \"white\") {\n    color = \"red\"\n}\nelse {\n    color = \"white\"\n}\nmsg.ui_update = {}\nmsg.ui_update.iconColor = color \nmsg.ui_update.buttonColor = \"white\"\ncontext.set (\"roundbuttoncolor\", color)\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":430,"y":220,"wires":[["a4a5c7edbcbc8a80"]]},{"id":"97fe32d54dfd638a","type":"ui-group","name":"Experiments","page":"dd9e211ef4e39083","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"dd9e211ef4e39083","type":"ui-page","name":"Experiments","ui":"d45641ed6d39fea1","path":"/page2","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","order":1,"className":"","visible":"true","disabled":"false"},{"id":"d45641ed6d39fea1","type":"ui-base","name":"This is my ui-base","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Basic Blue Theme","colors":{"surface":"#4d58ff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
1 Like
25

Playing with this, overriding the grid layout rules for the card content I realized that it is actually missing feature for dashboard. And it should be quite easy to achieve.

The missing bit is the freedom for user to create/manage layout inside card content. That was the way the DB1 gave control to user.

So here:

image
image700×247 19.1 KB

What if instead of class nrdb-layout-group--grid there will be nrdb-layout-group--free which doesn't have any layout rules and no inline styles applied. The user can write own layout rules without need to fight with default grid layout. It would be much easier to start from scratch.

I think (not tried) most widgets render at least something. And even if it takes to write some CSS for widgets inside user created layout - it is very natural thing.

@joepavitt to think about...

26

Thanks @hotNipi - it's something to consider, but with big plans on sizing changes and layouts coming, we'll put this on the back burner for now

2 Likes
27

Darn it! Do you realise the rabbit hole you sent me down! :grinning:

Latest versions - both square/rectange and circle/oval with easy overrides:

.square {
    --sq: 5em;
    width: var(--sqw, var(--sq));
    height: var(--sqh, var(--sq));
    border-radius: calc(var(--sq) * 0.1);
}
.round {
    --rad: 5em;
    width: var(--sqw, var(--rad));
    height: var(--sqh, var(--rad));
    border-radius: var(--sqr, var(--rad));
}

<button class="square" style="--sq: 10em;">Square dude!</button>
<button class="round" style="--rad: 10em;">Round dude!</button>

Change the shape simply by overriding one of the more detailed variables

<button class="square" style="--sq: 10em;--sqw: 20em;">Rectangle</button>
<button class="round" style="--rad: 10em;--sqw: 20em;">Oval</button>

I'd not gone quite as far with localising CSS variables previously so this has been a really useful learning exercise. They are far more powerful than they first appear.

28

Are these buttons in a template node?
It's a perfectly reasonable way to build a button, but my current interest is examples of what the basic button widget can do with a bit of CSS.

I like CSS variables too; have used them before but not exactly familiar with them.

Now then, while you are down that rabbit hole, consider some other shapes...

One of my attempts used clip path to display a circle which would remain circular at different resolutions.
It did scale but a border won't work on a clipped element.
In theory I should be able to use an ::after pseudo-element slightly smaller to get a border but I couldn't make it work.
https://www.geeksforgeeks.org/how-to-add-border-in-the-clip-path-polygon-using-css/

Then while browsing clip path polygon examples I remembered the 7500 Material Design icons. Some of them might make stylish buttons, not just as icons on a rectangular button but appearing as a button in the shape of the icon.
image

So an invisible button with a visible icon might be handy? Box shadows to give an LED kind of glow. Perhaps even a CSS transformation in response to a click.
Sounds possible?

29

They are pure HTML, you can use them in a template node or anywhere that accepts HTML. No frameworks harmed in the making of these examples. :wink:

But the concepts should be amenable to be included in D2 as well.

I've not really played with clip paths, a lot more complex and I've never needed to do that.

Personally, I would simply attach a click event to a span tag containing the icon. Really only quite large content is suitable for clipping except where you need a close wrap-around of text or an underlying image. They are no good at all for where users actually have to click things.

You could use a button (good for accessibility anyway) but make it transparent. Job done. By using an icon font or an SVG icon as the button content, you should be able to easily add a glow just to the icon.

With the caveats given, yes. Remember, keep it simple. You can add complexity later if really needed but it is hard to remove.

Of course, I don't really use D2 so I'll leave it to others to work out how to integrate to a D2 button widget. But, as I say, everything I've shown is pure HTML and CSS and so should certainly be applicable to D2. It's been a some time since I've needed to use VueJS or any other front-end framework. If I am going to do something interesting, I might as well use native HTML/CSS/JS since it will be applicable anywhere.

30

If you're looking at raw HTML/CSS solutions here, you could consider aspect-ratio (docs)

31

Not sure if that is addressed to me Joe.
If it is, thanks.

I briefly looked at aspect ratio but at the moment I am more interested in buttons that stay the same size in different window sizes.

32

Change your layout type to "Fixed". That used fixed px widths, rather than the "Grid" layout which is a % of the width.

33

I think "Fixed" or "Grid" applies to an entire page.

I welcome the idea of a responsive dashboard, eg graphs that fit the screen width.
But I might want a round or square button which retains it's proportions regardless.

(I have posted my solution to this in "Share your projects")

34

I strongly second the request for buttons that maintain shape!

I have been attempting off and on for several months now to migrate my old dashboard to the new dashboard and given up in frustration every time. Considering the unusability of it in my experience I still think I must be doing something wrong because otherwise I would expect there to be many more complaints, but posts like this seem to show that at least I am not the only one with issues.

Here is an example of what I would consider a very simple and basic user interface, the Roku player controls for our home AV system. Each button is set to 2x1 with a page width of 6 to get three buttons across. Here is a screen capture from my cell phone with original Dashboard

Screenshot_20240914-103140
Screenshot_20240914-1031401440×1734 117 KB

Here is the flow to replicate this GUI

[
    {
        "id": "593ebd100baea3c7",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 21,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "OFF",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "radio_button_unchecked",
        "payload": "/keypress/PowerOff",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 90,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "ab3543b316e8334d",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 16,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "BACK",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "reply",
        "payload": "/keypress/Back",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 90,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "9e6f9618812ffcf5",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 18,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "ON",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "radio_button_checked",
        "payload": "/keypress/PowerOn",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 510,
        "y": 60,
        "wires": [
            []
        ]
    },
    {
        "id": "648be3b4e09173b6",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 14,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "HOME",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "home",
        "payload": "/keypress/Home",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 510,
        "y": 120,
        "wires": [
            []
        ]
    },
    {
        "id": "e1b2acea8cb29174",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 2,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "UP",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_upwards",
        "payload": "/keypress/Up",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 310,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "544c1937b863d09f",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 4,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "LEFT",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_back",
        "payload": "/keypress/Left",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "683ce182debf0833",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 5,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "SELECT",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "keyboard_return",
        "payload": "/keypress/Select",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 300,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "e97ea8c12e7fb7c8",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 6,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "RIGHT",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_forward",
        "payload": "/keypress/Right",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 500,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "a4545830d3436195",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 8,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "DOWN",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_downward",
        "payload": "/keypress/Down",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 300,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "8a32238179234f29",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 10,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "REV",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_rewind",
        "payload": "/keypress/Rev",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 440,
        "wires": [
            []
        ]
    },
    {
        "id": "31bc3113197ad452",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 11,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "PLAY/PAUSE",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "play_arrow",
        "payload": "/keypress/Play",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 280,
        "y": 440,
        "wires": [
            []
        ]
    },
    {
        "id": "977fdfd08ce6951f",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 12,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "FWD",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_forward",
        "payload": "/keypress/Fwd",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 440,
        "wires": [
            []
        ]
    },
    {
        "id": "5ebe06f76faced10",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 17,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "VOL +",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "volume_up",
        "payload": "/keypress/VolumeUp",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 500,
        "wires": [
            []
        ]
    },
    {
        "id": "39b6903a6b162dc2",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 20,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "VOL -",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "volume_down",
        "payload": "/keypress/VolumeDown",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "9d049fc0eb5247a1",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 19,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "CH +",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_forward",
        "payload": "/keypress/ChannelUp",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 500,
        "wires": [
            []
        ]
    },
    {
        "id": "ded9cd2666f4c038",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 22,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "CH -",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_forward",
        "payload": "/keypress/ChannelDown",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "1c043e8fb8fad9b0",
        "type": "ui_button",
        "z": "bd2129ec9c4f07c9",
        "name": "",
        "group": "8ae79f9d18d98c01",
        "order": 15,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "MUTE",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "volume_off",
        "payload": "/keypress/VolumeMute",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 310,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "8ae79f9d18d98c01",
        "type": "ui_group",
        "name": "Roku",
        "tab": "eaa4b109b78a7786",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "eaa4b109b78a7786",
        "type": "ui_tab",
        "name": "AV Controls",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

And here is the results when I attempt to duplicate this in Dashboard 2.0. Each button is set to 2x1 with a page width of 6. As you can see the button width is not even close to 2x1 as set in the button nodes, and the user interface is all but worthless!

Screenshot_20240914-102548
Screenshot_20240914-1025481440×2856 90.4 KB

And the flow to replicate

[
    {
        "id": "9dd7b41ce0ec03fa",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "BACK",
        "order": 13,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "reply",
        "iconPosition": "left",
        "payload": "/keypress/Back",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "bd222b701778924c",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "OFF",
        "order": 17,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "radio_button_unchecked",
        "iconPosition": "left",
        "payload": "/keypress/PowerOff",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "785654d45f31e5d1",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "ON",
        "order": 2,
        "width": "2",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "radio_button_checked",
        "iconPosition": "left",
        "payload": "/keypress/PowerOn",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "x": 490,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "9582438227e5cd6b",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "HOME",
        "order": 11,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "home",
        "iconPosition": "left",
        "payload": "/keypress/Home",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "bc303a364dde909d",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "UP",
        "order": 18,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_upwards",
        "iconPosition": "left",
        "payload": "/keypress/Up",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 310,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "6ffb1903a343c911",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "RIGHT",
        "order": 14,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_forward",
        "iconPosition": "left",
        "payload": "/keypress/Right",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 500,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "72cd2544549a3ea1",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "LEFT",
        "order": 16,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_back",
        "iconPosition": "left",
        "payload": "/keypress/Left",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "c6255cbb6e53a879",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "SELECT",
        "order": 15,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "keyboard_return",
        "iconPosition": "left",
        "payload": "/keypress/Select",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 300,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "1ebcdbb37d4740e4",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "DOWN",
        "order": 12,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "arrow_downward",
        "iconPosition": "left",
        "payload": "/keypress/Down",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 300,
        "y": 420,
        "wires": [
            []
        ]
    },
    {
        "id": "f50379fd2aee223a",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "REV",
        "order": 10,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_rewind",
        "iconPosition": "left",
        "payload": "/keypress/Rev",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 70,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "0feedac8aea8ff3d",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "VOL +",
        "order": 3,
        "width": "2",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "volume_up",
        "iconPosition": "left",
        "payload": "/keypress/VolumeUp",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "x": 70,
        "y": 540,
        "wires": [
            []
        ]
    },
    {
        "id": "7cdef30e3c417fdf",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "VOL -",
        "order": 4,
        "width": "2",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "volume_down",
        "iconPosition": "left",
        "payload": "/keypress/VolumeDown",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "x": 70,
        "y": 600,
        "wires": [
            []
        ]
    },
    {
        "id": "de4c413a498c593c",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "MUTE",
        "order": 5,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "volume_off",
        "iconPosition": "left",
        "payload": "/keypress/VolumeMute",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 310,
        "y": 600,
        "wires": [
            []
        ]
    },
    {
        "id": "3290c691e7af60b2",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "PLAY/PAUSE",
        "order": 9,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "play_arrow",
        "iconPosition": "left",
        "payload": "/keypress/play",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 320,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "5645abc1ace41c70",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "FWD",
        "order": 8,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_forward",
        "iconPosition": "left",
        "payload": "/keypress/Fwd",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "6aba0a8f73239b5d",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "CH +",
        "order": 6,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_forward",
        "iconPosition": "left",
        "payload": "/keypress/ChannelUp",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 540,
        "wires": [
            []
        ]
    },
    {
        "id": "b3da0a7a2f82cfd4",
        "type": "ui-button",
        "z": "40738ae41d417799",
        "group": "67172933099081b6",
        "name": "",
        "label": "CH -",
        "order": 7,
        "width": "2",
        "height": "1",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fast_forward",
        "iconPosition": "left",
        "payload": "/keypress/ChannelDown",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 490,
        "y": 600,
        "wires": [
            []
        ]
    },
    {
        "id": "67172933099081b6",
        "type": "ui-group",
        "name": "Roku",
        "page": "e3a1a003d3c5fd05",
        "width": "6",
        "height": "10",
        "order": 3,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "e3a1a003d3c5fd05",
        "type": "ui-page",
        "name": "AV Controls",
        "ui": "e288362879756c05",
        "path": "/AV_Controls",
        "icon": "home",
        "layout": "grid",
        "theme": "e4e51d0dcd1c0e6d",
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "e288362879756c05",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "e4e51d0dcd1c0e6d",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

And here is the result when I change the layout from Grid to Fixed. It doesn't help.

Screenshot_20240914-104104
Screenshot_20240914-1041041439×2468 81.7 KB

35

Because of our responsiveness, we render 3 columns at mobile.

We haven't (yet) expoaed this as configurable. But I will accelerate this up the to-do list: Expose Mobile Columns in Layout Config · Issue #1291 · FlowFuse/node-red-dashboard · GitHub.

36

This is part of the plan in Overhaul group and widget sizing options · Issue #835 · FlowFuse/node-red-dashboard · GitHub

We will remove the sizing widget, and instead expose two inputs (one for width, and one for height), then you would choose "Columns", "px", "Fill Parent" or "Fit to Content" for each dimension. Giving complete control

37

Here's how it can be done with current state of the DB2. Who knows if it changes some day but yeh... Anyway - it is responsive and buttons stay in place even for mobile. Text still may not fit for longer words ..

[{"id":"9dd7b41ce0ec03fa","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"BACK","order":12,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c5 r6","icon":"reply","iconPosition":"left","payload":"/keypress/Back","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":610,"y":280,"wires":[[]]},{"id":"bd222b701778924c","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"OFF","order":16,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r8","icon":"radio_button_unchecked","iconPosition":"left","payload":"/keypress/PowerOff","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":430,"y":360,"wires":[[]]},{"id":"785654d45f31e5d1","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"ON","order":1,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r7","icon":"radio_button_checked","iconPosition":"left","payload":"/keypress/PowerOn","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":430,"y":320,"wires":[[]]},{"id":"9582438227e5cd6b","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"HOME","order":10,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c1 r6","icon":"home","iconPosition":"left","payload":"/keypress/Home","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":270,"y":280,"wires":[[]]},{"id":"bc303a364dde909d","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"UP","order":17,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r1","icon":"arrow_upwards","iconPosition":"left","payload":"/keypress/Up","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":430,"y":80,"wires":[[]]},{"id":"6ffb1903a343c911","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"RIGHT","order":13,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c5 r2","icon":"arrow_forward","iconPosition":"left","payload":"/keypress/Right","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":620,"y":120,"wires":[[]]},{"id":"72cd2544549a3ea1","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"LEFT","order":15,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c1 r2","icon":"arrow_back","iconPosition":"left","payload":"/keypress/Left","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":270,"y":120,"wires":[[]]},{"id":"c6255cbb6e53a879","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"SELECT","order":14,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r2","icon":"keyboard_return","iconPosition":"left","payload":"/keypress/Select","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":440,"y":120,"wires":[[]]},{"id":"1ebcdbb37d4740e4","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"DOWN","order":11,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r3","icon":"arrow_downward","iconPosition":"left","payload":"/keypress/Down","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":440,"y":160,"wires":[[]]},{"id":"f50379fd2aee223a","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"REV","order":9,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c1 r4","icon":"fast_rewind","iconPosition":"left","payload":"/keypress/Rev","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":270,"y":200,"wires":[[]]},{"id":"0feedac8aea8ff3d","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"VOL +","order":2,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c1 r7","icon":"volume_up","iconPosition":"left","payload":"/keypress/VolumeUp","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":270,"y":320,"wires":[[]]},{"id":"7cdef30e3c417fdf","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"VOL -","order":3,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c1 r8","icon":"volume_down","iconPosition":"left","payload":"/keypress/VolumeDown","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":270,"y":360,"wires":[[]]},{"id":"de4c413a498c593c","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"MUTE","order":4,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r6","icon":"volume_off","iconPosition":"left","payload":"/keypress/VolumeMute","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":430,"y":280,"wires":[[]]},{"id":"3290c691e7af60b2","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"PLAY/PAUSE","order":8,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c3 r4","icon":"play_arrow","iconPosition":"left","payload":"/keypress/play","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":440,"y":200,"wires":[[]]},{"id":"5645abc1ace41c70","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"FWD","order":7,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c5 r4","icon":"fast_forward","iconPosition":"left","payload":"/keypress/Fwd","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":610,"y":200,"wires":[[]]},{"id":"6aba0a8f73239b5d","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"CH +","order":5,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c5 r7","icon":"fast_forward","iconPosition":"left","payload":"/keypress/ChannelUp","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":610,"y":320,"wires":[[]]},{"id":"b3da0a7a2f82cfd4","type":"ui-button","z":"fcc7b2a2fdda30d4","group":"67172933099081b6","name":"","label":"CH -","order":6,"width":"2","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"cr c5 r8","icon":"fast_forward","iconPosition":"left","payload":"/keypress/ChannelDown","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":610,"y":360,"wires":[[]]},{"id":"9b1de296f3d53a64","type":"ui-template","z":"fcc7b2a2fdda30d4","group":"","page":"","ui":"f6017d9b9437205e","name":"","order":0,"width":0,"height":0,"head":"","format":"\n.c1 {\n    grid-column:1/3 !important;\n}\n.c3 {\n    grid-column: 3/5 !important;\n}\n.c5 {\n    grid-column: 5/7 !important;\n}\n@media only screen and (max-width: 576px) {\n    .c1 {\n    grid-column:1/2 !important;\n}\n.c3 {\n    grid-column: 2/3 !important;\n}\n.c5 {\n    grid-column: 3/4 !important;\n}\n}\n.r1 {\n    grid-row: 1 !important;\n}\n.r2 {\n    grid-row: 2 !important;\n}\n.r3 {\n    grid-row: 3 !important;\n}\n.r4 {\n    grid-row: 4 !important;\n}\n.r5 {\n    grid-row: 5 !important;\n}\n.r6 {\n    grid-row: 6 !important;\n}\n.r7 {\n    grid-row: 7 !important;\n}\n.r8 {\n    grid-row: 8 !important;\n}\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":420,"y":480,"wires":[[]]},{"id":"67172933099081b6","type":"ui-group","name":"Roku","page":"e3a1a003d3c5fd05","width":"6","height":"8","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"f6017d9b9437205e","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"e3a1a003d3c5fd05","type":"ui-page","name":"AV Controls","ui":"f6017d9b9437205e","path":"/AV_Controls","icon":"home","layout":"grid","theme":"e4e51d0dcd1c0e6d","order":2,"className":"","visible":"true","disabled":"false"},{"id":"e4e51d0dcd1c0e6d","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

You also need to change your icons. DB 2 uses material design icons so find those from here: Material Design Icons - Icon Library - Pictogrammers

image
image424×585 7.41 KB

Can explain everything, just ask specific questions..

38

As someone who works with compact user interfaces for control systems on a regular basis as part of my day job I would suggest going with 6 wide for mobile if a specific set of columns needs to be defined.

This allows full width, 1/2 width, and 1/3 width rectangular items as well as 1/6 width square items. In my experience having buttons wider than they are tall is generally helpful because labels require extra width, and making them square uses too much vertical screen real estate.

1 Like
39

This was the original default, and we had too many complaints about widgets (sized 1 and 2, and particularly charts/gauges) rendering too small, so we modified it.

It'll be a fairly quick win to add this into a configuration, so i think we'll aim for that ASAP

40

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.