benjamin.harris
/
DSP-ADAU1467


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
							#pragma once
#include <pgmspace.h>

static const char INDEX_HTML[] PROGMEM = R"HTML(
<!doctype html>
<html lang="en-AU">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <link rel="stylesheet" href="yeti-bootstrap.min.css">
  <link rel="stylesheet" href="font-awesome.min.css">
  <script src="jquery-3.7.1.slim.min.js" crossorigin="anonymous"></script>

  <title>Modulos DSP - Device Management</title>
  <style>
    @font-face {
      font-family: 'nasalization';
      src: url('/nasalization-rg.woff2') format('woff2');
    }
    .nasalization { font-family: 'nasalization'; }
    .reg-row td   { font-family: monospace; font-size: 0.85rem; padding: 2px 8px; }
    .reg-row td:first-child { color: #6c757d; width: 120px; }
  </style>
</head>

<body class="bg-light" style="padding-top: 5rem;">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand nasalization text-uppercase" href="#">
        <img src="/logo-horizontal.webp" height="30" class="d-inline-block align-top" loading="lazy">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
              aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <span class="col align-self-end text-end text-white">
          <span>{{IP}}</span>
          <i class="text-success fas fa-wifi"></i>
        </span>
      </div>
    </div>
  </nav>

  <div class="container pb-5">
    <div class="row">
      <div class="col-sm">
        <h2 class="text-center pt-2 font-weight-bold">Device Management</h2>
      </div>
    </div>

    <div class="row g-3">

      <!-- ── Left column ─────────────────────────────────────── -->
      <div class="col-lg-6">

        <!-- DSP live status card -->
        <div class="card mb-3">
          <div class="card-header d-flex justify-content-between align-items-center py-2">
            <span class="small fw-semibold"><i class="fa fa-tachometer"></i> DSP Status</span>
            <span id="dspBadge" class="badge bg-secondary">Polling&hellip;</span>
          </div>
          <div class="card-body py-2 px-3">
            <table class="w-100">
              <tr class="reg-row"><td>Core Register</td><td id="sCoreReg">&mdash;</td></tr>
              <tr class="reg-row"><td>Running</td>      <td id="sRunning">&mdash;</td></tr>
              <tr class="reg-row"><td>GPIO</td>         <td id="sGpio">&mdash;</td></tr>
              <tr class="reg-row"><td>ADC 0&ndash;3</td><td id="sAdc">&mdash;</td></tr>
            </table>
            <p class="text-muted mb-0 mt-1" style="font-size:0.72rem">
              Updated <span id="sUpdated">&mdash;</span> &bull; auto-refreshes every 2 s
            </p>
          </div>
        </div>

        <!-- DSP Control -->
        <div class="card mb-3">
          <div class="card-header py-2">
            <span class="small fw-semibold"><i class="fa fa-refresh"></i> DSP Control</span>
          </div>
          <div class="card-body py-2 px-3">
            <button id="resetBtn" class="btn btn-outline-secondary w-100" onclick="dspReset()">
              <i class="fa fa-power-off"></i>&nbsp; Soft Reset DSP
            </button>
            <div class="form-text">
              Restarts DSP program execution. RAM is preserved &mdash; does not reload from EEPROM.
            </div>
            <div id="resetResult" style="display:none;" class="alert alert-sm mt-2" role="alert"></div>
          </div>
        </div>

        <!-- GPIO Control -->
        <div class="card mb-3">
          <div class="card-header py-2">
            <span class="small fw-semibold"><i class="fa fa-toggle-on"></i> GPIO Control</span>
          </div>
          <div class="card-body py-2 px-3">
            <div class="d-flex gap-2 mb-1">
              <button id="gp0" class="btn btn-outline-secondary btn-sm" onclick="toggleGpioPin(0)">GP0</button>
              <button id="gp1" class="btn btn-outline-secondary btn-sm" onclick="toggleGpioPin(1)">GP1</button>
              <button id="gp2" class="btn btn-outline-secondary btn-sm" onclick="toggleGpioPin(2)">GP2</button>
              <button id="gp3" class="btn btn-outline-secondary btn-sm" onclick="toggleGpioPin(3)">GP3</button>
            </div>
            <div class="form-text">
              Writes to GPIO All Register (0x0808). Only output-configured pins respond (set via MpCfg).
            </div>
            <div id="gpioResult" style="display:none;" class="alert alert-sm mt-1" role="alert"></div>
          </div>
        </div>

        <!-- Parameter Tuner link -->
        <div class="card mb-3">
          <div class="card-header py-2">
            <span class="small fw-semibold"><i class="fa fa-sliders"></i> Parameter Tuner</span>
          </div>
          <div class="card-body py-2 px-3">
            <a href="/params" class="btn btn-outline-primary w-100">
              <i class="fa fa-edit"></i>&nbsp; Open Parameter Tuner
            </a>
            <div class="form-text">
              Read and write DSP parameter RAM (0x0000&ndash;0x03FF) in real time using safeload.
            </div>
          </div>
        </div>

        <!-- WiFi Settings -->
        <div class="card mb-3">
          <div class="card-header py-2">
            <span class="small fw-semibold"><i class="fa fa-wifi"></i> WiFi Settings</span>
          </div>
          <div class="card-body py-2 px-3">
            <button class="btn btn-outline-danger w-100" onclick="wifiReset()">
              <i class="fa fa-trash-o"></i>&nbsp; Reset WiFi Credentials
            </button>
            <div class="form-text">
              Clears stored credentials and reboots into setup mode.
              Connect to <strong>ModulosDSP-Setup</strong> then open <strong>192.168.4.1</strong> to reconfigure.
            </div>
            <div id="wifiResetResult" style="display:none;" class="alert alert-sm mt-1" role="alert"></div>
          </div>
        </div>

        <!-- Firmware Update link -->
        <div class="card mb-3">
          <div class="card-header py-2">
            <span class="small fw-semibold"><i class="fa fa-microchip"></i> Firmware Update</span>
          </div>
          <div class="card-body py-2 px-3">
            <a href="/ota" class="btn btn-outline-warning w-100">
              <i class="fa fa-upload"></i>&nbsp; Flash ESP32 Firmware (OTA)
            </a>
            <div class="form-text">Update the ESP32 firmware via over-the-air upload.</div>
          </div>
        </div>

      </div>

      <!-- ── Right column ────────────────────────────────────── -->
      <div class="col-lg-6">

        <!-- EEPROM Upload -->
        <div class="card">
          <div class="card-header py-2">
            <span class="small fw-semibold"><i class="fa fa-database"></i> EEPROM Upload (24C256)</span>
          </div>
          <div class="card-body">
            <p class="text-muted small mb-3">I&sup2;C 0x50 &bull; 32&thinsp;768 bytes &bull; 64-byte pages</p>
            <div class="mb-3">
              <label class="form-label fw-semibold">DSP firmware binary</label>
              <input class="form-control" type="file" id="binFile" accept=".bin,.hex">
              <div class="form-text">
                SigmaStudio: <em>Action &rarr; Export System Files</em> &rarr; upload the <strong>.hex</strong> file.<br>
                Raw binary <strong>.bin</strong> files are also accepted.
              </div>
            </div>
            <div class="mb-3 form-check">
              <input class="form-check-input" type="checkbox" id="verifyChk" checked>
              <label class="form-check-label" for="verifyChk">Verify after write (CRC32 readback)</label>
            </div>
            <button style="background-color:#114378;border-color:#114378;color:#e8b434;"
                    type="button" class="btn w-100" id="uploadBtn" onclick="startUpload()">
              <i class="fa fa-upload"></i>&nbsp; Upload and Program
            </button>

            <!-- Progress -->
            <div id="uploadProgress" style="display:none;" class="mt-3">
              <div class="progress mb-2" style="height:6px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated"
                     style="width:100%;background-color:#114378;"></div>
              </div>
              <p class="text-center text-muted small mb-0">
                <i class="fa fa-circle-o-notch fa-spin"></i>&nbsp; Writing to EEPROM&hellip;
              </p>
            </div>

            <!-- Result -->
            <div id="uploadResult" style="display:none;" class="mt-3"></div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <footer class="fixed-bottom mt-auto py-3 border-top bg-dark">
    <div class="container">
      <p class="text-white text-center mb-0">
        Copyright &copy; <span id="year"></span> &ndash; Modulos Audio &ndash; DSP Controller &ndash; All Rights Reserved
      </p>
      <script>document.getElementById('year').innerHTML = new Date().getFullYear();</script>
    </div>
  </footer>

  <script src="/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
  <script>
function pollStatus() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/dsp_status', true);
  xhr.timeout = 1800;
  xhr.onload = function() {
    var badge = document.getElementById('dspBadge');
    if (xhr.status !== 200) {
      badge.className = 'badge bg-danger'; badge.textContent = 'I2C Error';
      return;
    }
    try {
      var d = JSON.parse(xhr.responseText);
      if (d.running) {
        badge.className = 'badge bg-success'; badge.textContent = 'Running';
      } else {
        badge.className = 'badge bg-danger';  badge.textContent = 'Stopped';
      }
      document.getElementById('sCoreReg').textContent = d.coreReg;
      document.getElementById('sRunning').textContent = d.running ? 'Yes' : 'No';
      document.getElementById('sGpio').textContent    = d.gpio;
      document.getElementById('sAdc').textContent     = d.adc.join('  ');
      document.getElementById('sUpdated').textContent = new Date().toLocaleTimeString();
    } catch(e) {
      badge.className = 'badge bg-warning'; badge.textContent = 'Parse error';
    }
  };
  xhr.ontimeout = xhr.onerror = function() {
    var badge = document.getElementById('dspBadge');
    badge.className = 'badge bg-secondary'; badge.textContent = 'Offline';
  };
  xhr.send();
}
pollStatus();
setInterval(pollStatus, 2000);

function dspReset() {
  var btn = document.getElementById('resetBtn');
  var box = document.getElementById('resetResult');
  btn.disabled = true;
  box.style.display = 'none';
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/dsp_reset', true);
  xhr.onload = function() {
    box.style.display = 'block';
    if (xhr.status === 200) {
      box.className = 'alert alert-success alert-sm';
      box.innerHTML = '<i class="fa fa-check"></i> ' + xhr.responseText;
    } else {
      box.className = 'alert alert-danger alert-sm';
      box.innerHTML = '<i class="fa fa-times"></i> Reset failed.';
    }
    btn.disabled = false;
  };
  xhr.onerror = function() {
    box.style.display = 'block';
    box.className = 'alert alert-danger alert-sm';
    box.innerHTML = '<i class="fa fa-times"></i> Request failed.';
    btn.disabled = false;
  };
  xhr.send();
}

var gpioVal = null;

function updateGpioBtns(val) {
  for (var i = 0; i < 4; i++) {
    var btn = document.getElementById('gp' + i);
    if (val & (1 << i)) {
      btn.className = 'btn btn-success btn-sm';
    } else {
      btn.className = 'btn btn-outline-secondary btn-sm';
    }
  }
}

function fetchGpio() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/gpio', true);
  xhr.timeout = 1800;
  xhr.onload = function() {
    if (xhr.status === 200) {
      try {
        var d = JSON.parse(xhr.responseText);
        gpioVal = d.gpio;
        updateGpioBtns(gpioVal);
      } catch(e) {}
    }
  };
  xhr.send();
}

function toggleGpioPin(pin) {
  if (gpioVal === null) return;
  gpioVal ^= (1 << pin);
  updateGpioBtns(gpioVal);
  var box = document.getElementById('gpioResult');
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/gpio', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onload = function() {
    box.style.display = 'block';
    if (xhr.status === 200) {
      box.className = 'alert alert-success alert-sm';
      box.innerHTML = '<i class="fa fa-check"></i> GP' + pin + ' toggled (0x' +
                      (gpioVal & 0xFF).toString(16).padStart(2,'0').toUpperCase() + ')';
    } else {
      box.className = 'alert alert-danger alert-sm';
      box.innerHTML = '<i class="fa fa-times"></i> GPIO write failed.';
    }
  };
  xhr.onerror = function() {
    box.style.display = 'block';
    box.className = 'alert alert-danger alert-sm';
    box.innerHTML = '<i class="fa fa-times"></i> Request failed.';
  };
  xhr.send('value=' + gpioVal);
}

fetchGpio();
setInterval(fetchGpio, 5000);

function parseSigmaHex(text) {
  var matches = text.match(/0x[0-9A-Fa-f]{2}/g);
  if (!matches || matches.length === 0) return null;
  var bytes = new Uint8Array(matches.length);
  for (var i = 0; i < matches.length; i++) bytes[i] = parseInt(matches[i], 16);
  return bytes;
}

function startUpload() {
  var fileInput = document.getElementById('binFile');
  if (!fileInput.files || !fileInput.files.length) {
    alert('Please select a .hex or .bin file first.');
    return;
  }
  var file = fileInput.files[0];
  var ext = file.name.split('.').pop().toLowerCase();

  if (ext === 'hex') {
    var reader = new FileReader();
    reader.onload = function(e) {
      var bytes = parseSigmaHex(e.target.result);
      if (!bytes) { alert('Could not parse .hex file — unexpected format.'); return; }
      doUpload(new Blob([bytes], {type: 'application/octet-stream'}), file.name);
    };
    reader.readAsText(file);
  } else {
    doUpload(file, file.name);
  }
}

function doUpload(blob, name) {
  var formData = new FormData();
  if (document.getElementById('verifyChk').checked) formData.append('verify', '1');
  formData.append('bin', blob, name);

  document.getElementById('uploadBtn').disabled = true;
  document.getElementById('uploadProgress').style.display = 'block';
  document.getElementById('uploadResult').style.display = 'none';

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onload = function() {
    document.getElementById('uploadProgress').style.display = 'none';
    document.getElementById('uploadBtn').disabled = false;
    var div = document.getElementById('uploadResult');
    div.style.display = 'block';
    if (xhr.status === 200) {
      try {
        var d = JSON.parse(xhr.responseText);
        div.innerHTML =
          '<div class="alert alert-success mb-0">' +
          '<strong><i class="fa fa-check-circle"></i> Programmed OK</strong><br>' +
          '<span class="small">Bytes written: <code>' + d.bytes + '</code></span><br>' +
          '<span class="small">CRC32: <code>' + d.crc.toUpperCase() + '</code></span>' +
          (d.verified ? '<br><span class="small"><i class="fa fa-check"></i> Verified against EEPROM readback</span>' : '') +
          '</div>';
      } catch(e) {
        div.innerHTML = '<div class="alert alert-success mb-0"><i class="fa fa-check-circle"></i> Upload complete.</div>';
      }
    } else {
      div.innerHTML =
        '<div class="alert alert-danger mb-0">' +
        '<strong><i class="fa fa-times-circle"></i> Upload failed</strong><br>' +
        '<span class="small text-muted">Check the Serial monitor for details.</span>' +
        '</div>';
    }
  };
  xhr.onerror = function() {
    document.getElementById('uploadProgress').style.display = 'none';
    document.getElementById('uploadBtn').disabled = false;
    var div = document.getElementById('uploadResult');
    div.style.display = 'block';
    div.innerHTML = '<div class="alert alert-danger mb-0"><i class="fa fa-times-circle"></i> Connection lost during upload.</div>';
  };
  xhr.send(formData);
}

function wifiReset() {
  if (!confirm('Clear WiFi credentials and reboot into setup mode?')) return;
  var box = document.getElementById('wifiResetResult');
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/wifi_reset', true);
  xhr.onload = function() {
    box.style.display = 'block';
    box.className = 'alert alert-warning alert-sm';
    box.innerHTML = '<i class="fa fa-info-circle"></i> ' + xhr.responseText;
  };
  xhr.onerror = function() {
    box.style.display = 'block';
    box.className = 'alert alert-danger alert-sm';
    box.innerHTML = '<i class="fa fa-times"></i> Request failed.';
  };
  xhr.send();
}
  </script>
</body>
</html>
)HTML";