initial commit

2025-11-19 09:28:12 -06:00
commit 398f96cdfe
2 changed files with 252 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,141 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>MCU Memory Plotter</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <style>
+    body {
+      font-family: sans-serif;
+      margin: 20px;
+    }
+    form {
+      margin-bottom: 20px;
+    }
+    label {
+      display: inline-block;
+      width: 80px;
+    }
+    input, select {
+      margin-bottom: 8px;
+    }
+    #error {
+      color: red;
+      margin-top: 10px;
+    }
+  </style>
+</head>
+<body>
+  <h1>MCU Memory Plotter</h1>
+
+  <form id="memForm">
+    <div>
+      <label for="addr">Address</label>
+      <input type="text" id="addr" value="0x20000000" required>
+    </div>
+    <div>
+      <label for="length">Length</label>
+      <input type="number" id="length" value="128" required>
+    </div>
+    <div>
+      <label for="type">Type</label>
+      <select id="type">
+        <option value="int8">int8</option>
+        <option value="uint8">uint8</option>
+        <option value="int16">int16</option>
+        <option value="uint16">uint16</option>
+        <option value="int32">int32</option>
+        <option value="uint32">uint32</option>
+        <option value="float" selected>float</option>
+        <option value="double">double</option>
+      </select>
+    </div>
+    <div>
+      <label for="target">Target</label>
+      <input type="text" id="target" value="localhost:3333">
+    </div>
+    <div>
+      <label for="gdb">GDB</label>
+      <input type="text" id="gdb" value="arm-none-eabi-gdb">
+    </div>
+    <button type="submit">Read & Plot</button>
+  </form>
+
+  <div id="error"></div>
+
+  <canvas id="chart" width="800" height="400"></canvas>
+
+  <script>
+    const ctx = document.getElementById('chart').getContext('2d');
+    let chart = null;
+
+    document.getElementById('memForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      document.getElementById('error').textContent = "";
+
+      const addr = document.getElementById('addr').value;
+      const length = parseInt(document.getElementById('length').value, 10);
+      const type = document.getElementById('type').value;
+      const target = document.getElementById('target').value;
+      const gdb = document.getElementById('gdb').value;
+
+      try {
+        const res = await fetch('/api/read_memory', {
+          method: 'POST',
+          headers: {'Content-Type': 'application/json'},
+          body: JSON.stringify({
+            addr: addr,
+            length: length,
+            type: type,
+            target: target,
+            gdb_path: gdb
+          })
+        });
+
+        const data = await res.json();
+
+        if (!res.ok) {
+          throw new Error(data.error || "Unknown error");
+        }
+
+        const values = data.values || [];
+        const labels = values.map((_, i) => i);
+
+        if (chart) {
+          chart.destroy();
+        }
+
+        chart = new Chart(ctx, {
+          type: 'line',
+          data: {
+            labels: labels,
+            datasets: [{
+              label: `Memory at ${data.addr} (${data.type})`,
+              data: values,
+            }]
+          },
+          options: {
+            responsive: true,
+            scales: {
+              x: {
+                title: {
+                  display: true,
+                  text: 'Index'
+                }
+              },
+              y: {
+                title: {
+                  display: true,
+                  text: 'Value'
+                }
+              }
+            }
+          }
+        });
+      } catch (err) {
+        document.getElementById('error').textContent = err.message;
+      }
+    });
+  </script>
+</body>
+</html>