panojs icon indicating copy to clipboard operation
panojs copied to clipboard

X-Repeat Images?

Open kaefert opened this issue 11 years ago • 5 comments

Is it possible to have the picture repeated horizontally?

So that if the user scrolls out of the picture to the left the right side of the picture starts to be displayed again? (and vice versa)

If this feature does not exist yet, how would one go about implementing it? Do you think it would be lots of work?

kaefert avatar Oct 20 '13 14:10 kaefert

You would need to add a new tile provider serving tiles wrapping around 360

dimin avatar Oct 20 '13 17:10 dimin

Okey, so.. The inline script in the html file defines the function myProvider.assembleUrl which is called by PanoJS.js:471 - but only if [useBlankImage] is false, which is true if the searched tile is outside of the dimensions of the picture. So this is probably also a place that would need adapting for an repeating image

The inline defined myProvider.assembleUrl function calls the function ImgcnvPyramid.prototype.tile_filename to know which tile to load, so this is the second thing that I think would need adapting for repeating the image.

PanoJS.prototype.positionTiles = function(motion, reset) --> 418 --> PanoJS.prototype.assignTileImage = function(tile) --> 471 --> this.tileUrlProvider.assembleUrl(tile.xIndex, tile.yIndex, this.zoomLevel); myProvider.assembleUrl = function(xIndex, yIndex, zoom) { return MY_URL + '/' + MY_PREFIX + myPyramid.tile_filename( zoom, xIndex, yIndex ); --> ImgcnvPyramid.prototype.tile_filename = function( level, x_coordinate, y_coordinate ) --> returns jpg name --> END

kaefert avatar Oct 22 '13 18:10 kaefert

I don't really fully understand what is happening there, but the code in PanoJS.js - the function PanoJS.prototype.positionTiles = function(motion, reset) Lines 345 to 429 read like support for repeating images is already in there? At least the comments state that a tile that moves out of the screen on one side could come back into the screen on the opposite side. But I do not understand it to an extend that I would know why it does not work already or what functionality is missing.

update: ah I think now I get it, a tile in that context does not mean a fixed tile from the picture, but just a "placeholder" tile that could hold any tile of the image whichever is needed, is that correct?

kaefert avatar Oct 22 '13 19:10 kaefert

Okey, so here is my first [quick&dirty] "patch" (sorry didn't set up myself an IDE for this and I don't know how to create a real patch without one)

1.) in PanoJS.js replace code line if (high || left || low || right) { with if (high || low) { // || left || right) {

2.) in pyramid_imgcnv.js After the line: ImgcnvPyramid.prototype.tile_filename = function( level, x_coordinate, y_coordinate ) { add the following lines: var maxx = this.getLevel(level).xtiles; while (x_coordinate >= maxx) { x_coordinate -= maxx; } while (x_coordinate < 0) { x_coordinate += maxx; }

I don't know why but it only works on the right side, so if you scroll out to the right side (negative) the left end of the picture will begin to show again. Also if the last tile does not have the same width as the others, then there will be a gap as wide as the last tile is smaller then others. you can look at the modification at work here: http://kaefert.is-a-geek.org/panojs3/

kaefert avatar Oct 22 '13 20:10 kaefert

if anybody knows why my modifcation doesn't work as expected, or has an idea to improve it, I would be very happy to read it here.

kaefert avatar Nov 03 '13 07:11 kaefert