examples/example-screen.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PD-USB Demo - Screenshot Capture</title>
  <link rel="stylesheet" href="./assets/styles.css">
  <script src="./pd-usb.js"></script>
</head>
<body>
  <div class="wrapper">
    <header>
      <h1>PD-USB Demo - Screenshot Capture</h1>
    </header>
    <main>
      <div class="panel">
        <div class="row">
          <div class="pull-left">
            <button onclick="connect()" id="connectButton"> Connect to Playdate </button>
            <span id="serial"></span>
          </div>
          <div class="pull-right">
            <button onclick="getScreen()" id="screenButton" disabled> Capture screen </button>
          </div>
        </div>
      </div>
      <div class="panel">
        <canvas id="canvas"></canvas>
        <p>(pssst, you can right-click this to save the image!)</p>
      </div>
    </main>
    <footer class="row">
      <div class="pull-left">
        <a href="//github.com/cranksters/pd-usb">pd-usb</a> | <a href="//github.com/cranksters/pd-usb/blob/main/examples/example-screen.html">page source</a>
      </div>
      <div class="pull-right">
        built by <a href="//github.com/jaames">jaames</a>
      </div>
    </footer>
  </div>

  <script>
    var device;

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = pdusb.PLAYDATE_WIDTH;
    canvas.height = pdusb.PLAYDATE_HEIGHT;
    const imgData = ctx.createImageData(canvas.width, canvas.height);
    const rgbaBuffer = new Uint32Array(imgData.data.buffer);
    
    // Check WebSerial support, display error if not supported
    try {
      pdusb.assertUsbSupported();
    }
    catch (e) {
      document.getElementById('serial').innerHTML = e.message;
      document.getElementById('connectButton').disabled = true;
    }

    async function connect() {
      try {
        device = await pdusb.requestConnectPlaydate();
          
        await device.open();
        const serial = await device.getSerial();
        
        document.getElementById('serial').innerHTML = `Connected to Playdate ${ serial }`;
        document.getElementById('screenButton').disabled = false;

        device.on('disconnect', () => {
          document.getElementById('serial').innerHTML = 'Playdate disconnected';
          document.getElementById('screenButton').disabled = true;
        });
      }
      catch(e) {
        console.warn(e);
        document.getElementById('serial').innerHTML = 'Error connecting to Playdate, try again';
      }
    }

    async function getScreen() {
      try {
        const pixels = await device.getScreenIndexed();
        const palette = [0xff000000, 0xffffffff];
        for (let i = 0; i < pixels.length; i++) {
          rgbaBuffer[i] = palette[pixels[i]];
        }
        ctx.putImageData(imgData, 0, 0);
      }
      catch (e) {
        document.getElementById('serial').innerHTML = 'Error getting screen, lock and unlock the Playdate and reconnect';
        document.getElementById('screenButton').disabled = true;
      }
    }
  </script>
</body>
</html>