将-Arduino-连接到-Web-二-将 Arduino 连接到 Web（二）五、Arduino 前端到目前为止，

将 Arduino 连接到 Web（二）

原文：Connecting Arduino to the Web

协议：CC BY-NC-SA 4.0

五、Arduino 前端

到目前为止，您已经使用串行端口向 web 服务器发送数据，但是串行端口可以是双向数据流；它可以发送和接收数据。在本章中，您将开始通过串行端口通过 web 服务器向 Arduino 发送数据。通过交互式网页，您可以控制连接到 Arduino 的组件。

应用程序

在本章中，您将创建两个 web 应用程序。一个将打开和关闭连接到 Arduino 的 LED。图 5-1 显示网页。

图 5-1

The web page for the first application

第二个将是一个应用程序，让你输入文本，然后显示在液晶显示屏上。图 5-2 显示了最终的网页。

图 5-2

The second will be an application that lets you input text that will then be displayed on an LCD screen

LED 网络应用

第一步是构建应用程序的框架，其结构如下:

/chapter_05
    /node_modules
    /public
        /css
            main.css
        /javascript
            main.js
    /views
        index.ejs
    index.js

安装模块时会自动创建节点模块文件夹。创建服务器的设置与第三章相同:

创建一个新文件夹来存放应用程序。我把我的叫做 chapter_05。
打开命令提示符(Windows 操作系统)或终端窗口(Mac)并导航到新创建的文件夹。
当您在正确的目录中时，键入 npm init 创建一个新的应用程序，您可以按 return 键回答每个问题，或者对它们进行更改。
您现在可以开始添加必要的库；要在命令行下载 Express.js，请键入 npm install express@4.15.3 - save。
然后安装 ejs，并键入 npm install ejs@2.5.6 - save。
下载完成后，安装串口。在 Mac 类型 npm 上安装 serial port @ 4 . 0 . 7-save；在 Windows PC 上键入 npm，安装 serial port @ 4 . 0 . 7-build-from-source。
然后最后安装 socket.io，输入 npm install socket.io@1.7.3 - save。

Create a Node.js Server

在应用程序的路径中创建一个名为 index.js 的文件，并复制清单 5-1 中的代码。

var http = require('http');
var express = require('express');
var app = express();
var server = http.createServer(app);
var io = require('socket.io')(server);

app.engine('ejs', require('ejs').__express);
app.set('view engine', 'ejs');

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res){
    res.render('index');
});

io.on('connection', function(socket){
    console.log('socket.io connection');

socket.on('disconnect', function(){
        console.log('disconnected');
    });
});

server.listen(3000, function(){
    console.log('listening on port 3000...');
});

Listing 5-1index.js code

代码解释

服务器有一个到网页的路由，并且还创建一个 web 套接字。函数 app.get 创建一个路由，以便在应用程序打开时呈现一个索引文件。

Create a Web Page

初始页面将包含两个颜色块，一个红色和一个绿色。当用户点击一个块时，它会变成开或关的颜色。每个颜色块将由一个带有背景色的 div 创建。

如果您还没有创建 index.ejs、main.css 和 main.js 文件，现在就创建；确保它们在正确的目录中。由于 index.ejs 文件中引用了 main.css 和 main.js，因此需要创建它们，即使此时它们中没有任何代码。在 index.ejs 文件中，复制清单 5-2 中的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>lights</title>
    <link href="/css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
        <h1>SENDING DATA</h1>
        <h2>Getting data from the front end to an Arduino</h2>
    </header>
    <div id="content">
        <div class="container">
            <div id="red-block" class="color-block"></div>
            <div id="green-block" class="color-block"></div>
            <div class="text-block">
                <p>Pressing a button will send data to a connected Arduino.</p>
                <p>This data will determine which LED is turned on or off.</p>
            </div>
        </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="javascript/main.js"></script>
</body>
</html>

Listing 5-2index.ejs code

代码解释

每个颜色块都有自己的 div。id 在 CSS 中用于给块着色，而类用于给两个颜色块设置样式。div 中没有子内容。

您可以通过在控制台窗口中导航到应用程序并键入 nodemon index.js 或 node index.js 来启动应用程序，从而检查到目前为止页面的外观。打开浏览器并转到 http://localhost:3000/查看应用程序的运行情况。

Add Style

该样式将被添加到 public/css 文件夹的 main.css 文件中。打开或创建 main.css 文件，并复制清单 5-3 中的代码。

*{
   margin: 0;
   padding: 0;
}
body{
   font-family: "Arial Narrow", Arial, "Helvetica Condensed", Helvetica, sans-serif;
   color: #5a5b5a;
   background-color: #f4f4f4;
}
h1{
   letter-spacing: 1px;
   padding: 10px;
   direction:rtl;
   text-align:justify;
}
h2{
   letter-spacing: 0.5px;
   padding: 0 0 15px 10px;

}
p{
   font-weight: bold;
   margin-bottom: 5px;
   color: black;
}
header{
   border-bottom: 2px solid #5a5b5a;
   background-color: white;
}
.container {
   display: flex;
   flex-wrap:wrap;
   margin-top: 40px;
}
#red-block{
   background-color: #C80002;
}
.red-block-on{
   background-color: #ff0036 !important;
   box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
}
#green-block{
   background-color: #1f5900;
}
.green-block-on{
   background-color: #1eff00 !important;
   border: 10px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
}
.color-block, .text-block{

   margin: 20px;
}
.color-block{
    flex-basis:40px;
    height: 60px;
    border-radius: 8px;
    flex-grow: 1;
    cursor: pointer;
}
.text-block{
    flex-basis:200px;
    height: 200px;
   flex-grow: 8;
   font-size: 18px;
}
Listing 5-3main.css CSS

代码 ExplainedTable 5-1 解释了 main.css 中的 CSS

表 5-1

main.css CSS explained

| `h1{` `letter-spacing: 1px;` `padding: 10px;` `direction:rtl;` `text-align:justify;` | 字母间距增加了字母之间的间距，这可以使大写字母更容易阅读。方向:rtl 是一种将文本方向从右向左改变而不是从左向右的样式。 | | flex-wrap:缠绕； | 当浏览器更小时，这将使 Flexbox 中的项目一个接一个地落下。 | | 。`red-block-on{``background-color: #F00 !important;``box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;` | 单击红色和绿色框时，它们都处于打开状态。这是通过添加一个带有方框阴影的类来创建灯光打开的效果来实现的。！重要信息与背景色一起使用，以覆盖 div 的原始颜色。框阴影用于在 div 周围创建较亮的边缘。 | | `.color-block{``border-radius: 22px;``flex-grow: 1;``cursor: pointer;` | flex-grow:1 命令确定项目将在 Flexbox 中占用多少空间。光标:指针用于当光标悬停在一个框上时改变光标。 |

如果您的服务器仍然运行 nodemon，您应该能够刷新页面并看到 CSS 所做的更改。如果您没有使用 nodemon，请重启服务器并刷新页面。

关于 Flexbox 的更多信息

这是一个很好的机会，让我们对 Flexbox 有更多的了解，并了解它的一些价值。表 5-2 列出了一些 Flexbox 值。

表 5-2

Flexbox values

Add Interaction

JavaScript 用于在点击每个彩色块时添加动作。JavaScript 将被添加到 public/javascript 文件夹中的 main.js 文件中。打开您之前创建的空 main.js 文件，或者创建一个 main.js 文件，并复制清单 5-4 中的代码。

var redBlock = document.getElementById("red-block");
var greenBlock = document.getElementById("green-block");

redBlock.addEventListener("click", function(){
     redBlock.classList.toggle("red-block-on");
});

greenBlock.addEventListener("click", function(){
     greenBlock.classList.toggle("green-block-on");
});

Listing 5-4main.js code

代码解释

有两个变量保存对页面上颜色块元素的引用，“redBlock”和“greenBlock”事件侦听器被添加到这些变量中。JavaScript 事件监听器总是监听特定事件的发生。当它发生时，它可以调用一个函数。在这种情况下，该函数改变块的颜色。它通过添加或删除一个名为“红块开”或“绿块开”的类来实现这一点添加或移除类来更改元素是常见的做法。这意味着改变的所有 CSS 都在一个地方。表 5-3 解释 main.js。

表 5-3

main.js explained

| `redBlock.addEventListener("click", function()` | 单击事件侦听器被添加到 redBlock div 中。这个监听器监听 div 被点击。当它被点击时，一个函数被调用。 | | `redBlock.addEventListener("click", function()` | 单击事件侦听器被添加到 redBlock div 中。这个监听器监听 div 被点击。当它被点击时，一个函数被调用。 | | `redBlock.classList.toggle("red-block-on");` | 这行代码使用了两个 JavaScript 函数 classList 和 toggle。classList 通常与 add 或 remove 一起使用来添加或删除类。通过与 toggle 一起使用，它将确定 div 是否具有该类；如果有，它删除它，如果没有，它添加它。 |

现在，在控制台窗口中，导航到应用程序的路径，并键入 nodemon index.js 或 node index.js 来启动应用程序。打开浏览器并转到 http://localhost:3000/查看应用程序的运行情况。

当你点击红色或绿色按钮时，你应该会看到它的变化，看起来就像一盏灯被打开或关闭。

Sending Data From The Front End

现在基本的应用程序已经设置好了，是时候从前端向 Arduino 发送数据了。每次在 web 浏览器中按下按钮，数据将被发送到 SerialPort 函数，因此可以通过串行端口将数据发送到 Arduino。

为此，代码将被添加到清单 5-1 和清单 5-4 中。

首先更新清单 5-4 中的 main.js 文件；更新以粗体显示。

(function(){

    var socket = io();

    var redBlock = document.getElementById("red-block");
    var greenBlock = document.getElementById("green-block");

    redBlock.addEventListener("click", function(){
        var redClick = redBlock.classList.toggle("red-block-on");
        socket.emit('red', redClick + "_red");
    });

    greenBlock.addEventListener("click", function(){
        var greenClick = greenBlock.classList.toggle("green-block-on");
        socket.emit('green', greenClick + "_green");
     });
})();

代码解释表 5-4 解释 main.js 中的代码

表 5-4

main.js update explained

| `(function(){` `})();` | JavaScript 被包装在一个匿名函数中，该函数调用自身。它被称为立即调用函数表达式(IIFE)。它将 JavaScript 保存在一个块中，如果您将代码中的某个内容命名为您正在导入的库，它可以避免冲突。例如，如果您正在导入的库像在您创建的函数中一样有一个名为 greenClick 的变量，您就不必担心；它在自己的命名空间和范围内。 | | `var greenClick = greenBlock.classList.toggle("green-block-on");` | Node.js 应用程序将向 Arduino 发送数据，告诉它根据前端的按钮是处于打开还是关闭模式来打开或关闭 LED。函数 toggle()根据开关的状态返回一个布尔值，真或假。该值可用于确定将按钮置于 on 状态的类是否已应用于 HTML 元素。变量 greenClick 和 redClick 将保存该值。 | | `socket.emit('red', redClick + "_red");` | 当按钮被点击时，socket.emit()函数被触发，向服务器发送关于哪个按钮被点击及其状态的信息。 |

最后更新清单 5-1 中的 index.js 文件。更新以粗体显示。

var http = require('http');
var express = require('express');
var app = express();
var server = http.createServer(app);
var io = require('socket.io')(server);

var SerialPort = require('serialport');

var serialport = new SerialPort('<add in the serial port for your Arduino>', {

    parser: SerialPort.parsers.readline('\n')

});

app.engine('ejs', require('ejs').__express);
app.set('view engine', 'ejs');

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res){
    res.render('index');
});

serialport.on('open', function(){

    console.log('serial port opened');

});

io.on('connection', function(socket){
    console.log('socket.io connection');

    socket.on('red', function(data){
        serialport.write(data + 'T');
    });

    socket.on('green', function(data){
        serialport.write(data + 'T');
    });

   socket.on('disconnect', function(){

        console.log('disconnected');
    });
});

server.listen(3000, function(){
    console.log('listening on port 3000...');
});

删除并将自己的串口添加到新的 serial port()函数中。

大多数增加的内容都是你在前面章节中使用过的代码。SerialPort 库与 Arduino 的端口 id 一起包含在应用程序中。调用 serialport.on()函数打开串口。

前端 JavaScript 代码中有两个链接到 socket.emit()函数的 socket.on()函数。新增的是 serialport.write()函数。

代码解释表 5-5 解释 index.js。

表 5-5

index.js update explained

| `serialport.write(data + 'T');` | 该函数将数据从应用程序发送到串行端口。在这种情况下，来自前端的数据将被发送到串行端口。字符“T”也被添加到数据中。这是一个终结性的角色。它可以是你选择的任何角色。您需要一个终止字符，因为当 Arduino 接收数据时，它不知道数据的结尾是什么。它接收一个数据流，需要知道一段数据是什么，下一段是什么。“T”在 Arduino 程序中使用，让它知道这是一段数据的结尾 |

设置 LED

本章中 Arduino 的设置将使用 Arduino Uno、试验板、绿色和红色 LED、两个 220 欧姆电阻和跳线。图 5-3 显示了您需要的套件。

图 5-3

1. Breadboard, 2. A red and a green LED, 3. Two 220 ohm resistors, 4. An Arduino

一旦你准备好了工具包，你需要如图 5-4 所示进行设置，并将其连接到电脑上的 USB 端口。连接组件时，请确保 Arduino 没有连接到电脑或任何其他电源。

图 5-4

The LED circuit The Arduino Code

打开 Arduino IDE。在“工具”菜单中，确保在电路板上选择了正确的 Arduino 类型，并且 Arduino 连接的端口正在注册。

创建一个新的草图并将其命名为 chapter_05，从清单 5-5 中复制代码。

const int redLed = 6;
const int greenLed = 5;

char charRead;
String inputString ="";

void setup() {                
  Serial.begin(9600);
  pinMode(redLed, OUTPUT);
  pinMode(greenLed, OUTPUT);
}

void loop() {
  if (Serial.available()) {
    charRead = Serial.read();
    if(charRead != 'T'){
      inputString += charRead;
    } else {

      if(inputString == "true_red"){

        digitalWrite(redLed, 1);
      } else if(inputString == "false_red") {
        digitalWrite(redLed, 0);
      } else if(inputString == "true_green") {
        digitalWrite(greenLed, 1);
      } else if(inputString == "false_green") {
        digitalWrite(greenLed, 0);
      }
      inputString = "";
    }
  }
}

Listing 5-5chapter_05.ino

验证脚本，然后将其上传到 Arduino。确保 Node.js 应用程序已关闭。如果它仍在运行，代码将不会上传到 Arduino，因为串行端口已经被应用程序使用。

代码解释表 5-6 解释了第五章中的代码。

表 5-6

chapter_05.ino explained

| `const int redLed = 6;` `const int greenLed = 5;` | 有两个常量变量保存两个 led 的数字引脚编号。 | | `char charRead;` | 创建一个 char(单个字符)类型的变量来保存来自串行端口的数据的每个字符。 | | `String inputString ="";` | inputString 是一个 String 类型的变量，它将用于连接通过特定数据的串行端口进入的所有字符。 | | `if (Serial.available()) {` | if 语句检查是否有串行数据进入 Arduino。 | | `charRead = Serial.read();` | 调用 Serial.read()函数从串行端口获取数据。数据将是单个字符，存储在变量 charRead 中。 | | `if(charRead != 'T'){``inputString += charRead;` | if 语句检查 charRead 是否与字符“t”不相等。如果不相等，则意味着当前字符不是终止字符，所以它被添加到 inputString 中。 | | `else{` | 如果字符是“T ”,则意味着所有当前数据都已收到，并且触发了 else 语句。 | | `if(inputString == "true_red"){``...``digitalWrite(greenLed, 0);` | else 语句中有一系列 if 语句，它们检查数据是什么，并确定应该打开还是关闭哪个灯。 | | `inputString = "";` | 一旦数据被用来打开或关闭 LED，inputString 被重置为空，因此它为下一条数据做好了准备。 |

一旦程序被上传到 Arduino，重启 Node.js 服务器并转到 http://localhost:3000/。当您点击红色或绿色按钮时，电路上相应的按钮应该打开或关闭。

LCD Web 应用程序

本章中的第二个应用程序将文本数据发送到 Arduino，这些数据将在液晶显示器(LCD)上显示。应用程序将需要一个新目录，其结构如下:

/chapter_05_lcd
    /node_modules
    /public
        /css
            main.css
        /javascript
            main.js
    /views
        index.ejs
    index.js

为应用程序创建框架应用程序:

创建一个新文件夹来存放应用程序。我叫我的章 _05_lcd。
打开命令提示符(Windows 操作系统)或终端窗口(Mac)并导航到新创建的文件夹。
当您在正确的目录中时，键入 npm init 创建一个新的应用程序，您可以按 return 键回答每个问题，或者对它们进行更改。
您现在可以开始添加必要的库；要在命令行下载 Express.js，请键入 npm install express@4.15.3 - save。
然后安装 ejs，键入 npm install ejs@2.5.6 - save。
下载完成后，安装串口。在 Mac 上键入 npm 安装 serial port @ 4 . 0 . 7–save，在 Windows PC 上键入 npm 安装 serial port @ 4 . 0 . 7–build-from-source。
然后最后安装 socket.io，输入 npm install socket.io@1.7.3 - save。

为目录创建文件夹，也可以创建文件。

Note

使用 npm init 时，名称不能包含大写字母。

创建服务器

Node.js 服务器与清单 5-1 的最终版本几乎相同。为 chapter_05_lcd 应用程序打开或创建一个 index.js 文件，并复制清单 5-6 中的代码。

var http = require('http');
var express = require('express');
var app = express();
var server = http.createServer(app);
var io = require('socket.io')(server);
var SerialPort = require('serialport');
var serialport = new SerialPort('<add in the serial port for your Arduino>', {
    parser: SerialPort.parsers.readline('\n')
});

app.engine('ejs', require('ejs').__express);
app.set('view engine', 'ejs');

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res){
    res.render('index');
});

serialport.on('open', function(){
    console.log('serial port opened');
});

io.on('connection', function(socket){

    console.log('socket.io connection');

    socket.on('input-text', function(data){
        serialport.write(data + 'T');
    });

    socket.on('disconnect', function(){
        console.log('disconnected');
    });
});

server.listen(3000, function(){
    console.log('listening on port 3000...');
});

Listing 5-6index.js

有一个名为“input-text”的新 socket.on()函数 id。这将监听具有相同 id 的 socket.emit，它将位于前端。它会将文本发送到 Arduino。

Create The Web Page

网页将非常简单，一个文本框和一个输入按钮。在 views 文件夹中打开或创建 index.js 文件，并复制清单 5-7 中的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>text</title>
    <link href="/css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
        <h1>SENDING TEXT</h1>
        <h2>Getting data from the front end to an Arduino</h2>
    </header>
    <div id="content">
        <input type="text" id="input-text" placeholder="add text" maxlength="32">
        <input id="send-text" type="submit" value="send text">
        <div class="text-block">
            <p>The text sent from this text box will appear on an LCD connected to an Arduino.</p>
            <p>There is a text limit on this box of 32 charaters.</p>

        </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="javascript/main.js"></script>
</body>
</html>
Listing 5-7index.ejs

HTML 使用输入框。在 HTML 中有许多创建表单的元素。这些表单可以发送到服务器进行处理。

代码解释表 5-7 解释了 index.ejs 中的代码。

表 5-7

index.ejs explained

| `` | 这通过使 type = "text "创建了一个文本输入。它有保存默认文本的占位符文本。与 maxLength 一起发送的还有一个字符限制。 | | `` | 这个输入是一个提交按钮，它的类型被设置为提交。它有一个值会出现在按钮上。 |

Make The Web Page Interactive

在 public/javascript 文件夹中打开或创建一个 main.js 文件，并将清单 5-8 中的代码复制到其中。

(function(){
    var socket = io();

    var sendTextButton = document.getElementById("send-text");

    sendTextButton.addEventListener("click", function(){
        var sendText = document.getElementById("input-text").value;
         socket.emit('input-text', sendText); 

    });
})();

Listing 5-8main.js

代码解释表 5-8 解释 main.js 中的代码。

表 5-8

main.js explained

| `var sendTextButton = document.getElementById("send-text");` | 变量 sendTextButton 保存对输入按钮的引用。 | | `sendTextButton.addEventListener("click", function(){` | 点击功能被添加到输入按钮。 | | `var sendText = document.getElementById("input-text").value;` | 当单击输入按钮时，变量将获得文本输入框中的值。 | | `socket.emit('input-text', sendText);` | 输入框中的文本通过 socket.emit 函数发送到服务器。 |

Style The Page

这个应用程序的 CSS 与清单 5-3 有些不同。它不使用 Flexbox，并且有输入样式。在 public/css 文件夹中打开或创建一个 main.css 文件，并复制到清单 5-9 中的 css 中。

*{
 margin: 0;
 padding: 0
}

body{
 font-family: Arial, "Helvetica Condensed", Helvetica, sans-serif;
 color: #3a3b3a;
 background-color: #F4F4F4;
}

h1{
  letter-spacing: 1px;
  padding: 10px;
}

h2{
 letter-spacing: 0.5px;
 font-size: 19px;
 padding: 0 0 15px 10px;
 color: #E37222;
}

p{
 font-weight: bold;
 margin-bottom: 5px;
}

header{
 border-bottom: 2px solid #07889B;
 background-color: white;
}

#content {
  margin: 40px;
}

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #E37222;
  border-radius: 12px;
  box-sizing: border-box;

}

input[type=submit] {
  font-size: 14px;
  width: 100%;
  background-color: #07889B;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

.text-block{
  width: 100%;
  font-size: 18px;
  margin-top: 20px;
}

Listing 5-9main.css

CSS 解释表 5-9 解释了 main.css 中的 CSS。

表 5-9

main.css explained

| `input[type=text], select {` | 这将选择输入文本框。 | | `display: inline-block;` | 具有内嵌块的元素可以有宽度和高度。 | | `box-sizing: border-box;` | 这使得盒子的角变圆。 | | `input[type=submit] {` | 这将选择提交按钮。 |

设置液晶显示器

液晶屏上有很多控制组件的针脚。有一个寄存器选择(rs)引脚；这控制了数据在 LCD 存储器中的位置。Enable (en)引脚允许写入寄存器。共有八个数据引脚(d0–D7)。

电位计也是电路的一部分。这会改变屏幕的对比度。该应用所需的设备如图 5-5 所示。

图 5-5

1.breadboard, 2. 10k ohm potentiometer, 3. A 220 ohm resistor, 4. An Arduino, 5. An LCD screen

Arduino 的设置如图 5-6 所示。确保 Arduino 在组装时没有连接电源。

图 5-6

Setup for the LCD The Arduino Code

打开 Arduino IDE 并创建一个新的草图。将 Arduino 连接到您的计算机，并确保它出现在端口中并且是正确的板。将清单 5-10 中的代码复制到新草图中。保存为 chapter_05_lcd.ino，验证，然后上传到 Arduino。

#include <LiquidCrystal.h>

const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

char charRead;
String inputString = "";
String outputString = "";
String newOutputString = "";

void setup() {
  Serial.begin(9600);
  lcd.begin(16, 2);
}

void loop() {
  if (Serial.available()) {
    charRead = Serial.read();
    if(charRead != 'T'){
      inputString += charRead;
    } else {
      lcd.clear();
      outputString = inputString;
      inputString = "";
    }
  }

  if(newOutputString != outputString){
    lcd.print(outputString);
    newOutputString = outputString;
  }

  lcd.scrollDisplayLeft();
  delay(500);

}

Listing 5-10chapter_05_lcd.ino

代码解释表 5-10 解释了 chapter_05_lcd.ino 中的代码

表 5-10

chapter_05_lcd.ino explained

| `#include ` | 将 LiquidCrystal 库引入草图。需要这个库来控制 LCD。 | | `const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;` | 创建了许多整数变量来保存 LCD 上所用引脚的信息。引脚 12 是寄存器选择；引脚 11 是使能引脚；d4、d5、d6 和 d7 是数据引脚。 | | `LiquidCrystal lcd(rs, en, d4, d5, d6, d7);` | 创建了一个称为 lcd 的液晶对象。 | | `char charRead;``String inputString = "";``String outputString = "";` | 创建了许多变量来保存文本数据。 | | `lcd.begin(16, 2);` | 这将初始化 LCD 并选择显示器的宽度和高度。 | | `lcd.clear();` | clear()函数清空屏幕，以便显示新数据。 | | `outputString = inputString;` | 将新字符串放入保存要显示的数据的变量中。 | | `inputString = "";` | 重置输入字符串，为新数据做好准备。 | | `if(newOutputString != outputString){` | 检查 outputString 是否与当前字符串不同。由于代码在循环函数中，如果没有检查，那么每次循环时，相同的字符串将被添加到输出字符串中。 | | `lcd.print(outputString);` | 如果它是一个新的字符串，那么调用 LiquidCrystal 库的 print()函数，该字符串被传递并显示在 LCD 上。 | | `newOutputString = outputString;` | 变量 newOutputString 被更新，为下一个循环做好准备。 | | `lcd.scrollDisplayLeft();` | 函数的作用是:让文本向左滚动。 |

Arduino 更新后，在控制台窗口中转至应用程序的根目录，通过键入 nodemon index.js 或 node index.js 启动应用程序。打开 web 浏览器并转至 http://localhost:3000/。在框中键入一些文本，然后发送；这将需要几秒钟，但它会出现在液晶显示屏上。

使用电位计改变屏幕的对比度。如果您在屏幕上看不到任何东西，可能是对比度被调低了。

注意，由于该设置中有相当多的焊线，如果您没有在屏幕上显示数据，或者如果屏幕上有奇怪的字符，请检查所有的焊线。同时转动电位计，因为这会改变屏幕的对比度。

摘要

在本章中，您开始从服务器向 Arduino 发送数据以更改组件。现在您知道了使用 web 服务器向 Arduino 发送数据和从 Arduino 接收数据的主要原理。下一章将结合这些知识创建一个项目，将数据从 Arduino 发送到网页，并使用该信息更新连接到 Arduino 的组件。

六、Arduino 到前端：第二部分

本章深入探讨了 Arduino 组件如何与网页元素交互。您将使用模拟和数字数据、JavaScript 数据结构以及对数据的简单计算。在本章结束时，您将创建一个使用电位计的交互式应用程序来回答基于 web 的问题，使用数据进行计算，并在 Arduino 上将其可视化。

模拟和数字信号

Arduinos 具有数字和模拟引脚，可以发送和接收模拟或数字信号。模拟信号是连续可变的；数字信号以固定的单位计数。图 6-1 显示了一个模拟和数字信号。

图 6-1

An analog and digital signal

一个数字信号有有限数量的值，有限数量的范围内的步骤。模拟信号是连续可变的。因此，数字信号可以记录 11 或 12，而模拟信号可以记录 11 和 12 之间的任何数字。

Arduino 既有模拟引脚，也有数字引脚。analogRead 功能允许您从模拟引脚读入数据，analogWrite 功能允许您使用该数据控制其他元件，例如 LED 的亮度。

analogRead 函数的范围是 0 到 1023，analogWrite 函数的范围是 0 到 255。read 函数将输入电压映射为 0 到 1023 之间的值。必须映射读取的数据，使其符合模拟写入的范围。

应用程序

在本章中，您将创建一个事件反馈应用程序。它可以让你从一个活动的参与者那里得到反馈，并计算出这个活动有多成功。屏幕上会出现一些问题，这些问题将使用物理电位计来回答。然后，这些数据将被用于计算活动的成功程度，显示在网页上，并被发送回 Arduino。

Set Up The Arduino

事件计量应用电路将由两个电位计和一个按钮组成。电位计用于回答问题，按钮用于提交数据。你需要两个电位计、一个 Arduino、一个按钮和导线。组成如图 6-2 所示。

图 6-2

Components for the application: 1. Breadboard, 2. 2 x potentiometers, 3. Button, 4. Arduino Uno

如图 6-3 所示，将组件连接到 Arduino。

图 6-3

The setup for the circuits The Arduino Code

打开 Arduino IDE 并创建一个名为 chapter_06 的新草图，然后复制清单 6-1 中的代码。

const int analogInA0 = A0;
const int analogInA1 = A1;
const int pushButton = 2;

bool lastButtonState = 0;

int a0Value = 0;
int a0LastValue = 0;

int a1Value = 0;
int a1LastValue = 0;
String a0String = "A0";
String a1String = "A1";
String pushButtonString = "BP";

void setup(){
  Serial.begin(9600);
  pinMode(pushButton, INPUT_PULLUP);
}
void loop(){
  int buttonStateUp = digitalRead(pushButton);

  a0Value = analogRead(analogInA0);
  a1Value = analogRead(analogInA1);

  a0Value = map(a0Value, 0, 1023, 0, 10);
  a1Value = map(a1Value, 0, 1023, 0, 10);

  a0LastValue = CheckValue(a0Value, a0LastValue, a0String);
  a1LastValue = CheckValue(a1Value, a1LastValue, a1String);
  if(lastButtonState != buttonStateUp){
      lastButtonState = buttonStateUp;
      if(buttonStateUp == false){
          Serial.println(pushButtonString  + a0Value + "," + a1Value);
      }

  }
}
int CheckValue(int aValue, int aLastValue, String aString){
  if(aValue != aLastValue){
    Serial.println(aString + aValue);
    aLastValue = aValue;
  }
  return aLastValue;
}

Listing 6-1
Chapter_06.ino code

将 Arduino 连接到电脑，编译并上传代码。

代码解释

在这张草图中，有两个电位计连接到模拟输出 A0 和 A1。还有一个按钮连接到数字输出 2。

该代码向服务器发送两种类型的数据，一种类型是旋转电位计，另一种类型是按下按钮。在每个循环中，来自每个电位计的值被发送到一个名为 CheckValue 的函数。

该函数检查值是否已经改变。如果有，它会将新值发送到串行端口。该函数在一个循环中被调用两次，以检查每个电位计。每个电位计都有一个标识符字符串，该字符串与其值一起发送到串行端口。为了检查该值是否已经改变，该函数需要前一个循环中的电位计值以及当前循环中的值。

在每次循环中还会检查按钮的状态。如果它发生变化，并且变化是被按下，则每个电位计的当前值与数据连接到按钮按下的标识符一起被发送到串行端口。表 6-1 详细解释了代码。

表 6-1

Chapter_06.ino explained

| `const int analogInA0 = A0;``const int analogInA1 = A1;` | 有三个变量保存电位计和按钮的引脚编号参考。 | | `bool lastButtonState = 0;` | 这个变量保存按钮的状态，0 代表向上，1 代表向下。 | | `int a0Value = 0;``int a0LastValue = 0;``int a1Value = 0;` | 这些变量将保存电位计的当前值和最终值。 | | `String a0String = "A0";``String a1String = "A1";` | 每个交互式组件都有一个参考字符串。 | | `int buttonStateUp = digitalRead(pushButton);` | 按钮的当前状态在每个循环开始时被记录。 | | `a0Value = analogRead(analogInA0);` `a1Value = analogRead(analogInA1);` | 每个电位计的值被读入一个变量。 | | `a0Value = map(a0Value, 0, 1023, 0, 10);` `a1Value = map(a1Value, 0, 1023, 0, 10);` | 这些值被映射。这是因为电位计值介于 0 和 1023 之间，对于应用，它们需要介于 0 和 10 之间。 | | `a0LastValue = CheckValue(a0Value, a0LastValue, a0String);` `a1LastValue = CheckValue(a1Value, a1LastValue, a1String);` | 电位计的值被发送到一个名为 CheckValue 的函数。检查值传递了三个参数:当前值、最后一个值和标识符字符串 | | `int CheckValue(int aValue, int aLastValue, String aString){``if(aValue != aLastValue){``Serial.println(aString + aValue);``aLastValue = aValue;``}``return aLastValue;` | CheckValue()函数有一个 if 语句，用于检查新值是否不同于旧值(使用不等于)。如果不同，则调用 Serial.println()函数，传递字符串标识符(“A0”或 A1”)。最后一个值被更改为当前值，并从函数中返回。 | | `if(lastButtonState != buttonStateUp){` | 这个 if 语句检查按钮的状态是否已经改变。 | | `lastButtonState = buttonStateUp;` | 如果按钮状态已经改变，则更新变量 lastButtonState 以反映该改变。 | | `if(buttonStateUp == false){``Serial.println(pushButtonString + a0Value + "," + a1Value);` | 如果 buttonStateUp 为 false，则意味着按钮被按下；如果它是向下的，那么标识符“BP”与两个电位计的值连接，这段数据通过串行端口发送。 |

注意与 JavaScript 函数不同，函数的返回值需要在。ino 文件。到目前为止，有两个功能，设置和循环。这两个都不返回任何内容，所以它们以关键字 void 开头。在本章中，将调用函数 CheckValue。它返回一个整数，所以当它被定义时，int 关键字出现在函数名之前:int CheckValue(int aValue，int aLastValue，String aString)。

Node.js 应用程序

当电位计转动时，网络应用程序将收到数据。web 应用程序将需要计算出哪个电位计被转动，然后更新网页。图 6-4 显示了应用程序的外观。

图 6-4

The event feedback front end

应用程序的目录结构如下所示:

/chapter_06
    /node_modules
    /public
        /css
            main.css
        /javascript
            main.js
    /views
        index.ejs
    index.js

Set Up The Node.js Server

本章中的 Node.js 服务器的设置方式与前几章相同:

创建一个新文件夹来存放应用程序。我叫我的章 _06。
打开命令提示符(Windows 操作系统)或终端窗口(Mac)并导航到新创建的文件夹。
当你在正确的目录键入 npm init 创建一个新的应用程序；您可以按下 return 键浏览每个问题，或者对它们进行更改。
您现在可以开始添加必要的库；要在命令行下载 Express.js，请键入 npm install express@4.15.3 - save。
然后安装 ejs，键入 npm install ejs@2.5.6 - save。
下载完成后，安装串口。在 Mac 上键入 npm 安装 serial port @ 4 . 0 . 7–save，在 Windows PC 上键入 npm 安装 serial port @ 4 . 0 . 7–build-from-source。
然后最后安装 socket.io，输入 npm install socket.io@1.7.3 - save。

Create a Node.js Server

Node.js 服务器类似于前面的章节。主要区别在于，来自 Arduino 的数据可以通过电位计或按钮发送。这意味着数据必须根据输入进行清理，并发送给正确的函数。在应用程序的根目录下，创建一个名为 index.js 的文件，并复制清单 6-2 中的代码。

var http = require('http');
var express = require('express');
var app = express();
var server = http.createServer(app);
var io = require('socket.io')(server);
var SerialPort = require('serialport');
var serialport = new SerialPort('<add in the serial port for your Arduino>', {
    parser: SerialPort.parsers.readline('\n')
});
app.engine('ejs', require('ejs').__express);
app.set('view engine', 'ejs');

app.use(express.static(__dirname + '/public'));

app.get('/', function (req, res){
    res.render('index');
});

serialport.on('open', function(){
    console.log('serial port opened');
});

io.on('connection', function(socket){
    console.log('socket.io connection');
    serialport.on('data', function(data){
        console.log(data);

        var dataKey = data.slice(0,2);
        var dataString = data.slice(2);
        dataString = dataString.replace(/(\r\n|\n|\r)/gm,"");

        if(dataKey === "BP"){
            var dataArray = dataString.split(",");
            console.log(dataArray);
            socket.emit("button-data", dataArray);
        } else {
            var dataObject = {
                dataKey: dataKey,
            dataString: dataString
        }
        console.log(dataObject);
        socket.emit("bar-data", dataObject);
    }
   });
    socket.on('disconnect', function(){
        console.log('disconnected');
    });
});
server.listen(3000, function(){
    console.log('listening on port 3000...');
});

Listing 6-2
index.js code

删除并将你的串口添加到新的 serial port()函数中。

代码解释

服务器需要处理两种不同类型的数据，电位计数据和按钮数据。创建了两个套接字，每个套接字对应一种数据类型，ID 分别为“条形数据”和“按钮数据”

这段代码中使用了一些新的函数和概念。它们与转动电位计或按下按钮有关，并使用这些数据创建数据结构。

控制台日志有助于了解哪些数据被发送到前端。表 6-2 解释 index.js。

表 6-2

index.js explained

| `serialport.on('data', function(data){` `console.log(data);` | 通过串行端口传递的数据可能来自电位计或按钮。如果电位计连接到 A0，数据将类似于“A03”，其中“A0”是标识符，“3”是电位计的数据。如果是连接到 A1 的电位计，它将类似于“A13”如果按钮被按下，那么数据将类似于“BP2，4”“BP”是按钮的标识符，“2，4”是按钮传递的数据。 | | `var dataKey = data.slice(0,2);` | slice()是一个删除 JavaScript 字符串元素的 JavaScript 函数。当函数被传递(0，2)时，它从字符串的索引 0 开始切片，并切片两个字符。这两个切分字符存储在 dataKey 变量中。 | | `var dataString = data.slice(2);` | 通过向 slice 函数传递一个参数，将返回从该索引点到字符串末尾的字符。 | | `dataString = dataString.replace(/(\r\n|\n|\r)/gm,"");` | JavaScript 中的 replace 函数可以用另一个字符替换某个字符。在这种情况下，字符串末尾有一个新行，需要用空字符串""替换。第一个参数是正则表达式(\r\n|\n|\r)/它在字符串上查找任何类型的回车符或换行符，而替换它的第二个参数是空字符串" "。 | | `if(dataKey === "BP"){``...``} else {``...` | 数据键定义了 Arduino 上的交互内容。有一个 if/else 语句来检查组件。if 语句检查 dataKey 变量包含的内容。如果是“BP ”,则表示按钮已被按下，如果不是，则表示电位计已被转动。 | | `var dataArray = dataString.split(",");` | 函数的作用是:将一个字符串分割成一个数组。参数“”告诉 split 根据什么来拆分字符串，在本例中是一个逗号。这里的结果将是一个数组，其中包含电位计的两个数字；比如[ '3 '，' 4' ]。 | | `socket.emit("button-data", dataArray);` | 这会将数组发送到一个名为“button-data”的套接字。 | | `var dataObject = {``dataKey: dataKey,``dataString: dataString` | 如果使用 else 语句，则数据来自电位计。在这种情况下，您需要传递一个标识符来显示哪个电位计被转动过，以及数据。创建一个名为 dataObject 的对象，该对象可以与标识符和数据一起传递到前端。 | | `socket.emit("bar-data", dataObject);` | 然后，这些数据通过一个名为“bar-data”的套接字发送出去。 |

注意正则表达式用于搜索字符串中的不同字符。它们由描述搜索模式的已定义集合符号组成。例如，使用\n 匹配换行符，使用\r 匹配回车符。

Create The Front End

本章中的前端将做许多事情；它将向 Arduino 用户提供反馈，并显示之前用户所说的信息。首先，您将创建一个提供 Arduino 输入反馈的网页。在应用程序的根目录下创建一个 views 文件夹，并在其中创建一个文件。从清单 6-3 中复制 HTML。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>data</title>
    <link href="/css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
        <h1>EVENT METRICS</h1>
        <h2>getting information through an Arduino</h2>
    </header>
    <div id="content">
        <h2>AT TONIGHTS EVENT DID YOU ...</H2>
        <p>Answer the questions by turning the knobs, to submit your answer press the button.</p>
        <div id="bar-A0" class="container">
            <div  class="bar">
                <p>talk to someone new?</p>
                <div class="response-container">
                    <p class="flex-item">not really</p>
                    <p class="flex-item">loads</p>
                </div>

                <svg width="400" height="20" viewBox="0 0 400 20">
                    <rect id="A0"
                    x="0"
                    y="0"
                    fill="#6BCAE2"
                    width="320"
                    height="20"/>
                </svg>
            </div>
            <div class="text-block">
                <h3>Current Input<h3>
                <p></p>
            </div>
            <div class="text-block-response hidden">
                <h3>Thanks<h3>
            </div>
        </div>
        <div id="bar-A1" class="container">
            <div  class="bar">
                <p>find out something new new?</p>
                <div class="response-container">
                    <p class="flex-item">not really</p>
                    <p class="flex-item">loads</p>
                </div>
                <svg width="400" height="20" viewBox="0 0 400 20">
                    <rect id="A1"
                    x="0"
                    y="0"
                    fill="#6BCAE2"
                    width="320"
                    height="20"/>
                </svg>

            </div>
            <div class="text-block">
                <h3>Current Input<h3>
                <p></p>
            </div>
            <div class="text-block-response hidden">
                <h3>Thanks<h3>
                <p></p>
            </div>
        </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="javascript/main.js"></script>
</body>
</html>
Listing 6-3index.ejs code

代码解释

前端需要向用户反馈他们与 Arduino 的交互；这包括关于电位计值的信息和反馈，以让他们知道按钮按压已经被记录。

要注意的主要事情是有两个非常相似的 HTML 块，每个电位计一个。它们都有相同的结构，有一个类“容器”、“栏”、“文本块”和“文本块响应”以及一个 SVG。每个模块还具有 id 参考，作为其可视化电位计的参考。表 6-3 详细介绍了 index.ejs 中的代码。

表 6-3

index.ejs explained

| `

` `

` | 每个电位计都有相似的 HTML 块，所以它们得到正确的数据；每个都有一个与电位计相关的 id。 | | `

` | 在每个容器块中，都有一个隐藏了类的 div。只有当有人按下按钮时，它的内容才会显示，所以它有第二个名为 hidden 的类，用于隐藏 div。 |

Add Style

在应用程序的根目录下创建一个公共文件夹，并在其中创建一个名为 CSS 的文件夹；创建 main.css 文件。将清单 6-4 中的 CSS 复制到新创建的文件中。

*{
  margin: 0;
  padding: 0;
}
body{
  font-family: Verdana, Arial, sans-serif;
}
h2{
  font-size: 18px;
}
h3{
  font-size: 16px;
}
p{
  font-size: 14px;
}
header{
  background: #FE8402;
  color: white;
}
header h1{
  padding-top: 25px;
}
header h2{
  padding-bottom: 45px;
}
header h1,header h2, header h3, header p{
    padding-left: 12px;
}
#content{
  margin: 22px;
}
.container{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}
.response-container{
  display: flex;
}
.flex-item:nth-child(2){
  margin-left: 305px;
}
.bar > p{
  font-weight: bold;
}

.text-block{
    background: #6BCAE2;
    color: white;
    width: 145px;
    height: 45px;
    margin-top: 22px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 10px;
    font-size: 16px;
}
.text-block-response{
    background: #FE8402;
    color: white;
    width: 90px;
    height: 45px;
    margin-top: 22px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 10px;
    font-size: 16px;
}
.text-block p{
  padding-left: 0px;
  padding-top: 12px;
}
.container svg{
  border: #FE8402 solid 1px;
  padding: 10px;
  margin: 10px 10px 10px 0;
}
.hidden{
  visibility: hidden;
}
Listing 6-4
main.css

代码解释

CSS 与前面的章节相似，使用 Flexbox 作为主要内容。表 6-4 解释了 main.css 中的一些 CSS。

表 6-4

main.css explained

| `header h1,header h2, header h3, header p{}` | 这将只选择标题中的 h1、h2、h3 和 p 标签。 | | `.flex-item:nth-child(2){``margin-left: 305px;``}``

not really

loads

` | nth-child 是一个 CSS 命令，选择某个位置有元素或类名的子元素。在这种情况下，有两个带有“flex-item”类的 p 标签；n-child(2)挑第二个，给它左边 305 像素的边距；这是它坐在酒吧的尽头。 | | `.bar > p{``font-weight: bold;` | CSS 中的>字符选择它前面元素的子元素，而不是孙元素。在这种情况下，它将选取类“bar”的 div 中的段落，但不选取 div 中任何作为“bar”的子元素的段落。 | | `.hidden{``visibility: hidden;` | hidden 类使用可见性来隐藏包含该类的任何元素。然后可以用 JavaScript 添加和删除它，以隐藏和取消隐藏一个 HTML 块。 |

Make The Page Interactive

最后添加代码，使前端的元素具有交互性。在 public 文件夹中创建一个名为 JavaScript 的新文件夹，并创建一个名为 main.js 的文件。将清单 6-5 中的代码复制到 main.js 中。

(function(){
    var socket = io();
    socket.on("bar-data", function(data){
        var current = data.dataKey;
        var svgBar = document.getElementById(current);  
        var newWidth = data.dataString * 40;
        svgBar.setAttribute("width", newWidth);
        currentInputValue(data);
        addRemoveClass("add");
    });
    socket.on("button-data", function(data){
        addRemoveClass("remove");
    });
    function addRemoveClass(action){
        var buttonResponse = document.getElementById("bar-A0").getElementsByClassName("text-block-response")[0];

        buttonResponse.classListaction;
        buttonResponse = document.getElementById("bar-A1").getElementsByClassName("text-block-response")[0];
        buttonResponse.classListaction;
    }

    function currentInputValue(data){
        var targetP = document.getElementById("bar-" + data.dataKey).getElementsByClassName("text-block")[0].getElementsByTagName("p")[0];
        targetP.innerHTML = data.dataString;
    }
})();

Listing 6-5
main.js code

代码解释

CSS 与前面的章节相似，使用 Flexbox 作为主要内容。

JavaScript 将从两个插座接收数据，“bar-data”和“button-data ”,这取决于是转动电位计还是按下按钮。当按钮被按下时，需要给用户一个通知。当转动电位计时，用户将看到数据以条形和数字的形式显示。

当电位计转动时，向前端发送一个包含电位计标识符和值的对象。表格 6-5 详细描述了 main.js 中的代码。

表 6-5

main.js explained

| `socket.on("bar-data", function(data){` `var current = data.dataKey;` | socket.on 函数做的第一件事是获取电位计的密钥，并将其存储在一个变量中。 | | `var svgBar = document.getElementById(current);` | 然后将正确的 SVG 条存储在一个变量中。 | | `svgBar.setAttribute("width", newWidth);` | 宽度属性在 svg 上更新。 | | `currentInputValue(data);` | 调用更新电位计文本值的函数。 | | `addRemoveClass("add");` | 调用隐藏按钮被按下通知的函数。 | | `socket.on("button-data", function(data){``addRemoveClass("remove");` | 当按钮被按下时，调用一个函数从通知块中删除隐藏的类。 | | `The AddRemoveClass(action) function` | 这个函数添加或删除隐藏在 div 中的类，该类通知用户他们已经按下了按钮。 | | `var buttonResponse = document.getElementById("bar-A0").getElementsByClassName("text-block-response")[0];` | 这将选择 id 为“bar-A0”的元素中类名为 text-block-response“bar-A0”的第一个元素。 | | `buttonResponse.classListaction` `;` | classList 是一个 JavaScript 函数，可以在元素中添加或删除类名。当函数被用来添加或删除一个类时，这些关键字作为参数动作被传递给 AddRemoveClass 函数，并被传递给方括号[]中的 classList 函数。 | | `The currentInputValue(data) function` | 该函数首先存储它想要更改的元素，然后将其 innerHTML 更改为来自电位计的当前数据字符串， |

请注意，您可能已经注意到了调用“document . getelementsbyclassname”末尾的[0]，这是因为它返回一个数组，类似于具有该类名的所有元素的对象。要访问数组中您想要的元素，您可以使用括号通过它在数组中的位置来请求它。即使在您进行的调用中只返回了一个元素，它仍然需要被它在数组中的位置引用，也就是位置 0。

注意您通常会看到这样调用的函数:

button response . class list . add(" hidden ")；或者 button response . class list . remove(" hidden ")；

add 和 remove 关键字写在“.”之后。在这段代码中，单词“add”或“remove”是作为参数发送给函数的字符串。因为它们是字符串，而不是关键字，所以不能加在点之后，而需要放在方括号中。方括号用于任何传递字符串的函数，当它需要一个关键字时。

您可以通过在控制台窗口中导航到应用程序，然后键入 nodemon index.js 或 node index.js 来启动应用程序，从而检查到目前为止页面的外观。确保 Arduino 已连接到您的电脑，并打开浏览器，然后转到 http://localhost:3000/查看应用程序的运行情况。

扩展应用程序

现在你有了数据，你可以用它做很多事情。该应用程序将被扩展到包括一个晚上的总体评级。

这些计算可以在服务器或前端进行。在这种情况下，它们将在前端执行。如果刷新页面，数据将会丢失，因为它只存储在浏览器的本地。

您可以设置连接到 Node.js 服务器的数据库并存储数据，这不在本书讨论范围之内；在附录 b 中有一些关于在哪里找到建立数据库的信息的信息。

Arduino 的设置是相同的，Node.js 服务器的代码也是如此。

计算出每个问题选择 5 或以上的人的百分比。

Update The Code

要更新应用程序，打开清单 6-3 中的 index.ejs 文件，并复制到粗体的 HTML 中。

<!DOCTYPE html>
<html>
...
            <div class="text-block">
                <h3>Current Input<h3>
                <p></p>
            </div>
            <div class="text-block-response hidden">
                <h3>Thanks<h3>
                <p></p>
            </div>
        </div>
        <div>
            <h2><span id="percent">0</span>%</h2s>
            <p>positive event</p>
        <div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="javascript/main.js"></script>
</body>
</html>

添加的 div 将显示正面反馈的百分比。span 有一个 id，这样它就可以被 JavaScript 访问并以百分比更新。

接下来打开清单 6-5 中的 main.js 并添加粗体代码。

(function(){
    var socket = io();
    var totalClickCounter = 0;
    var accumulatorArrayA0 = [0,0,0,0,0,0,0,0,0,0,0];
    var accumulatorArrayA1 = [0,0,0,0,0,0,0,0,0,0,0];
    socket.on("bar-data", function(data){
        var current = data.dataKey;
        var svgBar = document.getElementById(current);
        var newWidth = data.dataString * 40;
        svgBar.setAttribute("width", newWidth)
        currentInputValue(data);
        addRemoveClass("add");
    });
    socket.on("button-data", function(data){
        var percetageSpan = document.getElementById('percent');
        totalClickCounter = totalClickCounter + 2;
        accumulatorArrayA0[data[0]] = accumulatorArrayA0[data[0]] + 1;
        accumulatorArrayA1[data[1]] = accumulatorArrayA1[data[1]] + 1;

        var positiveTotal1 = sumPositiveResponses(accumulatorArrayA0);
        var positiveTotal2 = sumPositiveResponses(accumulatorArrayA1);
        var positiveTotals = positiveTotal1 + positiveTotal2;
        var positivePercentage = (positiveTotals/totalClickCounter) * 100;
        percent.innerHTML = Math.floor(positivePercentage)
        addRemoveClass("remove");
    });
    function sumPositiveResponses(dataArray){    
      var positiveTotal = 0;
      for(var i = 5; i< dataArray.length; i++){
        positiveTotal = positiveTotal + dataArray[i];
      }
      return positiveTotal;
    }

    function addRemoveClass(action){
        var buttonResponse = document.getElementById("bar-A0").getElementsByClassName("text-block-response")[0];
        buttonResponse.classListaction;
        buttonResponse = document.getElementById("bar-A1").getElementsByClassName("text-block-response")[0];
        buttonResponse.classListaction;
    }

    function currentInputValue(data){
        var targetP = document.getElementById("bar-" + data.dataKey).getElementsByClassName("text-block")[0].getElementsByTagName("p")[0];
        targetP.innerHTML = data.dataString;
    }
})();

代码解释表 6-6 解释 main.js 中的代码。

表 6-6

The updated main.js explained

| `var totalClickCounter = 0;` | 创建一个计数器来记录按钮被按下的次数。 | | `var accumulatorArrayA0 = [0,0,0,0,0,0,0,0,0,0,0];` `var accumulatorArrayA1 = [0,0,0,0,0,0,0,0,0,0,0];` | 有两个数组:一个用于 11 个元素的每个问题，一个用于电位计上的每个可能的选择。 | | `totalClickCounter = totalClickCounter + 2;` | 每点击一次按钮，计数器就增加 2，因为百分比需要通过两个问题计算出来。 | | `accumulatorArrayA0[data[0]] = accumulatorArrayA0[data[0]] + 1;` `accumulatorArrayA1[data[1]] = accumulatorArrayA1[data[1]] + 1;` | 来自每个问题的数据被添加到适当的数组中。如果有人在第一个问题中输入了 3，那么数组中的第三个位置将被更新 1。 | | `var positiveTotal1 = sumPositiveResponses(accumulatorArrayA0);` `var positiveTotal2 = sumPositiveResponses(accumulatorArrayA1);` | 调用一个函数来累加数组中五个或更多的元素。 | | `var positiveTotals = positiveTotal1 + positiveTotal2;` | 两个问题的总数相加。 | | `var positivePercentage = (positiveTotals/totalClickCounter) * 100;` `console.log(Math.floor(positivePercentage));` | 百分比算出来了。 | | `percent.innerHTML = Math.floor(positivePercentage)` | index.ejs 上的跨度用百分比更新。Math.floor()是一个 JavaScript 函数，它确保值是整数；如果没有这个，你可能会得到一个长浮点数。 |

最后，更新 css，打开清单 6-4 中的 main.css 文件，将加法 CSS 添加到底部。

#responses{
  color: black;
  font-weight: normal;
  margin: 12px;
}
#responses .text-block{
    background-color: white;
    border: #6BCAE2 solid 2px;
    color: black;
    width: 260px;
    height: 48px;
    margin-top: 22px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 10px;
    font-size: 14px;
    font-weight: normal;
}

现在，如果您重新启动服务器，您应该会根据 Arduino 的输入看到百分比变化。

在 Arduino 上可视化数据

现在，您有了一个数字来表示人们享受活动的程度，您也可以使用附加到 Arduino 的组件来表示这个数字。本章的最后一节更新了 Arduino 电路和代码，使 LED 的亮度取决于享受等级。

使用 serialport.write()函数将百分比从 Node.js 服务器发送回 Arduino。Arduino 然后处理这些数据，这样它就可以用来点亮 LED。

Update The Front-End Javascript

前端使用的 JavaScript 需要更新，以便将计算出的百分比发送到服务器。这使用了 socket.emit 函数。

打开更新后的 main.js 文件，在 socket.on()函数中添加粗体代码，id 为“button-data”

socket.on("button-data", function(data){
    var percetageSpan = document.getElementById('percent');
    totalClickCounter = totalClickCounter + 2;

    accumulatorArrayA0[data[0]] = accumulatorArrayA0[data[0]] + 1;
    accumulatorArrayA1[data[1]] = accumulatorArrayA1[data[1]] + 1;
    var positiveTotal1 = sumPositiveResponses(accumulatorArrayA0);
    var positiveTotal2 = sumPositiveResponses(accumulatorArrayA1);
    var positiveTotals = positiveTotal1 + positiveTotal2;
    var positivePercentage = (positiveTotals/totalClickCounter) * 100;
    positivePercentage = Math.floor(positivePercentage);
    percent.innerHTML = positivePercentage;
    socket.emit('percentData', positivePercentage);    
    addRemoveClass("remove");
});

代码解释

表 6-7 解释了更新后的 main.js 文件中的代码。

表 6-7

The updated main.js explained

| `positivePercentage = Math.floor(positivePercentage);` | positivePercentage 变量被更新以保存 Math.floor()函数的结果。这就是为什么 Math.floor()函数不需要被调用两次。socket.emit 发送的值需要它以及 innerHTML。 | | `socket.emit('percentData', Math.floor(positivePercentage));` | 套接字发出函数 id 是“percentData ”,正的百分比数被发送给任何与该 id 匹配的 socket.on 函数。 |

Update The Node.js Server

打开 index.js 文件，列出 6-2 ，用粗体代码更新 io.on()函数。

io.on('connection', function(socket){
    console.log('socket.io connection');
    serialport.on('data', function(data){
            // console.log(data);
            var dataKey = data.slice(0,2);

            var dataString = data.slice(2);
            // console.log(dataString);
            dataString = dataString.replace(/(\r\n|\n|\r)/gm, "");

            if(dataKey === "BP"){
                var dataArray = dataString.split(",");
                // console.log(dataArray);
                socket.emit("button-data", dataArray);
            } else {
                var dataObject = {
                    dataKey: dataKey,
                    dataString: dataString
                }
                // console.log(dataObject);
                socket.emit("bar-data", dataObject);
            }

    });

     socket.on('percentData', function(data){
        serialport.write(data + 'T');
    });
    socket.on('disconnect', function(){
        console.log('disconnected');
    });
});

socket.on()函数连接到 main.js 中的 socket.emit()函数。当接收到新数据时，它通过添加了终止字符“T”的串行端口发送。

Update The Arduino

Arduino 电路和代码需要更新。对于该电路，您需要以下内容:

1 x LED
1 x 220 ohm resister

图 6-5 显示了如何将 LED 添加到电路中。

图 6-5

The updated circuit

更新电路时记得拔掉 Arduino。LED 的阳极(较长的正极引脚)连接到 220 欧姆电阻，该电阻连接到数字引脚 9。LED 的阴极(较短的负极引脚)接地。

Update The Arduino

打开清单 6-1 中的 chapter_06.ino 代码，用粗体代码更新它。

const int analogInA0 = A0;
const int analogInA1 = A1;
const int pushButton = 2;

const int ledPin = 9;

bool lastButtonState = 0;

int a0Value = 0;
int a0LastValue = 0;

int a1Value = 0;
int a1LastValue = 0;

String a0String = "A0";
String a1String = "A1";
String pushButtonString = "BP";

int serverValueRemapped = 0;

char charRead;

String inputString ="";

void setup(){
  Serial.begin(9600);
  pinMode(pushButton, INPUT_PULLUP);
}
void loop(){
  int buttonStateUp = digitalRead(pushButton);
  a0Value = analogRead(analogInA0);
  a1Value = analogRead(analogInA1);
  a0Value = map(a0Value, 0, 1023, 0, 10);
  a1Value = map(a1Value, 0, 1023, 0, 10);
  a0LastValue = CheckValue(a0Value, a0LastValue, a0String);
  a1LastValue = CheckValue(a1Value, a1LastValue, a1String);
  if(lastButtonState != buttonStateUp){
   lastButtonState = buttonStateUp;
    if(buttonStateUp == false){
       Serial.println(pushButtonString  + a0Value + "," + a1Value);
    }
  }
  checkSerialRead();
}

void checkSerialRead(){

    if (Serial.available()) {
    charRead = Serial.read();
    if(charRead != 'T'){
      inputString += charRead;
    } else {
      int convertedString = inputString.toInt();
      serverValueRemapped = map(convertedString, 0, 100, 0, 255);
      analogWrite(ledPin, serverValueRemapped);
      inputString = "";
    }

  }

}

int CheckValue(int aValue, int aLastValue, String aString){
  if(aValue != aLastValue){
    Serial.println(aString + aValue);
    aLastValue = aValue;
  }
  return aLastValue;
}

您必须停止服务器才能将代码上传到 Arduino。验证代码，然后上传到 Arduino。重新启动服务器并刷新浏览器。现在灯光的亮度应该反映百分比。

代码解释

添加了一个名为 void checkSerialRead()的新函数，该函数在循环中被调用，并检查是否有来自服务器的新串行数据。它使用第五章中使用的 Serial.available 和 Serial.read()函数，解析新数据并计算出 LED 的值。表 6-8 更详细地解释了更新后的 chapter_06.ino 文件中的代码。

表 6-8

updated chapter_06.ino explained

| `int serverValueRemapped = 0;` | 添加了一个新变量，它将保存来自服务器的重新映射值。 | | `char charRead;` `String inputString ="";` | 有两个变量用于解析来自服务器的数据。 | | `checkSerialRead();` | 在每个循环中都调用 checkSerialRead()函数。 | | `void checkSerialRead(){}` | checkSerialRead()函数无效，因为它不返回值。 | | `int convertedString = inputString.toInt();` | 数据字符串被转换为整数。 | | `serverValueRemapped = map(convertedString, 0, 100, 0, 255);` | 使用 map()函数将前端的值转换为可用于点亮 LED 的值。 | | `analogWrite(ledPin, serverValueRemapped);` | 新值用于向 LED 发送一个值。 |

摘要

在本章中，您已经使用模拟和数字数据以及 Arduino 创建了一个系统，以了解人们对某项活动的喜爱程度。数据必须被映射和解析，这样它才能与前端一起工作。你也开始用数据提问，并把答案可视化。下一章更进一步，开始使用这些数据来回答更多的问题，并使用 JavaScript 库 D3.js 将它们可视化。

七、可视化数据

能够可视化数据使其更容易理解。它允许您看到原本可能隐藏的模式，并讲述有关您的数据的故事。您可以用纯 JavaScript 创建数据可视化，但是有许多 JavaScript 库可以使这变得更容易。您将在本书中使用的库是 D3.js。在本章中，您将使用 D3.js 创建一个条形图，其数据收集方式与第六章相同。在本章的最后，您将看到一个条形图，其中包含来自一个电位计的数据。

D3.js 简介

D3 代表数据驱动文档；这是一个数据可视化 JavaScript 库。它允许您将数据绑定到文档对象模型(DOM ),以便用 DOM 元素在网页上显示可视化效果。这些可以是任何 DOM 元素:例如，text 或 div。在本书的例子中，SVG DOM 元素将用于显示数据。

D3.js 有许多函数可以构建不同类型的数据可视化。这些包括条形图，折线图，choropleth 图，气泡图，等等。它通过数学运算将数据转化为可视化数据。

它允许您使用许多不同的数据文件类型，包括 JSON、GeoJSON 和 CSV。

您可以使用其他库在 JavaScript 中创建数据可视化；我在附录 b 中列出了其中的一些。

D3.js 如何工作

使用 D3.js，首先选择一个 HTML 元素来保存整个可视化，然后决定要使用哪种类型的 DOM 元素来保存每个数据:例如，text、div 或 SVG。接下来，将数据绑定到这些元素，然后添加显示数据的 SVG 或 DOM 元素。然后，您可以对形状进行定位、缩放和着色。

D3.js 会帮你计算。如果你有一个 2、5 和 9 的数据集，你想做三个条形图，你知道这是你最小的数字，9 是最大的。你可以创建一个从 0 到 9 的图表。但是如果数据被更新，从-4 变成 22，或者引入第四个数字，会发生什么呢？轴线会是错的。当处理实时数据时，你需要一个可以随数据伸缩的轴，D3.js 有这样的功能。

数据值是输入域，经过缩放后成为输出范围。输入域的最低和最高输入数字被映射到输出范围的最低和最高数字。图 7-1 显示输入域，0 到 55 的输入数据，0 到 500 的输出范围。

图 7-1

The input domain and output range

D3.js 对数据使用一般的更新模式:进入、更新和退出。Enter 用于新数据，它添加一个 DOM 元素，当数据改变时更新，不添加或删除任何 DOM 元素，当 DOM 元素数量减少时退出。当数据更新时，如果 DOM 元素的数量需要增加，或者如果 DOM 元素的数量需要减少，使用这种模式允许 DOM 元素的动画转换。该模式的功能如图 7-2 所示。

图 7-2

The functions for the general update pattern

如果存在没有 DOM 元素的数据，则使用函数 enter()。当有一个不再有数据的 DOM 元素时，使用 exit()。当 DOM 元素的数量与数据的数量相同，但数据发生了变化时，使用 update()函数。图 7-3 显示了这些功能是如何工作的。

图 7-3

How elements are added, updated, and removed from the DOM with D3.js Try D3.JS

理解 D3.js 最好的方法就是开始使用它。在将 D3.js 与 Arduino 数据一起使用之前，最好先通过构建一个条形图来了解一下基础知识。清单 7-1 中的代码将使用一些随机数据制作一个条形图。该数据将定义条的高度、轴的标签和轴的刻度。id 为“viz”的 div 将包含可视化效果。打开文本编辑器，复制清单 7-1 中的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3.js</title>
    <script type="text/javascript" src="https://d3js.org/d3.v4.js"></script>

    <style type="text/css">
        body{
            font-family: arial;
        }
        h1{
            font-size: 22px;

           margin: 0px;
        }
        h2{
            font-size: 16px;
            margin: 0px;
            margin-top: 2px;
        }
        .axis text {
            font-family: arial;
            font-size: 12px;
            font-weight: normal;
            color: pink;
        }
        .axis path,
        .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }
        .bar {
            fill: #fd8f00;
       }
       h1, h2, p{
          margin-left: 40px;
      }
      p{
         font-size: 12px;
      }
  </style>
</head>
<body>
  <h1>A D3 bar chart</h1>
  <div id = "viz"></div>

  <script type="text/javascript">
      var margin = {top: 20, right: 20, bottom: 40, left: 40};
      var width = 480 - margin.left - margin.right;
      var height = 500 - margin.top - margin.bottom;

      var data = [
        {"amount": 5, "name": "column1"},

        {"amount": 11, "name": "column2"},
        {"amount": 55, "name": "column3"},
        {"amount": 23, "name": "column4"}
      ]

        var x = d3.scaleBand()
        .domain(data.map(function(d) { return d.name; }))
        .range([0, width], .1)
        .padding(0.1);

        var y = d3.scaleLinear()

        .domain([0, d3.max(data, function(d) { return +d.amount; })])
        .range([height, 0]);

        var dataviz = d3.select("#viz").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        dataviz.selectAll(".bar")
          .data(data)
        .enter()
          .append("rect")
          .attr("class", "bar")
          .attr("x", function(d) { return x(d.name); })
          .attr("width", x.bandwidth())
          .attr("y", function(d) { return y(+d.amount); })
          .attr("height", function(d) { return height - y(+d.amount); });

          dataviz.append("g")

          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x));
          dataviz.append("g")
          .call(d3.axisLeft(y));
     </script>
</body>
</html>

Listing 7-1bar_chart.html

打开浏览器，打开 bar_chart.html 文件；您将看到数据可视化。

代码解释

表 7-1

bar_chart.html explained

| `

方法链接

您可能已经注意到，在 D3.js 中，有一些函数是用“.”一个接一个地调用的他们之间。这被称为方法链接，在 JavaScript 和 JavaScript 库中使用。代码“dataviz . append(“g”)。attr("transform "，" translate(0，"+ height +")。call(D3 . axis bottom(x))；"是一个接一个调用的三个函数，append()、attr()和 call()。它使代码更容易阅读，并创建自然组合在一起的函数调用块。

用 D3.js 可视化来自 Arduino 的数据

本章将使用与第六章相同的 Arduino 设置和相同的基础 JavaScript 代码。JavaScript 将被更新以包含新的可视化。图 7-4 显示了这一章的最终结果，一个条形图显示了第一个问题“在今晚的活动中，你和新认识的人说话了吗？”

图 7-4

The web application with a bar chart Set Up the Arduino

Arduino 的设置与第六章中的设置完全相同。Arduino 的设置如图 6-3 所示。一旦组件连接完毕，用清单 6-1 中的代码刷新 Arduino。您想要使用原始代码，而不是在第六章中添加的更新。

Set Up the Node.js Server

该代码也将基于第六章中的原始代码。应用程序的目录结构将是:

/chapter_07
    /node_modules
    /public
        /css
            main.css
        /javascipt
            main.js
    /views
        index.ejs
    index.js

创建 skeleton Node.js 应用程序与前几章相同:

创建一个新文件夹来存放应用程序。我把我的叫做 chapter_07。
打开命令提示符(Windows 操作系统)或终端窗口(Mac)并导航到新创建的文件夹。
在正确的目录中，键入 npm init 创建一个新的应用程序；您可以按下 return 键浏览每个问题，或者对它们进行更改。
您现在可以开始添加必要的库；要在命令行下载 Express.js，请键入 npm install express@4.15.3 - save。
然后安装 ejs，键入 npm install ejs@2.5.6 save。
下载完成后，安装串口。在 Mac 上键入 NPM install serial port @ 4 . 0 . 7–save，在 Windows PC 上键入 NPM install serial port @ 4 . 0 . 7-build-from-source。
然后最后安装 socket.io，输入 npm install socket.io@1.7.3 - save。

在 index.js 中，文件复制清单 6-2 中的代码。你想使用代码的原始清单，而不是在第六章中更新的版本。将清单 6-3 中的代码复制到 index.ejs 文件，然后将清单 6-4 中的 CSS 复制到 main.css 文件，最后将清单 6-5 中的代码复制到 main.js 文件。

确保在新的 serial port()函数中将更新为您自己的串口。

现在，您应该已经在 chapter_7 应用程序中复制了上一章的基本设置。您可以通过在控制台窗口中导航到 chapter_07 应用程序并使用 nodemon index.js 或 node index.js 启动该应用程序来测试您是否拥有它。只要连接了 Arduino，您就应该能够与电位计和按钮进行交互，并在打开浏览器并转到 http://localhost:3000 时看到结果。

Update the Application

现在您可以升级 main.js 了。打开文件，添加清单 7-2 中粗体显示的代码。

(function(){
    var socket = io();

    var accumulatorArrayA0 = [0,0,0,0,0,0,0,0,0,0,0];
        var accumulatorArrayA1 = [0,0,0,0,0,0,0,0,0,0,0];

    var margin = {top: 20, right: 20, bottom: 40, left: 40};
    var width = 480 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;

    var x = d3.scaleBand()
    .range([0, width], .1)
    .padding(0.1);

    var y = d3.scaleLinear()
    .range([height, 0]);

    var bars = d3.select("#bar-chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    bars.selectAll(".bar")
      .data(accumulatorArrayA0)
    .enter()
      .append("rect")
      .attr("class", "bar")
      .attr("x", function(d, i) { return x(i); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) {return y(d); })
      .attr("height", function(d) {  return height - y(+d); });

      bars.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    bars.append("g")
      .attr("class", "y axis")
      .call(d3.axisLeft(y)
        .ticks(0));

      bars.append("text")            
      .attr("transform",
            "translate(" + (width/2) + " ," +
                           (height + margin.top + 20) + ")")
      .style("text-anchor", "middle")
      .text("score");

    bars.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("frequency");  

    socket.on("bar-data", function(data){

        var current = data.dataKey;
        var svgBar = document.getElementById(current);

        var newWidth = data.dataString * 40;

        svgBar.setAttribute("width", newWidth);

        currentInputValue(data);
        addRemoveClass("add");
    });

    socket.on("button-data", function(data){
        accumulatorArrayA0[data[0]] = accumulatorArrayA0[data[0]] + 1;
        accumulatorArrayA1[data[1]] = accumulatorArrayA1[data[1]] + 1;

        updateBar(accumulatorArrayA0);
        addRemoveClass("remove");
    });

    function updateBar(data){

        x.domain(d3.range(data.length));
        y.domain([0, d3.max(data)]);

        var rect = bars.selectAll(".bar")
            .data(data);

        rect.enter().append("rect");

          rect.attr("class", "bar")
          .transition()
          .duration(1000)
          .attr("x", function(d, i) { return x(i); })
          .attr("width", x.bandwidth())
          .attr("y", function(d) {return y(d); })
          .attr("height", function(d) {  return height - y(+d); });

      bars.select(".x.axis")
                .transition()
                .duration(1000)
            .call(d3.axisBottom(x));

            bars.select(".y.axis")
                .transition()
                .duration(1000)

            .call(d3.axisLeft(y)
        .ticks(d3.max(data))
        .tickFormat(d3.format("d")));

    }

    function addRemoveClass(action){
        var buttonResponse = document.getElementById("bar-A0").getElementsByClassName("text-block-response")[0];

        buttonResponse.classListaction;

        buttonResponse = document.getElementById("bar-A1").getElementsByClassName("text-block-response")[0];

        buttonResponse.classListaction;
    }

    function currentInputValue(data){
        var targetP = document.getElementById("bar-" + data.dataKey).getElementsByClassName("text-block")[0].getElementsByTagName("p")[0];

        targetP.innerHTML = data.dataString;

    }
})();

Listing 7-2main.js

代码解释

应用程序中使用的 D3.js 类似于清单 7-1 中的例子，但是有一些新的功能。表 7-2 详细介绍了 main.js 中的代码

表 7-2

main.js explained

| `.ticks(0));` | 这个函数在 y 轴上创建刻度，因为在创建图形时没有任何数据，并且它被设置为 0；这个会在有数据的时候更新。 | | `bars.append("text")` `.attr("transform",` `"translate(" + (width/2) + " ," +` `(height + margin.top + 20) + ")")` `.style("text-anchor", "middle")` | 这些函数为 x 轴添加并对齐标签，对于 y 轴也有一组类似的函数。 | | `updateBar(data);` | 当按下按钮时，需要用新数据更新条形图。更新的代码在一个名为 updateBar()的函数中，传递给它的是数据数组。 | | `x.domain(d3.range(data.length));` `y.domain([0, d3.max(data)]);` | 以前，x 和 y 的定义域和值域是同时声明的。现在，随着新数据添加到阵列中，域将不断变化。这意味着 x 和 y 的定义域也需要改变。在这种情况下，x 的数据长度不会改变，但数组中的最大值会改变。这用于改变条形的高度，因此 y.domain 从 0 到数组中的最大值。这使用了 d3.max()函数，它可以将一个数组作为它的数据，并计算出数组中的最大值。 | | `.transition()` `.duration(1000)` | 这些函数使条形的新值从旧值变为动画，持续时间以毫秒为单位。 | | `.ticks(d3.max(data))` | 您需要 y 轴上的刻度，但是最大数量需要随着数组中最大数量的增加而改变。使用 d3.max()函数意味着刻度将始终与数组中的最大数量相同。 | | `.tickFormat(d3.format("d")));` | 有许多方法可以格式化您的分笔成交点；使用“d”使它们成为整数。 |

您需要将可视化的创建与更新分开。如果不这样做，每次添加新数据时，都会创建新的 SVG。通过分离创建和更新，您可以用新数据更新同一个 SVG。

Update the Front End

更新前端不需要做太多。打开 index.ejs 文件，添加清单 7-3 中的粗体代码。这是第六章的代码，有小的更新，所以我没有完整地写旧代码。

<!DOCTYPE html>
<html>
<head>
    ...
    <link href="/css/main.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="https://d3js.org/d3.v4.js"></script>

</head>
<body>
    <header>
        <h1>EVENT METRICS</h1>
        <h2>getting information through an Arduino</h2>

    </header>
    <div id="content">
        <h2>AT TONIGHTS EVENT DID YOU ...</H2>
        <p>Answer the questions by turning the knobs, to submit your answer press the button.</p>

...
            <div class="text-block-response hidden">
                <h3>Thanks<h3>
                <p></p>
            </div>
        </div>

        <div id="bar-chart">
            <h2>Talk to someone new?</h2>
            <p>did people meet new people tonight?</p>

        </div>

    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="javascript/main.js"></script>

</body>
</html>

Listing 7-3Index.ejs

更新将包括 D3.js 库，并添加一个 div 来保存可视化。

Update the CSS

打开 main.css 文件；您应该已经从第六章复制了 CSS，所以只需要添加以下代码:

.bar {
  fill: #6BCAE2;
}

这为图表中的条形添加了颜色。

在您的浏览器上，如果您刷新页面，您应该能够看到条形上的颜色。

整理代码

您可能已经注意到，添加 D3.js 代码已经创建了许多全局变量。出于多种原因，使用全局变量并不是一个好主意，这些原因包括:

它们位于全局名称空间中。很容易忘记你称之为变量的东西，并创建多个同名的变量。这会给你带来意想不到的结果。任何函数也可以使用该变量。
如果您引入其他库，它们可能与您的全局变量同名。
很难看出什么变量属于什么函数。

创建可视化效果的代码与页面其余部分使用的代码非常不同，因此它很适合在单独的 JavaScript 文件中拥有自己的空间。您确实需要将数据从 main.js 传递到可视化，这可以通过多种方式完成。在这一章中，你将使用揭示模块模式来做这件事。

显示模块模式

JavaScript 中有许多编程模式。启示模块模式就是其中之一。它使用一个变量来保存一个立即调用的函数表达式。函数在加载时被调用。在这个函数中，您可以创建变量和函数，它们被封装在 main 函数中。您可以允许在模块外部访问这些函数和变量。在函数结束时返回它们可以做到这一点。任何未返回的函数或变量都不能在模块外部调用。

分离数据可视化

在 chapter_07 应用程序中，在 public/javascript 文件夹中创建一个名为 BarChart.js 的新文件。这意味着 chapter_07 应用程序的目录结构如下所示:

/chapter_07
    /node_modules
    /public
        /css
            main.css
        /javascipt
            main.js
            BarChart.js
    /views
        index.ejs
    index.js

Use the Revealing Module Pattern

打开 BarChart.js 并复制清单 7-4 中的代码。

var BarChart = (function(){

    var margin = {top: 20, right: 20, bottom: 40, left: 40};
    var width = 480 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    var x;
    var y;
    var bars;

    function setup(data){
        x = d3.scaleBand()
        .range([0, width], .1)
        .padding(0.1);

        y = d3.scaleLinear()
        .range([height, 0]);

        bars = d3.select("#bar-chart").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)

          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        bars.selectAll(".bar")
          .data(data)
        .enter()
          .append("rect")
          .attr("class", "bar")
          .attr("x", function(d, i) { return x(i); })
          .attr("width", x.bandwidth())
          .attr("y", function(d) {return y(d); })
          .attr("height", function(d) {  return height - y(+d); });

          bars.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(d3.axisBottom(x));
          bars.append("g")
          .attr("class", "y axis")
          .call(d3.axisLeft(y)
            .ticks(0));

          bars.append("text")          
          .attr("transform",
                "translate(" + (width/2) + " ," +
                               (height + margin.top + 20) + ")")
          .style("text-anchor", "middle")
          .text("score");

        bars.append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 0 - margin.left)
          .attr("x",0 - (height / 2))
          .attr("dy", "1em")
          .style("text-anchor", "middle")
          .text("freqency");  
    }

function updateBar(data){
        x.domain(d3.range(data.length));
        y.domain([0, d3.max(data)]);

        var test = d3.max(data);

        var rect = bars.selectAll(".bar")
            .data(data);

        rect.enter().append("rect");

          rect.attr("class", "bar")
          .transition()
          .duration(1000)
          .attr("x", function(d, i) { return x(i); })
          .attr("width", x.bandwidth())
          .attr("y", function(d) {return y(d); })
          .attr("height", function(d) {  return height - y(+d); });

        bars.select(".x.axis")
            .transition()
            .duration(1000)
            .call(d3.axisBottom(x));

        bars.select(".y.axis")

            .transition()
            .duration(1000)
            .call(d3.axisLeft(y)
                .ticks(test)
                .tickFormat(d3.format("d")));
    }

    return{
        setup: setup,
        updateBar: updateBar
    }
})();

Listing 7-4BarChart.js

代码解释

应用程序中使用的 D3.js 类似于清单 7-1 中的例子，但是有一些新的功能。表 7-3 解释了 BarChart.js 中的代码

表 7-3

BarChart.js explained

| `var BarChart = (function(){` `})();` | 创建一个匿名函数来保存用于创建可视化的变量和函数。它保存在一个名为条形图的变量中。它在加载时调用自己。 | | `var margin = {top: 20, right: 20, bottom: 40, left: 40};` `var width = 480 - margin.left - margin.right;` `var height = 500 - margin.top - margin.bottom;` `var x;` `var y;` | BarChart 内有不同函数会用到的变量，所以在 BarChart.js 内全局添加，只能在变量 BarChart 内保存的函数范围内看到。 | | `function setup(data){}` | setup 函数包含 main.js 中全局可视化的所有设置代码，并将其放在自己的函数中。 | | `function updateBar(data){}` | updateBar()函数具有 updateBar()函数中 main.js 中可视化的所有更新代码。 | | `return{``setup: setup,``updateBar: updateBar` | 您决定哪些函数和变量可以在函数外部看到。为此，您需要返回函数。“:”之前的名称是其他函数调用该函数的方式，“:”之后的名称是当前函数中的命名函数。您可以返回多个函数和变量，它们之间用“，”分隔。 |

Update Main.js

main.js 文件必须更新；首先，需要删除与可视化连接的所有代码，然后需要添加对 setup()和 updateBar()函数的调用。从清单 7-2 中打开 main.js，并用清单 7-5 中的代码更新它。

(function(){
    var socket = io();

    var accumulatorArrayA0 = [0,0,0,0,0,0,0,0,0,0,0];
    var accumulatorArrayA1 = [0,0,0,0,0,0,0,0,0,0,0];

    BarChart.setup(accumulatorArrayA0);

    socket.on("bar-data", function(data){
        var current = data.dataKey;
        var svgBar = document.getElementById(current);

        var newWidth = data.dataString * 40;

        svgBar.setAttribute("width", newWidth);

        currentInputValue(data);
        addRemoveClass("add");
    });

    socket.on("button-data", function(data){

        accumulatorArrayA0[data[0]] = accumulatorArrayA0[data[0]] + 1;
        accumulatorArrayA1[data[1]] = accumulatorArrayA1[data[1]] + 1;

        addRemoveClass("remove");

        BarChart.updateBar(accumulatorArrayA0);
    });

    function addRemoveClass(action){
        var buttonResponse = document.getElementById("bar-A0").getElementsByClassName("text-block-response")[0];

        buttonResponse.classListaction;

        buttonResponse = document.getElementById("bar-A1").getElementsByClassName("text-block-response")[0];

        buttonResponse.classListaction;
    }

    function currentInputValue(data){
        var targetP = document.getElementById("bar-" + data.dataKey).getElementsByClassName("text-block")[0].getElementsByTagName("p")[0];

        targetP.innerHTML = data.dataString;
    }
})();

Listing 7-5Updated main.js code

您会注意到，在创建可视化代码的地方，有两个对新函数的调用。调用该函数的格式如图 7-5 所示。

图 7-5

Calling a function within a revealing module pattern Update Index.ejs

最后，需要更新 index.ejs 文件以包含新的 JavaScript 文件。由于 main.js 使用的是 BarChart.js，所以需要在 main.js 之前调用 BarChart.js，打开清单 7-3 中的 index.ejs，加入清单 7-6 中粗体显示的代码。

<!DOCTYPE html>
<html>
...
        <div id="bar-chart">
            <h2>Talk to someone new?</h2>
            <p>did people meet new people tonigt?</p>

        </div>

    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="javascript/BarChart.js"></script>
    <script src="javascript/main.js"></script>

</body>
</html>

Listing 7-6Adding BarChart.js to index.ejs

如果您正在运行 localhost，请刷新浏览器或重新启动服务器。该页面应该以完全相同的方式工作，但现在代码更加模块化，这使得它更安全、更易于阅读。

您可以添加第二个条形图来显示第二个电位计的数据。

摘要

在本章中，你开始使用 D3.js 来可视化来自 Arduino 的数据。您还尝试了一些新的 JavaScript 概念，现在应该对 JavaScript 的结构有了更好的理解。在下一章中，您将创建一个仪表板，并使用 D3.js 创建圆环图。