Big Tif 10GB (30000 x 30000 x 3)

[sondvo]

Hi,

Thank you for this super useful repo.

I'm wondering: can we use Big Tif (.btf) as the background? (I normally need to convert this .btf to pyramid formats - layers in order to view it)

createScatterplot(
    ....
    backgroundImage: "..."
) 

Best,

[flekschas]

That's unfortunately not supported. The background image rendering is very simplistic and only supports regular-sized images. I.e., images that are smaller than the max texture size your GPU supports. Image pyramid support would be great but a major new feature I don't have time to implement at the moment.

[sondvo]

I'm trying to incorporate openseadragon to reglscatter. I see the package has a function zoomToArea() using these parameters:

  - the X coordinate of the top left corner of the canvas in scatter coordinate system.
  - the Y coordinate of the top left corner of the canvas in scatter coordinate system.
  - the width of canvas in scatter coordinate system
  - the height of canvas in scatter coordinate system

Are there any functions that I could retrieve these information from the current state? so that I could input those into openseadragon

[flekschas]

As the docstring of zoomToArea() says, the rectangle needs to be specified in normalized device coordinates, which go from [-1, 1] for the data domain. You can derive those in multiple ways:

1. you can listen to the draw event via scatter.subscribe('draw', ({ view, isViewChanged, camera, xScale, yScale }) => { ... }). The view matrix can be used to recover the viewport in normalized device coordinates.
2. you can get the camera object itself scatter.get('camera') or just the camera view matrix scatter.get('cameraView').

I don't know what openseadragon requires but I assume what you actually want are the coordinates in the data space and not the normalized device space. To get the former simple use the xScale/yScale and get their domains (xScale.domain()). This gives you the view port in data coordinates. Not that for this to work you need to initialize the scatterplot with x and y scales. See https://github.com/flekschas/regl-scatterplot/blob/main/example/axes.js for an example.

[sondvo]

Thank you so much @flekschas . I finished mine.
I put the code here in case someone might need it.

Background:

• Reglscatter uses a normalized system -1 -> 0 -> 1. Coordinate starts from the bottom-left
• OpenSeaDragon uses the original pixel system. Coordinate starts from the top-left

1. From reglscatter: reverse cameraView to the "real" coordinates at the 4 canvas corners

// Top-left: canvasFrameX = -1, canvasFrameY = 1
// Bottom-left: canvasFrameX = -1, canvasFrameY = -1

function reverseCameraView(cameraView, canvasFrameX, canvasFrameY) {
  const ndc = vec4.fromValues(canvasFrameX, canvasFrameY, 0, 1) // the canvas point
  const inv = mat4.create()
  if (!mat4.invert(inv, cameraView)) throw new Error('cameraView not invertible')

  const corner = vec4.create()
  vec4.transformMat4(corner, ndc, inv)

  // If corner[3] !== 1 (perspective), divide by w:
  const w = corner[3] || 1
  const canvasX = corner[0] / w
  const canvasY = corner[1] / w

  return {
    canvasX,
    canvasY
  }
}

2. Apply it on OpenSeaDragon:

osd_viewer.viewport.imageToViewportRectangle(
  topLeftX, 
  topLeftY,    //remember to reverse the canvasY from reglscatter
  osdImageWidth, 
  osdImageHeight
)