Temperature Tab squished...

[ghost]

Set everything up, considering I've only been messing with a pi and linux based stuff for a day or two... only had a couple of brain farts which confused me for a while until I figured it out!

I've spent a good while messing around with various framebuffer/hdmi etc settings to get the best combination I can on the display and webcam etc...

Everything is great except the Temperature Graph and Target Temp display are squished into the top half of the display area, I can't work out if it's something I've messed up due to the way I set the display up or something else?

[ghost]

Ok, I think I've worked out how to add a custom less file...

/home/pi/custom.less

Nothing working though....

Stumped...

[ghost]

ok, no idea if I'm doing this right but...

1. Copied touchui.bundled.less to /home/pi/custom.less
2. Modified min and max height for #temp and #temperature-graph
3. Working on getting the canvas/grid, I think its referred as... to sit correctly...

Is this how it's meant to be done or is there another/easier way its supposed to be done?

[ghost]

Finally figured it out...

Although someone on the octoprint forum just explained the @media query to me, I think that was the reason for all the problems in the first place...

Will edit afew lines and see if it was the root cause all along!?!

[CTcartesian3D]

Nope... definitely something wrong somewhere.... Worked ok then touchui seems to decide it doesn't want to take a blind bit of notice of any settings and goes back to displaying the graph as small and as squished as before!?!

Hope ya back soon Paul... driving me nutz!?!

[CTcartesian3D]

ok... heres what I got... not sure its the right way... but it seems to be solving the issue.

I'm using @media queries one each for #temp and #temperature-graph...

@media (min-width: 700px) {
height: 390px;
}
@media (min-height: 700px) {
height: 390px;
}

Been reading up on this and it seems to be used alot to query screen resolution widths to determine how things are displayed regarding sizing etc?

320px
414px
703px
768px

Wondering if this method would be a better/cleaner solution than whats there... particularly the min and max heights under #temp ... just a thought I had while reading up on it.

#temp {
margin-left: -@main-gutter;
margin-right: -@main-gutter;
overflow: hidden;
> div:first-child {
.box-sizing(border-box);
overflow: hidden;
width: 100%;
height: 60vh;
max-height: 300px;
min-height: 140px;
@media (min-width: 1000px) {
min-height: 390px;
}
padding: 0 @main-gutter;
margin: 0 0 @main-gutter;
#temperature-graph {
.box-sizing(border-box);
position: relative;
background-position: center 37%;
background-repeat: no-repeat;
background-size: auto 80%;
height: 108%;
max-height: 320px;
width: auto;
margin: 0;
@media (max-height: 400px) {
height: 110%;
}
@media (max-height: 300px) {
height: 112%;
}
@media (min-height: 700px) {
max-height: 390px;
}

Not sure if the placement/values are right but its working... will carry on tinkering with it.

[BillyBlaze]

Thanks for reporting and both your workarounds was on the right track.

I have removed all the media queries and set the max-height to none, this way the height: 60vh; can take over and that will always consume 60% of the total viewport.

I will release this in the next version.

[CTcartesian3D]

I'll try it on mine and see how it goes...

The only way I could get the temp graph (Canvas?) to sit correctly with the temp legends sitting on the outside of the graph correctly was to change the width to auto instead of 100%... Is this still the case or can I put it back to 100%??

[StefanMeGit]

Is there now any finished function to bring the graph into a nice view on vertical displays? Or at least a proper description how to dow it?

[BillyBlaze]

@StefanMeGit

In the latest version it should be responsive on any orientated screen:

If it's still to small, then please provide some more info in a new ticket with device/browser.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.