<bmx-document-scanner>

<bmx-document-scanner id="ex-ds" label="Scan receipts and invoices" file-name="expenses" locale="en-GB"></bmx-document-scanner>
<p class="note" id="ex-ds-out" role="status">Use your camera on a sheet of paper - the page is outlined as it is found and, held still, taken by itself - or add photographs of documents. Each page is straightened and cleaned up; drag its corners if they need it, choose how it looks, and save the pages as one PDF.</p>

<div class="row" style="gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-block: 0.5rem 1.5rem">
  <button type="button" id="ex-ds-sample">Add a sample photo of an invoice</button>
  <button type="button" id="ex-ds-receipt">Add a sample photo of a receipt</button>
</div>

<script type="module">
  await customElements.whenDefined('bmx-document-scanner');
  const el = document.getElementById('ex-ds');
  const out = document.getElementById('ex-ds-out');

  /** A photograph of a page lying at an angle on a wooden desk, drawn for the example. */
  function samplePhoto(kind) {
    const c = document.createElement('canvas');
    c.width = 1600;
    c.height = 1200;
    const g = c.getContext('2d');
    // The desk: warm wood with grain.
    const wood = g.createLinearGradient(0, 0, 1600, 1200);
    wood.addColorStop(0, '#6b4a2f');
    wood.addColorStop(1, '#4a3220');
    g.fillStyle = wood;
    g.fillRect(0, 0, 1600, 1200);
    for (let i = 0; i < 90; i++) {
      g.strokeStyle = `rgba(30, 18, 8, ${0.08 + (i % 5) * 0.03})`;
      g.lineWidth = 1 + (i % 3);
      g.beginPath();
      const y = i * 14 + (i % 7) * 3;
      g.moveTo(0, y);
      g.bezierCurveTo(500, y + 25, 1100, y - 25, 1600, y + 10);
      g.stroke();
    }
    // The page, turned a little, with a soft shadow under it.
    const receipt = kind === 'receipt';
    const pw = receipt ? 420 : 760;
    const ph = receipt ? 900 : 1000;
    g.save();
    g.translate(800, 610);
    g.rotate(receipt ? 0.12 : -0.07);
    g.shadowColor = 'rgba(0, 0, 0, 0.45)';
    g.shadowBlur = 30;
    g.shadowOffsetX = 12;
    g.shadowOffsetY = 16;
    const paper = g.createLinearGradient(-pw / 2, 0, pw / 2, 0);
    paper.addColorStop(0, '#fbfaf6');
    paper.addColorStop(1, '#d9d4c7');
    g.fillStyle = paper;
    g.fillRect(-pw / 2, -ph / 2, pw, ph);
    g.shadowColor = 'transparent';
    g.fillStyle = '#23262b';
    const left = -pw / 2 + 40;
    let y = -ph / 2 + 70;
    if (receipt) {
      g.font = 'bold 30px monospace';
      g.fillText('HARBOUR CAFE', left + 60, y);
      g.font = '20px monospace';
      y += 50;
      for (const [item, price] of [['Flat white', '3.40'], ['Oat latte', '3.80'], ['Croissant', '2.90'], ['Granola pot', '4.25'], ['Sparkling water', '1.95'], ['Banana bread', '3.10']]) {
        g.fillText(item, left, y);
        g.fillText(price, left + 270, y);
        y += 38;
      }
      y += 20;
      g.font = 'bold 24px monospace';
      g.fillText('TOTAL   GBP 19.40', left, y);
      g.font = '18px monospace';
      g.fillText('Card ****4471  17/10/2026', left, y + 50);
      g.fillText('Thank you!', left + 90, y + 110);
    } else {
      g.font = 'bold 44px sans-serif';
      g.fillText('INVOICE', left, y);
      g.font = '20px sans-serif';
      g.fillText('Fernhill Consulting Ltd', left + 380, y - 20);
      g.fillText('No. 2026-1043', left + 380, y + 10);
      y += 80;
      g.fillText('Bill to: Northwind Rail', left, y);
      g.fillText('Date: 17 October 2026', left + 380, y);
      y += 60;
      g.fillStyle = '#d7dce4';
      g.fillRect(left, y - 26, pw - 80, 36);
      g.fillStyle = '#23262b';
      g.font = 'bold 20px sans-serif';
      g.fillText('Description', left + 10, y);
      g.fillText('Amount', left + 540, y);
      g.font = '20px sans-serif';
      for (const [d, a] of [['Discovery workshops (6 days)', '£9,600'], ['Timetable data model', '£14,400'], ['Feed mapping', '£7,200'], ['Travel', '£640']]) {
        y += 46;
        g.fillText(d, left + 10, y);
        g.fillText(a, left + 540, y);
      }
      y += 70;
      g.font = 'bold 24px sans-serif';
      g.fillText('Total due: £31,840', left + 330, y);
      g.font = '18px sans-serif';
      for (let i = 0; i < 6; i++) g.fillText('Payment within 30 days to account 12-34-56 01234567. Thank you for your business.'.slice(0, 60 + i), left, y + 90 + i * 30);
    }
    g.restore();
    return c.toDataURL('image/jpeg', 0.9);
  }

  document.getElementById('ex-ds-sample').addEventListener('click', () => el.addImages([samplePhoto('invoice')]));
  document.getElementById('ex-ds-receipt').addEventListener('click', () => el.addImages([samplePhoto('receipt')]));

  el.addEventListener('bmxCapture', e => {
    const { index, page } = e.detail;
    out.textContent = `Page ${index + 1} added ${page.cornersFrom === 'detected' ? 'with its edges found' : '- drag its corners to the page'}.`;
  });
  el.addEventListener('bmxExport', e => {
    out.textContent = `Saved ${e.detail.fileName}: ${e.detail.pages} pages, ${Math.round(e.detail.bytes.length / 1024)} KB.`;
  });
  el.addEventListener('bmxError', e => {
    out.textContent = e.detail.message;
  });
</script>