Graphique dans le navigateur pour Arduino et STM32

Bonjour à tous.

Je continue à développer mon projet sur la visualisation des tendances des données, j'ai ajouté la possibilité de visualiser dans un navigateur en temps réel. À qui c'est intéressant je demande.


Expliquez brièvement en quoi consiste le projet. Il s'agit d'un système logiciel appelé «SVisual».
Se compose de trois parties:

  • serveur "SVMonitor", c'est aussi un moniteur en ligne;
  • Client - une bibliothèque ou un croquis pour transférer des données de MK;
  • et les archives d'archives du visualiseur.

Le système est décrit en détail dans un article précédent .

Voir immédiatement la vidéo, ce qui s'est passé:

Je me suis concentré sur la visualisation depuis le téléphone, car il sera plus pratique d'utiliser une application de bureau sur un PC.

La page est écrite sur une pile moderne (React + Redux, Boostrap design).
Sur les anciennes tablettes et téléphones, cela ne fonctionnera pas.

Schéma fonctionnel du logiciel.




Ici:

  • MK transmet des données via un port COM ou Ethernet au serveur SVMonitor, c'est aussi un serveur http.
  • l'utilisateur dans le navigateur ouvre la page.

La page est transmise via http, plus tard je ferai https. Pour l'instant, vous pouvez utiliser un logiciel tiers pour la protection, quelque chose comme stunnel, par exemple.

Je n'ai pas montré en détail la cuisine interne du serveur, car tout est décrit dans l' article précédent et dans le manuel du logiciel.


Exemple d'utilisation pour Arduino.


1. Exécutez SVMonitor et dans les paramètres du serveur Web, spécifiez l'adresse IP et le port.



2. Remplissez un tel croquis dans 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. Ensuite, vous devez redémarrer SVMonitor et reconnecter le MK.

4. Maintenant, dans SVMonitor, nous devrions voir le MK connecté:



5. Ouvrez le navigateur, entrez l'adresse spécifiée dans les paramètres SVMonitor dans la barre d'adresse et consultez la page suivante:



Cette vidéo montre toutes les possibilités de travailler avec un graphique dans un navigateur


Pour STM32, le client est ici .

C'est tout en principe.

Le logiciel est distribué gratuitement, licence MIT.

Je vous remercie

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


All Articles