Arduino网络编程实战-ADC数据采集可视化(基于Electron+echarts+JQuery+MQTT)

ADC数据采集可视化(基于Electron+echarts+JQuery+MQTT)

Arduino Ethernet Shield V1 允许 Arduino 板连接到互联网。它基于 Wiznet W5100ethernet 芯片（数据表）。 Wiznet W5100 提供支持 TCP 和 UDP 的网络 (IP) 堆栈。它最多支持四个同时套接字连接。

将物联设备采集的数据进行可视化，有助于对数据的理解以便对决策做出相应的支持。本次实例将结合Electron、echarts、JQuery、MQTT数据传输协议实现对ADC设备采集的数据可视化处理。

1、硬件准备

Arduino Mega 2560
Arduino Ethernet Shield
路由器（推荐可以上网、开启DHCP）
网线一条
电脑一台
电位计模块一个

2、软件准备

Arduino IDE
VSCode IDE
MQTT服务器：https://mosquitto.org
JSON支持库：ArduinoJson
Electron开发环境：electron，本次使用的版本为17.0.1
Nodejs：https://nodejs.org，本次使用的版本为 16.13.0，建议与electron使用的版本一致
Python2.7

在Nodejs安装完成后，需要安装一些支持库，在命令行中运行
npm -g install node-gyp nan debug

3、Electron端应用开发准备

一个简单Electron的应用结构主要包括如下文件：

package.json：用于应用程序描述文件。包含应用名称，应用入口文件、版本号、依赖库等
main.js：应用程序入口文件。
index.html：应用程序页面渲染
preload.js：可用于应用程序依赖库预加载，比如nodejs模块加载。
renderer.js：一般用于应用程序页面逻辑控制。

1）package.json

{
  "name": "ADC-Visualization",
  "version": "0.0.1",
  "main": "main.js",
  "dependencies": {
    "bootstrap": "^5.1.3",
    "echarts": "^5.3.0",
    "jquery": "^3.6.0",
    "socket.io": "^4.4.1",
    "ws": "^8.5.0",
    "mqtt": "^4.3.6"
  }
}

package.json文件描述了应用程序名称，应用程序入口文件，依赖库。在electron应用程序工程目录下在命令行执行如下命令：

npm install --save

进行应用程序依赖库安装。

2）main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

// 保持窗口对象的全局引用，如果不这样做，窗口将
// 当 JavaScript 对象被垃圾回收时自动关闭。
let mainWindow

// 创建窗口
function createWindow() {
    // 创建浏览器窗口
    mainWindow = new BrowserWindow({
        width: 800, // 窗口宽度
        height: 600, // 窗口高度
        backgroundColor: "#ccc", // 背景颜色
        webPreferences: {
            nodeIntegration: true, // 启用nodejs集成
            contextIsolation: false, // 允许与 Electron 12+ 一起使用
            preload: path.join(__dirname, 'preload.js') // 预加载
        }
    })

    // 加载页面文件到应用程序
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))

    // 打开调试窗口
     mainWindow.webContents.openDevTools()

    // 监听窗口退出事件
    mainWindow.on('closed', function() {
      // 取消引用窗口对象，通常你会存储窗口
      // 如果应用程序支持多窗口，则在数组中，这什么时候应该删除相应的元素。
        mainWindow = null
    })
}

// 当 Electron 完成初始化并准备创建浏览器窗口时，
// 将调用此方法。某些 API 只能在此事件发生后使用。
app.on('ready', createWindow)

// 关闭所有窗口后退出
app.on('window-all-closed', function() {
   // 在 OSX 上，应用程序及其菜单栏通常保持活动状态，直到用户使用 Cmd + Q 明确退出
    app.quit()
})

app.on('activate', function() {
    // / 在 OSX上，当单击停靠图标并且没有其他窗口打开时，通常会在应用程序中重新创建一个窗口。
    if (mainWindow === null) {
        createWindow()
    }
})

3）preload.js

// 所有 Node.js API 在预加载过程中都可用。它与 Chrome 扩展具有相同的沙箱。
window.addEventListener('DOMContentLoaded', () => {
  
})

// 加载mqtt库
const mqtt = require('mqtt')
window.mqtt = mqtt

4）index.html

index.html用于对应用程序页面描述。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Arduino ADC Visualization</title>
    <!--从nodejs中加载jquery-->
    <script>window.$ = window.jQuery = require('jquery');</script>
    <!--从nodejs中加载echarts-->
    <script>window.echarts = require('echarts');</script>
</head>

<body>
   
    <div id="adc-main" style="width: 600px;height:400px;"></div>

    <script src="renderer.js"></script>
</body>

</html>

请注意，在index.html的header描述中，分别对jquery和echarts进行引用。

一般情况下，jquery在electron中是无法正常使用的，需要通过如下方式调用才能正常使用：

1 2	<script>window.$ = window.jQuery = require('jquery');</script>

一般情况下，直接在renderer.js文件中加载echart库，会导致解析错误，因此需要在渲染页面中加载echart库，调用方式如下：

1 2	<script>window.echarts = require('echarts');</script>

5）renderer.js

A.创建echart图表渲染显示

// 初始化图表
var myChart = echarts.init($('#adc-main')[0]);
var counts = 0;
var datas = []
// 指定图表的配置项和数据
chart_option = {
  title: {
    text: 'ADC数据采集'
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params) {
      params = params[0];
      var date = new Date(params.name);
      return (
        params.name + "=>" + params.value[1]
      );
    },
    axisPointer: {
      animation: false
    }
  },
  xAxis: {
    type: 'time',
    splitLine: {
      show: false
    },
    axisLabel: {
      interval:0,
      rotate:20//角度顺时针计算的
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    splitLine: {
      show: false
    }
  },
  series: [
    {
      name: 'ADC Data',
      type: 'line',
      smooth:true,
      showSymbol: false,
      data: datas
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(chart_option);

B.连接MQTT服务器

const host = '127.0.0.1'
const port = 1883
const clientId = 'mqtt\_arduino\_client'

const connectUrl = `mqtt://${host}:${port}`

const topic = '/arduino/temperature'

const client = mqtt.connect(connectUrl,{
    clientId,
    clean:true,
    connectTimeout:4000,
    reconnectPeriod:1000
})
// 连接MQTT服务器
function doConnectMqttServer(){
  console.log('doConnect');
  client.on('connect',()=>{
    console.log('Connected')
    client.subscribe([topic],()=>{
        console.log(`Subscribe to topic ${topic}`)
    });

    client.on('message',(topic,payload)=>{
        console.log('Received Message:',topic,payload.toString())
        // 刷新表格数据
        refreshChart(payload)
    });
  });
}

C.刷新图表数据

function refreshChart(payload){
  var now = new Date();
  let datetimestr = [now.getFullYear(),now.getMonth() + 1,now.getDate()].join("/") + ' ' + [now.getHours(),now.getMinutes(),now.getSeconds()].join(":")
  console.log(datetimestr)
  if(counts < 30){
    datas[counts++] = {
        name:datetimestr,
        value:[datetimestr,payload.toString()]
    }
  }else{
    var tmp = []
    // 更新数据
    // 删除第一个元素，移动第二个元素到第一个元素，直到最后一个元素
  for(i = 1;i < datas.length;i++){
    tmp[i - 1] = datas[i];
    datas[i-1] = tmp[i - 1];
  }
      // 更新最后一个元素
  datas[datas.length - 1] =  {
    name:datetimestr,
    value:[datetimestr,payload.toString()]
    }
  }
  // 更新表格数据
  chart_option.series.data = datas
  myChart.setOption({
      series:[{
      data:datas}]
  }) 
}

D.启动MQTT连接

1 2	doConnectMqttServer();

4、Arduino端数据采集及传输

#include <SPI.h>
#include <Ethernet.h>
#include <PubSubClient.h>

#define ADC\_PIN 2

#define USE\_STATIC 0
byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED
};
#if USE\_STATIC
IPAddress ip(192, 168, 2, 177);
#endif

void callback(char\* topic, byte\* payload, unsigned int length) {
  Serial.print("Message arrived [");
  Serial.print(topic);
  Serial.print("] ");
  for (int i=0;i<length;i++) {
    Serial.print((char)payload[i]);
  }
  Serial.println();
}

EthernetClient ethClient;
PubSubClient client(ethClient);
IPAddress serverIP(192, 168, 2, 190);

void reconnect() {
  // Loop until we're reconnected
  while (!client.connected()) {
    Serial.print("Attempting MQTT connection...");
    // Attempt to connect
    if (client.connect("arduinoClient")) {
      Serial.println("connected");
    } else {
      Serial.print("failed, rc=");
      Serial.print(client.state());
      Serial.println(" try again in 5 seconds");
      // Wait 5 seconds before retrying
      delay(5000);
    }
  }
}

void setup() {
  
   Serial.begin(9600);
   Serial.println("Ethernet MQTT Client Example");
   pinMode(ADC_PIN,INPUT);
#if USE\_STATIC
   Ethernet.begin(mac,ip);
#else
  Ethernet.begin(mac);
#endif

   if (Ethernet.hardwareStatus() == EthernetNoHardware) {
    Serial.println("Ethernet shield was not found. Sorry, can't run without hardware. :(");
    while (true) {
      delay(1); 
    }
  }
  if (Ethernet.linkStatus() == LinkOFF) {
    Serial.println("Ethernet cable is not connected.");
    while(true){
      delay(1);  
    }
  }

  Serial.print("IP:");
  Serial.println(Ethernet.localIP());
  Serial.print("Subnet Mask:");
  Serial.println(Ethernet.subnetMask());
  Serial.print("Gateway:");
  Serial.println(Ethernet.gatewayIP());
  Serial.print("DNS Server:");
  Serial.println(Ethernet.dnsServerIP());

  client.setServer(serverIP, 1883);
  client.setCallback(callback);
}

void loop() {
  if (!client.connected()) {
    reconnect();
  }
  client.loop();
  
   // 读取ADC值
  int value = analogRead(ADC_PIN);
  String datas = String("") + value;
  // 发送ADC数据
  client.publish("/arduino/temperature",datas.c\_str());
  Serial.print("send:");
  Serial.println(datas);
  delay(1000);
}