142 lines
3.5 KiB
HTML
142 lines
3.5 KiB
HTML
<!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>
|