Arduino网络编程实战-WiFi篇-Web服务器-显示SVG

Web服务器-显示SVG

ESP-01/ESP-01 WiFi模块是由安信可科技开发，该模块核心处理器为ESP8266，在较小尺寸封装中集成了业界领先的Tensilica L06超低功耗32位微处理器（MCU）,带有16位精简模式，主频支持80MHz和160MHz，支持RTOS，集成WiFi MAC/BB/RF/PA/LNA，板载天线。参考

该模块支持标准的IEEE802.11 b/g/n 协议，完整的TCP/IP协议栈。用户可以使用该模块为现有的设备添加联网功能，也可以构建独立的网络控制器。参考

ESP8266是高性能无线SOC，以最低成本提供最大实用性，为WiFi功能嵌入其他系统提供无限可能。参考

在这里插入图片描述

1、硬件准备

  • Arduino Mega2560 开发板一块
  • ESP-01/ESP-01s模块一块
  • ESP-01/ESP-01s转接板一块（请在某宝上搜索购买）
  • ESP-01/ESP-01s固件烧录器一个（请在某宝上搜索购买）
  • 杜邦线若干
  • Arduino开发板数据线一条
  • USB串口数据线一条

1）通过ESP-01/ESP-01s固件烧写器将ESP-AT的固件烧写到ESP-01/ESP-01s模块中

2）ESP-01/ESP-01s模块插入ESP-01/ESP-01s转接板

3）ESP-01/ESP-01s WiFi转接板与Arduino Mega2560硬件接线如下：

  • Arduino Mega2560 RX3<–-> ESP-01/ESP-01s TX
  • Arduino Mega2560 TX3<–-> ESP-01/ESP-01s RX
  • Arduino Mega2560 GND<–-> ESP-01/ESP-01s GND
  • Arduino Mega2560 5V<–-> ESP-01/ESP-01s VCC

2、软件准备

3、代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
// 定义与ESP-01模块通信串口
#define EspSerial Serial3
// 在AVR环境中使用ESP AT指令
#define ESP\_AT\_USE\_AVR true
// 开发板类型
#define BOARD\_TYPE "AVR Mega2560"
// 开发板名称
#define BOARD\_NAME BOARD\_TYPE
// 调试串口
#define DEBUG\_ESP8266\_AT\_WEBSERVER\_PORT Serial
// 扩展板类型
#define SHIELD\_TYPE "ESP8266-AT & ESP8266\_AT\_WebServer Library" 

// 调试输出日志级别 0 至 4
#define \_ESP\_AT\_LOGLEVEL\_ 0

#include <ESP8266\_AT\_WebServer.h>

char ssid[] = "\*\*\*\*";      
char pass[] = "\*\*\*\*";        
// 无线状态
int status = WL_IDLE_STATUS;    
int reqCount = 0;

ESP8266_AT_WebServer server(80);

const int led = 13;

void handleRoot()
{
#define BUFFER\_SIZE 512
  
  digitalWrite(led, 1);
  char temp[BUFFER_SIZE];
  int sec = millis() / 1000;
  int min = sec / 60;
  int hr = min / 60;
  int day = hr / 24;

  hr = hr % 24;

  snprintf(temp, BUFFER_SIZE - 1,
           "<html>\
<head>\
<meta http-equiv='refresh' content='5'/>\
<title>%s</title>\
<style>\
body { background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }\
</style>\
</head>\
<body>\
<h1>Hello from %s</h1>\
<h3>running AdvancedWebServer</h3>\
<h3>on %s</h3>\
<p>Uptime: %d d %02d:%02d:%02d</p>\
<img src=\"/test.svg\" />\
</body>\
</html>", BOARD_NAME, BOARD_NAME, SHIELD_TYPE, day, hr, min % 60, sec % 60);

  server.send(200, F("text/html"), temp);
  digitalWrite(led, 0);
}

void handleNotFound()
{
  digitalWrite(led, 1);
  
  String message = F("File Not Found\n\n");
  
  message += F("URI: ");
  message += server.uri();
  message += F("\nMethod: ");
  message += (server.method() == HTTP_GET) ? F("GET") : F("POST");
  message += F("\nArguments: ");
  message += server.args();
  message += F("\n");
  
  for (uint8\_t i = 0; i < server.args(); i++)
  {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  
  server.send(404, F("text/plain"), message);
  
  digitalWrite(led, 0);
}

#if 1

#define ORIGINAL\_STR\_LEN 2048

void drawGraph()
{
  static String out;
  static uint16\_t previousStrLen = ORIGINAL_STR_LEN;

  if (out.length() == 0)
  {
    AT\_LOGWARN1(F("String Len = 0, extend to"), ORIGINAL_STR_LEN);
    out.reserve(ORIGINAL_STR_LEN);
  }

  out = F( "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"310\" height=\"150\">\n" \
           "<rect width=\"310\" height=\"150\" fill=\"rgb(250, 230, 210)\" stroke-width=\"3\" stroke=\"rgb(0, 0, 0)\" />\n" \
           "<g stroke=\"blue\">\n");

  char temp[70];
  
  int y = rand() % 130;

  for (int x = 10; x < 300; x += 10)
  {
    int y2 = rand() % 130;
    sprintf(temp, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke-width=\"2\" />\n", x, 140 - y, x + 10, 140 - y2);
    out += temp;
    y = y2;
  }
  
  out += F("</g>\n</svg>\n");

  AT\_LOGDEBUG1(F("String Len = "), out.length());

  if (out.length() > previousStrLen)
  {
    AT\_LOGERROR3(F("String Len > "), previousStrLen, F(", extend to"), out.length() + 48);

    previousStrLen = out.length() + 48;
    
    out.reserve(previousStrLen);
  }
  else
  {
    server.send(200, "image/svg+xml", out);
  }
}

#else

#define ORIGINAL\_STR\_LEN 1280

void drawGraph()
{
  static String out;
  static uint16\_t previousStrLen = ORIGINAL_STR_LEN;

  if (out.length() == 0)
  {
    AT\_LOGWARN1(F("String Len = 0, extend to"), ORIGINAL_STR_LEN);
    out.reserve(ORIGINAL_STR_LEN);
  }

  out = F( "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"160\" height=\"80\">\n" \
           "<rect width=\"1600\" height=\"800\" fill=\"rgb(250, 230, 210)\" stroke-width=\"3\" stroke=\"rgb(0, 0, 0)\" />\n" \
           "<g stroke=\"blue\">\n");

  char temp[70];
  
  int y = rand() % 60;

  for (int x = 10; x < 150; x += 10)
  {
    int y2 = rand() % 60;
    sprintf(temp, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke-width=\"2\" />\n", x, 70 - y, x + 10, 70 - y2);
    out += temp;
    y = y2;
  }
  
  out += F("</g>\n</svg>\n");

  AT\_LOGDEBUG1(F("String Len = "), out.length());

  if (out.length() > previousStrLen)
  {
    AT\_LOGERROR3(F("String Len > "), previousStrLen, F(", extend to"), out.length() + 48);

    previousStrLen = out.length() + 48;
    
    out.reserve(previousStrLen);
  }
  else
  {
    server.send(200, "image/svg+xml", out);
  }
}

#endif

void heartBeatPrint()
{
  static int num = 1;

  Serial.print(F("."));

  if (num == 80)
  {
    Serial.println();
    num = 1;
  }
  else if (num++ % 10 == 0)
  {
    Serial.print(F(" "));
  }
}

void check\_status()
{
  static unsigned long checkstatus_timeout = 0;

#define STATUS\_CHECK\_INTERVAL 10000L

  // Send status report every STATUS\_REPORT\_INTERVAL (60) seconds: we don't need to send updates frequently if there is no status change.
  if ((millis() > checkstatus_timeout) || (checkstatus_timeout == 0))
  {
    heartBeatPrint();
    checkstatus_timeout = millis() + STATUS_CHECK_INTERVAL;
  }
}

void setup()
{
  Serial.begin(115200);
  while (!Serial);

  Serial.print(F("\nStarting ConnectWPA on "));
  Serial.print(BOARD_NAME);
  Serial.print(F(" with "));
  Serial.println(SHIELD_TYPE); 
  Serial.println(ESP8266_AT_WEBSERVER_VERSION);

  // 初始化ESP模块
  EspSerial.begin(115200);
  WiFi.init(&EspSerial);

  Serial.println(F("WiFi shield init done"));

  // 检查ESP-01与开发板连接状态
  if (WiFi.status() == WL_NO_SHIELD)
  {
    Serial.println(F("WiFi shield not present"));
    while (true);
  }

  // 连接网络
  while ( status != WL_CONNECTED)
  {
    Serial.print(F("Connecting to WPA SSID: "));
    Serial.println(ssid);
    
    // 连接WiFi热点
    status = WiFi.begin(ssid, pass);
  }

  Serial.print(F("You're connected to the network, IP = "));
  Serial.println(WiFi.localIP());

  server.begin();

  Serial.print(F("WebServer is @ "));
  Serial.println(WiFi.localIP());

  server.on(F("/"), handleRoot);

  server.on(F("/test.svg"), drawGraph);

  server.on(F("/inline"), []()
  {
    server.send(200, F("text/plain"), F("This works as well"));
  });

  server.onNotFound(handleNotFound);

  server.begin();

  Serial.print(F("HTTP server started @ "));
  Serial.println(WiFi.localIP());
}

void loop()
{
  server.handleClient();
  check\_status();
}

4、运行结果

在这里插入图片描述

文章来源: https://iotsmart.blog.csdn.net/article/details/122806144