描述

這是我整理的一個(gè)教程，旨在盡可能多地解釋使用 Arduino 和一些網(wǎng)絡(luò)技術(shù)制作一個(gè)簡(jiǎn)單的實(shí)時(shí)氣象站的過(guò)程。在這個(gè)項(xiàng)目中，我將嘗試從 DHT11 溫度、濕度傳感器獲取傳感器數(shù)據(jù)，并將其顯示在一個(gè)漂亮的 Web 用戶界面中。

對(duì)于系統(tǒng)的后端，我將使用一個(gè)名為 Express 的 Javascript Web 框架。從 Arduino 讀取的傳感器將通過(guò)串行通信發(fā)送，在 javascript 的幫助下，我將讀取這些串行通信并使用 socket.io 操作數(shù)據(jù)以發(fā)送到前端。另外，我還集成了MoosunMv API以顯示一些額外的天氣信息。MoosunMv API 是建立在馬爾代夫氣象站之上的開(kāi)放 API。

注意：所有天氣信息都來(lái)自我自己的服務(wù)器。它不會(huì)使氣象服務(wù)器超載。我們的服務(wù)器每 12 小時(shí)從馬爾代夫氣象站獲取天氣信息并將其存儲(chǔ)在我們的數(shù)據(jù)庫(kù)中：)

使用的網(wǎng)絡(luò)技術(shù)

• 表達(dá)
• 套接字.io
• Vuejs
• 愛(ài)訊

?

?

要求：

• 阿杜諾
• DHT11 傳感器
• 面包板
• 3 跨接電纜
• USB 電纜類型 A/B 標(biāo)準(zhǔn) USB 2.0 電纜

- 硬件接線：

將硬件組件連接到 arduino。接線圖如下圖所示：

?

?

注意：我使用的傳感器有一個(gè)內(nèi)置電阻器，因此我的傳感器中會(huì)缺少一個(gè)引腳。

- 使用 Arduino IDE 編寫 Arduino 代碼：

#include "DHT.h"
//Sensor digital pin
#define DHTPIN 8
//Setting the sensor type
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
void setup() {
//Starting the serial communication
Serial.begin(9600);
dht.begin();
}
void loop() {
//delay for 2 second before reading again
delay(2000);
//setting humidity
float humidity = dht.readHumidity();
//setting temperature
float temperature = dht.readTemperature();
Serial.print(temperature);
//Output for splitting the string into two array during serial read.
Serial.print(",");
Serial.println(humidity);
}

我用來(lái)從傳感器讀取數(shù)據(jù)的 Arduino 庫(kù)是 adafruit 的 DHT-sensor-library。DHT 庫(kù)。

- 讀取串行數(shù)據(jù)并發(fā)送到前端：

通過(guò)串口發(fā)送傳感器數(shù)據(jù)后。我正在使用一個(gè)名為Serial Port的 javascript 庫(kù)來(lái)讀取 Arduino 發(fā)送的串行數(shù)據(jù)并將數(shù)據(jù)字符串拆分為兩個(gè)變量。數(shù)據(jù)從逗號(hào)開(kāi)始的地方拆分。

將日期發(fā)送到前端是這樣完成的：

var today = new Date();
var date = today.getDate() + "-" + (today.getMonth() + 1) + "-" + today.getFullYear();
weekday = [
"Sunday", "Monday", "Tuesday", "Wednesday", "Thurday", "Friday", "Saturday"
];
var day = weekday[today.getDay()];
var secondDay = weekday[today.getDay() + 1];
var thirdDay = weekday[today.getDay() + 2];
var fourthDay = weekday[today.getDay() + 3];

到目前為止，我所做的是使用 WebSocket 連接獲取我需要發(fā)送到前端的所有信息。現(xiàn)在我將使用一個(gè)名為socket.io的 javascript 庫(kù)將數(shù)據(jù)從后端實(shí)時(shí)發(fā)送到前端。

這部分的代碼如下所示：

io.sockets.emit('data', {
humidity: humidity,
temperature: temperature,
date: date,
day: day,
secondDay: secondDay,
thirdDay: thirdDay,
fourthDay: fourthDay
});

現(xiàn)在，這幾乎就是后端需要做的所有事情。不是世界上最復(fù)雜的事情。第二天發(fā)送到前端僅用于演示。它上面的溫度數(shù)據(jù)是完全靜態(tài)的。繼續(xù)?。?.

讓我們回憶一下。我正在將傳感器數(shù)據(jù)從 Arduino 發(fā)送到串行端口。在我的情況下，它的 COM5。Javascript Serial Port 庫(kù)比從串口讀取串行數(shù)據(jù)并根據(jù)設(shè)置拆分鍵的位置拆分?jǐn)?shù)據(jù)。在這種情況下，我使用逗號(hào)將字符串分隔為兩個(gè)變量。我還設(shè)置了一些有關(guān)要發(fā)送到前端的數(shù)據(jù)的日期和信息。最后，我使用 socket.io 通過(guò) WebSocket 發(fā)送數(shù)據(jù)。在前端，socket.io 將監(jiān)聽(tīng)數(shù)據(jù)來(lái)自的端口，我使用 VUEJS 綁定 socket.io 接收的數(shù)據(jù)以在 HTML 中顯示它們。

- 將一切連接在一起：

前端javascript代碼如下所示：

feather.replace()
var socket = io.connect('http://127.0.0.1:4000/');
var temperature = new Vue({
el: '#app',
data: {
ApiUrl: 'http://moosunmv.jinas.me/v1/latest',
temperature: '',
humidity: '',
date: '',
day: '',
wind: '',
secondDay: '',
thirdDay: '',
fourthDay: ''
},
methods: {
getWeather(){
var vm = this;
axios.get(this.ApiUrl)
.then(function (response) {
vm.wind = response.data.wind;
console.log(vm.wind);
})
}
},
mounted: function () {
socket.on('data', function (data) {
this.temperature = data.temperature;
console.log(this.temperature);
this.humidity = data.humidity;
console.log(this.humidity);
this.date = data.date;
this.day = data.day;
this.secondDay = data.secondDay;
this.thirdDay = data.thirdDay;
this.fourthDay = data.fourthDay;
}.bind(this));
this.getWeather();
}
});

然后將 VUEJS 設(shè)置的數(shù)據(jù)綁定到 HTML 文件中。我正在使用一個(gè)名為axios的 JavaScript 庫(kù)從 MoosunMv API 獲取天氣信息。

它是這樣完成的：

<div class="info-side">
<div class="today-info-container">
<div class="today-info">
<div class="precipitation"> class="title">PRECIPITATION</span>0 %span>
<div class="clear"></div>
div>
<div class="humidity"> class="title">HUMIDITY</span>{{humidity}} %span>
<div class="clear"></div>
div>
<div class="wind"> class="title">WIND</span>{{wind}}span>
<div class="clear"></div>
div>
</div>
div>

注：本項(xiàng)目中使用的 Html、Css 模板取自 codepen。向科林·埃斯皮納斯大喊。

這個(gè)項(xiàng)目就差不多了。您可以在下面找到該項(xiàng)目的所有代碼：

• Arduino代碼
• 前端和后端