基于STM32F1单片机、ESP8266WIFI模块、DHT11温湿度传感的WIFI网络温湿度传输系统
基于STM32F1单片机、ESP8266WIFI模块、DHT11温湿度传感的WIFI网络温湿度传输系统
- 功能说明
-
- 温湿度采集端
- 温湿度监控端
- 硬件材料
-
- 硬件连接
- 主要代码
-
- 温湿度采集端
- 温湿度监控端
- 测试
基于STM32F1单片机、ESP8266WIFI模块、DHT11温湿度传感的WIFI网络温湿度传输系统完整工程
功能说明
基于嵌入式的温湿度网络传输系统包含：温湿度采集端与温湿度监控端。
温湿度采集端可实时采集温度与湿度数据，通过WIFI透传技术，将温湿度数据传送到温度监控端。温度监控端实时接收温湿度采集端所发送的温湿度数据，显示在网站上。
注：目前只是在局域网下测试。
温湿度采集端
- 嵌入式STM32微控制器实时读取DHT11温湿度传感器采集的温湿度数据。
- 嵌入式STM32微控制器通过ESP8266WIFI模块连接WIFI。
- 通过TCP协议连接到电脑服务器，将温湿度数据传输到服务器。
温湿度监控端
- 通过建立Serversocket监听指定端口，获得温湿度采集端的温湿度数据。
- 将获取的数据通过WebSocket建立与客户端web页面的实时连接，将数据传送到web页面
- web页面可实时显示温湿度数据、查询温湿度数据、将数值图形化用动态柱形图的形式展现。
硬件材料
温湿度采集端STM32F1单片机、DHT11温湿度传感器、ESP8266WIFI模块
硬件连接
ESP8266与STM32F103连接图：
DHT11与STM32F103连接图：
温湿度监控端普通电脑需要JAVA环境
主要代码
温湿度采集端
/************************************************************************************/
@file main.c
@function 初始化各模块
*************************************************************************************/
#include "stm32f10x.h"
#include "bsp_usart1.h"
#include "bsp_SysTick.h"
#include "bsp_esp8266.h"
#include "test.h"
#include "bsp_dht11.h"
int main ( void )
{
USARTx_Config ();
SysTick_Init ();
ESP8266_Init ();
DHT11_Init ();
ESP8266_StaTcpClient_UnvarnishTest ();
while ( 1 );
}
/****************************END OF FILE***************************/
/************************************************************************************/
@file stm32f10x_conf.h
@function 调用库包含
*************************************************************************************/
#ifndef __STM32F10x_CONF_H
#define __STM32F10x_CONF_H
#include "stm32f10x_gpio.h"
#include "stm32f10x_rcc.h"
#include "stm32f10x_tim.h"
#include "stm32f10x_usart.h"
#include "misc.h"
#ifdef USE_FULL_ASSERT
#else
#define assert_param(expr) ((void)0)
#endif
#endif
/****************************END OF FILE***************************/
/************************************************************************************/
@file stm32f10x_it.h
@function 中断头文件
*************************************************************************************/
#ifndef __STM32F10x_IT_H
#define __STM32F10x_IT_H
#ifdef __cplusplus
extern "C" {
#endif
void NMI_Handler(void);
void HardFault_Handler(void);
void MemManage_Handler(void);
void BusFault_Handler(void);
void UsageFault_Handler(void);
void SVC_Handler(void);
void DebugMon_Handler(void);
void PendSV_Handler(void);
void SysTick_Handler(void);
#ifdef __cplusplus
}
#endif
#endif
/****************************END OF FILE***************************/
/************************************************************************************/
@file stm32f10x_it.c
@function 中断服务程序
*************************************************************************************/
#include "stm32f10x_it.h"
#include 温湿度监控端
/****************************************************************************
@file index.html-
@function 通过WebSocket获取到的数据的页面显示
*****************************************************************************/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Monitoring</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript">
var data = [];
var count = 0;
var humidity = 0;
var temperature = 0;
var time = 0;
window.onload = function () {
var websocket = null;
if ('WebSocket' in window) {
websocket = new WebSocket("ws://localhost:8080/index");//向要显示数据的网页发送websocket连接请求
} else {
alert('当前浏览器不支持Websocket')
}
websocket.onerror = function () {
alert(window.location.href);
};
websocket.onopen = function () {
//alert("Websocket建立成功");
}
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
websocket.onclose = function () {
//alert("Websocket连接关闭")
}
window.onbeforeunload = function () {
closeWebSocket();
}
function getTime() {
var dateObj = new Date();
var year = dateObj.getFullYear();
var month = dateObj.getMonth()+1;
var day = dateObj.getDate();
var hour = dateObj.getHours();
var min = dateObj.getMinutes();
return year + "-" + month + "-" + day + "-" + hour + "-" + min;
}
function setMessageInnerHTML(innerHTML) {
var json = {
};
json.time = getTime();
json.message = innerHTML;
data[count++] = json;
//document.getElementById('text').innerHTML += JSON.stringify(data[count]) + '
';
var str = JSON.stringify(json.message);
time = JSON.stringify(json.time);
humidity = parseFloat(JSON.stringify(json.message).substring(str.indexOf("y") + 1, str.indexOf("R")-1));
temperature = parseFloat(JSON.stringify(json.message).substring(str.indexOf("e") + 1, str.indexOf("C")));
document.getElementById('text').innerHTML += "时间:"+ time + "\t湿度:" + humidity.toString() + '%RH\t温度:'+ temperature.toString() + '℃\n';
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "温度湿度动态显示图"
},
data: [{
type: "column",
yValueFormatString: "#,###.#",
indexLabel: "{y}",
dataPoints: [
{
label: "boiler1", y: humidity},
{
label: "boiler2", y: temperature},
]
}]
});
function updateChart() {
var boilerColor, yVal;
var dps = chart.options.data[0].dataPoints;
for (var i = 0; i < dps.length; i++) {
yVal = dps[i].y;
boilerColor1 = yVal > 120 ? "#FF2500" : yVal >= 91 ? "#FF6000" : yVal >= 20 ? "#6B8E23 " : null;
boilerColor2 = yVal > 37 ? "#FF2500" : yVal >= 27 ? "#FF6000" : yVal >= 0 ? "#6B8E23 " : null;
if (i === 0) {
dps[i] = {
label: "湿度 %RH", y: yVal, color: boilerColor1};
} else if (i === 1) {
dps[i] = {
label: "温度 ℃", y: yVal, color: boilerColor2};
}
}
chart.options.data[0].dataPoints = dps;
chart.render();
};
updateChart();
}
}
function search() {
var count = 1;
var str = '"'+ document.getElementById('val').value + '"';
for (var i = 0 ;i<data.length;i++){
if (JSON.stringify(data[i].time) == str){
if (count == 1){
document.getElementById('text').innerHTML = "";
document.getElementById('text').innerHTML = "搜索结果如下:\n";
count = 0;
}
var temp = JSON.stringify(data[i].message);
var H = temp.substring(temp.indexOf('y')+1,temp.indexOf('R')-1);
var T = temp.substring(temp.indexOf('e')+1,temp.indexOf('C'));
document.getElementById('text').innerHTML += str + ": 湿度为"+H+"%RH 温度为"+T+"℃\n";
}
}
}
function closeWebSocket() {
websocket.close();
}
</script>
<script src="js/canvasjs.min.js"></script>
</head>
<body>
<div id="message">
<div id="chartContainer" style="height: 370px; max-width: 850px; margin: 0px auto;"></div>
<div class="parent">
<input id="val" type="text" value="">
<input id="search" type="button" value="按时间搜索" onclick="search()">
</div>
<textarea id="text" readonly></textarea>
</div>
</body>
</html>
/******************************END OF FILE************************************/
/****************************************************************************
@file style.css -
@function 前端页面样式*****************************************************************************/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
bottom: 0px;
background-color: #c6ecd9;
}
.parent {
width: 100%;
height: 42px;
top: 4px;
position: relative;
}
#val{
width: 750px;
height: 40px;
margin-left: 530px;
border: 1px solid #ccc;
font-size: 16px;
outline: none;
border-radius: 1.2rem;
}
#search {
/*button按钮border并不占据外围大小，设置高度42px*/
width: 100px;
height: 40px;
position: absolute;
background: #317ef3;
border: 1px solid #317ef3;
color: #fff;
font-size: 16px;
outline: none;
border-radius: 1.2rem;
}
#message{
width: auto;
height: auto;
}
#text{
width: 850px;
height: 500px;
margin-left: 530px;
padding: 0;
font-size: 18px;
border-radius: 1.1rem;
/*cursor: pointer;*/
resize: none;
outline: none;
}
/******************************END OF FILE************************************/
/****************************************************************************
@file WebSocketServer.java -
@function 集成ServerSocket以及WebSocket 通过ServerSocket监听获取的数据以WebSocket传送到页面显示
*****************************************************************************/
package com.example.tcpwebsocket;
import org.springframework.stereotype.Component;
import java.io.IOException;
import java.io.InputStream;
import java.net.ServerSocket;
import java.net.Socket;
import java.util.Scanner;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/index")
@Component
public class WebSocketServer extends Thread {
//与某个客户端的连接会话，需要通过它来给客户端发送数据
Session session;
/**
* 连接建立成功调用的方法
*
* @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
*/
@OnOpen
public void onOpen(Session session) throws IOException {
Scanner scanner = new Scanner(System.in);
System.out.print("输入待监听的端口:");
int port = scanner.nextInt();
WebSocketServer server = new WebSocketServer(port, session);
server.start();
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message) throws IOException {
System.out.println("来自客户端的消息:" + message);
}
/**
* 发生错误时调用
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
System.out.println("发生错误");
}
/**
* @param message
* @throws IOException
*/
//给客户端传递消息
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
ServerSocket server = null;
Socket socket = null;
public WebSocketServer() {
}
public WebSocketServer(int port, Session session) {
try {
this.session = session;
server = new ServerSocket(port);
} catch (IOException e) {
e.printStackTrace();
}
}
@Override
public void run() {
super.run();
try {
while (true) {
socket = server.accept();
if (socket != null) {
InputStream in = socket.getInputStream();
int len = 0;
byte[] buf = new byte[1024];
while ((len = in.read(buf)) != -1) {
sendMessage(new String(buf, 0, len));
}
}
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
/******************************END OF FILE************************************/
/****************************************************************************
@file HelloController.java
@function SpringBoot主程序web首页设定*****************************************************************************/
package com.example.tcpwebsocket.controller;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class HelloController implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("forward:/index.html");
registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
}
}
/******************************END OF FILE************************************/
/****************************************************************************
@file WebSocketConfig.java
@function WebSocket的配置部分*****************************************************************************/
package com.example.tcpwebsocket.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
/**
* ServerEndpointExporter 作用
*
* 这个Bean会自动注册使用@ServerEndpoint注解声明的websocket endpoint
*
* @return
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
/******************************END OF FILE************************************/
测试
