加入星计划,您可以享受以下权益:

  • 创作内容快速变现
  • 行业影响力扩散
  • 作品版权保护
  • 300W+ 专业用户
  • 1.5W+ 优质创作者
  • 5000+ 长期合作伙伴
立即加入
  • 正文
    • 1. 智能家居系统设计
    • 2. 浏览器读取温湿度数据的功能实现
  • 相关推荐
  • 电子产业图谱
申请入驻 产业图谱

WiFi开发小项目:智能家居

2022/06/08
1289
阅读需 14 分钟
加入交流群
扫码加入
获取工程师必备礼包
参与热点资讯讨论

公众号:嵌入式攻城狮(ID:andyxi_linux)

作者:安迪西

1. 智能家居系统设计

智能家居系统中用户通过浏览器访问网页,在网页上进行温湿度数据的读取、智能开关的控制以及灯泡颜色的控制,实现智能家居系统控制

 

利用ESP8266模组作为一个HTTP server,通过WiFi station模式,连接到路由器,获取到IP地址;在PC或手机浏览器上访问ESP8266的IP地址(须连接同一路由器),利用ESP8266模组实现tcp连接,收到HTTP访问信息,回复相应的信息;ESP8266收到消息后,控制继电器、读取温湿度值或控制彩灯颜色,远距离通过wifi控制ESP8266模组,实现智能家居功能

由于开发三种功能的方法类似,本实例中仅介绍通过浏览器读取温湿度数据的功能实现:

2. 浏览器读取温湿度数据的功能实现

DHT11温湿度传感器的介绍与硬件连接方法请参考智能环境采集一文的介绍

智能环境采集网页设计如下图所示:

智能环境采集网页html代码如下示:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Smart Home</title>
<script defer="defer">
  function readdata() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("txtState").innerHTML = xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET", "Data", true);
    xmlhttp.send(); 
  }
</script>
</head>
<body style="background-color: #76C43C">
<font size="12" color="yellow">
<b>
<div class="text" style=" text-align:center;"><big>WiFi-SmartHome-Environment</big></div>
</b>
</font>
<font size="12" color="yellow">
<b>
<div class="text" style=" text-align:center;"><big>Temperature&Humidity</big></div>
</b>
</font>
<br> </br>     
<font size="20" color="white">
<div align="center" id="txtState">No Data</div>
</font>
<br> </br>
<div style=" text-align:center;">
<input type="button" value="Acquire" style="width:80px;height:40px;" onclick="readdata()">
</div>
</body>
</html>

实现步骤如下:⏩ 在ESP8266_RTOS_SDK目录下新建webdht11文件夹,把httpserver实验中的httpserver目录下所有文件拷贝到该文件夹中⏩ 在user目录下新建dht11.c文件,内容可参考智能环境采集一文该部分的介绍⏩ 在include目录下新建dht11.h文件,内容可参考智能环境采集一文该部分的介绍

⏩ 在user目录下的httpserver.c文件中完成 http数据交互功能

#define SERVERADDR "192.168.191.29"
#define SERVERPORT 80

const char *DefaultPage= "此处拷贝网页源码"

// 发送200 ok报头
int file_ok(int cfd, long flen){
  char *send_buf = zalloc(sizeof(char)*100);
  sprintf(send_buf, "HTTP/1.1 200 OKrn");
  send(cfd, send_buf, strlen(send_buf), 0);
  sprintf(send_buf, "Connection: keep-alivern");
  send(cfd, send_buf, strlen(send_buf), 0);
  sprintf(send_buf, "Content-Length: %ldrn", flen);
  send(cfd, send_buf, strlen(send_buf), 0);
  sprintf(send_buf, "Content-Type: text/htmlrn");
  send(cfd, send_buf, strlen(send_buf), 0);
  sprintf(send_buf, "rn");
  send(cfd, send_buf, strlen(send_buf), 0);
  free(send_buf);
  return 0;
}

bool isLedTurnOpen = false; // 记录LED状态
//ATaskHttpServer 任务
void ATaskHttpServer( void *pvParameters ){
  int iVariableExample = 0;
  int fd = -1;
  int cfd = -1;
  int NetTimeOnt = 2000;
  int ret;
  struct sockaddr_in ServerAddr;
  struct sockaddr ClientAddr;
  socklen_t ClientAddrlen = sizeof(struct sockaddr);
  char *Httpmsg;
  char *Sendmsg;
  char data[30];

  STATION_STATUS StaStatus;
  do{
    StaStatus = wifi_station_get_connect_status();
    vTaskDelay(100);
  }while(StaStatus != STATION_GOT_IP);
    
  fd = socket(PF_INET,SOCK_STREAM,0);
  if(fd == -1){
    printf("get socket fail!n");
    vTaskDelete(NULL);
    return;
  }

  setsockopt(fd,SOL_SOCKET,SO_RCVTIMEO,&NetTimeOnt,sizeof(int));
  memset(&ServerAddr,0,sizeof(ServerAddr));
  ServerAddr.sin_family = AF_INET;
  ServerAddr.sin_addr.s_addr = INADDR_ANY;
  ServerAddr.sin_port = htons(SERVERPORT);
  ServerAddr.sin_len = sizeof(ServerAddr);

  if(bind(fd,(struct sockaddr*)&ServerAddr,ServerAddr.sin_len) != 0){        
    printf("bind socket fail!n");
    vTaskDelete(NULL);
    return;
  }

  if(listen(fd,5) != 0){
    printf("listen socket fail!n");
    vTaskDelete(NULL);
    return;
  }
  Httpmsg = (char*)zalloc(sizeof(char)*1000);
  for(;;){        
    cfd = accept(fd,&ClientAddr,&ClientAddrlen);
    if(cfd != -1){            
      printf("HttpClient acceptn");
      ret = recv(cfd,Httpmsg,1000,0);
      if(ret > 0){
        printf("HttpClient recvn");
        printf("%sn",Httpmsg);
        if(strstr(Httpmsg,"GET / HTTP/1.1") != NULL){
          file_ok(cfd,strlen(DefaultPage));
          send(cfd,DefaultPage,strlen(DefaultPage),0);
        }
        else if(strstr(Httpmsg,"GET /Data") != NULL){                    
	   sprintf(data,"Temperature=%dnHumidity=%d",ucharT_data_H,ucharRH_data_H);
          send(cfd,data,strlen(data),0);
        }
      }
      else{
        printf("HttpClient data is no!n");
      }
    }
    close(cfd);
  }
  free(Httpmsg);
  vTaskDelete( NULL );
}
//HttpServer_init 初始化
void HttpServer_init(void){
  xTaskCreate(ATaskHttpServer, "HttpServer", 256, NULL, 4, NULL);
}

⏩ 在user_main.c文件中的user_init()函数下添加如下代码

#define SSID "Hotspot"	//ESP8266要加入的无线网
#define PASSWORD "88888888"
void ICACHE_FLASH_ATTR
user_init(void){
  printf("SDK version:%sn", system_get_sdk_version());
  Led_init();
  wifi_set_opmode(STATION_MODE);
  struct station_config *config = (struct station_config *)
      zalloc(sizeof(struct station_config));
  sprintf(config->ssid,SSID);
  sprintf(config->password,PASSWORD);
  wifi_station_set_config(config);
  free(config);
  wifi_station_set_auto_connect(TRUE);    
  HttpServer_init();
  Dht11_init();
  xTaskCreate(ATaskLed, "LED", 256, NULL, 2, NULL);
}

⏩ 在ESP8266编译器中编译完成,烧写bin文件到ESP8266,模组复位;PC端连上与ESP8266相同的无线网络,在浏览器中输入ESP8266的IP地址,即可访问智能家居网页,点击"Acquire"可读取温湿度数据

相关推荐

电子产业图谱

公众号:嵌入式攻城狮;专注于分享和记录嵌入式开发技术,主要包含C语言、STM32、STM32CubeMX、lwIP、FreeRTOS、Linux、Zigbee、WIFI、BLE、LoRa、NB-loT、PCB电路设计、QT等等。