benjamin.harris
/
DSP-ADAU1467


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
							#pragma once
#include <pgmspace.h>

static const char OTA_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>
    body { padding-top: 40px; }
    .ota-card { max-width: 520px; margin: 0 auto; }
    #progressWrap { display: none; margin-top: 1.2rem; }
    #resultBox    { display: none; margin-top: 1rem; }
    #resetResult  { display: none; margin-top: 0.6rem; }
    .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>
<div class="container ota-card">

  <h4 class="mb-1"><i class="fa fa-microchip"></i> Device Management</h4>
  <p class="text-muted small mb-2">Device: <strong>{{IP}}</strong></p>

  <!-- DSP live status card -->
  <div class="card mb-4">
    <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>

  <form id="otaForm" action="/ota_do" method="POST" enctype="multipart/form-data">
    <div class="mb-3">
      <label class="form-label fw-semibold">Firmware binary (.bin)</label>
      <input class="form-control" type="file" id="fwFile" name="firmware" accept=".bin" required>
      <div class="form-text">Export from Arduino IDE: <em>Sketch &rarr; Export Compiled Binary</em></div>
    </div>
    <button type="submit" id="flashBtn" class="btn btn-warning w-100">
      <i class="fa fa-upload"></i>&nbsp; Flash Firmware
    </button>
  </form>

  <div id="progressWrap">
    <div class="progress" style="height:22px">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
           style="width:100%; font-size:0.8rem; line-height:22px">
        Uploading&hellip;
      </div>
    </div>
    <p class="text-center text-muted small mt-2">
      <i class="fa fa-spinner fa-spin"></i>
      Do not power off the device.
    </p>
  </div>

  <div id="resultBox" class="alert" role="alert"></div>

  <hr class="mt-4">
  <h6 class="text-muted mb-2"><i class="fa fa-refresh"></i> DSP Control</h6>
  <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 mb-1">
    Restarts DSP program execution. RAM is preserved — does not reload from EEPROM.
  </div>
  <div id="resetResult" class="alert alert-sm" role="alert"></div>

  <hr class="mt-3">
  <h6 class="text-muted mb-2"><i class="fa fa-toggle-on"></i> GPIO Control</h6>
  <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 mb-1">
    Writes to GPIO All Register (0x0808). Only output-configured pins respond (set via MpCfg).
  </div>
  <div id="gpioResult" style="display:none; margin-top:0.4rem;" class="alert alert-sm" role="alert"></div>

  <hr class="mt-3">
  <a href="/" class="text-muted small"><i class="fa fa-arrow-left"></i> Back to EEPROM Uploader</a>
</div>

<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);

document.getElementById('otaForm').addEventListener('submit', function(e) {
  e.preventDefault();
  var file = document.getElementById('fwFile').files[0];
  if (!file) return;

  document.getElementById('flashBtn').disabled = true;
  document.getElementById('progressWrap').style.display = 'block';
  document.getElementById('resultBox').style.display = 'none';

  var fd = new FormData(this);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/ota_do', true);

  xhr.onload = function() {
    document.getElementById('progressWrap').style.display = 'none';
    var box = document.getElementById('resultBox');
    box.style.display = 'block';
    if (xhr.status === 200) {
      box.className = 'alert alert-success';
      box.innerHTML = '<i class="fa fa-check-circle"></i> ' + xhr.responseText +
                      '<br><small>Reconnecting in 5 seconds&hellip;</small>';
      setTimeout(function(){ window.location.href = '/'; }, 5500);
    } else {
      box.className = 'alert alert-danger';
      box.innerHTML = '<i class="fa fa-times-circle"></i> ' + xhr.responseText;
      document.getElementById('flashBtn').disabled = false;
    }
  };

  xhr.onerror = function() {
    document.getElementById('progressWrap').style.display = 'none';
    var box = document.getElementById('resultBox');
    box.style.display = 'block';
    box.className = 'alert alert-danger';
    box.innerHTML = '<i class="fa fa-times-circle"></i> Upload error — check Serial log.';
    document.getElementById('flashBtn').disabled = false;
  };

  xhr.send(fd);
});
</script>
</body>
</html>
)HTML";