关注我们

JavaScript 从仪表板构建网络监控设备详解

在这一章中，我们将讨论这本书的一个非常重要的部分，创建一个可以从仪表板控制不同类型设备的网页。在自动化家庭中，有不同种类的设备可以被控制，例如:灯、门或窗、洗衣机等等。

在本章中，我们将涵盖以下主题:

在本节中，您将学习如何配置 MySQL 服务器，以便创建一个数据库并集成仪表板中的所有内容，从而在数据库中记录数据。

安装 MySQL

我们的树莓 Pi Zero 被配置成一个网络服务器。在本节中，我们将使用以下命令安装 MySQL 数据库服务器，这样我们就可以从客户端接收连接，显示存储在数据库中的数据，并在 SQL 中使用查询:

sudo apt-get install mysql-server

Installing MySQL

在此过程中，它会向您询问root用户的密码:

Installing MySQL

安装完成后，连接到 MySQL 并键入以下命令:

mysql -u root -p

Installing MySQL

键入以下命令:

show databases;

Installing MySQL

在这里，我们可以看到现在安装在服务器上的系统数据库:

Installing MySQL

安装 PHP 的 MySQL 驱动程序

重要的是安装我们的驱动程序来与 MySQL 数据库服务器通信 PHP5，为此我们需要 MySQL 驱动程序来访问 MySQL 数据库，执行此命令来安装PHP-MySQL驱动程序。

sudo apt-get install php5 php5-mysql

测试 PHP 和 MySQL

在本节中，我们将创建一个简单的页面，使用以下命令测试 PHP 和 MySQL:

sudo nano /var/www/html/hellodb.php

Testing PHP and MySQL

下面的截图包含一个脚本，该脚本包含访问数据库、连接到服务器并从中获取数据的代码:

Testing PHP and MySQL

要测试 PHP 和 MySQL 之间的页面和连接，请键入您的树莓 Pi 的 IP 地址:http://192.168.1.105/hellodb.php。该页面应该类似于下面的截图:

Testing PHP and MySQL

在本节中，我们将讨论如何配置您的 PhpMyAdmin，以便从远程面板管理您的数据库。我们在 Apache 服务器中安装客户端和模块 PHP5 非常重要，因此键入以下命令:

sudo apt-get install mysql-client php5-mysql

接下来我们将使用以下命令安装phpmyadmin包:

sudo apt install phpmyadmin

在下面的截图中，我们可以看到服务器的配置；在这种情况下，我们需要选择 apache2 :

Installing PhpMyAdmin for administrating databases

我们选择 apache2 服务器:

Installing PhpMyAdmin for administrating databases

之后，我们可以选择数据库:

Installing PhpMyAdmin for administrating databases

我们选择选项<否>T1:

Installing PhpMyAdmin for administrating databases

配置阿帕奇服务器

我们有必要对文件apache2.conf进行配置。首先去码头:

sudo nano /etc/apache2/apache2.conf

在下面的屏幕中，我们需要添加代码:

Include /etc/phpmyadmin/apche.conf

Configuring the Apache server

我们在文件的底部包含以下行:

Include /etc/phpmyadmin/apche.conf

Configuring the Apache server

我们终于完成了 Apache 服务器的安装，现在我们已经为下一步做好了准备。

进入 phpMyAdmin 远程面板

在我们配置好服务器之后，我们将进入 phpMyAdmin 远程面板，我们需要打开我们最喜欢的网络浏览器，并键入我们的树莓 Pi 的 IP 地址:http://(Raspberry Pi Address)/phpmyadmin，它将显示以下屏幕:

Entering to the phpMyAdmin remote panel

显示 Arduinobd 数据库

下面的屏幕截图显示了在服务器中创建的数据库:

Showing the Arduinobd database

以下截图显示了表测量值，列， id ，温度和湿度:

Showing the Arduinobd database

从 Arduino 和以太网屏蔽向 web 服务器发送数据

我们使用一个 Arduino 和以太网屏蔽连接到网络，Arduino 发送数据到网络服务器发表在树莓 Pi Zero。

现在，您可以将代码复制到名为arduino_xaamp_mysql.ino的文件中，或者从本书的代码文件夹中获取完整的代码:

我们输入 Arduino UNO 的 Ip 地址:

IPAddress ip(192,168,1,50);

我们配置树莓派 Zero 的 IP 地址:

IPAddress server(192,168,1,108);

我们需要连接到网络服务器:

if (client.connect(server, 80))

这些行定义了来自远程服务器的 HTTP 请求:

client.println("GET /datalogger1.php?temp=" + temp + "&hum=" + hum + " HTTP/1.1"); 
      client.println("Host: 192.168.1.108"); 
      client.println("Connection: close"); 
      client.println();

代码的其余部分显示在下面几行中:

// Include libraries 
#include <SPI.h> 
#include <Ethernet.h> 
#include "DHT.h" 
// Enter a MAC address for your controller below. 
byte mac[] = { 0x90, 0xA2, 0xDA, 0x0E, 0xFE, 0x40 }; 
// DHT11 sensor pins 
#define DHTPIN 7  
#define DHTTYPE DHT11 
IPAddress ip(192,168,1,50); 
IPAddress server(192,168,1,108); 
EthernetClient client; 
DHT dht(DHTPIN, DHTTYPE); 
void setup() { 
  // Open serial communications 
  Serial.begin(9600); 
      Ethernet.begin(mac, ip); 
  Serial.print("IP address: "); 
  Serial.println(Ethernet.localIP()); 
  delay(1000); 
  Serial.println("Conectando..."); 

} 
void loop() 
{ 
  float h = dht.readHumidity(); 
  float t = dht.readTemperature(); 
  String temp = String((int) t); 
  String hum = String((int) h); 
    if (client.connect(server, 80)) { 
    if (client.connected()) { 
      Serial.println("conectado");

发出一个 HTTP 请求:

      client.println("GET /datalogger1.php?temp=" + temp + "&hum=" + hum + " HTTP/1.1"); 
      client.println("Host: 192.168.1.108"); 
      client.println("Connection: close"); 
      client.println(); 
    }  
    else { 
      // If you didn't get a connection to the server 
      Serial.println("fallo la conexion"); 
    }

Thes 线定义了客户端实例如何读取响应:

    while (client.connected()) { 
      while (client.available()) { 
      char c = client.read(); 
      Serial.print(c); 
      } 
    }

如果服务器断开连接，请停止客户端:

    if (!client.connected()) { 
      Serial.println(); 
      Serial.println("desconectado."); 
      client.stop(); 
    } 
  }

每秒重复一次:

  delay(5000); 
}

这里我们可以看到我们使用的硬件:

Sending data from Arduino and the Ethernet shield to the web server

在下一节中，我们将构建一个数据记录器，它将记录服务器中的数据温度和湿度，这样我们就可以随时获取数据并将其显示在网页上。

编写脚本软件

在下面的代码中，我们有一个将与 Arduino 板通信的脚本，它安装在服务器中。

现在，您可以将代码复制到名为datalogger1.php的文件中，或者直接从这个项目的文件夹中获取完整的代码:

<?php 
if (isset($_GET["temp"]) && isset($_GET["hum"])) { 
$temperature = intval($_GET["temp"]); 
$humidity = intval($_GET["hum"]); 
$con=mysql_connect("localhost","root","ruben","arduinobd"); 
mysql_select_db('arduinobd',$con); 
      if(mysql_query("INSERT INTO measurements (temperature, humidity) VALUES ('$temperature', '$humidity');")){ 
        echo "Data were saved"; 
      } 
      else { 
      echo "Fail the recorded data"; 
      } 
mysql_close($con); 
} 
?>

测试连接

在我们安装好脚本的文件后，我们需要在你的电脑上打开一个网页浏览器，输入你的Raspberry Pi/datalogger1.php?temp=70&hum=100的 IP 地址，链接会看起来像(http://192 . 168 . 1 . 108/datalogger 1 . PHP？temp=70 & hum=100) :

Testing the connection

以下屏幕截图显示了保存在数据库中的数据的结果:

Testing the connection

下面的截图显示了数据表:

Testing the connection

记录数据并进行一些查询以使数据显示在网页上是很重要的。

脚本软件

下面是我们用来显示页面中数据的脚本:

现在，您可以将代码复制到名为query1.php的文件中，或者直接从这个项目的文件夹中获取完整的代码:

<!DOCTYPE html> 
  <html> 
    <body> 
<h1>Clik on the buttons to get Data from  MySQL</h1> 
<form action="query1.php" method="get"> 
<input type="submit" value="Get all Data">  
</form> 
</br> 

<form action="query2.php" method="get"> 
<input type="submit"value="Humidity <= 15"> 
</form>  
</br> 

<form action="query3.php" method="get"> 
<input type="submit" value="Temperature <=25">  
</form> 
</br> 
<?php 

$con=mysql_connect("localhost","root","ruben","arduinobd"); 
mysql_select_db('arduinobd',$con); 
$result = mysql_query("SELECT * FROM measurements"); 
echo "<table border='1'> 
<tr> 
<th>Measurements</th> 
<th>Temperature (°C)</th> 
<th>Humidity (%)</th> 
</tr>"; 
while($row = mysql_fetch_array($result)) { 
  echo "<tr>"; 
  echo "<td>" . $row['id'] . "</td>"; 
  echo "<td>" . $row['temperature'] . "</td>"; 
  echo "<td>" . $row['humidity'] . "</td>"; 
  echo "</tr>"; 
} 
echo "</table>"; 
mysql_close($con); 
?> 
</body> 
</html>

在下面的截图中，我们有数据:

Software for the scripts

要显示的特定数据的脚本

在下面几行中，我们可以进行一些 SQL 查询，以获得特定值的信息，并从温度和湿度中获取值:

<?php 
$con=mysql_connect("localhost","root","ruben","arduinobd"); 
mysql_select_db('arduinobd',$con); 
$result = mysql_query("SELECT * FROM measurements where humidity <= 15 order by id"); 
echo "<table border='1'> 
<tr> 
<th>Measurements</th> 
<th>Temperature (°C)</th> 
<th>Humidity (%)</th> 
</tr>"; 
while($row = mysql_fetch_array($result)) { 
  echo "<tr>"; 
  echo "<td>" . $row['id'] . "</td>"; 
  echo "<td>" . $row['temperature'] . "</td>"; 
  echo "<td>" . $row['humidity'] . "</td>"; 
  echo "</tr>"; 
} 
echo "</table>"; 
mysql_close($con); 
?>

查询记录温度

在本节中，我们将创建一个查询来获取温度测量值。我们将服务器引用称为localhost，在这种情况下，它是树莓 Pi 零设备、用户和数据库的名称:

<?php 
$con=mysql_connect("localhost","root","ruben","arduinobd"); 
mysql_select_db('arduinobd',$con); 
$result = mysql_query("SELECT * FROM measurements where temperature <= 25 order by id"); 
echo "<table border='1'> 
<tr> 
<th>Measurements</th> 
<th>Temperature (°C)</th> 
<th>Humidity (%)</th> 
</tr>"; 
while($row = mysql_fetch_array($result)) { 
  echo "<tr>"; 
  echo "<td>" . $row['id'] . "</td>"; 
  echo "<td>" . $row['temperature'] . "</td>"; 
  echo "<td>" . $row['humidity'] . "</td>"; 
  echo "</tr>"; 
} 
echo "</table>"; 
mysql_close($con); 
?>

查询结果如下图所示:

Query for recording temperature

在本节中，我们将讨论一个可以应用于家庭自动化的项目。我们将调暗 DC 的一个发光二极管，这可以对房子里的一盏灯做到。LED 会改变亮度，我们将 LED 连接到树莓 Pi 的 GPIO18 上，串联一个 330 欧姆的电阻。

软件需求

首先我们需要安装pigpio包。在终端中，键入以下内容:

wget abyz.co.uk/rpi/pigpio/pigpio.zip

然后解压缩包:

unzip pigpio.zip

之后，使用以下命令导航到解压缩的文件夹:

cd PIGPIO

键入以下内容来执行命令:

Make

最后安装文件:

sudo make install

测试发光二极管

在本节中，我们将使用 Node.js 中的脚本测试传感器:

var Gpio = require('pigpio').Gpio; 

// Create led instance 
var led = new Gpio(18, {mode: Gpio.OUTPUT}); 
var dutyCycle = 0; 
// Go from 0 to maximum brightness 
setInterval(function () { 
  led.pwmWrite(dutyCycle); 
  dutyCycle += 5; 
  if (dutyCycle > 255) { 
    dutyCycle = 0; 
  } 
}, 20);

我们已经可以测试这个代码，使用 Pi 上的终端导航到这个项目的文件夹，并键入以下内容:

sudo npm install pigpio

这将安装所需的node.js模块来控制发光二极管。然后，键入以下内容:

sudo node led_test.js

这是最后的结果:

Testing the LED

从接口控制发光二极管

在本节中，我们将从网页上控制发光二极管。为此我们将使用 HTML 制作与用户的界面，使用node.js。

让我们看看包含在以下代码中的 Node.js 文件:

// Modules 
var Gpio = require('pigpio').Gpio; 
var express = require('express'); 
// Express app 
var app = express(); 

// Use public directory 
app.use(express.static('public')); 
// Create led instance 
var led = new Gpio(18, {mode: Gpio.OUTPUT}); 

// Routes 
app.get('/', function (req, res) { 

  res.sendfile(__dirname + '/public/interface.html'); 

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

  // Set LED 
  dutyCycle = req.query.dutyCycle; 
  led.pwmWrite(dutyCycle); 

  // Answer 
  answer = { 
    dutyCycle: dutyCycle 
  }; 
  res.json(answer); 

}); 

// Start server 
app.listen(3000, function () { 
  console.log('Raspberry Pi Zero LED control'); 
});

现在终于到了测试我们应用的时候了！首先，从这本书的存储库中获取所有代码，并像以前一样导航到项目的文件夹。然后，用以下命令安装express:

sudo npm install express

完成后，使用以下命令启动服务器:

sudo node led_control.js

现在可以测试项目了，在电脑中打开网页浏览器，输入链接- http://(Raspberry PI)/set?dutyCycle=20，我们可以看到 LED 随着数值变化。

然后用http://192.168.1.108:3000打开你的网页浏览器，你应该会在一个基本的网页中看到这个控件:

Controlling the LED from an interface

房子里有窗户或车库门是很常见的。我们需要自动化这些设备，这样我们就可以用 DC 马达来移动这些物体。在本节中，我们将了解如何将 DC 电机连接到树莓 Pi。为此，我们将使用 L293D 电路来控制电机。

首先，我们将看到如何将电机连接到我们的树莓皮零板。在下图中，我们可以看到 LD293 芯片的引脚:

Controlling the speed of a DC motor

我们基本上需要连接电路的组件，如下所示:

覆盆子皮的 GPIO14 对销 1A
覆盆子皮的 GPIO15 对销 2A
树莓皮的 GPIO18 对销 1 、 2EN
DC 电机至销 1Y 和 2Y
5V 树莓皮至 VCC1
树莓皮的 GND 到 GND
适配器调节器至 VCC2 和 GND

下图显示了结果:

Controlling the speed of a DC motor

我们现在将测试 DC 马达从 0 到最高速度的速度:

// Modules 
var Gpio = require('pigpio').Gpio; 
// Create motor instance 
var motorSpeed = new Gpio(18, {mode: Gpio.OUTPUT}); 
var motorDirectionOne = new Gpio(14, {mode: Gpio.OUTPUT}); 
var motorDirectionTwo = new Gpio(15, {mode: Gpio.OUTPUT}) 

// Init motor direction 
motorDirectionOne.digitalWrite(0); 
motorDirectionTwo.digitalWrite(1); 
var dutyCycle = 0; 

// Go from 0 to maximum brightness 
setInterval(function () { 
  motorSpeed.pwmWrite(dutyCycle); 
  dutyCycle += 5; 
  if (dutyCycle > 255) { 
    dutyCycle = 0; 
  } 
}, 20);

下面是这个应用的代码，它使用网页中的界面来控制 DC 电机:

// Modules 
var Gpio = require('pigpio').Gpio; 
var express = require('express'); 

// Express app 
var app = express(); 
// Use public directory 
app.use(express.static('public')); 

// Create led instance 
var motorSpeed = new Gpio(18, {mode: Gpio.OUTPUT}); 
var motorDirectionOne = new Gpio(14, {mode: Gpio.OUTPUT}); 
var motorDirectionTwo = new Gpio(15, {mode: Gpio.OUTPUT}); 

// Routes 
app.get('/', function (req, res) { 

  res.sendfile(__dirname + '/public/interface.html'); 

}); 

app.get('/set', function (req, res) { 
  // Set motor speed 
  speed = req.query.speed; 
  motorSpeed.pwmWrite(speed); 

  // Set motor direction 
  motorDirectionOne.digitalWrite(0); 
  motorDirectionTwo.digitalWrite(1); 

// Answer 
  answer = { 
    speed: speed 
  }; 
  res.json(answer); 

}); 

// Start server 
app.listen(3000, function () { 
  console.log('Raspberry Pi Zero Motor control started!'); 
});

我们在下面的代码中看到了用户界面:

$( document ).ready(function() { 

  $( "#motor-speed" ).mouseup(function() { 

    // Get value 
    var speed = $('#motor-speed').val(); 

    // Set new value 
    $.get('/set?speed=' + speed); 

  }); 

}); 

<!DOCTYPE html> 
<html> 

<head> 
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
  <script src="js/interface.js"></script> 
  <link rel="stylesheet" href="css/style.css"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 

<div id="container"> 

  <h3>Motor Control</h3> 

  <div class='row'> 

    <div class='col-md-4'></div> 
    <div class='col-md-4 text-center'> 
     <input id="motor-speed" type="range" value="0" min="0" max="255" step="1"> 
    </div> 
    <div class='col-md-4'></div> 

  </div> 

</div> 

</body> 
</html>

要测试这个应用，你需要用链接http://192.168.1.108:3000打开你电脑里的网页浏览器，然后你需要替换你的 Pi 的 IP 地址。这是我们的界面:

Controlling the speed of a DC motor

在接下来的几节中，你会发现如何深入到更多控制室内其他设备的项目中的想法。

电器

在家里，我们有电器，例如，灯、洗衣机、加热器和其他我们只需要打开或关闭的电器。在本节中，我们将学习如何使用电路接口信号来控制连接到树莓 Pi Zero 的灯。我们将使用一个光耦合器，如 MOC3011，和一个三端双向可控硅开关。下图显示了该应用的电路:

Electrical appliances

这里我们有最终项目连接到树莓 pi 零:

Electrical appliances

这里我们有用于控制设备的 JavaScript 代码:

// Modules 
var express = require('express'); 

// Express app 
var app = express(); 

// Pin 
var lampPin = 12; 

// Use public directory 
app.use(express.static('public')); 

// Routes 
app.get('/', function (req, res) { 

  res.sendfile(__dirname + '/public/interface.html'); 

}); 

app.get('/on', function (req, res) { 

  piREST.digitalWrite(lampPin, 1); 

  // Answer 
  answer = { 
    status: 1 
  }; 
  res.json(answer); 

}); 

app.get('/off', function (req, res) { 

  piREST.digitalWrite(lampPin, 0); 

  // Answer 
  answer = { 
    status: 0 
  }; 
  res.json(answer); 

}); 

// aREST 
var piREST = require('pi-arest')(app); 
piREST.set_id('34f5eQ'); 
piREST.set_name('my_rpi_zero'); 

// Start server 
app.listen(3000, function () { 
  console.log('Raspberry Pi Zero lamp control started!'); 
});

我们需要一个可以从网页上用 HTML 语言控制灯的界面:

<!DOCTYPE html> 
<html> 

<head> 
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
  <script src="js/script.js"></script> 
  <link rel="stylesheet" href="css/style.css"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 

<body> 

<div id="container"> 

  <h3>Lamp Control</h3> 

  <div class='row'> 

    <div class='col-md-4'></div> 
    <div class='col-md-2'> 
      <button id='on' class='btn btn-block btn-primary'>On</button> 
    </div> 
    <div class='col-md-2'> 
      <button id='off' class='btn btn-block btn-warning'>Off</button> 
    </div> 
    <div class='col-md-4'></div> 

  </div> 

</div> 

</body> 
</html>

进入网页浏览器后，我们会看到如下界面:

Electrical appliances

在本节中，我们将展示您可以考虑创建和控制的其他应用，然后在家中或不同的区域使用它们。

控制门锁

在本节中，我们将看到可以从接口控制并连接到树莓 pi 的其他设备。在家里，我们可以通过网络界面控制门锁:

Control a door lock

控制浇水

我们可以控制的另一个设备是给植物浇水的塑料水电磁阀- 12V，连接到树莓皮:

Control watering plants

通过这个项目，我们可以制作一个自动浇水系统，增加一个湿度传感器，并设定花园植物浇水的时间。

如果我们想从网络外部访问我们的树莓 Pi，我们需要执行以下操作:

检查我们的调制解调器是否有公共 IP 地址
调查我们将在浏览器中使用的地址
Type http://whatismyipaddress.com/ in our browser

互联网服务提供商提供的知识产权是经过一段时间后会发生变化的一般动态知识产权。在我们的情况下，我们需要静态地址，它不会偶尔改变。

如何访问我们的调制解调器进行配置

通过 Ip 地址(网关)访问我们的调制解调器，并转到端口寻址部分。配置指向我们的 web 服务器的端口 80 (放入我们账号的 IP 地址)，这个 IP 地址就是自动分配给我们系统的 DHCP 服务器的那个。

这里有一些端口可以从调制解调器路由器转发: