Skip to content

Commit

Permalink
Первая рабочая версия
Browse files Browse the repository at this point in the history
  • Loading branch information
@far-galaxy
far-galaxy committed Oct 21, 2023
1 parent f525631 commit 70eda8c
Show file tree
Hide file tree
Showing 3 changed files with 365 additions and 0 deletions.
51 changes: 51 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="ru">

<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
<div class="wrapper">
<div id="notSupported">Web Serial не поддерживается на этом устройстве. Проверьте, что у вас Chrome не менее 78 версии или включён флаг #enable-experimental-web-platform-features в chrome://flags</div>
<div>
<button id="connect" onClick="connect()">Подключиться</button>
<select id="baudrate">
<option>9600</option>
<option>115200</option>
</select>
</div>
<div>
<input id="input" type="text" onKeyPress="handle(event)" disabled />
<button id="sendButton" onClick="send()" disabled>Отправить</button>
<button id="sendButton" onClick="download()">Скачать телеметрию сессии</button>
</div>
<div id="error"></div>
<div class="data">
<div id="time" style="color: green;"></div>
<div id="pres" style="color: blue;"></div>
<div id="temp" style="color: red;"></div>
</div>
<details>
<summary>Графики</summary>
<div class="graph">
<canvas id="p_chart" width="250px" height="250px" style="border:3px solid"></canvas>
</div>
<div class="graph">
<canvas id="t_chart" width="250px" height="250px" style="border:3px solid"></canvas>
</div>
<div class="graph">
<canvas id="a_chart" width="250px" height="250px" style="border:3px solid"></canvas>
</div>
<canvas id="axes" width="250px" height="250px" style="border:3px solid"></canvas>
</details>
<hr>
<div id="log"></div>
</div>
<script src="source.js"></script>
</body>

</html>
268 changes: 268 additions & 0 deletions source.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
if ('serial' in navigator) {
notSupported = document.getElementById('notSupported');
notSupported.classList.add('hidden');
}

log = document.getElementById("log");
var running = false;
date = new Date().toJSON().replaceAll(":", "-");
var chart_p;
var chart_t
var chart_a;
var i=0;

function send() {
const toSend = document.getElementById("input").value
writeToStream(toSend)
document.getElementById("input").value = ""

}

function handle(e) {
if (e.keyCode === 13) {
e.preventDefault();
send();
}
}

async function connect() {
button = document.getElementById("connect")
if (button.innerHTML === "Стоп") {
// FIXME: сделать стоп, чтобы можно было снова стартовать
running = false;
reader.releaseLock();
button.innerHTML = "Подключиться";
port.close()
return;
}
button.disabled = true;

// Запуск монитора порта
port = await navigator.serial.requestPort();
baud = parseInt(document.getElementById("baudrate").value);
try {
await port.open({
baudRate: baud
});
} catch (err) {
button.disabled = false;
errDiv = document.createElement("div");
errDiv.innerHTML = err;
document.getElementById("error").appendChild(errDiv);
return;
}

button.disabled = false;
running = true;

initCharts();

const inputField = document.getElementById("input");
inputField.disabled = false;
inputField.focus();
inputField.select();
document.getElementById("sendButton").disabled = false;
button.innerHTML = "Остановить";

let decoder = new TextDecoderStream();
inputDone = port.readable.pipeTo(decoder.writable);
inputStream = decoder.readable;

const encoder = new TextEncoderStream();
outputDone = encoder.readable.pipeTo(port.writable);
outputStream = encoder.writable;

reader = inputStream.getReader();
readLoop();
}

function initCharts() {
ctx = document.getElementById("p_chart")
chart_p = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Pressure',
data: [],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
ctx = document.getElementById("t_chart")
chart_t = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Temp',
data: [],
fill: false,
borderColor: 'rgb(255, 50, 50)',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
ctx = document.getElementById("a_chart")
chart_a = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'X',
data: [],
fill: false,
borderColor: 'rgb(255, 0, 0)',
tension: 0.1
},
{
label: 'Y',
data: [],
fill: false,
borderColor: 'rgb(0, 255, 0)',
tension: 0.1
},
{
label: 'Z',
data: [],
fill: false,
borderColor: 'rgb(0, 0, 255)',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
}
});
}

function writeToStream(line) {
const writer = outputStream.getWriter();
console.log('[SEND]', line);
writer.write(line + '\r');
writer.releaseLock();
}

async function readLoop() {
console.log('Readloop');
buf = "";

while (running) {
const {
value,
done
} = await reader.read();

if (value) {
[...value].forEach((ch) => {
buf += ch
if (ch === "\n") {
appendTelemetry(buf);
/* Парсинг */
data = buf.split(';')
line = document.createElement("div");
line.innerHTML = buf;
line.classList.add("line");
buf = "";
if (data.length != 6) {
line.style['color'] = 'red';
log.appendChild(line);
return
}
log.appendChild(line);
now = data[0] / 1000;
document.querySelector("#time").innerHTML = "Время: " + now + " с";
pressure = data[1].slice(1, );
document.querySelector("#pres").innerHTML = "Давление: " + pressure + " Па";
temperature = data[2].slice(1, ) / 100;
document.querySelector("#temp").innerHTML = "Температура: " + temperature + " С";

accel_x = parseInt(data[3].slice(1, ));
accel_y = parseInt(data[4].slice(1, ));
accel_z = parseInt(data[5].slice(1, ));

drawAxes();

if (i % 3 == 0) {
chart_p.data.labels.push(now);
chart_p.data.datasets[0].data.push(pressure);
chart_p.update();

chart_t.data.labels.push(now);
chart_t.data.datasets[0].data.push(temperature);
chart_t.update();

chart_a.data.labels.push(now);
chart_a.data.datasets[0].data.push(accel_x);
chart_a.data.datasets[1].data.push(accel_y);
chart_a.data.datasets[2].data.push(accel_z);
chart_a.update();
}

i++;
log.scrollTop = log.scrollHeight;
}
});
}
if (done) {
console.log('[readLoop] DONE', done);
reader.releaseLock();
break;
}
}
}

function appendTelemetry(buf) {
storage = localStorage.getItem("telemetry_" + date);
storage += buf;
localStorage.setItem("telemetry_" + date, storage);
}

function download() {
text = localStorage.getItem("telemetry_" + date);
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', "telemetry_" + date + ".txt");

element.style.display = 'none';
document.body.appendChild(element);

element.click();

document.body.removeChild(element);
}

function drawAxes() {
ctx = document.getElementById("axes").getContext("2d");
ctx.clearRect(0, 0, 250, 250);
ctx.beginPath();
ctx.moveTo(125, 125);
ctx.strokeStyle = 'blue';
ctx.lineTo(125, 125 - 125 * accel_z / 9000);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(125, 125);
ctx.strokeStyle = 'red';
dx = 125 * accel_x / 9000 * 0.7;
ctx.lineTo(125 + dx, 125 + dx);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(125, 125);
ctx.strokeStyle = 'lime';
dy = 125 * accel_y / 9000 * 0.7;
ctx.lineTo(125 - dy, 125 + dy);
ctx.stroke();
}
46 changes: 46 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
.wrapper {
width: 60%;
margin: 0 auto;
}
#input {
width: 100%;
}

#log {
height: 80vh;
width: 100%;
overflow: scroll;
color: lime;
font-size: x-large;
background-color: black;
font-family: monospace;
white-space: pre;
}

.graph {
display: flex;
flex-direction: row;
}

.data {
display: flex;
flex-direction: column;
font-size: x-large;
background-color: lightgrey;
font-family: monospace;
white-space: pre;
}

.line {
display: flex;
flex-direction: row;
}

#error {
color: crimson;
background-color: lightpink;
}

.hidden {
display: none;
}

0 comments on commit 70eda8c

Please sign in to comment.