Openlayers - ol.source.Zoomify based layer is not displayed on top of another layer

Question

I have 2 images of different sizes (but tile size is the same). Images correspond to each other and I want to display them one on another the way that second image is upscaled to correspond first one. I use ol.source.Zoomify source for both of them and projections with transformations. But I even can't get second image displaying.

See the the sample http://jsfiddle.net/sk5cLj4n/37/.

const imWidth = 31871;       
const imHeight = 17770;

const imWidthSmall = 19122.6;   
const imHeightSmall = 10662;  

// Primary image projection
const primaryImageProjection = new ol.proj.Projection({
  code: 'PIXELS',
  units: 'pixels',
  extent: [0,0, imWidth, imHeight],
  getPointResolution: function (resolution, point) { return resolution; }
});
ol.proj.addProjection(primaryImageProjection);

// Overlay image projection
const overlayProjection = new ol.proj.Projection({
  code: 'OVERLAY',
  units: 'pixels',
  extent: [0,0, imWidth, imHeight],
  getPointResolution: function (resolution, point) { return resolution; }
});
ol.proj.addProjection(overlayProjection);

 // Transformations of projections
 function TransformOverlayToPixel(coordinate) {
   console.log('TransformOverlayToPixel');
   return [
     (coordinate[0]),
     (coordinate[1])
   ];
 }
 function TransformPixelToOverlay(coordinate) {
   console.log('TransformPixelToOverlay');
   return [
    (coordinate[0]),
    (coordinate[1])
   ];
 }
 ol.proj.addCoordinateTransforms('PIXELS', overlayProjection,
      TransformPixelToOverlay,
      TransformOverlayToPixel);


var map = new ol.Map({
  layers: [
    new ol.layer.Tile({        
        opacity: 0.8,
      source: new ol.source.Zoomify({
        size: [imWidth, imHeight], // temp
        url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/primary/",
        projection: 'PIXELS'
      })
    }),
    new ol.layer.Tile({        
            opacity: 0.8,
            source: new ol.source.Zoomify({
        size: [imWidth, imHeight], // temp
        url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/overlay/",
        projection: 'OVERLAY'
      })
    })
  ],    
  target: 'map',
  renderer: "canvas",
  view: new ol.View({
    projection: 'PIXELS',
    center: [imWidth / 2, imHeight / 2],
    zoom: 0
  })
});

Short explanation of the fiddle:

1. tiles with blue borders are for primary layer
2. tiles with black borders are for secondary layer (overlay)
3. only 3 zoom levels are available for zooming
4. currently projections transformation does nothing. That's just for simplification. There should be a mupliplication to stretch second image.

Answer 1

Here how it's solved http://jsfiddle.net/sk5cLj4n/41/

const imWidth = 31871;       
const imHeight = 17770;

const imWidthSmall = 19122.6;   
const imHeightSmall = 10662;  

const koef = imWidth / imWidthSmall;

// Primary image projection
const primaryImageProjection = new ol.proj.Projection({
    code: 'PIXELS',
    units: 'pixels',
    extent: [0, -imHeight, imWidth, 0],
    getPointResolution: function (resolution, point) { return resolution; }
    });
    ol.proj.addProjection(primaryImageProjection);

    // Overlay image projection
    const overlayProjection = new ol.proj.Projection({
    code: 'OVERLAY',
    units: 'pixels',
    extent: [0,-imHeight, imWidth, 0],
    getPointResolution: function (resolution, point) { return resolution; }
    });
    ol.proj.addProjection(overlayProjection);

    // Transformations of projections
function TransformOverlayToPixel(coordinate) {
    console.log('TransformOverlayToPixel');
    return [
    (coordinate[0]) * koef,
    (coordinate[1]) * koef
    ];
}
function TransformPixelToOverlay(coordinate) {
    console.log('TransformPixelToOverlay');
    return [
            (coordinate[0]) / koef,
        (coordinate[1]) / koef
    ];
}
        ol.proj.addCoordinateTransforms('PIXELS', overlayProjection,
        TransformPixelToOverlay,
        TransformOverlayToPixel);


    var map = new ol.Map({
    layers: [
        new ol.layer.Tile({        
            opacity: 0.8,
        source: new ol.source.Zoomify({
            size: [imWidth, imHeight], // temp
            url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/primary/",
            projection: 'PIXELS'
        })
        }),
        new ol.layer.Tile({        
                opacity: 0.8,
                source: new ol.source.Zoomify({
            size: [imWidth, imHeight], // temp
            url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/overlay/",
            projection: 'OVERLAY'
        })
        })
    ],    
    target: 'map',
    renderer: "canvas",
    view: new ol.View({
        projection: 'PIXELS',
        center: [imWidth / 2, imHeight / 2],
        zoom: 0
    })
    });

See how extent is specified. And also coefficient should be set properly to make images matching each other.