２０２３／０２／１９（日曜日）
今日は日曜日だ。 でも毎日が日曜日の年金暮らしには平日も休日も区別はない。
今朝も早くから「お仕事」に励んでいる。
先日、久しぶりに動作させた「（なんちゃって）小型電子気象台」が動作不良になってしまった。
パソコンに表示された観測データが表示されない。 画面も乱れている。
修理しなくては・・・とプログラムの確認をしたが、諸先輩方のプログラムを切り張りして
何とか作り上げたシステムは何が何だかさっぱりわからない。
うーん、もう一度、Ｗｅｂの基本から勉強しなくてはダメだ・・・
以前、マイコンサーバーにＷｉＦｉ接続してパソコン（クライアント）に表示されたカウンタ
を増減させるプログラムを組んだことがある。
これは簡単なプログラムだからこれを参考にして勉強し直そう。
マイコンは先日購入したＥＳＰ３２－ＷＲＯＶＥＲにしてみる。
Ｗｅｂシステムのサーバーとクライアントのやり取りはこんな風になっている（？？？）。
試行錯誤を繰り返してなんとか動作するプログラムができた。
赤、青、黄のボタンと それが押されるたびに数値が加減算されるカウンター、
センサー（ＢＭＥ２８０）の測定結果が表示される。
この画面は初期画面なのでデータは０になっている。
ボタンをクリックすると、そのボタンの情報を添えてサーバーにリクエストする。
サーバーはリクエストに対応してプログラムで処理した結果でＨＴＭＬを更新し、
クライアントに送信する。
クライアントは画面が更新されて新しいデータが表示される。
何とか仕組みの理解はできた。
こんなへぼいプログラムですがこんなものです。
//ESP32 WebServerクラスを使ったWiFi経由カウンタ・アップ、ダウン
//BME280 センサー動作組み込み
#include <WiFi.h>
#include <WebServer.h>
//------------ＢＭＥ２８０設定-------------------------
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
Adafruit_BME280 bme;
float temp;
float pressure;
float humid;
//---------ＷｉＦｉ設定 （親機）------------------------
const char* ssid = "XXXXXXXXXX";
const char* passwd = "XXXXXXXXXXXXX";
//WebServer設定
WebServer server(80); //ポート番号
//--------------------------------------------------
const int led1= 12;
const int led2 = 14;
const int led3 = 13;
int counter1=0;
int counter2=0;
int counter3=0;
//-------------------------------------------------
void setup() {
Serial.begin(115200); //115200bpsで指定
pinMode(led1, OUTPUT);
digitalWrite(led1, LOW);
pinMode(led2,OUTPUT);
digitalWrite(led2,LOW);
pinMode(led3,OUTPUT);
digitalWrite(led3,LOW);
//-----------------BME280 -------------------------
bool status;
status = bme.begin(0x76);
while(!status){
Serial.println("BME280 sensor NOT USE");
delay(1000);
}
//--------ＷｉＦｉ接続------------------------------
WiFi.begin(ssid, passwd);
while (WiFi.status() != WL_CONNECTED) {
delay(300);
Serial.print(".");
}
//------ 接続ＵＲＬ表示-----------------------------
Serial.println("");
Serial.println("WiFi Connected");
Serial.print("IP Address = ");
Serial.println(WiFi.localIP());
//--------serverアクセス時の処理関数指定---------------
server.on("/", handledatasend);
server.onNotFound(handleNotFound);
server.begin(); //WebServerを起動、
}
void loop() {
server.handleClient();
}
//-------serverアクセスの処理関数-------------
void handledatasend() {
// POSTで受信した場合、以下を実行
if (server.method() == HTTP_POST)
{
if (server.arg("BOTAN1")==("1")){
digitalWrite(led1, HIGH); //LED ON
counter1 += 1;
}
else if (server.arg("BOTAN1")==("2")){
digitalWrite(led1, LOW); //LED OFF
counter1 -= 1;
}
if (server.arg("BOTAN1")==("3")) {
digitalWrite(led2, HIGH);
counter2 += 1;
}
else if (server.arg("BOTAN1")==("4")){
digitalWrite(led2, LOW);
counter2 -= 1;
}
if (server.arg("BOTAN1")==("5")){
digitalWrite(led3, HIGH);
counter3 += 1;}
else if (server.arg("BOTAN1")==("6")){
digitalWrite(led3, LOW);
counter3 -= 1;
}
//-----------------------ＢＭＥ２８０ 追加------------------------------
temp=bme.readTemperature();
pressure=bme.readPressure() / 99.3F;
humid=bme.readHumidity();
Serial.print("COUNTER-1 = ");
Serial.print(counter1);
Serial.print(" 温度 ;");
Serial.print(temp);
Serial.println(" °C");
// Serial.print(",");
Serial.print("COUNTER-2 = ");
Serial.print(counter2);
Serial.print(" 気圧 ;");
Serial.print(pressure);
Serial.println(" hPa");
// Serial.print(",");
Serial.print("COUNTER-3 = ");
Serial.print(counter3);
Serial.print(" 湿度 ;");
Serial.print(humid);
Serial.println(" %");
Serial.println();
delay(100);
}
String html;
//HTML記述
html = "<!DOCTYPE html>";
html += "<html lang='ja'>";
html += "<meta charset=\"utf-8\">";
html += "<meta name=\"viewport\" content=\" width=device-width, initial-scale=1.0\">";
html += "<head>";
// html += "<title>omoroya Lesson 06</title>";
html += "<title>ZISSYUSEI-01</title>";
html += "</head>";
html += "<body BGCOLOR=#d0d0d0>";
// html += "<CENTER>";
html += "<font size='5'><FONT COLOR=#000000><big> 実習生Ｗｅｂ実習</FONT></big>";
html += "<p>";
html += "<form action='' method='post'>";
html += " ";
html += "<button type='submit' name='BOTAN1' value='1'";
html += " style='background:red;color:white;'/>"; //OK
html += "<FONT SIZE='4'><FONT COLOR=#FFFFFF><big> ＋ <big></FONT></button>";
html += " ";
html += "<button type='submit' name='BOTAN1' value='2'";
html += " style='background:#8b0000;color:white;'/>";
html += "<FONT SIZE='4'><FONT COLOR=#FFFFFF><big> － <big></FONT></button>";
html += "</form>";
html += "<FONT SIZE='5'><FONT COLOR=red><B> カウンタＡ ＝ "+String(counter1)+" </B></FONT>";
html += "</p>";
html += "<P>";
html += "<form action='' method='post'>";
html += " ";
html += "<button type='submit' name='BOTAN1' value='3'";
html += " style='background:blue;color:white;'/>"; //OK
html += "<FONT SIZE='4'><FONT COLOR=#FFFFFF><big> ＋ <big></FONT></button>";
html += " ";
html += "<button type='submit' name='BOTAN1' value='4'";
html += " style='background:#00008b;color:white;'/>";
html += "<FONT SIZE='4'><FONT COLOR=#FFFFFF><big> － <big></FONT></button>";
html += "</form>";
html += "<FONT SIZE='5'><FONT COLOR=blue><B> カウンタＢ ＝ "+String(counter2)+" </B></FONT>";
html += "</p>";
html += "<P>";
html += "<form action='' method='post'>";
html += " ";
html += "<button type='submit' name='BOTAN1' value='5'";
html += " style='background:#ffff00;color:white;'/>"; //OK
html += "<FONT SIZE='4'><FONT COLOR=#000000><big> ＋ <big></FONT></button>";
html += " ";
html += "<button type='submit' name='BOTAN1' value='6'";
html += " style='background:#bbbb00;color:white;'/>";
html += "<FONT SIZE='4'><FONT COLOR=#ffffff><big> － <big></FONT></button>";
html += "</form>";
html += "<FONT SIZE='5'><FONT COLOR=black><B> カウンタＣ ＝ "+String(counter3)+" </B></FONT>";
html += "</p>";
//------------------------------------------------------------------------------
html += "<BR><BR>";
html += "<FONT SIZE='6'><FONT COLOR=RED><B> 気 温 "+String(temp)+" ℃</B></FONT>";
html += "<BR><BR>";
html += "<FONT SIZE='6'><FONT COLOR=BLUE><B> 気 圧 "+String(pressure)+" hpa</B></FONT>";
html += "<BR><BR>";
html += "<FONT SIZE='6'><FONT COLOR=black><B> 湿 度 "+String(humid)+" ％</B></FONT>";
html += "<BR><BR>";
//------------------------------------------------------------------------------
// html += "</CENTER>";
html += "</body>";
html += "</html>";
html + "";
server.send(200, "text/html", html);
}
//存在しないアドレスへアクセスしたときの処理関数
void handleNotFound(void) {
server.send(404, "text/plain", "Not Found");
}
この画面をもうちょっと見栄え？が良いように工夫したいけど・・・無理かな？！
（続く）
