[FR] UI/Dashboard settings for UltraWide displays

[srbjessen]

Is your feature request related to a problem? Please describe.
There's a lot of empty space on the sides when using my Ultrawide screen.

Describe the solution you'd like
A fourth column option would be nice to have, as I'm struggling to keep everything on one level, to avoid too much scrolling.
Maybe even the option to adjust the height and width of panels.
At least for the temp-chart, as I've seen a few requests for more details on the temperature variations to tune heating better. Being able to make the temp-panel taller, would automatically enlarge the chart making variations more visible.

Additional context
Just to show empty space on ultrawide displays

[kubik369]

I am all for this idea, as it should be simple to implement, but realistically, do you use your browser with a maximised window? I don't think I have ever done that in my 6 years of working exclusively on ultrawide monitors 😄

[srbjessen]

I do, or I wouldn't have asked ;-)
Like I also write, it would allow to show more panels without having to scroll.
Besides, Mainsail isn't the only website I view while having my browser at full screen. Some web source codes are also best viewed at full width, as the indentations can be quite immense.
But I suspect, as you also write, that it would be an "easy" implementation, though I'm no expert.

[ghost]

First off: This is a problem not exclusive to ultrawides. a 16:9 1440p monitor is the same pixel width as a 1080p ultrawide and has the same problems.

it should be simple to implement

Sadly, it kinda isn't. I messed with this a bit and it's tricky to keep this comment short so TL;DR google says to treat all monitors wider than 1440px, just like 1440px and mainsail does it the google way.

To vuetify's credit, 4 columns is a snap, it took mere minutes for a rough sketch of it. I sketched up a few other ideas which also made better use of screen space. But I had to mangle it to handle the display width properly, allowing these layouts to be used on various desktop sizes, and that kind of hack can't go into production.

So, in a nutshell, the problem isn't making the layout, the problem is switching to it (or not). We have 4 breakpoints, currently occupied by phone, tablet, desktop, and widescreen, and a possible future one which could take care of larger screens, but it just isn't enough by half, to accommodate modern desktops, and that's by design. I'm sure there are many ways around it, but my point is that it isn't as simple as one might expect.

If anyone has a concept for this which they'd like me to put a little time into trying out, let me know.

[kaivalagi]

I have similar issues in general with screen layout control etc but not from a large desktop position, but rather a small one, I am trying to make mainsail function on a smaller touch screen so it can be hosted, atleast for a monitoring/pause/cancel/stop function, on the Pi's touchscreen. I have it running through openbox/chromium in kiosk mode fine but need to be able to control the real estate use better.

To accommodate this scenario as well as the one above how about having a "custom always" mode that can be selected, this would allow to set the number of columns used, which column each widget goes, and then we would have full control over the rendered layout. Even better maybe have a match to resolution setting for a custom layout so if matching the screen resolution being rendered on it is used. If there was a configuration json file for setup of these additional dashboard configurations that would be enough.

I'm not privy to the vue / js world so much, more c# and more recently blazor/razor/maui, but I can help with time and effort if I could get some general pointers on approach etc...I do know javascript, it's more the framework and tooling I am unfamiliar with.

[meteyou]

@xcasxcursex i think you mixed up some thinks...

mainsail use vue as JS framework. this have nothing todo with googles material design. it only provides funcitonality in the background.

mainsail use vuetify.js as Vue component framework. this offers a lot of ui stuff in google material design preconfigured and styled.

but both have nothing todo with the FR itself or the questions from @kaivalagi.

[meteyou]

@kaivalagi to make customizable breakpoints will be a good solution for this FR. but i don't think it will help you in your use case. i think klipperscreen will be a better solution for your small display on your printer.

[kaivalagi]

thanks, I was half expecting the answer, I've used KlipperScreen prior to this post and it does the job fine yes, but I, or maybe my OCD haha, would prefer the use of the same UI theme as seen in mainsail, it just looks more polished that way. If only klipperscreen had a better way to manage layout...I guess I need to revisit it and see how I can rearrange things to my needs and maybe apply some styling to equal mainsail. Thanks for the reply and thanks for a great tool.

[meteyou]

@xcasxcursex I have now spent a lot of time rereading our last discussions. These were already over half a year ago. I can now also remember your suggestion. (which still does not seem plausible/feasible).

Your suggestion also doesn't have anything to do with this PR. This PR is about real ultra-wide screens with over 2k resolution horizontally. In this use-case comes the maximum container width into effect. This maximum container width ensures that the panel contents do not look torn/stretched.

Your request was for a different arrangement of panels within this system. so you should open a separate FR and not abuse this one. (If I fix this PR, your request is automatically closed.)

I still can't tell you why the virtual printer doesn't work for you, but it does for everyone else. Furthermore, the virtual printer is not a "mainsail dev environment" but only an additional tool if you don't have a printer available to test Mainsail. I only use it on the train or vacation and only have the MacBook available.

Furthermore, I want to reiterate that just because I don't believe it's possible doesn't mean you cannot work on it and create a PR. If it works well, I see no reason not to merge it. If not, maintain your fork of Mainsail. This project is all open-source, and you can do whatever you want.

FYI: I will ban you in GitHub and Discord if you write another hate post. I have already spent a whole evening trying to give you a sensible answer that I tried for days in Discord (half year ago). Currently, I don't need to be insulted by you in my free time.

[srbjessen]

@xcasxcursex First of all, @meteyou refers to "displays OVER 2000" not "exactly 2000".
My display is 3440x1440p, which is well over 2000 wide.
And secondly: a 1080p with 2000 (1920) width is not ultrawide, but 16:9. and actually only FullHD and not 2k as that requires 2048px width, but that's just nitpicking.
Ultrawide is USUALLY closer to 21:9.

It would be appreciated if my FR didn't become an arena for fights that are unrelated to current issue.
On top of that, regardless of name-calling and trash talk, The people working on mainsail deserves some respect and appreciation for all their hard work and countless unpaid hours, just so we can all have exactly the features we want, as long as they are feasible and realistic.

@meteyou
Without knowing much about the implications, I like @kaivalagi 's suggestion about a "custom" setup with: "Number of columns", maybe even "Number of rows".
Making column-content centered would also allow, for instance, a max width as you have now, so panels keep ratios and look, although that might result in a need for a fixed width, so they don't jump in-and-out in widths.

Keep up the good work ! 👍👍👍

[meteyou]

@srbjessen This is exactly my plan. I want to make this strict layout in the four viewports dynamic so that the user can define how many columns and what maximum width he wants. I still need to implement this.

[Kruppes]

@xcasxcursex your approach sound great. Unluckily I can’t find your fork or PR containing it. Is a personal discrepancy with @meteyou or the mainsail team really worth putting all that effort in this public rant? Wouldn’t the time and energy be better spent showcasing the result in your own fork? Please put the fight at rest and instead share the described solution with everyone looking for it.

[meteyou]

@xcasxcursex It is not against material design, but your solution will probably only work for precisely one setup. The panels' contents are so dynamic and individual that your solution will not work in general. But as long as I don't see a PR and can test it with different printers, I see it as "not solved"/"not possible".

Please give us all the chance to convince us of the opposite, or please leave us alone!

[srbjessen]

@xcasxcursex
Listen up snowflake.
You failed at keeping my FR clear of fighting even after accepting and promising.
You failed at not @ anyone in this Rant 2.0
You continue to moan and brag that nobody accepts you have a solution, even though you've proven it works, while failing to produce a single proof other than a thread more than half a year old. So far all I've seen is you saying "it's there, but my VM is down", "I have the evidence but wont provide it" and so on. Lots of claims, and constantly an excuse as to why you wont show it. If it's as easy as you say, create a PR that works, I'm sure everyone will be happy to have it merged. It would also be the ultimate way to show you were right all along.
Even when asked for it you would rather return to namecalling and foul language instead of being a grown-up.
2 things to remember:

There's always 3 versions of the truth:

1. Your version
2. His version
3. The actual truth

And
Just because you are offended, it doesn't mean you are right.

Perception is very individual, so what you see as logical and true, isn't necessarily the way that everyone else sees it. That's where maturity and common sense should tell you to explain it and show people why you perceive the world the way you do.
When you persist to display the maturity of a teenager, that's all people will ever see.
Take the higher road, show us that your claims are real.

"You had your chances to benefit......" is an easy way to turn the discussion from whether or not you actually have a solution, over to being about how unfair you've been treated, again without providing a single thread of evidence that your claims are real.

Again; I would appreciate that this FR is no longer treated as a battleground, but is actually used to bring us all closer to a solution that a few people have expressed desire for, and that Mainsail-crew has expressed desire to merge/implement, as soon as there's a valid solution before them.

Once more I urge you: Take the higher road and prove us wrong. I love being wrong in this type of cases. Namecalling and being offended will never prove you are right, it will only make us doubt that you ever had the solution. And again; I WOULD LOVE TO SEE A SOLUTION, so show us that you have it. We will all welcome it with open arms.

[sammcj]

I agree this is definitely needed and not even on ultrawide displays but common ratios as well.

I'm a standard 32" 4K monitor and the columns are all squished in very small - a lot of wasted screen real estate and it means you have to scroll for console output.

[meteyou]

I agree this is definitely needed and not even on ultrawide displays but common ratios as well.

I'm a standard 32" 4K monitor and the columns are all squished in very small - a lot of wasted screen real estate and it means you have to scroll for console output.

Adding more columns would not fit for you. All panels are visible on your screen. Just make panels wider would only waste space, nothing more.

FYI: just change the height of your console in the settings, if you want more space in it.

[sammcj]

Just make panels wider would only waste space, nothing more.

No that's not the case.

If I override the CSS manually it looks much better and makes use of the correct screen size:

#page-container {
	max-width: 2600px;
}

FYI: just change the height of your console in the settings, if you want more space in it.

I want to make the console larger than this - not smaller.

[sammcj]

If not updated to make more use of the unused space - it should at least be configurable by the user.

[meteyou]

Just make panels wider would only waste space, nothing more.

No that's not the case.

If I override the CSS manually it looks much better and makes use of the correct screen size:

#page-container {
	max-width: 2600px;
}

FYI: just change the height of your console in the settings, if you want more space in it.

I want to make the console larger than this - not smaller.

This only stretch the content of the panels. Nothing more. So you don't have better use space with it. All need the same height. This is useless in mind of better space using.

Entries in the console are mostly very short. If you change the width of it, you have only not used space in the console instead of besides the console
If you change the height in the settings, you can see more lines and have less to scroll.

[sammcj]

I'm assuming you must have a tiny screen or a very low resolution because it looks so weird with it all suck in the middle.

[meteyou]

I'm assuming you must have a tiny screen or a very low resolution because it looks so weird with it all suck in the middle.

i use a LG 38wn95c-w. this is a 38" ultrawide screen with 4k resolution in width. but as i said. just make panels wider is not the solution. it only stretches the content of the panel with no positive points.

[sammcj]

Other than making it look better and take up less vertical space...

[meteyou]

Other than making it look better and take up less vertical space...

It looks much worse when you look inside the panel. For example, this:

This is only a useless space inside the panel. So as I said, there are better solutions than just making it all wider.

But herewith, I give up this FR and hope someday, and there will be a contributor who will take over this one. I no longer like to have the pointless discussions that usually occur here besides the actual FR and concentrate on more important things.

[h3rm]

it would be cool if /assets/index-02519ded.css in mainsale/files wouldn't have this row:

#page-container {
max-width:1800px

Without manipulating the css no horizontal scrolling is possible & there is no horizontal scroll bar (tested with 2 screens -> 2560x1440 and 3440x1440):

with "max-width" commented out in the css it looks much better because suddenly there are >15 columns visible instead of <10 :) :

can you please adapt the css? maybe the better solution than deactivating "max-width" would be a horizontal scroll bar in mainsale/files :)

[update]: i commented out (only the row -> # max-width:1800px) via ssh (/home/pi/mainsail/assets/index-02519ded.css ) as a workaround for this problem. Maybe it's gone after the next update but for now it's ok

[JoeDante]

Please add a fourth column for the dashboard, just like Fluidd does.
Three columns really look ugly on a big widescreen monitor!

[meteyou]

@JoeDante #583 (comment)

[meteyou]

I’ve decided to lock this feature request to prevent further unnecessary noise. My mental health is more important than this.

This feature request is open to any contributor who wants to implement it. If a complete solution is provided, I’ll gladly merge it. However, as I’ve wrote multiple times here (feel free to scroll up and expand all comments, nothing has been deleted to my knowledge), I will not dedicate any more of my energy to this.

I’m sorry to anyone who intended to contribute meaningful content here.