index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ome-zarr.js</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      img {
        margin: 10px;
      }
      .lut {
        display: inline-block;
        margin: 2px;
        text-align: center;
      }
      .lut img {
        margin: 1px;
        width: 256px;
        height: 15px;
      }
    </style>
  </head>
  <body>
    <h2>renderTumbnail()</h2>
    <p>Default thumbnail is smallest multiscales resolution:</p>
    <code><pre>
      let thumbSrc = await omezarr.renderThumbnail(url);
      document.getElementById("thumbnail").src = thumbSrc;
    </pre></code>
    <div id="thumbnails"></div>
    <p>We can specify a targetSize to pick a larger multiscales resolution to render.
      If autoBoost" is true, contrast will be boosted if needed.</p>
    <code><pre>
      const IDR0066 = "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.5/idr0066/ExpD_chicken_embryo_MIP.ome.zarr";
      let thumbSrc = await omezarr.renderThumbnail(IDR0066, 300);
      let thumbSrc = await omezarr.renderThumbnail(IDR0066, 300, true);
      </pre>
    </code>
    <div id="bigThumbnails"></div>
    <h2>renderImage()</h2>
    <p>We can choose various rendering settings etc. "Inverted" is a orthogonal view</p>
    <div id="splitview"></div>
    <p>A smaller resolution "1", at various z-indeces with Look-up table "16_colors.lut"</p>
    <div id="stack"></div>
    <p>Thumbnail and region of the same big image</p>
    <div>
      <img id="bigThumb" />
      <div id="bigImages"></div>
    </div>
    <h2>Look-up tables available to choose</h2>
    <div id="luts"></div>
    <script type="module">
      import * as zarr from "https://cdn.jsdelivr.net/npm/zarrita@next/+esm";
      const omezarr = await import("/src/index.ts");

      const IDR0062 =
        "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr"; // OME-Zarr v0.4
      const IDR0048 =
        "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0048A/9846151.zarr/0/";
      const IDR0083 =
        "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0083A/9822152.zarr";
      const IDR0066 = "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.5/idr0066/ExpD_chicken_embryo_MIP.ome.zarr"; // OME-Zarr v0.5

      // v0.1 (no axes)
      const IDR0077 = "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.1/9836841.zarr";
      // v0.2 (no axes)
      const IDR0070 = "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.2/idr0070A/9838562.zarr/0/";
      // v0.3
      const IDR0079 = "https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.3/idr0079A/9836998.zarr";

      // Thumbnails...
      const urls = [
        IDR0077,
        IDR0070,
        IDR0079,
        IDR0062,
        IDR0066,
        // "https://animatedcell-test-data.s3.us-west-2.amazonaws.com/variance/40.zarr", // 'omero' has lots of white channels
        IDR0048,
      ];
      urls.forEach(async (url) => {
        // Uses the smallest resolution by default
        let thumbSrc = await omezarr.renderThumbnail(url);
        let html = `<img src="${thumbSrc}" />`;
        document.getElementById("thumbnails").innerHTML += html;
      });

      let thumbSrc = await omezarr.renderThumbnail(IDR0066, 300);
      let bigImg = `<img src="${thumbSrc}" />`;
      document.getElementById("bigThumbnails").innerHTML += bigImg;
      thumbSrc = await omezarr.renderThumbnail(IDR0066, 300, true);
      bigImg = `<img src="${thumbSrc}" />`;
      document.getElementById("bigThumbnails").innerHTML += bigImg;

      // For rendering Images, we want to keep the zarr array in hand...
      const store62 = new zarr.FetchStore(IDR0062);
      // arr will be full-sized array by default
      const {arr, omero, multiscale, shapes, zarr_version} = await omezarr.getMultiscaleWithArray(store62);
      // turn OFF all channels
      omero.channels.forEach((ch) => (ch.active = false));
      // for each channel...
      omero.channels.forEach(async (channel, index) => {
        // deepcopy omero for each channel...
        let omeroCopy = JSON.parse(JSON.stringify(omero));
        // turn on the channel we want to render...
        omeroCopy.channels[index].active = true;
        let src = await omezarr.renderImage(arr, multiscale.axes, omeroCopy);
        let html = `<img src="${src}" />`;
        document.getElementById("splitview").innerHTML += html;
      });

      // Inverted image - orthogonal view
      let omeroChannel = JSON.parse(JSON.stringify(omero));
      omeroChannel.channels[1].active = true;
      omeroChannel.channels[1].inverted = true;
      let slices62 = {"x": 130, "z": [0, 236]};   // "y" is full range by default
      omezarr.renderImage(arr, multiscale.axes, omeroChannel, slices62).then(src => {
        let html = `<img src="${src}" />`;
        document.getElementById("splitview").innerHTML += html;
      });

      // get a smaller array for Z-stack
      console.log("idr0062 shapes", shapes); // [2, 236, 275, 271], [2, 236, 138, 136], [2, 236, 69, 68]
      const paths = multiscale.datasets.map((d) => d.path);
      console.log("idr0062 paths", paths);
      const path = paths[1];
      const arr200 = await omezarr.getArray(store62, path, zarr_version);
      // turn first channel ON, use LUT
      omero.channels[0].active = true;
      omero.channels[0].lut = "16_colors.lut";
      // TODO: use dim names from multiscale
      let sizeZ = arr200.shape.at(-3);
      let interval = Math.ceil(sizeZ / 7);
      for (let zSlice = interval; zSlice <= sizeZ; zSlice += interval) {
        omero.rdefs = { defaultZ: zSlice };
        let src = await omezarr.renderImage(arr200, multiscale.axes, omero);
        let html = `<img src="${src}" title="Z: ${zSlice}"/>`;
        document.getElementById("stack").innerHTML += html;
      }

      // BIG thumbnail (birds eye view)
      const storeBig = new zarr.FetchStore(IDR0083);
      let bigThumb = await omezarr.renderThumbnail(storeBig, 400);
      document.getElementById("bigThumb").src = bigThumb;
      // BIG image, Load full-resolution array
      let big = await omezarr.getMultiscaleWithArray(storeBig);
      const bigArray = big.arr;
      // Full-sized image is 144384	x 93184
      let sliceIndices = {"x": [50000, 50500], "y": [30000, 30500]};
      let bigImageSrc = await omezarr.renderImage(
        bigArray,
        big.multiscale.axes,
        big.omero,
        sliceIndices
      );
      document.getElementById("bigImages").innerHTML += `<img src="${bigImageSrc}" />`;

      // show luts
      omezarr.getLuts().forEach((lut) => {
        let src = lut.png;
        let html = `<div class="lut"><legend>${lut.name}</legend>
          <img class="lut" src="${src}" title="${lut.name}" /></div>`;
        document.getElementById("luts").innerHTML += html;
      });
    </script>
  </body>
</html>