# Difference between revisions of "Partial Panoramas using ROI in PTViewer"

m (→x and y insertion point) |
(fix degree/apostrophe symbols, latex formulas) |
||

(10 intermediate revisions by 5 users not shown) | |||

Line 1: | Line 1: | ||

− | If you have a panorama that is not fully | + | If you have a panorama that is not fully 360°x180°, and you still want to use PTViewer to immerse your audience into your panorama, there are a few methods to do that. |

You can expand your Panorama with blank space around, and use the normal way of displaying a panorama in PTViewer. The disadvantage of this is that if you put this picture online, the download times can be significantly longer because of all the blank space. | You can expand your Panorama with blank space around, and use the normal way of displaying a panorama in PTViewer. The disadvantage of this is that if you put this picture online, the download times can be significantly longer because of all the blank space. | ||

Line 20: | Line 20: | ||

* Position of the horizon from the top of the picture (Horizon pos) 227 px | * Position of the horizon from the top of the picture (Horizon pos) 227 px | ||

− | The picture must have [ | + | The picture must have [[Equirectangular|equirectangular]] projection |

− | From the stitcher we should be able to get the Horizontal Field of View (HFOV). In this case | + | From the stitcher we should be able to get the Horizontal Field of View (HFOV). In this case 160° |

From these 4 numbers we should be able to calculate the parameters necessary for PTViewer to display a partial panorama. | From these 4 numbers we should be able to calculate the parameters necessary for PTViewer to display a partial panorama. | ||

Line 34: | Line 34: | ||

Since we know the ROI Width of the picture as well as the Horizontal Field of View (HFOV), we can calculate the field of view for 1 pixel. | Since we know the ROI Width of the picture as well as the Horizontal Field of View (HFOV), we can calculate the field of view for 1 pixel. | ||

In this case | In this case | ||

− | < | + | |

− | + | <math> | |

− | </ | + | \frac{160^\circ}{800\text{px}} = \frac{0.2^\circ}{\text{px}} |

+ | </math> | ||

We need this number to convert from pixels to degrees and vice versa. You need an accuracy of a couple of decimals otherwise it won't work. | We need this number to convert from pixels to degrees and vice versa. You need an accuracy of a couple of decimals otherwise it won't work. | ||

− | The objective is to place the ROI picture inside the | + | The objective is to place the ROI picture inside the 360°x180° panorama with the horizon in the ROI image over the horizontal 0° line of the pano, and the middle of the ROI image in the middle of the panorama. |

== pwidth and pheight == | == pwidth and pheight == | ||

Line 46: | Line 47: | ||

The calculation is done by using the number of degrees per pixel. | The calculation is done by using the number of degrees per pixel. | ||

Since we know the degrees, we can calculate the number of pixels. | Since we know the degrees, we can calculate the number of pixels. | ||

− | < | + | |

− | Panorama Width | + | <math> |

− | Panorama Height | + | \begin{align} |

− | </ | + | \text{Panorama Width}\, pwidth & = \frac{360^\circ}{\frac{0.2^\circ}{\text{px}}} = 1800\text{px} \\ |

+ | \text{Panorama Height}\, pheight & = \frac{180^\circ}{\frac{0.2^\circ}{\text{px}}} = 900\text{px} | ||

+ | \end{align} | ||

+ | </math> | ||

== x and y insertion point == | == x and y insertion point == | ||

To calculate the x and y position of the insertion point (the point where the picture needs to be placed) we can take half of the panorama height and subtracting the horizon position in the ROI. | To calculate the x and y position of the insertion point (the point where the picture needs to be placed) we can take half of the panorama height and subtracting the horizon position in the ROI. | ||

− | < | + | |

− | Y position of the insertion point = | + | <math> |

− | </ | + | Y \text{position of the insertion point} = \frac{900\text{px}}{2} - 227\text{px} = 223\text{px} |

+ | </math> | ||

Similarly we can calculate the x offset. | Similarly we can calculate the x offset. | ||

− | In most circumstances, you either | + | In most circumstances, you either don't know, or don't care about the direction the picture was taken. In that case it is good practice to place the ROI in the middle of the large pano where 0° is the middle of the picture. You can do this by taking half of the total panorama width and subtracting half the size of the picture |

− | < | + | |

− | X position of the insertion point = | + | <math> |

− | </ | + | X \text{position of the insertion point} = \frac{1800\text{px}}{2} - \frac{800\text{px}}{2} = 500\text{px} |

+ | </math> | ||

== panmin, panmax, tiltmin and tiltmax == | == panmin, panmax, tiltmin and tiltmax == | ||

Line 68: | Line 74: | ||

Because the ROI is horizontally in the middle, you may pan half the width of the image to the left and right, converted to degrees. | Because the ROI is horizontally in the middle, you may pan half the width of the image to the left and right, converted to degrees. | ||

− | < | + | |

− | Minimum pan = - | + | <math> |

− | Maximum pan = | + | \begin{align} |

− | </ | + | \text{Minimum pan} & = \frac{-800\text{px}}{2} \cdot \frac{0.2^\circ}{\text{px}} = -80^\circ\\ |

+ | \text{Maximum pan} & = \frac{800\text{px}}{2} \cdot \frac{0.2^\circ}{\text{px}} = 80^\circ | ||

+ | \end{align} | ||

+ | </math> | ||

The minimum tilt is calculated as the height of the ROI minus the position of the horizon, converted to degrees. | The minimum tilt is calculated as the height of the ROI minus the position of the horizon, converted to degrees. | ||

− | < | + | |

− | + | <math> | |

− | </ | + | \text{Minumum tilt} = -(541\text{px} - 227\text{px}) \cdot \frac{0.2^\circ}{\text{px}} = -62.8^\circ \approx -62^\circ |

+ | </math> | ||

The maximum tilt is calculated as the position of the horizon, converted to degrees. | The maximum tilt is calculated as the position of the horizon, converted to degrees. | ||

− | < | + | |

− | Maximum tilt = | + | <math> |

− | </ | + | \text{Maximum tilt} = 227\text{px} \cdot \frac{0.2^\circ}{\text{px}} = 45.4^\circ \approx 45^\circ |

+ | </math> | ||

Because ptviewer does not take fractions of degrees, you throw away the fraction. | Because ptviewer does not take fractions of degrees, you throw away the fraction. | ||

Using these numbers in PTViewer should give you a good partial panorama. If you see blank space at the edges of the panorama, you may want to make a 1 degree change to the minimum and maximum pan and tilt untill it does not show up anymore. | Using these numbers in PTViewer should give you a good partial panorama. If you see blank space at the edges of the panorama, you may want to make a 1 degree change to the minimum and maximum pan and tilt untill it does not show up anymore. | ||

+ | |||

+ | == HTML code == | ||

+ | |||

+ | To see how these calculations translate in HTML code, the above sample could result in the following HTML code : | ||

+ | |||

+ | <source lang="html"> | ||

+ | <applet archive="ptviewer27L2.jar" code="ptviewer.class" WIDTH="300" HEIGHT="200" mayscript=true> | ||

+ | <param name=pwidth value=1800> | ||

+ | <param name=pheight value=900> | ||

+ | <param name=roi0 value="i'sample.jpg' x500 y223"> | ||

+ | <param name=panmin value=-80> | ||

+ | <param name=panmax value=80> | ||

+ | <param name=tiltmax value=45> | ||

+ | <param name=tiltmin value=-62> | ||

+ | </applet> | ||

+ | </source> | ||

+ | |||

Have fun. | Have fun. | ||

+ | |||

+ | == Helpful form == | ||

+ | |||

+ | If all these computations give you a headache, you can use [http://yhargla.free.fr/ptviewer_roi.php the following form]. Just input your data and it will generate the applet HTML code with all the correct parameters. Enjoy ! | ||

+ | |||

+ | [[Category:Tutorial:Nice to know]] |

## Latest revision as of 17:17, 3 August 2009

If you have a panorama that is not fully 360°x180°, and you still want to use PTViewer to immerse your audience into your panorama, there are a few methods to do that.

You can expand your Panorama with blank space around, and use the normal way of displaying a panorama in PTViewer. The disadvantage of this is that if you put this picture online, the download times can be significantly longer because of all the blank space.

To avoid this, it is possible to use a Region Of Interest picture (ROI) to display the panorama. This will only download the partial panorama. We will have to tell PTViewer where to place the picture, and how far the user may pan left and right, and how much they can tilt up and down.

Note this is not an explanation of the syntax of PTViewer, rather a tutorial on how to calculate the different parameters. For the syntax on PTViewer you can visit : PTViewer Documentation

Good luck.

Richard Korff

## Contents

## Gathering Information

From the ROI picture we need to get some basic information :

- Width in pixels (ROI Width) 800 px
- Height in pixels (ROI Height) 541 px
- Position of the horizon from the top of the picture (Horizon pos) 227 px

The picture must have equirectangular projection

From the stitcher we should be able to get the Horizontal Field of View (HFOV). In this case 160°

From these 4 numbers we should be able to calculate the parameters necessary for PTViewer to display a partial panorama.

## Calculating the parameters for PTViewer

Since we know the ROI Width of the picture as well as the Horizontal Field of View (HFOV), we can calculate the field of view for 1 pixel.
In this case

We need this number to convert from pixels to degrees and vice versa. You need an accuracy of a couple of decimals otherwise it won't work.

The objective is to place the ROI picture inside the 360°x180° panorama with the horizon in the ROI image over the horizontal 0° line of the pano, and the middle of the ROI image in the middle of the panorama.

## pwidth and pheight

To do that we first need to calculate the total size of the panorama image, of which the ROI image is a part of. The calculation is done by using the number of degrees per pixel. Since we know the degrees, we can calculate the number of pixels.

## x and y insertion point

To calculate the x and y position of the insertion point (the point where the picture needs to be placed) we can take half of the panorama height and subtracting the horizon position in the ROI.

Similarly we can calculate the x offset. In most circumstances, you either don't know, or don't care about the direction the picture was taken. In that case it is good practice to place the ROI in the middle of the large pano where 0° is the middle of the picture. You can do this by taking half of the total panorama width and subtracting half the size of the picture

## panmin, panmax, tiltmin and tiltmax

To limit the freedom the user has in moving around your pano, you want to restrict the pan and tilt angles. To calculate this is relatively easy with the information we have gathered above. The pan and tilt angles are calculated in degrees.

Because the ROI is horizontally in the middle, you may pan half the width of the image to the left and right, converted to degrees.

The minimum tilt is calculated as the height of the ROI minus the position of the horizon, converted to degrees.

The maximum tilt is calculated as the position of the horizon, converted to degrees.

Because ptviewer does not take fractions of degrees, you throw away the fraction.

Using these numbers in PTViewer should give you a good partial panorama. If you see blank space at the edges of the panorama, you may want to make a 1 degree change to the minimum and maximum pan and tilt untill it does not show up anymore.

## HTML code

To see how these calculations translate in HTML code, the above sample could result in the following HTML code :

<source lang="html"> <applet archive="ptviewer27L2.jar" code="ptviewer.class" WIDTH="300" HEIGHT="200" mayscript=true>

<param name=pwidth value=1800> <param name=pheight value=900> <param name=roi0 value="i'sample.jpg' x500 y223"> <param name=panmin value=-80> <param name=panmax value=80> <param name=tiltmax value=45> <param name=tiltmin value=-62>

</applet> </source>

Have fun.

## Helpful form

If all these computations give you a headache, you can use the following form. Just input your data and it will generate the applet HTML code with all the correct parameters. Enjoy !