（なんちゃって）小型気象台が出来上がった！

２０２３／０２／２８（火曜日）　晴れ

 

２月の中頃から工作を始めた「（なんちゃって）小型電子気象台」がようやく出来上がりました。

実は「（なんちゃって）小型電子気象台」の工作は２度目です。

先代の（なんちゃって・・・）は先日動かしてみたら表示がおかしくなって使えませんでした。

オイらは気圧の変化などを観測するのを面白いと思っていますので、直そうとしましたが、

諸先輩方の作品を真似して作りあげたものなので不良個所などがわからなくて直せませんでした。

そこでＷｅｂシステムの動作を勉強しながら２代目を作ることにして工作を始めたのですが・・・

やっぱり難しい・・・実習大好き・学科苦手の実習生には難しかったです。

「何で動かないんだろう？」「どうして文字化けするんだろう？」「計算値がちがうなぁ？」

やっぱり学科が大事です・・・Ｗｅｂサイトには参考記事がいっぱい掲載されていました。

おぉー、こうすればいいのかぁ！　ありがとっ！！！　真似、真似、真似のオンパレードだけど

子供は親の真似を・・・生徒は先生の真似を・・・後輩は先輩の真似を・・・弟子は師匠の真似を

こうやって成長していくんだからね。（八十の手習いのオイらはまだ成長過程です・・・）

二月も今日でおしまい。　何とか完成させたいと頑張りました。

 

昨日も夜遅くまで頑張りましたが、うまく動きません。

 

今朝も早くから頑張りました。

データが正しく表示されるようになりました。

 

センサーをドライヤーで温めて出力を変化させました。

　

 

ドライヤーもこんな時にしか使わなくなってしまった・・・寂しいねぇ

　

 

開始時データと現在データが一致したときは「＝」マークになる。

これがどうしても狂ってた。・・・

データ型をｉｎｔに統一して処理したら解決しました。　やれやれ・・・

 

 

テストの様子の動画です。

データの収集は１分間隔で行います。

Ｗｅｂ画面は「更新」ボタンをクリックしたら新しいデータに変化します。

定期的に自動で「更新」ボタンをクリックするようにできればいいのにねぇ・・・

（「オートクリッカー」とかいうものがあるらしい・・・ゲームで使うらしい。）

それもいつか実験してみます。

 

プログラムは文字数が多くてアップできませんでした。

　えっ、「そんな変なプログラムは見たくないよ」ですってぇ・・・

 

ごもっとも。　おっしゃるとおりです。　もう少し勉強してからご報告いたします。

これで「（なんちゃって）小型電子気象台」工作を完了といたします。

皆さま、いろいろ応援ありがとうございました。

ＡＲＤＵＩＮＯのお勉強

２０２３／０２／２４（金曜日）　曇り夕方から雨

 

学科苦手、実習大好きの実習生・・・

これはもう何十年も前のこと、車の免許を取得するために自動車学校に通ったときのことです。
学科授業は後回しにして運転実習ばかり受けていました。
ある日のこと、教官から「〇〇さん、学科授業も頑張ってくださいねっ。仮免試験が近づいて
いますよっ！」と注意を受けました。

「ハーイ、頑張りますぅー」と返事してうなだれていました。　ほんと、学科は苦手でした。
でも何とか卒検、本免は一発でＯＫ！（えっへん・・（ちょっと威張ってる（バカだねぇ、笑い）））

こんな調子で今でも学科苦手・実習大好きの実習生を続けてます。　

閑話休題

実習大好きでもやぱり学科もしっかりやらなきゃだめだよねぇ・・・（分かってます。）

前回の気象システムでは観測時刻を記録するための時計の時間パルスを単なるダミー（delay)
で調整したため、他の処理時間の長短で狂いを生じて使い物になりませんでした。
そこで今回はもうちょっと工夫（お勉強）して正確な時間パルスを使うことにしました。

苦手なお勉強・・・

 

ふーん、なるほど・・・

 

てなわけでこんなプログラムを組み込みました。

何とか正確な感じでＬＥＤは点滅しています。
そんな実験の様子を動画でご覧ください。

 

 

タイマーの動作をＡＲＤＵＩＮＯのモニターで確認してみました。

 

サーバー（マイコン）のタイマープログラムは大体正確に１秒間隔でＯＮ、ＯＦＦを出力して
います。　このＯＮ、ＯＦＦで黄色ＬＥＤが点滅しています。

Ｗｅｂ画面（クライアント）の「更新」ボタンをクリックすると、サーバーにリクエストを
送信し、サーバーの動作により更新されたＨＴＭＬがレスポンスされてきます。
更新されたＨＴＭＬを受信したクライアントは画面を更新し、ボタンの色を変化させます。

その動作をＡＲＤＵＩＮＯのモニターに表示させたデータです。

「***** OFF 」はタイマプログラムが「１秒経過」を検出して表示したものです。

「***** ON  」はその後「１秒経過」を検出して表示したものです。

タイマプログラムは以降これを繰り返し、１秒間隔で「***** ON」「***** OFF」を表示します。

一方、Ｗｅｂ画面上の「更新」ボタンをクリックすると、サーバーとのやり取りが始まり、
「ＬＥＤ青点灯」、「ＬＥＤ赤点灯」を表示させます。

このクリックは手動で行いますので不規則な動作となります。
また動作処理にはちょっと時間がかかります。
ここでの処理は単純なものでわずかの時間しかかかりませんから１秒間でも大丈夫ですが、処理が重い
場合は影響が出るかもしれません。

 

 

気象観測では秒単位で観測することはないでしょう。
分単位でも十分ですから、誤差の無い（少ない）時計ができると思います。

次は時計プログラムの工作です。　応援をよろしくお願いします。

 

ボタンをクリックする都度、ボタンの色を変える実習

２０２３／０２／２３（木曜日）　曇りのち晴れ

マイコン（ＥＳＰ３２）に気温、気圧、湿度を測るセンサー（ＢＭＥ２８０）を取り付けて
気象状況を観察するシステム？を作ろうと思って工作をしています。

センサーが計測したデータはパソコンのＷｅｂ画面に表示します。
Ｗｅｂ画面に画像に文字などを表示するのにはＨＴＭＬを使用します。
以前、画面に表示されたカウンターをボタンをクリックすることで増減させるＨＴＭＬを
作ったことがありますが、諸先輩方の資料を参考にしながら見様見真似で作ったので
その仕組みは良く理解できていませんでした。
そこで今回はＨＴＭＬのことを少しでも理解できるようにと、実習しています。

Ｗｅｂのサーバーとクライアントの間ではクライアントの「リクエスト」に対して
サーバーがクライアントの要求を処理して結果を「レスポンス」で回答するという方式で、
やりとりしています。（ということらしい・・・なるほど。）

クライアントが「これをやってね」というリクエストを出すきっかけは画面上に表示された
「選択項目」をマウス・ボタンでクリックするというのが普通でしょう。
今回も「更新」というボタンをクリックするとサーバーはセンサーから気温などのデータを
読みだしてクライアントに答えるようにします。

ボタンをクリックしたらボタンが「凹んで」押された状態になるようにしてみたいのですが
どうしたらいいかわかりません。
そこで単純にボタンの「色」が変わるようにしてみました。
これはボタンの色を指定しているＨＴＭＬのデータを変更すればいいのでなとかなりそうです。

ところがやってみると難しかった・・・あれこれ試行錯誤を繰り返してやっとできました。

その実験の様子を動画でご覧ください。

 

 

さぁー、次は時計の計数をなるべく正確にできるようにしなくては・・・
以前工作した時計では基準の１秒を単純な方法で作ったので、他の処理にかかった
時間の影響をもろに受けて誤差が大きかったです。
これも難しそう・・・でも頑張ります。　応援をよろしくお願いします。

 

 

 

新らしい気象観測システム？はこんな感じに・・・

２０２３／０２／２１（火曜日）　晴れ

以前、Ｗｅｂシステムの勉強のために作った画面に表示されたカウンターをアップ、ダウンさせる
プログラムを改造してセンサーの出力を表示する実験をしてみた。
これによってＷｅｂプログラムの動作を少しは理解できるようになった。（つもりです・・・）

そこで、新しい「（なんちゃって）小型気象台」の設計を始めた。
しかしなかなか難しい・・・参考書を読んでもそのとおりにはいかない。　
どうしてだろう？　参考書が古いのかな？　（実習生はすぐ他人のせいにするんですよぉー）
サイトにアップされた参考記事を参考にしながら悪戦苦闘の末、こんな画面をデザインしました。

 

 

 

画面に表示された現在データーは「更新」ボタンをクリックするとその時点のデータに
書き換えられます。

そして、測定開始時点に記録されたデーターと比較されて上昇したか、下降したか、
変化なしかを判定して「↑」「↓」「=」を表示します。

「更新」ボタンが押されるまではデーターは更新されません。
これを一定間隔で自動的に「更新」できるようにしたいのですがそれは難しそうです。
その他にも「測定日付け」「時刻」の入力も難しそう・・・

完成までにはまだまだ時間がかかるでしょう。
でも毎日が日曜日の実習生には時間はたっぷりあります。
（「時間」はたっぷりですけど・・・肝心の「？？？」はスズメの涙・・・（カナシぃーっ）

挫折しないようにがんばります。　応援をよろしくお願いします。

 

 

Ｗｅｂアクセス実験 カウンタＵＰ・ＤＯＷＮ改造

２０２３／０２／１９（日曜日）　

今日は日曜日だ。　でも毎日が日曜日の年金暮らしには平日も休日も区別はない。
今朝も早くから「お仕事」に励んでいる。

先日、久しぶりに動作させた「（なんちゃって）小型電子気象台」が動作不良になってしまった。
パソコンに表示された観測データが表示されない。　画面も乱れている。

 

修理しなくては・・・とプログラムの確認をしたが、諸先輩方のプログラムを切り張りして
何とか作り上げたシステムは何が何だかさっぱりわからない。
うーん、もう一度、Ｗｅｂの基本から勉強しなくてはダメだ・・・

以前、マイコンサーバーにＷｉＦｉ接続してパソコン（クライアント）に表示されたカウンタ
を増減させるプログラムを組んだことがある。
これは簡単なプログラムだからこれを参考にして勉強し直そう。

 

マイコンは先日購入したＥＳＰ３２－ＷＲＯＶＥＲにしてみる。

Ｗｅｂシステムのサーバーとクライアントのやり取りはこんな風になっている（？？？）。

試行錯誤を繰り返してなんとか動作するプログラムができた。

赤、青、黄のボタンと　それが押されるたびに数値が加減算されるカウンター、
センサー（ＢＭＥ２８０）の測定結果が表示される。
この画面は初期画面なのでデータは０になっている。

 

ボタンをクリックすると、そのボタンの情報を添えてサーバーにリクエストする。
サーバーはリクエストに対応してプログラムで処理した結果でＨＴＭＬを更新し、
クライアントに送信する。

クライアントは画面が更新されて新しいデータが表示される。

 

何とか仕組みの理解はできた。

こんなへぼいプログラムですがこんなものです。

 

//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");
}

 

この画面をもうちょっと見栄え？が良いように工夫したいけど・・・無理かな？！

 （続く）