Letterbox Camera image in UI customizer since update 1.10.0rc1

Its is definitely up to something.. UI customizer can access organise Dashboard, and Dashboard has its own setting page for webcam, which defaults to the default webcam setting, it displays the webcam in the dashboard column perfectly, though right beside it in UI customizers own webcam area the image is letterboxed?


How strange is that (Probably not that strange?)

I have just checked the aspect ratio in classic webcam setting and it is 16:9, and with UI customizer disabled none of the webcam images are letterboxed. It is only UI customizer that is doing this.

Thank you for the help.

I'm assuming @Laze has received reports of a couple of issues with UI Customizer and the latest RC.

2 Likes

I sent him a personal message on this forum, and I sent a bug report to Git hub, though I wasn't sure if he was still actively supporting UI Customiser.

Well I'm not on 24/7 :smile:

First off I would recommend disabling the dashboard plugin to check for conflicts.

I will look later today

Sorry I was being really needy, I didn't mean to come across like that.

I tried disabling dashboard, and there was no change.

I am going to go for a fresh install and see if that changes anything, there are some strange things happening (or not happening), like I can only update plugin configs once then I have to reboot, and even then some configs are locked. Though this has just started to be a thing. I think I may have broken something while I trying to fix other things, and is only one of my systems. I will feed this back once complete.

So, here's the thing, I have reinstalled from fresh, and everything is working as it should, I can't tell you how bizarre this is, and sorry for causing a ruckus. Though 2 systems suffering exactly the same way is a bit weird.

It appears the the web margins left and right are a bit wider in the new OctoPrint web layout.

in 1.9.3 I had the UI layout widths of 3:6:3, with 1.10.0cr1 it is 3:5:3 to have a proper display.

That was one of the problems I was having, though I have done a full fresh install and I am using 3:6:3 now.

Its all very strange, though it leads me to think that I am going to do a fresh install on any major updates, or at the first sign of a problem.

Right I said in this stream that everything is working once I reloaded, well that isn't true (I an embarrassed and annoyed), I did install 1.9.3, and forgot to install 1.10.0RC1.

So I have done as full a diagnostic approach to this as I can, and have ran a number of scenarios (oh so many), here are the findings from 2 of them:-

on my first system: I fresh installed 1.9.3 released 2023-10-09, then installed 1.10.0RC1 update, and confirmed that the webcamera works without letterboxing; then I installed UI Customizer without any other plugins. The webcamera image is letterboxed.

On my second system: I fresh installed 1.9.3 released 2023-10-09, then I installed UI Customizer without any other plugins. The webcamera image was not leterboxing, then installed 1.10.0RC1 update, and the webcamera is again letterboxing.

Also whenever the webcam is letterboxing the maximum column width is 11 not 12.

Sorry for the confusion, its an age thing I am convinced :laughing: :innocent: :sunglasses:

It is definitely the case that it only has a maximum of 11 in 1.10.0cr1, not that I have to tell you that, I am the stupid one not you! and reinstalling from scratch (when done right, and completely), doesn't change anything.

I'm not 100% convinced it's a 12 column issue. Mine is configured 3-6-3 and it loads fine, but I don't use any of the widgets.

as seen in the screenshot though, I agree the margins seem a bit different as Ewald mentioned.

EDIT: adding the following to Advanced > custom css helped with the left side margin issue.

#sidebar {
margin-left: 0px;
}

Curious if the camera issue is related to the PR merged for TouchUI compatibility. This line was the only thing that changed in that PR (was added).

I enabled it on my instance just to see and it doesn't letterbox at all, so wonder if it's a possible theme related issue?

Please add which theme your are using and webcam settings - the more info the better.

I need to go on a week holliday but will look when I get home.

I didn't add a theme when I did the fresh install testing, I didn't get that far, as soon as I installed UI Customizer, and rebooted, the screen that appears has a webcam view already, and it was letterboxed.

This was the approach I took:

So I have done as full a diagnostic approach to this as I can, and have ran a number of scenarios (oh so many), here are the findings from 2 of them:-

on my first system: I fresh installed 1.9.3 released 2023-10-09, then installed 1.10.0RC1 update, and confirmed that the webcamera works without letterboxing; then I installed UI Customizer without any other plugins. The webcamera image is letterboxed.

On my second system: I fresh installed 1.9.3 released 2023-10-09, then I installed UI Customizer without any other plugins. The webcamera image was not leterboxing, then installed 1.10.0RC1 update, and the webcamera is again letterboxing.

I have formatted and started from scratch so many times now, thinking there could be something relating to the my systems only (not many comments from others suffering the same problem), though no matter what I do, and how basic I make the install, everything appears fine until I install UI Customizer with or without themes.

The only other information is: I am using Raspberry pi Model B (8GB), and my camera is raspicam module 3 noir, and I have 2 systems.

I think UI Customizer is so good that for the time being I am running octoprint 1.9.3, as good as the RC is it lacks the sparkle that UI Customizer brings.

What about monitor resolution and are you running in full screen mode of the browser or not? These can also effect layouts when it comes to webpage design.

I'm yet to fully dig into this, but I found the same issues straight away with 1.10.0rc1 and installing UI customizer. This is basically a barebones instance, no plugins except for my webcam plugin (& now UIC)

It appears to be relevant to just the built in Classic Webcam plugin, not webcam plugins in general. My 'Camera Streamer Control' plugin does not get letterboxed, but the CW view does in both sidebar & control tab:


I can see the same issue that @Ewald_Ikemann pointed out - a '12 column' layout does not fit on the screen anymore. There should be a right sidebar there, but it turns up at the bottom of the page as it won't fit on the right. Not sure why this is the case, as I said these are my initial observations.

Will see if I come up with anything.

1 Like

OK, think I've found the conflict that makes the stream appear 'letterboxed'.

Previously in OctoPrint, the stream ratio was set using padding values, so a 16/9 stream used 56.25% padding to make the container the right size. I'll be honest, the styling and handling of webcam rotation really annoyed me when I made the 'camera streamer control' plugin, there's a lot of complexity from how the layout had grown up. UI customizer also set 56.25% padding on the webcam, but this was fine since both were the same & OctoPrint's number was used in preference.

OctoPrint has since migrated to use a more intuitive aspect-ratio property, available in more modern browsers than (most likely) 10 years ago when the UI was first built. But this causes a conflict with UIC, which still tries to apply 56.25% padding to the container, so we get a double-whammy of making the box really long. If you remove this, for some reason UIC then tries to apply padding-bottom: 100% which makes it even longer. Removing both resolves the issue.

OctoPrint's commit that changed how it worked:

The number of styles that UIC tries to override is huge, so this type of issue is almost always going to happen. I don't think that OctoPrint should try and restrict changes to individual CSS properties & CSS structure, so it I'd like to say it's the plugin's end to fix. I don't think there's an error in OctoPrint's CSS, just the change of properties has led to it being applied twice.

Hey Charlie

Brilliant diagnosis, I bow respectfully to your: prowess, sleuthing, and all round knowledge. I don't spend enough time in and around Raspi OS, I use my Raspi systems for 3D printing only, and generally they work, I only really realise they are there when they don't perform as I would like them to.

So thank you for your input, I thought it was going to be something I wasn't able to comprehend I was doing?

My plugin CSS seems to be 100% disabled du to the new CSS classes etc. - could explain a bit more where you see the bug?

Bug has been found and fixed - @Charlie_Powell pointed out there was problems with the aspect ration stuff and alsom a bug in the RC of OctoPrint. For now my update handles both.

1 Like