PanoJS failing due to missing method which isn't missing

Question

I'm using PanoJS in a Rails 4 project and I get the following error:

TypeError: this.getLevel(...) is undefined
[panojs/pyramid_imgcnv.js][1] Line 92

What I'm confused about is that the method seems to be declared just a few lines above.

I've raised it as an issue with PanoJS but I'm suspicious it's simply a configuration error between Rails and Javascript. I have previously had it set up and working with a Rails 3 project. I've used the same JS files and loaded them in the same order. I can't see what's different (other than the Rails version) but one version works and one doesn't.

Updated:

The element is declared as (I've left the data portion out for brevity);

%div{ id: "image_viewer", class: "viewer", data: {} }

The JS should be triggered with the following coffeescript, but at the moment I've got it commented out because it just adds an error because addimagezoom won't work.

jQuery(document).ready ($) ->

  $('#zoomimage').addimagezoom
  largeimage: $('#zoomimage').data('large-image-url'),
  magnifiersize: [$('#zoomimage').data('scaled-x-dimension'),$('#zoomimage').data('scaled-y-dimension')],
  zoomrange: [2, 10]

Update 2:

I've realised I made a mistake in my original post. The trigger is actually as per below. The above was an artefact from my attempts to get a different viewer working. The real trigger below.

createViewer viewer, 'image_viewer', "#{url_base}/#{image_id}", "#{image_uuid}_", width,  height, target_format

Answer 1

I think the issue is with the jQuery implementation..

jQuery(document).ready ($) ->

   jQuery('#zoomimage').addimagezoom
   largeimage: jQuery('#zoomimage').data('large-image-url'),
   magnifiersize: [jQuery('#zoomimage').data('scaled-x-dimension'), 
           jQuery('#zoomimage').data('scaled-y-dimension')],
   zoomrange: [2, 10]

Once we have initiated jQuery keyword one have to use the same instead of $

The error is similar jQuery implementation error. as $ will fetch nothing and will cause undefined error to raise.

Try this if this works,

I am not must of RUBY programmer but can check JS :)

Answer 2

Ok, this is really hard without being able to see all the code running. But as a Sherlock wannabe I can see this:

The error says that the result of this.getLevel(...)is undefined at line 92 of file panojs/pyramid_imgcnv.js. The source file states:

ImgcnvPyramid.prototype.tile_filename = function( level, x_coordinate, y_coordinate ) {
    var l = formatInt( this.getLevel(level).level , 3);
    ...
}

Which means the value of level generates a result of undefined in getLevel(). Checking out getLevel() we can see that:

ImgcnvPyramid.prototype.getLevel = function( level ) {
    if (level<this._pyramid.length)
        return this._pyramid[ level ];    
    else
        return this._pyramid[ this._pyramid.length-1 ];          
}

Therefore level is:
A. undefined, or
B. a negative number that points to an unexisting array position, or
C. the value stored in that position in the array _pyramid is undefined

If we search for any instance where the function ImgcnvPyramid.tile_filename is called, we can see that it is not called anywhere else inside the source code. This means the user implementing the library must call it. So let's check, (and assume) you are implementing the plugin the same way as the demo page is doing.

The demo overrides the tileUrlProvider.assembleUrl method. This function should be implemented when you want to override the url of each tile to be used. In the demo implementation we can see this:

var myProvider = new PanoJS.TileUrlProvider('','','');
myProvider.assembleUrl = function(xIndex, yIndex, zoom) {
    return MY_URL + '/' + MY_PREFIX + myPyramid.tile_filename( zoom, xIndex, yIndex );
}

If we follow the trail in the source code, the zoom variable passed into the user defined assembleUrl method should be undefined or a negative value which, assuming the error happens on load, might be that the zoom level is wrongly calculated. The guilty line might be:

PanoJS.js[88]
this.zoomLevel = (typeof options.initialZoom == 'undefined' ? -1 : parseInt(options.initialZoom));

Which makes sense according to this "analisis" because the default value returned is -1. So in summary, include an initialZoom value when initializing the panorama

viewer = new PanoJS(dom_id, {
    initialZoom: 0, // and play with this value to see what happens
    ...
});

Also, check the values of width and height in your trigger

createViewer viewer, 'image_viewer', "#{url_base}/#{image_id}", "#{image_uuid}_", width, height, target_format

If one of those is negative, zero or undefined, the zoom value might be getting wrongly calculated along the way.

Sorry to be so verbose, this might help others and hopefully you. Please let us know if these suggestions work, if not, please post a url where we can see the code running.