pcbjam/tests/wasm-app/kicad/pcbnew.html

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>KiCad PCBnew WASM</title>
  <style>
    .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
    div.emscripten { text-align: center; }
    /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
    canvas.emscripten { border: 0px none; }

    .window {
      position: absolute;
      pointer-events: none;
      z-index: 10;
      background-color: black;
      overflow: hidden;
      width: 0;
      height: 0;
    }

    .window-canvas {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }

    #status {
      position: fixed;
      bottom: 10px;
      left: 10px;
      color: #fff;
      font-family: monospace;
      z-index: 1000;
      background: rgba(0,0,0,0.7);
      padding: 10px;
      border-radius: 5px;
    }

    #progress {
      width: 300px;
      height: 20px;
      background: #333;
      margin-top: 5px;
    }

    #progress-bar {
      height: 100%;
      background: #4CAF50;
      width: 0%;
      transition: width 0.3s;
    }
  </style>
</head>
<body style="margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #1a1a2e;">
  <div id="main-window" style="width: 100vw; height: 100vh; position: absolute; top: 0; left: 0;"></div>

  <div id="status">
    <div id="status-text">Initializing...</div>
    <div id="progress"><div id="progress-bar"></div></div>
  </div>

  <div id="window-container"></div>

  <script>
    var mainWindow = document.getElementById('main-window');
    var statusText = document.getElementById('status-text');
    var progressBar = document.getElementById('progress-bar');

    var showError = function(msg) {
      console.error('[KICAD_ERROR] ' + msg);
      statusText.textContent = 'Error: ' + msg;
      statusText.style.color = 'red';
    };

    var createCanvas = function() {
      var canvas = document.createElement('canvas');
      canvas.id = 'canvas';
      canvas.style.display = 'none';
      // Set both CSS display size and internal pixel resolution
      var width = window.innerWidth;
      var height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;
      canvas.style.width = width + 'px';
      canvas.style.height = height + 'px';
      canvas.oncontextmenu = function() { event.preventDefault(); };
      canvas.addEventListener("webglcontextlost", function(e) {
        showError('WebGL context lost. You will need to reload the page.');
        e.preventDefault();
      }, false);

      mainWindow.appendChild(canvas);
      Module.canvas = canvas;

      console.log('[KICAD] preRun complete, canvas created: ' + width + 'x' + height);
    };

    var onRuntimeInitialized = function() {
      console.log('[KICAD] Runtime initialized');
      var canvas = Module.canvas;
      canvas.style.display = 'block';
      document.getElementById('status').style.display = 'none';
    };

    var Module = {
      thisProgram: '/usr/bin/pcbnew',  // Fake absolute path for argv[0] (KiCad DEBUG check)
      preRun: [createCanvas],
      postRun: [],

      print: function(text) {
        if (arguments.length > 1)
          text = Array.prototype.slice.call(arguments).join(' ');
        console.log('[KICAD_OUT] ' + text);
      },

      printErr: function(text) {
        if (arguments.length > 1)
          text = Array.prototype.slice.call(arguments).join(' ');
        console.error('[KICAD_ERR] ' + text);
      },

      setStatus: function(text) {
        console.log('[KICAD_STATUS] ' + text);
        statusText.textContent = text;

        // Parse progress from status text
        var match = text.match(/(\d+)\/(\d+)/);
        if (match) {
          var pct = (parseInt(match[1]) / parseInt(match[2])) * 100;
          progressBar.style.width = pct + '%';
        }
      },

      totalDependencies: 0,
      monitorRunDependencies: function(left) {
        this.totalDependencies = Math.max(this.totalDependencies, left);
        Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
      },

      onRuntimeInitialized: onRuntimeInitialized,

      // Required for locating .wasm and .worker.js files
      locateFile: function(path) {
        return path;
      }
    };

    Module.setStatus('Downloading...');

    window.onerror = function(msg, url, line) {
      showError(msg + ' at ' + url + ':' + line);
      Module.setStatus = function(text) {
        if (text) Module.printErr('[post-exception status] ' + text);
      };
      return false;
    };
  </script>

  <!-- wxWidgets WASM glue code (defines getConfigEntryLength, etc.) -->
  <script src="wx.js"></script>
  <script async src="pcbnew.js"></script>
</body>
</html>