График в браузере для Arduino и STM32

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.
Всем привет.

Продолжаю развивать свой проект по визуализации трендов данных, добавил возможность просмотра в браузере в реальном времени. Кому интересно прошу.


Вкратце расскажу что из себя представляет проект. Это система ПО под названием «SVisual».
Состоит из трех частей:

  • сервер «SVMonitor», он же онлайн-монитор;
  • клиент — библиотека либо скетч для передачи данных от МК;
  • и просмотрщик архива записей.

Система подробно описана в прошлой статье.

Сразу посмотрим ролик, что получилось:

Ориентировался на просмотр с телефона, поскольку на ПК удобнее будет пользоваться десктопным приложением.

Страничка написана на современном стеке (React + Redux, оформление Boostrap).
На старых планшетах и телефонах не пойдет.

Функциональная схема ПО.




Здесь:

  • МК передает данные по COM-порту или Ethernet на сервер SVMonitor, он же является и http-сервером.
  • пользователь в браузере открывает страничку.

Страничка передается по http, позже сделаю https. Пока для защиты можете воспользоваться сторонним ПО, чем то типа stunnel, например.

Подробно не стал показывать внутреннюю кухню сервера, так как все описано в прошлой статье, и в мануале к ПО.


Пример использования для Arduino.


1. Запустим SVMonitor, и в настройках для Web сервера укажем IP адрес и порт.



2. Заливаем такой скетч в МК:

#include <SVClient.h>

void setup() {

  bool ok = svisual::connectOfCOM("client");
}

int cnt = 0;
void loop() {

  svisual::addIntValue("dfv", cnt);

  ++cnt;
  if (cnt > 10) cnt = 0;

  bool odd_cnt = cnt % 2;

  svisual::addBoolValue("bFW", odd_cnt );

  svisual::addBoolValue("bBW", !odd_cnt );

  delay(200);
}

3. Далее, нужно перезагрузить SVMonitor и заново подключить МК.

4. Теперь в SVMonitor мы должны увидеть подключенный МК:



5. Открываем браузер, в адресной строке вводим адрес указанный в настройках SVMonitor и видим следующую страничку:



В этом ролике показаны все возможности работы с графиком в браузере


Для STM32 клиент здесь.

Вот и все в принципе.

ПО распространяется свободно, лицензия MIT.

Спасибо.
Источник: https://habr.com/ru/post/475034/


Интересные статьи

Интересные статьи

Где проходит граница между иллюстратором и специалистом по инфографике? Как визуализировать данные? Что говорит наука о различных дизайнерских решениях? Прежде чем углубиться в рассуждения...
Однажды, в понедельник, мне пришла в голову мысль — "а покопаюсь ка я в новом ядре" (новым относительно, но об этом позже). Мысль не появилась на ровном месте, а предпосылками для нее стали: ...
Расскажу о курьезной ситуации случившейся со мой и о том как стать конрибьютером в известный проект.
В последнее время появилось много фантастических исследований по 2D-рендерингу. Пётр Кобаличек и Фабиан Айзерман работают над Blend2D: это один из самых быстрых и точных CPU-растеризаторов на рын...
Практически все коммерческие интернет-ресурсы создаются на уникальных платформах соответствующего типа. Среди них наибольшее распространение получил Битрикс24.