benjamin.harris
/
DSP-ADAU1467


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
							#pragma once
#include <pgmspace.h>

static const char PARAMS_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 - Parameter Tuner</title>
  <style>
    @font-face {
      font-family: 'nasalization';
      src: url('/nasalization-rg.woff2') format('woff2');
    }
    .nasalization  { font-family: 'nasalization'; }
    .font-monospace { font-family: monospace; }
    .cur-sub { font-size: 0.72rem; color: #6c757d; }
    td.val-cell { line-height: 1.3; font-size: 0.85rem; }
  </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="#navNav"
              aria-controls="navNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navNav">
        <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 mb-2">
      <div class="col">
        <h2 class="pt-2 font-weight-bold">Parameter Tuner</h2>
        <p class="text-muted small mb-2">
          Read and write DSP parameter RAM (0x0000&ndash;0x03FF) in real time using safeload &mdash;
          no audio glitches on a live DSP. Parameter list is saved to browser storage.
        </p>
      </div>
    </div>

    <div class="mb-3 d-flex flex-wrap gap-2 align-items-center">
      <button class="btn btn-primary btn-sm" onclick="addRow()">
        <i class="fa fa-plus"></i> Add Parameter
      </button>
      <button class="btn btn-outline-secondary btn-sm" onclick="readAll()">
        <i class="fa fa-refresh"></i> Read All
      </button>
      <button class="btn btn-outline-secondary btn-sm" onclick="generateHeader()">
        <i class="fa fa-file-code-o"></i> Export .h File
      </button>
      <button class="btn btn-outline-danger btn-sm" onclick="clearRows()">
        <i class="fa fa-trash"></i> Clear All
      </button>
      <a href="/" class="btn btn-outline-secondary btn-sm ms-auto">
        <i class="fa fa-arrow-left"></i> Device Management
      </a>
    </div>

    <div class="card">
      <div class="table-responsive">
        <table class="table table-sm table-hover align-middle mb-0" id="paramTable">
          <thead class="table-dark">
            <tr>
              <th style="width:88px">Address</th>
              <th>Label</th>
              <th style="width:148px">Current Value</th>
              <th style="width:118px">New Value</th>
              <th style="width:130px">Mode</th>
              <th style="width:90px"></th>
            </tr>
          </thead>
          <tbody id="paramRows"></tbody>
        </table>
      </div>
      <div class="card-footer text-muted small" id="statusBar">
        No parameters added. Click <strong>Add Parameter</strong> to begin.
      </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>
var rowCount = 0;

function addRow(addr, label) {
  var id = ++rowCount;
  var addrVal  = (addr  !== undefined) ? addr  : '';
  var labelVal = (label !== undefined) ? label : '';

  var tr = document.createElement('tr');
  tr.id = 'row-' + id;
  tr.innerHTML =
    '<td>' +
      '<input type="text" class="form-control form-control-sm font-monospace" ' +
             'id="addr-' + id + '" value="' + addrVal + '" placeholder="0x0000" ' +
             'style="width:78px" oninput="saveState()">' +
    '</td>' +
    '<td>' +
      '<input type="text" class="form-control form-control-sm" ' +
             'id="lbl-' + id + '" value="' + labelVal + '" placeholder="e.g. Master Volume" ' +
             'oninput="saveState()">' +
    '</td>' +
    '<td class="val-cell" id="cur-' + id + '">&mdash;</td>' +
    '<td>' +
      '<input type="text" class="form-control form-control-sm font-monospace" ' +
             'id="val-' + id + '" placeholder="0.0" ' +
             'onkeydown="if(event.key===\'Enter\')writeParam(' + id + ')">' +
    '</td>' +
    '<td>' +
      '<select class="form-select form-select-sm" id="mode-' + id + '" ' +
              'onchange="modeChanged(' + id + ')">' +
        '<option value="float">Float (5.23)</option>' +
        '<option value="hex">Hex (8 chars)</option>' +
      '</select>' +
    '</td>' +
    '<td class="text-nowrap">' +
      '<button class="btn btn-outline-primary btn-sm me-1" onclick="readParam(' + id + ')" title="Read">' +
        '<i class="fa fa-download"></i>' +
      '</button>' +
      '<button class="btn btn-outline-success btn-sm me-1" onclick="writeParam(' + id + ')" title="Write">' +
        '<i class="fa fa-upload"></i>' +
      '</button>' +
      '<button class="btn btn-outline-danger btn-sm" onclick="removeRow(' + id + ')" title="Remove">' +
        '<i class="fa fa-times"></i>' +
      '</button>' +
    '</td>';

  document.getElementById('paramRows').appendChild(tr);
  updateStatusBar();
  saveState();
}

function removeRow(id) {
  var r = document.getElementById('row-' + id);
  if (r) r.remove();
  updateStatusBar();
  saveState();
}

function clearRows() {
  if (!confirm('Remove all parameters?')) return;
  document.getElementById('paramRows').innerHTML = '';
  rowCount = 0;
  updateStatusBar();
  saveState();
}

function modeChanged(id) {
  var ph = document.getElementById('mode-' + id).value === 'hex' ? '00000000' : '0.0';
  document.getElementById('val-' + id).placeholder = ph;
}

function getAddr(id) {
  var v = document.getElementById('addr-' + id).value.trim();
  if (v.startsWith('0x') || v.startsWith('0X')) v = v.substring(2);
  var n = parseInt(v, 16);
  if (isNaN(n) || n < 0 || n > 0x03FF) return null;
  return n;
}

function readParam(id) {
  var addr = getAddr(id);
  var el = document.getElementById('cur-' + id);
  if (addr === null) {
    el.innerHTML = '<span class="text-danger small">Bad address</span>';
    return;
  }
  el.innerHTML = '<i class="fa fa-spinner fa-spin text-muted"></i>';
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/param?addr=' + addr, true);
  xhr.timeout = 2000;
  xhr.onload = function() {
    if (xhr.status === 200) {
      try {
        var d = JSON.parse(xhr.responseText);
        el.innerHTML =
          '<span class="font-monospace">' + d.float.toFixed(7) + '</span>' +
          '<br><span class="cur-sub font-monospace">' + d.hex + '</span>';
      } catch(e) { el.textContent = 'Parse error'; }
    } else {
      el.innerHTML = '<span class="text-danger small">I²C error</span>';
    }
  };
  xhr.ontimeout = xhr.onerror = function() {
    el.innerHTML = '<span class="text-danger small">Offline</span>';
  };
  xhr.send();
}

function writeParam(id) {
  var addr = getAddr(id);
  if (addr === null) return;
  var val  = document.getElementById('val-' + id).value.trim();
  var mode = document.getElementById('mode-' + id).value;
  if (!val) return;

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/param', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onload = function() {
    if (xhr.status === 200) {
      readParam(id);
    } else {
      document.getElementById('cur-' + id).innerHTML =
        '<span class="text-danger small">' + xhr.responseText + '</span>';
    }
  };
  xhr.onerror = function() {
    document.getElementById('cur-' + id).innerHTML =
      '<span class="text-danger small">Request failed</span>';
  };
  xhr.send('addr=' + addr + '&value=' + encodeURIComponent(val) + '&mode=' + mode);
}

function readAll() {
  var rows = document.getElementById('paramRows').children;
  for (var i = 0; i < rows.length; i++) {
    readParam(parseInt(rows[i].id.replace('row-', '')));
  }
}

function updateStatusBar() {
  var n = document.getElementById('paramRows').children.length;
  var bar = document.getElementById('statusBar');
  bar.innerHTML = n === 0
    ? 'No parameters added. Click <strong>Add Parameter</strong> to begin.'
    : n + ' parameter' + (n === 1 ? '' : 's') +
      ' &mdash; click <strong>Read All</strong> to refresh values.';
}

function saveState() {
  var rows = [];
  var els = document.getElementById('paramRows').children;
  for (var i = 0; i < els.length; i++) {
    var id = parseInt(els[i].id.replace('row-', ''));
    rows.push({
      addr:  document.getElementById('addr-' + id).value,
      label: document.getElementById('lbl-' + id).value
    });
  }
  try { localStorage.setItem('modulos_dsp_params', JSON.stringify(rows)); } catch(e) {}
}

function toDefine(label, addr) {
  var s = label.trim().toUpperCase();
  s = s.replace(/[^A-Z0-9]+/g, '_');   // non-alphanumeric runs → underscore
  s = s.replace(/^_+|_+$/g, '');        // trim leading/trailing underscores
  if (!s || /^[0-9]/.test(s)) {
    // empty or starts with digit — fall back to address
    return 'PARAM_0x' + ('000' + addr.toString(16).toUpperCase()).slice(-4);
  }
  return 'PARAM_' + s;
}

function generateHeader() {
  var rows = document.getElementById('paramRows').children;
  if (rows.length === 0) {
    alert('No parameters to export. Add some parameters first.');
    return;
  }

  // Collect valid rows
  var defines = [];
  var seen = {};
  for (var i = 0; i < rows.length; i++) {
    var id = parseInt(rows[i].id.replace('row-', ''));
    var addr = getAddr(id);
    if (addr === null) continue;
    var label = document.getElementById('lbl-' + id).value;
    var name = toDefine(label, addr);
    // Deduplicate: second occurrence becomes NAME_2, third NAME_3, etc.
    if (seen[name]) {
      seen[name]++;
      name = name + '_' + seen[name];
    } else {
      seen[name] = 1;
    }
    defines.push({
      name: name,
      addr: '0x' + ('000' + addr.toString(16).toUpperCase()).slice(-4),
      label: label.trim()
    });
  }

  if (defines.length === 0) {
    alert('No valid addresses found. Check address fields contain 0x0000–0x03FF.');
    return;
  }

  // Align #define values to longest name
  var maxLen = 0;
  defines.forEach(function(d) { if (d.name.length > maxLen) maxLen = d.name.length; });

  var now = new Date().toISOString().slice(0, 19).replace('T', ' ');
  var host = window.location.hostname;
  var lines = [
    '// ModulosDSP — DSP Parameter Addresses',
    '// Generated: ' + now,
    '// Device:    ' + host,
    '//',
    '// Use with DSPWriter::safeload_writeRegister(PARAM_NAME, value, true);',
    '//',
    '#pragma once',
    '',
    '// Parameter RAM (ADAU1401/1701 — 5.23 fixed-point, 4 bytes/word, 0x0000–0x03FF)'
  ];

  defines.forEach(function(d) {
    var pad = new Array(maxLen - d.name.length + 3).join(' ');
    var comment = d.label ? ('  // ' + d.label) : '';
    lines.push('#define ' + d.name + pad + d.addr + comment);
  });

  var content = lines.join('\n') + '\n';
  var blob = new Blob([content], { type: 'text/plain' });
  var url = URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.href = url;
  a.download = 'dsp_params.h';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

function loadState() {
  try {
    var s = localStorage.getItem('modulos_dsp_params');
    if (s) {
      var rows = JSON.parse(s);
      if (rows.length > 0) {
        rows.forEach(function(r) { addRow(r.addr, r.label); });
        return;
      }
    }
  } catch(e) {}
  addRow();
}

loadState();
  </script>
</body>
</html>
)HTML";