Метеостанция IoT Live на NodeMCU ESP8266: схема и программа

В данной статье мы рассмотрим создание метеостанции на основе модуля NodeMCU ESP8266-12E, датчика влажности и температуры DHT11, датчика барометрического давления BMP180 и датчика дождя FC37, с помощью которой можно будет измерять влажность, температуру, барометрическое давление и количество осадков и загружать эти данные на веб-сервер, что позволит производить мониторинг метеостанции из любой точки Земли с помощью технологий Интернет вещей, то есть будет реализована концепция мониторинга под названием IoT Live.

После загрузки кода вы можете найти IP-адрес NodeMCU в последовательном мониторе. С тем же IP-адресом вы можете зайти в любой веб-браузер и отобразить измеренные метеостанцией данные в красивом формате виджета. Проект очень интересен и может использоваться в удаленных районах или в морозильнике, в котором должны контролироваться параметры его внутреннего пространства.

Ранее на нашем сайте мы уже рассматривали аналогичные проекты метеостанций:

Необходимые компоненты

NodeMCU ESP8266 (купить на AliExpress).
Датчик барометрического давления BMP180 (купить на AliExpress).
Датчик температуры и влажности DHT11 (купить на AliExpress).
Датчик дождя FC-37 (купить на AliExpress).
Резистор 4,7 кОм (купить на AliExpress).
Макетная плата.
Соединительные провода.

Реклама: ООО "АЛИБАБА.КОМ (РУ)" ИНН: 7703380158

Датчик влажности и температуры DHT11

О DHT11

DHT11 — это базовый, сверхбюджетный цифровой датчик температуры и влажности. Он использует емкостный датчик влажности и термистор для измерения окружающего воздуха и выдает цифровой сигнал на контакт данных. Он довольно прост в использовании, но требует тщательного расчета времени для сбора данных. Цифровой сигнал с датчика довольно легко считывается с помощью любого микроконтроллера.

Особенности DHT11

Сверхнизкая стоимость.
Питание от 3 до 5 В и ввод/вывод.
Максимальный потребляемый ток 2,5 мА во время преобразования (при запросе данных).
Подходит для показаний влажности 20–80 % с точностью 5 %.
Подходит для показаний температуры 0-50°C с точностью ±2°C.
Частота дискретизации не более 1 Гц (один раз в секунду).
Размер корпуса 15,5 мм x 12 мм x 5,5 мм.
4 штифта с интервалом 0,1″.

Датчик барометрического давления BMP180

О BMP180

BMP180 — это новый цифровой датчик барометрического давления от Bosch Sensortec с очень высокой производительностью, который позволяет использовать его в таких современных устройствах, как смартфоны, планшетные ПК и спортивные устройства. Он следует за BMP085 и приносит множество улучшений, таких как меньший размер и расширение цифровых интерфейсов.

Сверхнизкое энергопотребление до 3 мкА делает BMP180 лидером в области энергосбережения для ваших устройств. BMP180 также отличается очень стабильным поведением (производительностью) в отношении независимости от напряжения питания.

Характеристики BMP180

Vin: от 3 до 5 В постоянного тока.
Логика: совместима с напряжением от 3 до 5 В.
Диапазон измерения давления: 300–1100 гПа (от 9000 до -500 м над уровнем моря).
Разрешение до 0,03 гПа / 0,25 м.
Рабочий диапазон от -40 до +85°C, точность измерения температуры +-2°C.
Эта плата/чип использует 7-битный адрес I2C 0x77.

Датчик дождя

Датчики дождя используются для обнаружения воды за пределами того, что может обнаружить датчик влажности.

Датчик дождя обнаруживает воду, которая замыкает цепи на печатных выводах его сенсорных плат. Сенсорная плата действует как переменный резистор, который будет изменяться от 100 кОм во влажном состоянии до 2 МОм в сухом состоянии. Короче говоря, чем влажнее плата, тем больше тока она будет проводить. В одном из наших предыдущих проектов мы уже использовали датчик дождя, похожий на тот, который используется в данном проекте.

Схема проекта

Схема метеостанции на основе модуля NodeMCU ESP8266-12E и датчиков DHT11, BMP180 и FC37 представлена на следующем рисунке.

Исходный код программы

Программа для мониторинга метеостанции в реальном времени с использованием NodeMCU ESP8266 разделена на две части: 1. Основной код Arduino и 2. HTML-файл index.h.

Но перед этим добавьте эти две библиотеки:
1. Библиотека BMP180: Скачать
2. Библиотека DHT11 ESP: Скачать

HTML-файл index.h

Скопируйте этот код и вставьте его в текстовый документ. Затем сохраните этот файл под именем index.h , таким образом вы получите файл в виде .h как код.

Теперь переместите этот файл в папку, где находится основной ino-код.

const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>www.how2electronics.com</title>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Advent+Pro:400,200);
*{margin: 0;padding: 0;}
 
body{
  background:#544947;
  font-family:Montserrat,Arial,sans-serif;
}
h2{
  font-size:14px;
}
.widget{
  box-shadow:0 40px 10px 5px rgba(0,0,0,0.4);
  margin:100px auto;
  height: 330px;
  position: relative;
  width: 500px;
}
 
.upper{
  border-radius:5px 5px 0 0;
  background:#f5f5f5;
  height:200px;
  padding:20px;
}
 
.date{
  font-size:40px;
}
.year{
  font-size:30px;
  color:#c1c1c1;
}
.place{
  color:#222;
  font-size:40px;
}
.lower{
  background:#00A8A9;
  border-radius:0 0 5px 5px;
  font-family:'Advent Pro';
  font-weight:200;
  height:130px;
  width:100%;
}
.clock{
  background:#00A8A9;
  border-radius:100%;
  box-shadow:0 0 0 15px #f5f5f5,0 10px 10px 5px rgba(0,0,0,0.3);
  height:150px;
  position:absolute;
  right:25px;
  top:-35px;
  width:150px;
}
 
.hour{
  background:#f5f5f5;
  height:50px;
  left:50%;  
  position: absolute;
  top:25px;
  width:4px;
}
 
.min{
  background:#f5f5f5;
  height:65px;
  left:50%;  
  position: absolute;
  top:10px;
  transform:rotate(100deg);
  width:4px;
}
 
.min,.hour{
  border-radius:5px;
  transform-origin:bottom center;
  transition:all .5s linear;
}
 
.infos{
  list-style:none;
}
.info{
  color:#fff;
  float:left;
  height:100%;
  padding-top:10px;
  text-align:center;
  width:25%;
}
.info span{
  display: inline-block;
  font-size:40px;
  margin-top:20px;
}
.weather p {
  font-size:20px;padding:10px 0;
}
.anim{animation:fade .8s linear;}
 
@keyframes fade{
  0%{opacity:0;}
  100%{opacity:1;}
}
 
a{
 text-align: center;
 text-decoration: none;
 color: white;
 font-size: 15px;
 font-weight: 500;
}
</style>
<body>
 
 
<div class="widget"> 
  <div class="clock">
    <div class="min" id="min"></div>
    <div class="hour" id="hour"></div>
  </div>
  <div class="upper">
    <div class="date" id="date">21 March</div>
    <div class="year">Temperature</div>
    <div class="place update" id="temperature">23 &deg;C</div>
  </div>
  <div style="text-align: center;"><a href="https://www.how2electronics.com" style="align:center">www.how2electronics.com</a></div>
  <div class="lower">    
    <ul class="infos">
      <li class="info temp">
        <h2 class="title">TEMPERATURE</h2>
        <span class='update' id="temp">21 &deg;C</span>
      </li>
      <li class="info weather">
        <h2 class="title">PRESSURE</h2>
        <span class="update" id="pressure">0 mb</span>
      </li>
      <li class="info wind">
        <h2 class="title">RAIN</h2>
        <span class='update' id="rain">0%</span>
      </li>
      <li class="info humidity">
        <h2 class="title">HUMIDITY</h2>
        <span class='update' id="humidity">23%</span>
      </li>
    </ul>
  </div>
</div>
 
<script>
setInterval(drawClock, 2000);
    
function drawClock(){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    
    //Date
    var options = {year: 'numeric', month: 'long', day: 'numeric' };
    var today  = new Date();
    document.getElementById("date").innerHTML = today.toLocaleDateString("en-US", options);
    
    //hour
    var hourAngle = (360*(hour/12))+((360/12)*(minute/60));
    var minAngle = 360*(minute/60);
    document.getElementById("hour").style.transform = "rotate("+(hourAngle)+"deg)";
    //minute
    document.getElementById("min").style.transform = "rotate("+(minAngle)+"deg)";
 
    //Get Humidity Temperature and Rain Data
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
      var txt = this.responseText;
      var obj = JSON.parse(txt); //Ref: https://www.w3schools.com/js/js_json_parse.asp
        document.getElementById("rain").innerHTML = obj.Rain + "%";
        document.getElementById("temperature").innerHTML = Math.round(obj.Temperature) + "&deg;C";
        document.getElementById("temp").innerHTML = Math.round(obj.Temperature) + "&deg;C";
        document.getElementById("humidity").innerHTML = Math.round(obj.Humidity) + "%";
        document.getElementById("pressure").innerHTML = Math.round(obj.Pressuremb) + " mb";
      }  
    };
   xhttp.open("GET", "readADC", true); //Handle readADC server on ESP8266
   xhttp.send();
}
</script>
</body>
</html>
)=====";

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

const char MAIN_page[] PROGMEM = R"=====(

<!DOCTYPE html>

<html>

<head>

<title>www.how2electronics.com</title>

</head>

<style>

@import url(https://fonts.googleapis.com/css?family=Montserrat);

@import url(https://fonts.googleapis.com/css?family=Advent+Pro:400,200);

*{margin: 0;padding: 0;}

body{

background:#544947;

font-family:Montserrat,Arial,sans-serif;

}

h2{

font-size:14px;

}

.widget{

box-shadow:0 40px 10px 5px rgba(0,0,0,0.4);

margin:100px auto;

height: 330px;

position: relative;

width: 500px;

}

.upper{

border-radius:5px 5px 0 0;

background:#f5f5f5;

height:200px;

padding:20px;

}

.date{

font-size:40px;

}

.year{

font-size:30px;

color:#c1c1c1;

}

.place{

color:#222;

font-size:40px;

}

.lower{

background:#00A8A9;

border-radius:0 0 5px 5px;

font-family:'Advent Pro';

font-weight:200;

height:130px;

width:100%;

}

.clock{

background:#00A8A9;

border-radius:100%;

box-shadow:0 0 0 15px #f5f5f5,0 10px 10px 5px rgba(0,0,0,0.3);

height:150px;

position:absolute;

right:25px;

top:-35px;

width:150px;

}

.hour{

background:#f5f5f5;

height:50px;

left:50%;

position: absolute;

top:25px;

width:4px;

}

.min{

background:#f5f5f5;

height:65px;

left:50%;

position: absolute;

top:10px;

transform:rotate(100deg);

width:4px;

}

.min,.hour{

border-radius:5px;

transform-origin:bottom center;

transition:all .5s linear;

}

.infos{

list-style:none;

}

.info{

color:#fff;

float:left;

height:100%;

padding-top:10px;

text-align:center;

width:25%;

}

.info span{

display: inline-block;

font-size:40px;

margin-top:20px;

}

.weather p {

font-size:20px;padding:10px 0;

}

.anim{animation:fade .8s linear;}

@keyframes fade{

0%{opacity:0;}

100%{opacity:1;}

}

text-align: center;

text-decoration: none;

color: white;

font-size: 15px;

font-weight: 500;

}

</style>

<body>

</div>

<div class="date" id="date">21 March</div>

<div class="year">Temperature</div>

</div>

<div style="text-align: center;"><a href="https://www.how2electronics.com" style="align:center">www.how2electronics.com</a></div>

<h2 class="title">TEMPERATURE</h2>

</li>

<h2 class="title">PRESSURE</h2>

</li>

</li>

<h2 class="title">HUMIDITY</h2>

</li>

</ul>

</div>

setInterval(drawClock, 2000);

function drawClock(){

var now = new Date();

var hour = now.getHours();

var minute = now.getMinutes();

var second = now.getSeconds();

//Date

var options = {year: 'numeric', month: 'long', day: 'numeric' };

var today = new Date();

document.getElementById("date").innerHTML = today.toLocaleDateString("en-US", options);

//hour

var hourAngle = (360*(hour/12))+((360/12)*(minute/60));

var minAngle = 360*(minute/60);

document.getElementById("hour").style.transform = "rotate("+(hourAngle)+"deg)";

//minute

document.getElementById("min").style.transform = "rotate("+(minAngle)+"deg)";

//Get Humidity Temperature and Rain Data

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

var txt = this.responseText;

var obj = JSON.parse(txt); //Ref: https://www.w3schools.com/js/js_json_parse.asp

document.getElementById("rain").innerHTML = obj.Rain + "%";

document.getElementById("temperature").innerHTML = Math.round(obj.Temperature) + "°C";

document.getElementById("temp").innerHTML = Math.round(obj.Temperature) + "°C";

document.getElementById("humidity").innerHTML = Math.round(obj.Humidity) + "%";

document.getElementById("pressure").innerHTML = Math.round(obj.Pressuremb) + " mb";

}

};

xhttp.open("GET", "readADC", true); //Handle readADC server on ESP8266

xhttp.send();

}

</script>

</body>

</html>

)=====";

Основной код метеостанции

В этом коде замените WiFi SSID и пароль на SSID и пароль вашего WiFi роутера. И затем вы можете загрузить код на плату.

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <SFE_BMP180.h>
#include <Wire.h>
 
#include "index.h" //Our HTML webpage contents with javascripts
#include "DHTesp.h" //DHT11 Library for ESP
 
#define LED 2 //On board LED
#define DHTpin 14 //D5 of NodeMCU is GPIO14
 
SFE_BMP180 pressure;
 
#define ALTITUDE 1655.0 // Altitude in meters
 
DHTesp dht;
 
//SSID and Password of your WiFi router
const char* ssid = "Alexahome";
const char* password = "hngzhowxiantan";
 
ESP8266WebServer server(80); //Server on port 80
 
void handleRoot() {
String s = MAIN_page; //Read HTML contents
server.send(200, "text/html", s); //Send web page
}
 
float humidity, temperature;
 
void handleADC() {
char status;
double T,P,p0,a;
double Tdeg, Tfar, phg, pmb;
 
status = pressure.startTemperature();
if (status != 0)
{
// Wait for the measurement to complete:
delay(status);
status = pressure.getTemperature(T);
if (status != 0)
{
// Print out the measurement:
Serial.print("temperature: ");
Serial.print(T,2);
Tdeg = T;
Serial.print(" deg C, ");
Tfar = (9.0/5.0)*T+32.0;
Serial.print((9.0/5.0)*T+32.0,2);
Serial.println(" deg F");
 
status = pressure.startPressure(3);
if (status != 0)
{
// Wait for the measurement to complete:
delay(status);
status = pressure.getPressure(P,T);
if (status != 0)
{
// Print out the measurement:
Serial.print("absolute pressure: ");
Serial.print(P,2);
pmb = P;
Serial.print(" mb, ");
phg = P*0.0295333727;
Serial.print(P*0.0295333727,2);
Serial.println(" inHg");
 
p0 = pressure.sealevel(P,ALTITUDE); // we're at 1655 meters (Boulder, CO)
Serial.print("relative (sea-level) pressure: ");
Serial.print(p0,2);
Serial.print(" mb, ");
Serial.print(p0*0.0295333727,2);
Serial.println(" inHg");
 
a = pressure.altitude(P,p0);
Serial.print("computed altitude: ");
Serial.print(a,0);
Serial.print(" meters, ");
Serial.print(a*3.28084,0);
Serial.println(" feet");
}
else Serial.println("error retrieving pressure measurement\n");
}
else Serial.println("error starting pressure measurement\n");
}
else Serial.println("error retrieving temperature measurement\n");
}
else Serial.println("error starting temperature measurement\n");
 
 
int rain = analogRead(A0);
 
//Create JSON data
String data = "{\"Rain\":\""+String(rain)+"\",\"Pressuremb\":\""+String(pmb)+"\",\"Pressurehg\":\""+String(phg)+"\", \"Temperature\":\""+ String(temperature) +"\", \"Humidity\":\""+ String(humidity) +"\"}";
 
digitalWrite(LED,!digitalRead(LED)); //Toggle LED on data request ajax
server.send(200, "text/plane", data); //Send ADC value, temperature and humidity JSON to client ajax request
 
delay(dht.getMinimumSamplingPeriod());
 
humidity = dht.getHumidity();
temperature = dht.getTemperature();
 
Serial.print("H:");
Serial.println(humidity);
Serial.print("T:");
Serial.println(temperature); //dht.toFahrenheit(temperature));
Serial.print("R:");
Serial.println(rain);
}
 
void setup()
{
Serial.begin(115200);
Serial.println();
 
// dht11 Sensor
 
dht.setup(DHTpin, DHTesp::DHT11); //for DHT11 Connect DHT sensor to GPIO 17
pinMode(LED,OUTPUT);
 
//BMP180 Sensor
if (pressure.begin())
Serial.println("BMP180 init success");
else
{
Serial.println("BMP180 init fail\n\n");
while(1); // Pause forever.
}
 
WiFi.begin(ssid, password); //Connect to your WiFi router
Serial.println("");
 
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
 
//If connection successful show IP address in serial monitor
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP()); //IP address assigned to your ESP
 
server.on("/", handleRoot); //Which routine to handle at root location. This is display page
server.on("/readADC", handleADC); //This page is called by java Script AJAX
 
server.begin(); //Start server
Serial.println("HTTP server started");
}
 
void loop()
{
server.handleClient(); //Handle client requests
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

#include <ESP8266WiFi.h>

#include <WiFiClient.h>

#include <ESP8266WebServer.h>

#include <SFE_BMP180.h>

#include <Wire.h>

#include "index.h" //Our HTML webpage contents with javascripts

#include "DHTesp.h" //DHT11 Library for ESP

#define LED 2 //On board LED

#define DHTpin 14 //D5 of NodeMCU is GPIO14

SFE_BMP180 pressure;

#define ALTITUDE 1655.0 // Altitude in meters

DHTesp dht;

//SSID and Password of your WiFi router

const char* ssid = "Alexahome";

const char* password = "hngzhowxiantan";

ESP8266WebServer server(80); //Server on port 80

void handleRoot() {

String s = MAIN_page; //Read HTML contents

server.send(200, "text/html", s); //Send web page

}

float humidity, temperature;

void handleADC() {

char status;

double T,P,p0,a;

double Tdeg, Tfar, phg, pmb;

status = pressure.startTemperature();

if (status != 0)

{

// Wait for the measurement to complete:

delay(status);

status = pressure.getTemperature(T);

if (status != 0)

{

// Print out the measurement:

Serial.print("temperature: ");

Serial.print(T,2);

Tdeg = T;

Serial.print(" deg C, ");

Tfar = (9.0/5.0)*T+32.0;

Serial.print((9.0/5.0)*T+32.0,2);

Serial.println(" deg F");

status = pressure.startPressure(3);

if (status != 0)

{

// Wait for the measurement to complete:

delay(status);

status = pressure.getPressure(P,T);

if (status != 0)

{

// Print out the measurement:

Serial.print("absolute pressure: ");

Serial.print(P,2);

pmb = P;

Serial.print(" mb, ");

phg = P*0.0295333727;

Serial.print(P*0.0295333727,2);

Serial.println(" inHg");

p0 = pressure.sealevel(P,ALTITUDE); // we're at 1655 meters (Boulder, CO)

Serial.print("relative (sea-level) pressure: ");

Serial.print(p0,2);

Serial.print(" mb, ");

Serial.print(p0*0.0295333727,2);

Serial.println(" inHg");

a = pressure.altitude(P,p0);

Serial.print("computed altitude: ");

Serial.print(a,0);

Serial.print(" meters, ");

Serial.print(a*3.28084,0);

Serial.println(" feet");

}

else Serial.println("error retrieving pressure measurement\n");

}

else Serial.println("error starting pressure measurement\n");

}

else Serial.println("error retrieving temperature measurement\n");

}

else Serial.println("error starting temperature measurement\n");

int rain = analogRead(A0);

//Create JSON data

String data = "{\"Rain\":\""+String(rain)+"\",\"Pressuremb\":\""+String(pmb)+"\",\"Pressurehg\":\""+String(phg)+"\", \"Temperature\":\""+ String(temperature) +"\", \"Humidity\":\""+ String(humidity) +"\"}";

digitalWrite(LED,!digitalRead(LED)); //Toggle LED on data request ajax

server.send(200, "text/plane", data); //Send ADC value, temperature and humidity JSON to client ajax request

delay(dht.getMinimumSamplingPeriod());

humidity = dht.getHumidity();

temperature = dht.getTemperature();

Serial.print("H:");

Serial.println(humidity);

Serial.print("T:");

Serial.println(temperature); //dht.toFahrenheit(temperature));

Serial.print("R:");

Serial.println(rain);

}

void setup()

{

Serial.begin(115200);

Serial.println();

// dht11 Sensor

dht.setup(DHTpin, DHTesp::DHT11); //for DHT11 Connect DHT sensor to GPIO 17

pinMode(LED,OUTPUT);

//BMP180 Sensor

if (pressure.begin())

Serial.println("BMP180 init success");

else

{

Serial.println("BMP180 init fail\n\n");

while(1); // Pause forever.

}

WiFi.begin(ssid, password); //Connect to your WiFi router

Serial.println("");

// Wait for connection

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

}

//If connection successful show IP address in serial monitor

Serial.println("");

Serial.print("Connected to ");

Serial.println(ssid);

Serial.print("IP address: ");

Serial.println(WiFi.localIP()); //IP address assigned to your ESP

server.on("/", handleRoot); //Which routine to handle at root location. This is display page

server.on("/readADC", handleADC); //This page is called by java Script AJAX

server.begin(); //Start server

Serial.println("HTTP server started");

}

void loop()

{

server.handleClient(); //Handle client requests

}

Тестирование работы метеостанции

Сначала соберите схему, как показано на принципиальной схеме выше, и загрузите основной ino-файл на плату NodeMCU.

После загрузки кода получите IP-адрес ESP8266 из последовательного монитора.

Теперь скопируйте этот IP-адрес и вставьте его в любой веб-браузер, например, Google Chrome, и нажмите Enter. Вы получите красивый виджет с информацией о погоде, как показано ниже.

Видео с демонстрацией сборки и работы проекта

(Проголосуй первым!)

Загрузка...

99 просмотров

Необходимые компоненты

Датчик влажности и температуры DHT11

О DHT11

Особенности DHT11

Датчик барометрического давления BMP180

О BMP180

Характеристики BMP180

Датчик дождя

Схема проекта

Исходный код программы

HTML-файл index.h

Основной код метеостанции

Тестирование работы метеостанции

Видео с демонстрацией сборки и работы проекта

Похожие статьи

Добавить комментарий Отменить ответ