benjamin.harris
/
DSP-ADAU1467


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
							#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; }
  </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-4">Device: <strong>{{IP}}</strong></p>

  <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">
  <a href="/" class="text-muted small"><i class="fa fa-arrow-left"></i> Back to EEPROM Uploader</a>
</div>

<script>
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();
}

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