ESP32をWebサーバーにして測定した電圧を表示する
ESP32で計測した値をHTTPを使ってスマホやパソコンに表示してみたいと思います。💪
本当は温度センサなんかあると良いんだろうけど、持ってないなのでESP32のA/Dコンバータで電圧を計測してその値をwebで表示させてみようと思います。😃
ESP32のA/Dですが、色々あるようで詳しくはスイッチサイエンスさんのページを参考にしてください。今回はwifiを使用しますのでADC2を使用しているピンは使えないとのことです。
まずはA/Dのテストプログラムから。
いや〜楽ですね。analogRead（）でA/Dが出来ちゃいます。
A/Dの使い方はいつかPICか何か使って解説しますね。
とりあえず、A/Dに３.３V入れたら4095が出てきました。🧐
const int led = 4;
int sensorPin = A7; // select the input pin for the potentiometer
int sensorValue = 0; // variable to store the value coming from the sensor
void setup() {
Serial.begin(115200);
pinMode(led, OUTPUT);
digitalWrite(led, 1);
sensorValue = analogRead(sensorPin);
Serial.printf("analog = %d\n",sensorValue);
}
void loop() {
// put your main code here, to run repeatedly:
sensorValue = analogRead(sensorPin);
Serial.printf("analog = %d\n",sensorValue);
delay(1000);
}参考までに回路も載せておきます。
実際の写真、ぐちゃぐちゃですが😅
今回はA7（IO35)に接続しました。電圧は可変抵抗を入れて変えられるようにしました。
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>
const char* ssid = "your ssid";
const char* password = "your password";
WebServer server(80);
const int led = 4;
int sensorPin = A7; // select the input pin for the potentiometer
int sensorValue = 0; // variable to store the value coming from the sensor
void handleRoot() {
float voltage;
digitalWrite(led, 1);
sensorValue = analogRead(sensorPin);
voltage = 3.3/4096 * (float)sensorValue;
Serial.printf("analog = %d\n",sensorValue);
String mes = "\
<html lang=\"ja\">\n\
<meta charset=\"utf-8\">\n\
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\
<head>\n\
<meta http-equiv=\"Refresh\" content=\"60\">\n\
<title>ADValue</title>\n\
</head>\n\
<body style=\"font-family: sans-serif; background-color: #e0ffff ;\" >\n\
<h1>アナログ電圧値 "
+ String(voltage)
+ " [V]</h1>\n\
</body>\n\
</html>\n";
server.send(200, "text/html", mes);
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("esp32")) {
Serial.println("MDNS responder started");
}
server.on("/", handleRoot);
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
server.handleClient();
}電圧はA/Dの結果を上記の式で電圧値に変換します。
sensorValue = analogRead(sensorPin);
voltage = 3.3/4096 * (float)sensorValue;httpのアクセスがあった場合、下記のHTMLを送信してブラウザに電圧値を送信します。下記のHTMLですが、「\」は続き「\”」は「”」「\n」は改行です。
表示したい値をString(voltage)で文字列に変換して、＋演算子で文字列をつないでHTMLを作成しています。
String mes = "\
<html lang=\"ja\">\n\
<meta charset=\"utf-8\">\n\
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\
<head>\n\
<meta http-equiv=\"Refresh\" content=\"60\">\n\
<title>ADValue</title>\n\
</head>\n\
<body style=\"font-family: sans-serif; background-color: #e0ffff ;\" >\n\
<h1>アナログ電圧値 "
+ String(voltage)
+ " [V]</h1>\n\
</body>\n\
</html>\n";ブラウザーからのESP32へのアクセスはmDNSが組み込んであるので『http://esp32.local/』でアクセスします。
今回はRaspberryPiでアクセスしました！
httpなのでスマホのブラウザからもアクセス出来ます。
さらに今回HTMLの中に下記の一文を追加してあるので、１分に１回httpがリロードされて、電圧値が更新されます。
<meta http-equiv=\"Refresh\" content=\"60\">\n\リアルタイムで計測値を見なければいけない場合にはちょっと使えませんが、何か監視するような場面であれば使えそうです。
しかし、これもローカルな環境で仕組みなのでルータ内での使用になりますね。
では🤚
この記事が気に入ったらサポートをしてみませんか？