UI-gauge layout for phone

Dashboard
,
21

That is the same as my One Plus Nord 2T, which is ok.

Have you got any CSS overrides in ui-template nodes?

22

I have a template with CSS for some buttons I use.

23

Temporarily disable the template node, just in case that is related.

24

Made no difference

25

What is the device pixel ratio of the phone? You can find out by browsing to What’s My Device Pixel Ratio?

Mine is 3 which means that the screen is 1080/3=390 px wide as far as the browser is concerned.

26

I have a Motorola and a Samsung phone and both have ratio of 3. Both do the fold over thing

27

So that does not explain it either then.

28

So just to be sure... with group size 6x1 and widget size 2x1 you can see 3 gauges horizontally across the narrow/portrait screen.
If so tomorrow I will do a complete new install of DB2 and just a bare page with 3 gauges.

29

Yes. 3 off 2x1 across the screen

30

Oh, it is my system which is behaving differently, not yours. On a virgin system I see the same as you. I will work out what the difference between that and my normal system.

31

Aargh, I am stupid. I have a CSS override to stop the dashboard from limiting the number of columns to three on mobile, setting it to 6 instead. In my opinion the setting provided as standard is not ideal, for me at least.

Import this and try again.

[{"id":"edb7f91b04b8cc2a","type":"ui-template","z":"8df2df24f6899dee","group":"","page":"","ui":"ID-BASE-1","name":"Stop groups being clamped to three wide on mobile","order":0,"width":0,"height":0,"head":"","format":"/* Stop groups being clamped to three wide on mobile*/\n@media only screen and (max-width: 576px) { \n     .nrdb-layout--flex { \n         --layout-columns: 6 !important; \n     } \n } ","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":390,"y":120,"wires":[[]]},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"]}]
32

OK that appears to be working now. Does this affect the behaviour of the native widgets as well, ie
3 across the screen.

33

Yes, it tells the dashboard to allow a total width of 6 across the screen.

@joepavitt I don't understand the logic in limiting the columns to 3 when the width is less than 576, which prevents layouts such as this, with three 2x1 widgets across a mobile screen with a width of 340.

34

Because that's how we handle responsiveness - it means that widgets across the board handle themselves far better on mobile. If we allow "6" width, then having 3 gauges side-by-side at that screen resolution would render them unreadable.

It is possible to override the number of columns with CSS, but I think it'll be a good move to also allow configuration of this column count as part of the theme too.

35

I wasn't able to use 3 native gauges side by side at all. It seems that the font size does not scale.

36

This is a screenshot of 3 off size 2x1 gauges side by side on my phone, with the css override to set it to 6 columns. The text is small but it is still usable as the critical thing is the needle position.

Screenshot_2024-08-20-09-15-18-98_40deb401b9ffe8e1df2f1cc5ba480b12
Screenshot_2024-08-20-09-15-18-98_40deb401b9ffe8e1df2f1cc5ba480b121080×2400 162 KB

37

This is correct - we are short on the native gauge supporting the smaller render size currently - although not sure anyone has opened an issue about it yet - if you could do the honours, it would be appreciated: Issues ¡ FlowFuse/node-red-dashboard ¡ GitHub

38

Screenshot_20240820_111710_Chrome
Screenshot_20240820_111710_Chrome1080×2400 228 KB

This is one of my layouts in DB1 with 15 interactive swtches and 9 very easy to read gauges. I can't seem to achieve anything like that in DB2. When does db1 become deprecated and will it be a problem if i stick with it?
Thanks

39

Yes, I think so.

@muggins if you change the CSS in the ui-template I posted to

/* Stop groups being clamped to three wide on mobile*/
@media only screen and (max-width: 576px) { 
    /* Fixed layout */
    .nrdb-layout--flex { 
         --layout-columns: 6 !important; 
     }
    /* Grid layout */
    .nrdb-layout--grid { 
         --layout-columns: 6 !important; 
     } 
 }

Then it should also work for Grid layout, which may be better for you. Basically what it is saying is that if the screen width is small then set the number of columns to 6, so that with a group width of 6 then it fits the group to the screen whatever size it is.

40

Thank you Colin. That behaves much better now. It would seem that I am one of the very few who view and use Dasboard on their phone. Much appreciate your help.
John