Letterbox Camera image in UI customizer since update 1.10.0rc1

mrbchambers · February 2, 2024, 4:25am

Camera model

raspicam module 3 noir

What is the problem?

Camera only displays in letterbox in UI customizer, though it previously worked fine

What did you already try to solve it?

Disabled UI customizer, then everything appears as it should. Though I really want to run UI Customizer. Also have considered there could be a problem with the plugin, though it did work prior to the update.

Have you tried running in safe mode?

No

Did running in safe mode solve the problem?

Didn't try

I have 2 identical systems, and this issue appears on both of them, so this is either something to do with the interaction between UI Customizer and the update. Or it could be a dodgy weird camera setting?

Ewald_Ikemann · February 2, 2024, 8:26am

So this seems to be a plugin issue, not a webcam one.

mrbchambers · February 2, 2024, 3:42pm

I think you are right, though everything was fine prior to the new update (1.10.0rc1). So something must have changed within the updated code; maybe the way data is parsed, or protocol changes (I am heading into unknown territory here), Raspi OS is alien to me, and I struggle to for the right terminology, and don't want to enrage anyone. I am just hoping for a fix to my problem.

I seem to have camera issues with every major update to Octoprint, don't get me wrong, the updates are brilliant, this one is superb.

I was really just wondering if anyone else has had a similar problem, and maybe a fix?

I have reported this through Git hub to the developer of UI Customizer (no response yet), to see if they have or know of any issues, I will feed this back if/when I any information.

Charlie_Powell · February 2, 2024, 5:47pm

UI customizer definitely changes stuff to do with the webcam plugins that's kinda "outside" the supported APIs for plugins. Stuff like full screen & sidebar webcam functionality is often done with a few hacks to move stuff around in the html that "work". So when something changes it can have strange effects here.

If it's only showing letterboxed with UI customizer and everything looks normal without it, then that's good. Double check your settings for the aspect ratio to be correct in the classic webcam settings - if there's a mismatch then it can make letterboxing looking things.

mrbchambers · February 2, 2024, 7:25pm

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.

jneilliii · February 2, 2024, 8:51pm

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

mrbchambers · February 2, 2024, 8:56pm

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.

Laze · February 3, 2024, 6:45am

Well I'm not on 24/7

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

I will look later today

mrbchambers · February 3, 2024, 6:34pm

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.

mrbchambers · February 3, 2024, 9:27pm

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.

Ewald_Ikemann · February 3, 2024, 9:32pm

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.

mrbchambers · February 3, 2024, 9:55pm

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.

mrbchambers · February 4, 2024, 2:28am

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

mrbchambers · February 4, 2024, 2:34am

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.

jneilliii · February 4, 2024, 4:59am

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;
}

jneilliii · February 4, 2024, 5:29am

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).

github.com

OctoPrint/OctoPrint/blob/f4a3391b298bdbf1f1e984c4df169e712a8e3569/src/octoprint/static/less/octoprint.less#L709


      
          #webcam_plugins_container {
            @overlay-color: rgba(0, 0, 0, 0.5);
            @side-padding: 5px;
            @border-radius: 5px;
          
            position: relative;
            border-radius: 5px;
            margin-top: 6px;
            overflow: hidden;
            min-height: 300px;
            min-width: 100%;
            background-color: #000;
          
            .tab-content {
              border: none;
              padding: 0px;
            }
          
            &:hover .nav,
            &:hover .refresh_overlay,
            &:hover .keycontrol_overlay {

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?

Laze · February 4, 2024, 7:42am

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.

mrbchambers · February 4, 2024, 4:07pm

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.

jneilliii · February 4, 2024, 4:20pm

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.

Charlie_Powell · February 4, 2024, 4:22pm

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.