<bmx-pcb-viewer>

<bmx-pcb-viewer id="ex-pcb" style="--bmx-pcb-viewer-height: 36rem"></bmx-pcb-viewer>
<p class="note">A fictional two-layer sensor board, its fabrication files written by the viewer's own sample: Gerber X2 copper, solder mask, silkscreen and paste for both sides, the profile, and plated and non-plated drill files. See it as made from the top and the bottom, or as layers; click a pad or a track to light up its net and name its part and pin; find a part (U1, J2) or a net (SDA) on the Parts tab; measure between pads; pin notes to the board; read the drill table; save the view as SVG, PNG or PDF. Change the solder mask to red, blue or black and the finish to tin or bare copper.</p>

<div class="row" style="gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-block: 0.5rem 1.5rem">
  <label>Open your own board (Gerber and drill files, or a ZIP) <input type="file" id="ex-pcb-file" multiple accept=".zip,.gbr,.ger,.gtl,.gbl,.gts,.gbs,.gto,.gbo,.gtp,.gbp,.gko,.gm1,.drl,.xln,.txt" /></label>
  <button type="button" id="ex-pcb-sample">Show the sample again</button>
  <label>Solder mask
    <select id="ex-pcb-mask">
      <option value="green">Green</option>
      <option value="red">Red</option>
      <option value="blue">Blue</option>
      <option value="black">Black</option>
      <option value="purple">Purple</option>
    </select>
  </label>
</div>
<p class="note" id="ex-pcb-out" role="status"></p>

<script type="module">
  await customElements.whenDefined('bmx-pcb-viewer');
  const viewer = document.getElementById('ex-pcb');
  const out = document.getElementById('ex-pcb-out');
  const mm = v => `${Math.round(v * 100) / 100} mm`;
  viewer.addEventListener('bmxLoad', e => {
    const { name, stats, layers } = e.detail;
    out.textContent = `${name}: ${layers.length} files, ${mm(stats.width)} × ${mm(stats.height)}, ${stats.copperLayers} copper layers, ${stats.holes} holes, ${stats.components} parts, ${stats.nets} nets.`;
  });
  viewer.addEventListener('bmxSelect', e => {
    const s = e.detail;
    out.textContent = s ? [s.component && (s.pin ? `${s.component} pin ${s.pin}${s.pinName ? ` (${s.pinName})` : ''}` : s.component), s.net && `net ${s.net}`].filter(Boolean).join(', ') || 'Nothing named there.' : '';
  });
  viewer.addEventListener('bmxMeasure', e => (out.textContent = `Measured ${mm(e.detail.distance)}.`));
  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-pcb-file').addEventListener('change', e => {
    if (e.target.files.length) viewer.open(Array.from(e.target.files));
  });
  document.getElementById('ex-pcb-sample').addEventListener('click', () => viewer.loadSample());
  document.getElementById('ex-pcb-mask').addEventListener('change', e => (viewer.maskColor = e.target.value));
  await viewer.loadSample();
</script>