Images in Stills View distorted

[mmartin]

I have just installed 1.24.1 and so far so good. The only thing I came across is in the Even Window, Stills view, the images show up distorted. Looks like 16x9 type aspect ratio, only one image per line. Initially when i click on stills, I see the outline for several images per line that appear in the correct aspect ration but then those are replaced with actual images, one per line, stretched with what appears aspect ratio of 16x9.

I like the stills view because it allows me to scan for a change within the event without having to wait for the re-play so this problem will prevent me from moving to 1.24.1.

CentOS
ffmpeg
ZoneMinder 1.24.1
cambozola 0.22

Any help with this would be appreciated.

[zoneminder]

Can you capture a screenshot and post it here? Have you tried slightly resizing the window? Do that make any difference?

[mmartin]

I have tried resizing the window, the image aspect does not change. Here are captures of original frame and the distorted view in stills.

[NedraE]

I have a screen capture as well that looks just like his.

This is on a Windows Vista machine, running IE7. On another laptop (my husband's) running Firefox, and on his Linux machines running firefox, this does not exist. This appears to be an Internet Explorer issue.

btw: I post to this same type of forum with no problem uploading graphics. Why am I unable to attach my screen capture in this forum? ... oh... ok... it's done differently from the other forum running phpBB !!!

[mmartin]

I have a screen capture as well that looks just like his.

This is on a Windows Vista machine, running IE7. On another laptop (my husband's) running Firefox, and on his Linux machines running firefox, this does not exist. This appears to be an Internet Explorer issue.

btw: I post to this same type of forum with no problem uploading graphics. Why am I unable to attach my screen capture in this forum?

Thanks for the info on the problem being IE. I tried on both Vista and XP with IE7 and they both have the same problem.

Any ideas from the techie types?

As far as posting, i wasn't able to figure out how to upload a picture but if you can host a picture somewhere you can link to it using the tag.

[NedraE]

btw: I post to this same type of forum with no problem uploading graphics. Why am I unable to attach my screen capture in this forum?

As far as posting, i wasn't able to figure out how to upload a picture but if you can host a picture somewhere you can link to it using the tag.

I'm on another forum using phpBB and can attach files (not just photos) as I beta test mapping software and have to give them various file formats. This forum software CAN be set up to allow attachment of specified file formats. I tested the IMG command and found, like you that it worked, and so I simply posted my image to my photobucket album and imbedded the url of the image.

[cordel]

btw: I post to this same type of forum with no problem uploading graphics. Why am I unable to attach my screen capture in this forum?

As far as posting, i wasn't able to figure out how to upload a picture but if you can host a picture somewhere you can link to it using the tag.

I'm on another forum using phpBB and can attach files (not just photos) as I beta test mapping software and have to give them various file formats. This forum software CAN be set up to allow attachment of specified file formats. I tested the IMG command and found, like you that it worked, and so I simply posted my image to my photobucket album and imbedded the url of the image.

We have a colo with a small drive. It might fill up rather quickly if we allowed uploads. It's also not default and is a mod which makes updating a pain. Maybe in the future since the latest series has it incorporated and we can get some folks to donate a few drives.

Do you have any values in for image dimensions for bandwidth setting, etc?

[mmartin]

We have a colo with a small drive. It might fill up rather quickly if we allowed uploads. It's also not default and is a mod which makes updating a pain. Maybe in the future since the latest series has it incorporated and we can get some folks to donate a few drives.

Do you have any values in for image dimensions for bandwidth setting, etc?

My image is 640x480. As far as bandwidth goes it's set to defaults but this is captured events view so not sure where bandwidth setting fits in. As you can see, the image show up OK if i click on it, it's only in the stills view that the images are distorted.

[cordel]

There are various settings through ZM to set image proportions for montage etc. If they are not populated they should default to the original size but might not be the case with all browsers. In that case settings might be interesting.

[mmartin]

There are various settings through ZM to set image proportions for montage etc. If they are not populated they should default to the original size but might not be the case with all browsers. In that case settings might be interesting.

I have looked for such setting but so far i have not been able to find any. The only settings i thought might be relevant were under Config-> Web -> WEB_LIST_THUMB_WIDTH. It's for thumbs and it's set to the default of 48. In addition to that, the event list window DOES show the correct aspect ration for the thumbnails. It's only the specific event view Stills option where there is a problem. Other than that i was not able to find any aspect ratio or "event window image type" settings.

[zoneminder]

I don't think it's anything as sophisticated as that. I think the stylesheet is just broken in IE so I will take a look and see why it's not respecting the width but only the height of the thumbnails. It may be that FF scales and IE doesn't.

[mmartin]

I don't think it's anything as sophisticated as that. I think the stylesheet is just broken in IE so I will take a look and see why it's not respecting the width but only the height of the thumbnails. It may be that FF scales and IE doesn't.

Could you point me to the stylesheet that page uses? I could have a look and play with it myself. Thanks.

[zoneminder]

The file (as with all the views) is in the css subdirectory of the views directory, so skins/classic/views/css and will be the same name as the view file itself, so events.css.

The bit in questions is probably this section

Code: Select all

#eventThumbs img {
    height: 80px;
    margin: 2px;
    background-color: #dddddd;
}

where the height is set but not the width (as different cameras have different aspect ratios). FF takes the height and scales the width the same, IE by the looks of it does not. So if you add in the width you want you should find it fits.

I may have to hardcode that but if so then it will still distort portrait aspect cameras etc.

[mmartin]

The file (as with all the views) is in the css subdirectory of the views directory, so skins/classic/views/css and will be the same name as the view file itself, so events.css.

The bit in questions is probably this section

Code: Select all

#eventThumbs img {
    height: 80px;
    margin: 2px;
    background-color: #dddddd;
}

where the height is set but not the width (as different cameras have different aspect ratios). FF takes the height and scales the width the same, IE by the looks of it does not. So if you add in the width you want you should find it fits.

I may have to hardcode that but if so then it will still distort portrait aspect cameras etc.

Thanks, I resolved the problem for my setup by changing the above infor you provided in event.css to the following...

#eventThumbs img {
height: 25%;
width: 25%;
margin: 2px;
background-color: #dddddd;
}


This seems to work well for my 640x480 resolution but you would be too small for 320x240. Thanks for your help.

[NedraE]

The bit in questions is probably this section

Code: Select all

#eventThumbs img {
    height: 80px;
    margin: 2px;
    background-color: #dddddd;
}

I may have to hardcode that but if so then it will still distort portrait aspect cameras etc.

Thanks, I resolved the problem for my setup by changing the above infor you provided in event.css to the following...
#eventThumbs img {
height: 25%;
width: 25%;
margin: 2px;
background-color: #dddddd;
}
This seems to work well for my 640x480 resolution but you would be too small for 320x240. Thanks for your help.

That 25% is a great solution. Allan sets some of our camera shots on the server down the hill at 400x400 and so 25% would be a perfect solution for photos that are shown at sizes other than 640x480 - Can you add an if.. then loop for heights > 360 or 300 px?