<bmx-deep-zoom>

<bmx-deep-zoom id="ex-dz" style="--bmx-deep-zoom-height: 38rem">
  <span class="ex-dz-tag" data-x="223226" data-y="393216">A small copy of the whole set</span>
</bmx-deep-zoom>
<p class="note">The sample is the Mandelbrot set at 1,048,576 × 786,432 pixels - more than 800 gigapixels - drawn tile by tile on background threads as you zoom, so no file is downloaded. A few places are marked; choose one on the Annotations tab and Go to it, or press N for the next. Draw rectangles, ellipses, polygons, freehand outlines, points and measurements; turn the view with R; compare it with a second colouring side by side or with the swipe divider. Open your own TIFF (also BigTIFF and slide scans such as Aperio SVS and OME-TIFF), JPEG or PNG, or give the address of a Deep Zoom, IIIF or Zoomify picture.</p>

<div class="row" style="gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-block: 0.5rem 1.5rem">
  <label>Open your own picture <input type="file" id="ex-dz-file" accept=".tif,.tiff,.svs,.btf,.jpg,.jpeg,.png,.webp" /></label>
  <button type="button" id="ex-dz-sample">Show the sample again</button>
  <button type="button" id="ex-dz-compare">Compare two colourings</button>
  <form id="ex-dz-url-form" style="display: inline-flex; gap: 0.5rem; align-items: center">
    <label>Picture address <input type="url" id="ex-dz-url" placeholder="https://…/info.json or …/photo.dzi" size="32" /></label>
    <button type="submit">Open</button>
  </form>
</div>
<p class="note" id="ex-dz-out" role="status"></p>

<style>
  .ex-dz-tag {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font: 600 0.75rem system-ui, sans-serif;
    white-space: nowrap;
  }
</style>

<script type="module">
  await customElements.whenDefined('bmx-deep-zoom');
  const viewer = document.getElementById('ex-dz');
  const out = document.getElementById('ex-dz-out');
  viewer.addEventListener('bmxLoad', e => {
    const { name, width, height, levels, compare } = e.detail;
    out.textContent = `${compare ? 'Compared with ' : ''}${name}: ${width.toLocaleString()} × ${height.toLocaleString()} pixels, ${levels} levels.`;
  });
  viewer.addEventListener('bmxSelect', e => (out.textContent = e.detail ? `Chose ${e.detail.label || e.detail.shape}.` : ''));
  viewer.addEventListener('bmxMeasure', e => (out.textContent = `Measured ${e.detail.text}.`));
  viewer.addEventListener('bmxAnnotationChange', e => (out.textContent = `${e.detail.annotations.length} annotations (${e.detail.change}).`));
  viewer.addEventListener('bmxSave', e => (out.textContent = `Saved ${e.detail.name} (${Math.round(e.detail.data.size / 1024)} KB).`));
  viewer.addEventListener('bmxError', e => (out.textContent = e.detail.message));
  document.getElementById('ex-dz-file').addEventListener('change', e => {
    if (e.target.files.length) viewer.open(e.target.files[0]);
  });
  document.getElementById('ex-dz-sample').addEventListener('click', () => viewer.loadSample());
  document.getElementById('ex-dz-compare').addEventListener('click', async () => {
    await viewer.openCompare('sample:ember');
    viewer.compare = 'side';
  });
  document.getElementById('ex-dz-url-form').addEventListener('submit', e => {
    e.preventDefault();
    const url = document.getElementById('ex-dz-url').value.trim();
    if (url) viewer.open(url);
  });
  await viewer.loadSample();
</script>