Posts: 271
Joined: Sun Feb 08, 2015 1:13 pm

vertical letterbox

Wed Feb 08, 2017 7:37 pm

I wanted to use a 16:9 image zoomed in as per this using 1920x1080 (resized for conveience to 640x360. OK - nice enlarged effect.... Then I decided I wanted to take the shot vertically.
Turn the camera on its side? Nope! It knows isn't like taking a hand held camera and turning it!
camera.rotation=90 nearly works - The image is lying on its side, if you then turn the camera it knows you did it, and tilts the image back! Nearly had to resort to Javascript (Eugh!! - sorry Heater) or CSS (even worse).

What it seems you have to do is set these:
camera.resolution = (1080, 1920)
for foo in camera.capture_continuous(stream, 'jpeg', use_video_port=True, resize=(360,640)):

NOTE the reversal of the dimension values.

I couldn't find anything about this in the documentation - just tried it as a last resort!
Just saying....(v2 camera - Haven't tried v1) - I wonder if it will still work on reboot....Yup! I am not certain, but it might lose the "zoom effect" , it's dark outside.

Raspberry Pi Engineer & Forum Moderator
Raspberry Pi Engineer & Forum Moderator
Posts: 9245
Joined: Wed Dec 04, 2013 11:27 am
Location: ZZ9 Plural Z Alpha, aka just outside Cambridge.

Re: vertical letterbox

Wed Feb 08, 2017 9:11 pm

Er, it doesn't know anything about orientation. It always reads out the sensor in the same direction alone the "long edge" of the image.
The difference with your handheld camera is generally that you are rotating the display as well, so that you see the image rotated.

camera.resolution is ALWAYS the output resolution. rotate and flips are applied before that, and the source image will be cropped to alter the aspect ratio.
So your 1080x1920 output will actually be being read from probably 608x1080 input pixels from the cropped 1920x1080 mode, rotated, and then upscaled to give you a 1080x1920 output.

If you really want 1080P rotated, mount your camera sideways, record 1920x1080, and then alter the MP4 composition matrix to tell the render to rotate the image on display. If you want an example, look at MPEG4Writer in Android. I believe there is an ffmpeg option to do the same thing. Anything else will compromise image quality.
Software Engineer at Raspberry Pi Trading. Views expressed are still personal views.
I'm not interested in doing contracts for bespoke functionality - please don't ask.

Posts: 271
Joined: Sun Feb 08, 2015 1:13 pm

Re: vertical letterbox

Thu Feb 09, 2017 11:45 am

Thanks for the reply, still can't get my head round the logic of it !
I managed to get what I want.... did the partial letter box thing as normal now, camera.resolution = (1920, 1080), and resized to (640,360). Then, did camera.rotate=270.
This gives a zoomed letterbox image on its side in the web page (using a modified Michael Grinberg Flask example).
Something, I don't know where, assumes we want a portrait style kindly does this for us. (???)
mount your camera sideways
you obviously believe it would work to tilt the camera, then my logic says the image gets "layed back on its side" by Flask, or .... (hanging or), somewhere else. I left the camera vertical as tilting it didn't help before (the ribbon is too * short anyway), don't want to tilt the whole pi either...The raspberries might fall out.

In the web css I made rotation and translation divs to stand it up vertical and move it to a sensible place. Much as I hate css, at least I don't now have to turn my pc screen sideways! (Phew! I didn't need Javascript!) (note just rotation puts the image above the web page (I see the bottom))

Code: Select all

#tran {
    -ms-transform: translate(450px,450px); /* IE 9 */
    -webkit-transform: translate(450px,450px); /* Chrome, Safari, Opera */
    transform: translate(450px,450px);
#rot {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg));

Code: Select all

<div id = "rot"> <div id = "tran"> <img src="{{ url_for('video_feed') }}"> </div> </div>
The rotate and zoom effects change if you swap the divs round! Also it is different on different web screens !! (Eugh!)
Now have a vertical, zoomed image.... sometimes in the right place.... still working on it.
Interestingly, when I add date annotation, the date appears on the side of the image. (so did the camera rotate?)
sshot.jpg (47.57 KiB) Viewed 857 times

Return to “Camera board”