thek4n/logic_analyzer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prototype

Browse Source
This commit is contained in:
thek4n 2026-06-13 00:21:49 +03:00
parent 4a5f9f4575
commit 7851217140
2 changed files with 83 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
assets/root.html
View File

@ -1,17 +1,86 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset='UTF-8'>"; <meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logic Analyzer</title> <title>Logic Analyzer</title>
</head> </head>
<body> <body>
<main> <main>
<canvas id="binaryChart" width="500" height="250"></canvas>
</main> </main>
</body> <script>
</html> function drawAllWaveforms(channels_total, samples_total, samples) {
const canvas = document.getElementById('binaryChart');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
const data = [];
for (let i = 0; i < samples_total; i++) {
data.push((samples[i] >> 1) & 1);
}
// Настройки отступов
const leftMargin = 50;
const rightMargin = 30;
const topMargin = 30;
const bottomMargin = 40;
const graphWidth = canvas.width - leftMargin - rightMargin; // 500 - 50 - 30 = 420
const graphHeight = canvas.height - topMargin - bottomMargin; // 250 - 30 - 40 = 180
// Шаг между точками
const stepX = graphWidth / (samples_total - 1); // 420 / 9 = 46.67px
// Отрисовка осей
ctx.beginPath();
// Ось Y (вертикальная)
ctx.moveTo(leftMargin, topMargin);
ctx.lineTo(leftMargin, canvas.height - bottomMargin);
// Ось X (горизонтальная)
ctx.lineTo(canvas.width - rightMargin, canvas.height - bottomMargin);
ctx.stroke();
// Подписи на оси Y (0 и 1)
ctx.font = "12px Arial";
ctx.fillStyle = "black";
ctx.fillText("1", leftMargin - 20, topMargin + 3);
ctx.fillText("0", leftMargin - 20, canvas.height - bottomMargin + 3);
// Подпись оси Y
ctx.save();
ctx.translate(20, canvas.height / 2);
ctx.rotate(-Math.PI / 2);
ctx.fillText("Значение", -20, 0);
ctx.restore();
// Рисуем ступенчатый график (бинарный)
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
for (let i = 0; i < samples_total; i++) {
const x = leftMargin + i * stepX;
// Преобразуем значение (0 или 1) в Y-координату
// 1 -> верх (topMargin), 0 -> низ (canvas.height - bottomMargin)
const y = data[i] === 1 ? topMargin : canvas.height - bottomMargin;
if (i === 0) {
ctx.moveTo(x, y);
} else {
// Рисуем горизонтальную линию от предыдущей точки
const prevX = leftMargin + (i - 1) * stepX;
const prevY = data[i-1] === 1 ? topMargin : canvas.height - bottomMargin;
ctx.lineTo(prevX + stepX, prevY); // Горизонтальная линия
ctx.lineTo(x, y); // Вертикальный скачок
}
}
ctx.stroke();
ctx.fillStyle = "black";
ctx.font = "bold 12px Arial";
ctx.fillText("Время (такты)", canvas.width/2 - 30, canvas.height - 10);
}
function connectWebSocket() { function connectWebSocket() {
ws = new WebSocket('ws://' + window.location.hostname + ':81'); ws = new WebSocket('ws://' + window.location.hostname + ':81');
@ -24,9 +93,7 @@ function connectWebSocket() {
ws.onmessage = function(event) { ws.onmessage = function(event) {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
if (data.type === 'data') { if (data.type === 'data') {
currentData = data.channels; drawAllWaveforms(data.channels_total, data.samples_total, data.samples);
currentSamples = data.samples;
drawAllWaveforms();
} else if (data.type === 'status') { } else if (data.type === 'status') {
updateStatus(data.message); updateStatus(data.message);
} }
@ -38,3 +105,8 @@ function connectWebSocket() {
setTimeout(connectWebSocket, 1000); setTimeout(connectWebSocket, 1000);
}; };
} }
window.addEventListener('DOMContentLoaded', connectWebSocket);
</script>
</body>
</html>

4
firmware/logic_analyzer/logic_analyzer.ino
View File

@ -146,8 +146,8 @@ void websocketSendSamples() {
lastTime = now; lastTime = now;
// конвертировать SAMPLES в json int channels_total = sizeof(PINS) / sizeof(PINS[0]);
String output = "{\"type\":\"data\",\"len\":" + String(SAMPLES_BUFFER_CAP) + ",\"data\":["; String output = "{\"type\":\"data\",\"samples_total\":" + String(SAMPLES_BUFFER_CAP) + ", \"channels_total\":" + String(channels_total) + ", \"samples\":[";
for (int i = 0; i < SAMPLES_BUFFER_CAP; ++i) { for (int i = 0; i < SAMPLES_BUFFER_CAP; ++i) {
output += String(SAMPLES[i].mask); output += String(SAMPLES[i].mask);
if (i < SAMPLES_BUFFER_CAP - 1) output += ","; if (i < SAMPLES_BUFFER_CAP - 1) output += ",";