社区导航

 

搜索
查看: 160|回复: 0

[原创] 【零知ESP8266】HTTP WEB 服务器示例

[复制链接]

67

TA的帖子

0

TA的资源

一粒金砂(初级)

Rank: 1

发表于 2019-6-20 14:08 | 显示全部楼层 |阅读模式

1、概述

HTTP web server作为ESP8266的一个常用功能,在这里使用零知开源平台进行该示例的演示。

2、软件和硬件

硬件使用零知-ESP8266;

软件使用零知开发工具,自带示例:

示例.jpg 3、方法步骤

(1)先在零知开发工具中打开AdvancedWebServer示例,或者复制下面的代码到零知开发工具中:

/**********************************************************
*    文件: x.ino      by 零知实验室
*    -^^- 零知开源,让电子制作变得更简单! -^^-
*    时间: 2019/05/28 12:22
*    说明: 
************************************************************/
 
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
 
#ifndef STASSID
#define STASSID "ssid"
#define STAPSK  "passwd"
#endif
 
const char *ssid = STASSID;
const char *password = STAPSK;
 
ESP8266WebServer server(80);
 
const int led = 13;
 
void handleRoot() {
  digitalWrite(led, 1);
  char temp[400];
  int sec = millis() / 1000;
  int min = sec / 60;
  int hr = min / 60;
 
  snprintf(temp, 400,
 
           "<html>\
  <head>\
    <meta http-equiv='refresh' content='5'/>\
    <title>ESP8266 Demo</title>\
    <style>\
      body { background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\
    </style>\
  </head>\
  <body>\
    <h1>Hello from ESP8266!</h1>\
    <p>Uptime: %02d:%02d:%02d</p>\
    <img src=\"/test.svg\" />\
  </body>\
</html>",
 
           hr, min % 60, sec % 60
          );
  server.send(200, "text/html", temp);
  digitalWrite(led, 0);
}
 
void handleNotFound() {
  digitalWrite(led, 1);
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
 
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
 
  server.send(404, "text/plain", message);
  digitalWrite(led, 0);
}
 
void setup(void) {
  pinMode(led, OUTPUT);
  digitalWrite(led, 0);
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");
 
  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
 
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
 
  if (MDNS.begin("esp8266")) {
    Serial.println("MDNS responder started");
  }
 
  server.on("/", handleRoot);
  server.on("/test.svg", drawGraph);
  server.on("/inline", []() {
    server.send(200, "text/plain", "this works as well");
  });
  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP server started");
}
 
void loop(void) {
  server.handleClient();
  MDNS.update();
}
 
void drawGraph() {
  String out = "";
  char temp[100];
  out += "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"400\" height=\"150\">\n";
  out += "<rect width=\"400\" height=\"150\" fill=\"rgb(250, 230, 210)\" stroke-width=\"1\" stroke=\"rgb(0, 0, 0)\" />\n";
  out += "<g stroke=\"black\">\n";
  int y = rand() % 130;
  for (int x = 10; x < 390; x += 10) {
    int y2 = rand() % 130;
    sprintf(temp, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke-width=\"1\" />\n", x, 140 - y, x + 10, 140 - y2);
    out += temp;
    y = y2;
  }
  out += "</g>\n</svg>\n";
 
  server.send(200, "image/svg+xml", out);
}

(2)验证上述代码并上传到零知-ESP8266开发板;

(3)我们打开零知开发工具的串口调试窗口,可以看到如下信息:

调试窗口.jpg (4)现在我们用ping工具测试下网络,得到如下信息:

ping.jpg (5)上述步骤成功后,我们现在打开浏览器,打开网址:http://esp8266.local,可以看到如下信息:

结果.jpg 更多详细资料可到零知实验室官网免费获取。


此内容由EEWORLD论坛网友roc2原创,如需转载或用于商业用途需征得作者同意并注明出处



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

关闭

站长推荐上一条 /1 下一条

  • 论坛活动 E手掌握

    扫码关注
    EEWORLD 官方微信

  • EE福利  唾手可得

    扫码关注
    EE福利 唾手可得

Archiver|手机版|小黑屋|电子工程世界 ( 京ICP证 060456 )

GMT+8, 2019-7-19 01:44 , Processed in 0.077775 second(s), 17 queries , Gzip On, MemCache On.

快速回复 返回顶部 返回列表