使用Johnny-Five和PubNub EON.js实现可视化实时Arduino传感器数据

在我之前的文章中，我向您展示了如何使用Johnny-Five和PubNub 制作物联网系统的原型 。在该教程中，您学习了如何创建一个由网络控制的 LED，就像 Philips HUE。

这一次，我想向您展示如何从连接到 arduino 的传感器中读取数据并在网络上绘制图表！

在本练习中，您将：

1. 建立一个带有温度传感器的电路，并从传感器中读取值

2. 读取数据并绘制它们

先决条件

您需要一个 Arduino (Genuino) Uno 板和如何为 Johnny-5 设置 Arduino 的基本知识。查看分步教程中的设置 Arduino部分 是个好主意，但您不需要安装StandardFirmata，因为这次您要安装其他东西。

此外，请确保node.js正在您的计算机上运行。

使用 EON 轻松实现数据可视化

Project EON是由PubNub创建的用于制图和制图的开源javascript框架。

由于 EON 的图表和绘图组件基于 C3.js，它是D3.js的包装器，因此 EON 允许您轻松构建实时图表，而无需知道如何使用更复杂的 D3 库。

可视化传感器数据的基本步骤如下所示：

从源发布数据：

PUBNUB.publish({   channel:  'my-graph',   message:  {'eon':    
{'My data 
1': 39, 'My data 2': 23}} });   
2. Embed a graph on web:   eon.chart({   channel: 'my-graph',   generate: {     bindto: '#myGraph'   } });

当我们在这里进行硬件和软件练习时，我将详细介绍如何使用 EON。所以让我们开始吧！

用温度传感器连接电路

让我们先为温度传感器构建一个电路！通用传感器和零件应该相当便宜。

您需要的硬件：

• 1 Arduino Uno

• 1 DS18B20 1-Wire 数字温度传感器

• 1个电阻（4.7kO）

• 3 公/公跳线

• 1个面包板

关于 DS18B20 数字温度传感器

典型的 DS18B20 数字温度传感器的测量范围为 -55°C 至 125°C（摄氏度），在大部分范围内具有 ±0.5°C 的精度。内置模数转换器 (ADC) 将此模拟温度测量值转换为精度高达 12 位的数字值。

使用 ConfigurableFirmata 加载 Arduino

DS18B20 传感器通过专有的 1-Wire 总线进行通信。当您使用具有特殊协议的设备时，Johnny-Five需要1-Wire 特定模块，该模块利用ConfigurableFirmata 草图。

因此，在连接传感器之前，让我们使用ConfigurableFirmata加载您的 Arduino ：

1. 使用 USB 电缆将您的 Arduino 连接到您的计算机。

2. 在 Arduino IDE 上，转到sketch > Include Library > Manage Libraries。

3. 搜索“ConfigurableFirmata”。

4. 单击结果，选择最新版本，然后单击Install。

5. 转到文件 > 示例 > ConfigurableFirmata。

6. 将代码上传到板上。

组装电路

现在，让我们把它们连接起来。电路非常简单——只需确保在使用 Arduino 的 5V 电源为传感器供电时使用 4.7kO 电阻即可。

从传感器读取温度

让我们转到软件方面。当您使用 Johnny-Five 时，从传感器读取数字值非常容易。

确保 Node.js 已安装在您的计算机上。在适当的开发目录中，使用npm包管理器安装 Johnny-5。

$ npm install johnny-five

创建一个文件 temperature.js，并使用下面的代码打印出值：

var five = require('johnny-five');
 
 
 
five.Board().on('ready', function() {
 
  var temperature = new five.Thermometer({
 
    controller: 'DS18B20',
 
    pin: 2
 
  });
 
 
 
  temperature.on('data', function() {
 
    console.log(this.celsius + '°C', this.fahrenheit + '°F');
 
  });
 
});

使用 .从控制台运行代码node temperature.js。硬件板准备好后，您应该会看到控制台上打印出的温度值，如下所示：

现在，让我们发布来自温度传感器的数据并将值绘制在图表中！

将温度数据从传感器发送到 PubNub

首先，您需要使用 npm 安装 pubnub Node.js 模块：

$ npm install pubnub

PubNub数据流网络 (DSN) 提供了全球基础设施，并允许您非常轻松地构建和扩展实时应用程序和物联网设备。 在我之前的文章中，您使用 PubNub 从 Web 浏览器接收数据，但这次，您使用 PubNub 发布要在浏览器中读取的传感器数据。

初始化 PubNub

安装 pubnub 模块后，您需要使用 api 密钥对其进行初始化。

var pubnub = require('pubnub')({
 
  publish_key: 'pub-c-156a...',
 
  subscribe_key: 'sub-c-f762f...'
 
});

另外让我们创建一个频道名称。

var channel = 'temperature-ds18b20';

当您绘制图表时，您需要从相同的通道名称中获取已发布的数据。

将数据发布到 PubNub

在使用本教程上一节中创建的 Johnny-Five 获取数据事件的温度数据后，将数据保留为变量，而不仅仅是console.log.

var temp = 0;
 
 
 
temperature.on('data', function() {
 
  temp = this.celsius;
 
});

您可以将每条数据发布到 PubNub，但传感器可能会过于频繁地触发事件。所以让我们每三秒发送一次数据。

setInterval(publish, 3000);

在发布函数中，使用 PubNubpublish()方法以对象（或 JSON）形式发送数据。

function publish() {
 
  var data = {
 
    'temperature': temp,
 
  };
 
  pubnub.publish({
 
    channel: channel,
 
    message: data,
 
  });
 
}

Arduino 的完整代码可在 此 GitHub 存储库中找到。

根据传感器数据绘制条形图

现在忘记Arduino。您现在将创建一个单独的网页来绘制图表。

首先，在您的html文件中包含：eon.css

<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/0.0.9/eon.css">

然后包括pubnub.js：

<script src="//cdn.pubnub.com/pubnub-3.10.2.js"></script>

然后创建一个带有一些 ID 的空元素：

<div id="chart"></div>

这是在您的页面中生成图表的位置。现在，您需要初始化 PubNub，就像您之前在node.jsArduino 文件中所做的那样：

var pubnub = PUBNUB.init ({
  publish_key: 'pub-c-156a...',
  subscribe_key: 'sub-c-f762f...'});

chart()然后，一旦从 PubNub 接收到数据，就使用 EON 生成一个简单的条形图。您可以使用相同的通道名称接收从温度传感器发送的数据，temperature-ds18b20：

eon.chart({
 
  pubnub: pubnub,
 
  {
 
    channel: 'temperature-ds18b20',
 
    generate: {
 
      bindto: '#chart'
 
    }
 
  },
 
  transform: function(m) {
 
    return { eon: {
 
      temperature: m.temperature
 
    }}
 
  }
 
});

该transform()函数对传感器发送的原始数据进行定制，以适应 EON 可以理解的模式。

运行 Arduino 的 HTML 和 Node.js 代码。

瞧，您在浏览器中获得了实时数据可视化！

您可以使用可选的C3.js 参数更多地自定义图形，例如线条颜色和宽度！

例如，要像上面这个 gif 动画那样将条形颜色更改为紫色，您可以添加 data参数的颜色：

...
 
  generate: {
 
    bindto: '#chart,
 
    data: {
 
      type: 'line', 
 
      colors: {
 
        temperature: '#663399'
 
      }
 
    },

您也可以使用该 axis参数来标记和格式化 x 轴和 y 轴。

如果您想要不同类型的图形，请尝试将‘line’type 的默认值 更改为‘spline’，然后看看会发生什么。

完整代码请参考GitHub 仓库。如果您想尝试不同的传感器，例如环境光传感器和不同类型的图表，还有更多示例。

我希望你喜欢这个教程！