Letterbox Camera image in UI customizer since update 1.10.0rc1

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