浏览器中的Arduino和STM32图形

大家好

我继续开发有关可视化数据趋势的项目 ，并增加了在浏览器中实时查看的功能。 谁有兴趣问。


简要说明一下项目是什么。 这是一个称为“ SVisual”的软件系统。
由三部分组成：

• 服务器“ SVMonitor”，它也是一个在线监视器；
• 客户端-用于从MK传输数据的库或草图；
• 和查看器存档记录。

该系统在上一篇文章中有详细描述。


我专注于通过电话查看，因为在PC上使用桌面应用程序会更方便。

该页面写在现代堆栈上（React + Redux，Boostrap设计）。
在旧的平板电脑和手机上，它将无法正常工作。

软件功能图。

在这里：

• MK通过COM端口或以太网将数据传输到SVMonitor服务器，它也是http服务器。
• 用户在浏览器中打开页面。

该页面通过http传输，稍后我将执行https。 目前，您可以使用第三方软件进行保护，例如使用stunnel。

我没有详细显示服务器的内部厨房，如上一篇文章和软件手册中所述 。

Arduino的示例用法。

1.运行SVMonitor，然后在Web服务器的设置中，指定IP地址和端口。



2.在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.接下来，您需要重新启动SVMonitor并重新连接MK。

4.现在，在SVMonitor中，我们应该看到已连接的MK：



5.打开浏览器，在地址栏中输入SVMonitor设置中指定的地址，然后查看以下页面：





对于STM32，客户端在此处 。

原则上就是如此。

该软件是MIT许可免费分发的。

谢谢啦