简介
大家好今天给大家分享一款超级小的开发板，来自Seeed studio的ESP32C3小开发板。 那么具体由多小呢？我们来看一下下图的对比。左侧是一块正常大小的来自某宙的Esp32c3, 第二个便是我们今天的主角ESP32C3-XIAO。为了方便大家直观的观察到底有多小。这边放上了一个矿泉水的瓶盖。实际上它连矿泉水瓶盖大都没有。
下图为实际焊接好排针的样子
由于这个开发板实在是太小了，所以它的射频天线使用了外部引出的方式。
不过麻雀虽小，五脏俱全。除去5V，GND 和 3V3，它一共由11个可用的IO。 包括Analog, I2C, UART 和 SPI等。它具备400KB的Sarm 和 4MB的板载Flash 用于程序的烧录和存储。下图为具体的参数信息等。
环境搭建和Web服务构建
在我们已经对Xiao 开发板充分了解之后，我们便可以来搭建开发环境和基于官方的教程自己来构建一个Web的页面。
1- 首先我们打开Arduino，在首选项开发板管理器地址处添加Xiao的支持。
https: //raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_dev_index.json
接下来我们便可以在开发板管理器中找到ESP32C3-XIAO的支持
我们来尝试烧录一个blink的demo来验证环境是否正确配置成功。
// define led according to pin diagram in article
const int led = D10; // there is no LED_BUILTIN available for the XIAO ESP32C3.
void setup() {
// initialize digital pin led as an output
pinMode(led, OUTPUT);
}
void loop() {
digitalWrite(led, HIGH); // turn the LED on
delay(1000); // wait for a second
digitalWrite(led, LOW); // turn the LED off
delay(1000); // wait for a second
}LED正常点亮无误。 不过由于开发板过于小， 所以这个LED需要外接在D10 PIN上。
接着我们来尝试根据官方的教程来搭建一个WEB服务。首先让我们连接上WIFI
#include <WiFi.h>
const char* ssid = "你的WIFI名称";
const char* password = "你的WIFI密码";
void WiFiConnect(void)
{
WiFi.begin(ssid, password);
Serial.print("Connecting to ");
Serial.println(ssid);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
}
void setup()
{
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFiConnect();
}
void loop()
{
}此时我们即可正常获取到路由器分配的IP地址。
接下来我们来构建一个Server ， 使其在局域网内的其他设备可以放到到当前提供的服务。
WiFiServer server(80); WiFiClient client1;
接着定义80端口将向外提供的服务页面数据。
const char html_page[] PROGMEM = {
"HTTP/1.1 200 OK\r\n"
"Content-Type: text/html\r\n"
"Connection: close\r\n" // the connection will be closed after completion of the response
//"Refresh: 1\r\n" // refresh the page automatically every n sec
"\r\n"
"<!DOCTYPE HTML>\r\n"
"<html>\r\n"
"<head>\r\n"
"<meta charset=\"UTF-8\">\r\n"
"<title>Cloud Printer: ChatGPT</title>\r\n"
"<link rel=\"icon\" href=\"https://files.seeedstudio.com/wiki/xiaoesp32c3-chatgpt/chatgpt-logo.png\" type=\"image/x-icon\">\r\n"
"</head>\r\n"
"<body>\r\n"
"<img alt=\"SEEED\" src=\"https://files.seeedstudio.com/wiki/xiaoesp32c3-chatgpt/logo.png\" height=\"100\" width=\"410\">\r\n"
"<p style=\"text-align:center;\">\r\n"
"<img alt=\"ChatGPT\" src=\"https://files.seeedstudio.com/wiki/xiaoesp32c3-chatgpt/chatgpt-logo.png\" height=\"200\" width=\"200\">\r\n"
"<h1 align=\"center\">Cloud Printer</h1>\r\n"
"<h1 align=\"center\">OpenAI ChatGPT</h1>\r\n"
"<div style=\"text-align:center;vertical-align:middle;\">"
"<form action=\"/\" method=\"post\">"
"<input type=\"text\" placeholder=\"Please enter your question\" size=\"35\" name=\"chatgpttext\" required=\"required\"/>\r\n"
"<input type=\"submit\" value=\"Submit\" style=\"height:30px; width:80px;\"/>"
"</form>"
"</div>"
"</p>\r\n"
"</body>\r\n"
"<html>\r\n"
};定义几个变量用于存储数据信息。
String json_String = ""; // JSON 数据的字符串 String dataStr; // 存储 HTTP 方法 int dataStart; // 存储数据起始位置 String chatgpt_Q; // 存储用户提交的问题
在Setup中调用Server.beign() 来启动80服务。
void setup()
{
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFiConnect();
server.begin();
}在loop中来发送服务的内容，即上述定义的字符串信息，同时接收用户的输入。
void loop() {
client1 = server.available();
if (client1) {
Serial.println("New Client.");
boolean currentLineIsBlank = true;
while (client1.connected()) {
if (client1.available()) {
char c = client1.read();
json_String += c;
if (c == '\n' && currentLineIsBlank)
{
dataStr = json_String.substring(0, 4);
Serial.println(dataStr);
if (dataStr == "GET ")
{
client1.print(html_page);
} else if (dataStr == "POST")
{
json_String = "";
while (client1.available())
{
json_String += (char)client1.read();
}
Serial.println(json_String);
dataStart = json_String.indexOf("chatgpttext=") + strlen("chatgpttext=");
chatgpt_Q = json_String.substring(dataStart, json_String.length());
Serial.println("User Question: " + chatgpt_Q);
client1.print(html_page);
delay(10);
client1.stop();
}
json_String = "";
break;
}
if (c == '\n')
{
currentLineIsBlank = true;
} else if (c != '\r')
{
currentLineIsBlank = false;
}
}
}
}
}这个插入代码的功能不是很好用，我已经尽力的格式化了。
此时将程序烧录到开发板中之后，我们访问ESP32C3-XIAO的地址即可获取到这个WEB页面。
同时当用户在页面的Input中输入数据后，开发板也可以正确的获取到用户的输入。
到这里，网页的部署完成了。 那么在下一个章节中，我将演示如何将这个开发板接入到ChatGPT来实现问答。
附件
我要赚赏金
STM32
MCU
通讯及无线技术
物联网技术
电子DIY
板卡试用
基础知识
软件与操作系统
我爱生活
小e食堂
