Страница 1 из 1
Графика на встроенном WEB интерфейсе.
Добавлено: 27 авг 2025, 11:49
Brama
Всем доброго времени суток.
Решился вот собрать устройство для снятия вольт амперной характеристики (ВАХ) мощных транзисторов, диодов. Можно сделать из вольтметра, амперметра, источника тока и сопутствующих радиоэлементов. Намного лучше конечно сделать на ESP32 с выводом графика на дисплей смартфона. Выглядеть примерно так:
Картинка из инета, в качестве примера. Так намного информативней, чем таблица цифр. Подобные графики ВАХ публикуют в даташитах (характеристиках) транзисторов. Внешне сравнением можно забраковать, или подобрать аналог транзистора.
С организацией снятия потенциала на различных участках проблем нет. Но вот как вывести все измеренные значение на графике в виде линий? С написанием WEB нет опыта. Может есть подобные графики в примерах? Помогите пожалуйста с устройством.
Re: Графика на встроенном WEB интерфейсе.
Добавлено: 28 авг 2025, 09:07
golloper
У автора программы, Сергея, есть обучающее видео с примером. Как раз про графики .
Re: Графика на встроенном WEB интерфейсе.
Добавлено: 28 авг 2025, 09:09
golloper
Поищите в теме про штатный web. Если мне память не изменяет "График +ползунок"
Re: Графика на встроенном WEB интерфейсе.
Добавлено: 30 авг 2025, 14:34
Brama
golloper писал(а): 28 авг 2025, 09:07
У автора программы, Сергея, есть обучающее видео с примером. Как раз про графики .
Спасибо. Смотрел ролик Сергея Глушенко
Увы, в написании кода на HTML пока на стадии только списать.-)
Буду изучать ролик. Особенно данные с массива.
Про сетку. Пришлось попросить ИИ. Главное, правильно сформулировать вопрос. Кое какие успехи есть. Для начала только сетка с линиями XY и посередине красная точка.
Вот что выдал ИИ,
► Показать
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример графика с сеткой на canvas</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
// Получить элемент canvas и контекст отрисовки
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Нарисовать горизонтальные линии
for (var y = 20; y <= 280; y += 20) {
ctx.beginPath();
ctx.moveTo(20, y);
ctx.lineTo(380, y);
ctx.strokeStyle = '#eee';
ctx.stroke();
}
// Нарисовать вертикальные линии
for (var x = 20; x <= 380; x += 20) {
ctx.beginPath();
ctx.moveTo(x, 20);
ctx.lineTo(x, 280);
ctx.strokeStyle = '#eee';
ctx.stroke();
}
// Нарисовать оси координат
ctx.beginPath();
ctx.moveTo(20, 280);
ctx.lineTo(380, 280);
ctx.moveTo(20, 20);
ctx.lineTo(20, 280);
ctx.strokeStyle = '#000';
ctx.stroke();
// Нарисовать точку на графике
ctx.beginPath();
ctx.arc(200, 150, 5, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();
ctx.strokeStyle = 'red';
ctx.stroke();
</script>
</body>
</html>
А вот так выглядет в браузере,
Главное начало есть. Потихоньку буду черпать информацию с различных источников, возможно удастся построить желанное устройство.
Графика_1.flp