Grafik im Browser für Arduino und STM32

Hallo allerseits.

Ich entwickle mein Projekt zur Visualisierung von Datentrends weiter und habe die Möglichkeit hinzugefügt, in einem Browser in Echtzeit zu arbeiten. Wen es interessiert, frage ich.


Sagen Sie kurz, was das Projekt ist. Dies ist ein Softwaresystem namens "SVisual".
Besteht aus drei Teilen:

  • Server "SVMonitor", es ist auch ein Online-Monitor;
  • Client - eine Bibliothek oder eine Skizze zum Übertragen von Daten von MK;
  • und Viewer-Archivsätze.

Das System wurde in einem früheren Artikel ausführlich beschrieben .

Sehen Sie sich gleich das Video an, was passiert ist:

Ich habe mich auf das Betrachten vom Telefon aus konzentriert, da die Verwendung einer Desktop-Anwendung auf einem PC einfacher sein wird.

Die Seite ist auf einem modernen Stapel geschrieben (React + Redux, Boostrap-Design).
Auf alten Tablets und Handys funktioniert es nicht.

Funktionsdiagramm der Software.




Hier:

  • MK überträgt Daten über einen COM-Port oder Ethernet an den SVMonitor-Server, es ist auch ein http-Server.
  • Der Benutzer im Browser öffnet die Seite.

Die Seite wird über http übertragen, später mache ich https. Derzeit können Sie zum Schutz Software von Drittanbietern verwenden, z. B. Stunnel.

Ich habe die interne Küche des Servers nicht im Detail gezeigt, da alles im vorherigen Artikel und im Softwarehandbuch beschrieben ist.


Anwendungsbeispiel für Arduino.


1. Führen Sie SVMonitor aus und geben Sie in den Einstellungen für den Webserver die IP-Adresse und den Port an.



2. Füllen Sie eine solche Skizze in MK:

#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. Als nächstes müssen Sie SVMonitor neu starten und den MK wieder anschließen.

4. Nun sollten wir in SVMonitor den verbundenen MK sehen:



5. Öffnen Sie den Browser, geben Sie die in den SVMonitor-Einstellungen angegebene Adresse in die Adressleiste ein und rufen Sie die folgende Seite auf:



Dieses Video zeigt alle Möglichkeiten, mit einem Graphen in einem Browser zu arbeiten


Für STM32 ist der Client hier .

Das ist alles im Prinzip.

Die Software ist frei verbreitet, MIT-Lizenz.

Vielen Dank.

Source: https://habr.com/ru/post/de475034/


All Articles