私の入門記録であって、入門者向け解説サイトではありません。

機能追加

  • 投稿日:
  • Category:

さらにスケッチに機能追加を行ない、Web側から強制リセットを行なう為のボタンを追加。及び、ポイント切り替え動作中にフォームを disableにし、動作完了までの間は操作出来ないようにした。

[ スケッチ:SRR_Point_System_Ver10 ]

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <SPIFFS.h>
#include <ArduinoJson.h>
// for Servo
#include <ESP32Servo.h>
#include <ServoEasing.hpp>
// for OTA
#include <ESPmDNS.h>
#include <NetworkUdp.h>
#include <ArduinoOTA.h>
// SPIFFS
#include "FS.h"
const char ssid[] = "********";
const char pass[] = "********";
const IPAddress ip(192,168,3,17);
const IPAddress gateway(192,168,1,1);  // デフォルトゲートウェイ
const IPAddress subnet(255,255,255,0);
const int pnt_max = 8;
int rel_pins[pnt_max];  // リレーパラメータ用配列
int srv_pins[pnt_max];  // サーボパラメータ用配列
int srv_deg0[pnt_max];  // サーボL側微調整用配列
int srv_deg1[pnt_max];  // サーボR側微調整用配列
int srv_defo[pnt_max];  // サーボデフォ位置用配列
const int srv_min = 1450;
const int srv_max = 2400;
const int srv_deg = 150;
const int srv_sec = 4000;
const uint32_t BUF_SIZE = 255;  // SPIFFS
String file_name = "/config.json";  // ファイル名の指定
String readStr;
AsyncWebServer server(80);      // ポート設定
// Jsonオブジェクトの初期化
StaticJsonDocument<512> doc;
// ブラウザから受信する変数
const char* command;  // コマンド
uint8_t pnt_number;  // ポイント配置番号
uint8_t pnt_status;  // ポイント状態制御(0=L / 1=R)
// for Servo
ServoEasing servo[pnt_max]; // オブジェクト配列定義
void setup() {
  Serial.begin(115200);
  Serial.println("***** SRR Point System Start *****");
  // SPIFFSのセットアップ
  if(!SPIFFS.begin(true)){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }
  WiFi.config(ip, gateway, subnet);
  WiFi.mode(WIFI_STA);  // for OTA
  WiFi.begin (ssid, pass);
  // for OTA
  while (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.println("Connection Failed! Rebooting...");
    delay(5000);
    ESP.restart();
  }
  ArduinoOTA
    .onStart([]() {
      String type;
      if (ArduinoOTA.getCommand() == U_FLASH) {
        type = "sketch";
      } else {  // U_SPIFFS
        type = "filesystem";
      }
      // NOTE: if updating SPIFFS this would be the place to unmount SPIFFS using SPIFFS.end()
      Serial.println("Start updating " + type);
    })
    .onEnd([]() {
      Serial.println("\nEnd");
    })
    .onProgress([](unsigned int progress, unsigned int total) {
      Serial.printf("Progress: %u%%\r", (progress / (total / 100)));
    })
    .onError([](ota_error_t error) {
      Serial.printf("Error[%u]: ", error);
      if (error == OTA_AUTH_ERROR) { Serial.println("Auth Failed"); }
      else if (error == OTA_BEGIN_ERROR) { Serial.println("Begin Failed"); }
      else if (error == OTA_CONNECT_ERROR) { Serial.println("Connect Failed"); }
      else if (error == OTA_RECEIVE_ERROR) { Serial.println("Receive Failed"); }
      else if (error == OTA_END_ERROR) { Serial.println("End Failed"); }
    });
  ArduinoOTA.begin();
  // 各種情報を表示
  Serial.print("SSID: ");
  Serial.println(ssid);
  Serial.print("AP IP address: ");
  Serial.println(ip);
  server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");
  server.onNotFound(notFound);
  // Read Config
  Serial.println("Config read.");
  if (SPIFFS.exists(file_name)) {  // ファイルが存在すれば
    File fr = SPIFFS.open(file_name.c_str(), "r");  //データ読み込み
    readStr = fr.readStringUntil('\0');  //EOFまで読み出し
    fr.close();
  } else {
    Serial.println("Error : File not found.");
  }
  StaticJsonDocument<512> docjson;
  DeserializationError error = deserializeJson(docjson, readStr);
  if (error) {
    Serial.print(F("deserializeJson() failed: "));
    Serial.println(error.f_str());
    return;
  }
  else {
    for (JsonObject data_item : docjson["data"].as()) {
      int data_item_pnt_number = data_item["pnt_number"];
      rel_pins[data_item_pnt_number] = data_item["rel_pin"];
      srv_pins[data_item_pnt_number] = data_item["srv_pin"];
      srv_deg0[data_item_pnt_number] = data_item["srv_deg0"];
      srv_deg1[data_item_pnt_number] = data_item["srv_deg1"];
      srv_defo[data_item_pnt_number] = data_item["srv_defo"];
    }
  }
  // for Servo
  Serial.println("Initialize start.");
  for(int i =1; i < pnt_max; i++) {
    pinMode(rel_pins[i], OUTPUT); // pinを出力設定に
    pinMode(srv_pins[i], OUTPUT); // pinを出力設定に
    servo[i].attach(srv_pins[i], srv_min, srv_max); // attach(int pin, int min, int max)
    resetPnt(i);  // ResetPoint
  }
  setEasingTypeForAllServos(EASE_CUBIC_IN_OUT); // EASE_LINEAR is default
  // Pointの制御変数の変更リクエスト
  server.on(
    "/post",
    HTTP_POST,
    [](AsyncWebServerRequest * request){},
    NULL,
    [](AsyncWebServerRequest * request, uint8_t *data, size_t len, size_t index, size_t total) {
      String resjson = "";
      for (size_t i = 0; i < len; i++) {
        resjson.concat(char(data[i]));
      }
      Serial.println(resjson);
      DeserializationError error = deserializeJson(doc, resjson);
      if(error){
        Serial.println("deserializeJson() faild");
        request->send(400);
      }
      else{
        command = doc["COMMAND"];
        pnt_number = doc["PNT_NUMBER"];
        pnt_status = doc["PNT_STATUS"];
        // Reset Points
        if (strcmp(command, "reset") == 0) {
          for(int i =1; i < pnt_max; i++) {
            resetPnt(i);
          }
        }
        // Set Point
        if (strcmp(command, "set") == 0) {
          if(pnt_number > 0) {
            if (srv_pins[pnt_number] > 0) servoGo(pnt_number, pnt_status, srv_sec);   // Servo
            if (rel_pins[pnt_number] > 0) relayGo(pnt_number, pnt_status);            // Relay
            command = "";
          }
        }
        request->send(200, "text/plain", "OK"); // Response to xhr
      }
  });
  command = "";
  pnt_number = 0;
  pnt_status = 0;
  // サーバースタート
  Serial.println("Server start.");
  server.begin();
  Serial.println("***** SRR Point System Ready *****");
} // End setup()
void loop() {
  ArduinoOTA.handle();  // for OTA
  delay(100);
} // End loop()
void servoGo(int pnt_number, int pnt_status, int srv_sec) {
  int deg = 0;
  if (pnt_status == 0) { deg = srv_deg0[pnt_number]; }
  else { deg = srv_deg + srv_deg1[pnt_number]; }
  Serial.println(String(pnt_number) + " : deg=" + String(deg));
  servo[pnt_number].setEaseToD(deg, srv_sec);
  synchronizeAllServosStartAndWaitForAllServosToStop();
}
void relayGo(int pnt_number, int pnt_status) {
  if(pnt_status == 0){
    digitalWrite(rel_pins[pnt_number], LOW);
  } else {
    digitalWrite(rel_pins[pnt_number], HIGH);
  }
}
void resetPnt(int pnt_number){
    servoGo(pnt_number, srv_defo[pnt_number], 500);  // initialize
    relayGo(pnt_number, srv_defo[pnt_number]);  // initialize
}
void notFound(AsyncWebServerRequest *request){
  if (request->method() == HTTP_OPTIONS) request->send(200);
  else request->send(404);
}

HTML側も対応したが、同時に JavaScript部を別ファイルへと分離してある。

[ index.html ]

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" charset="UTF-8">
    <title>SRR_Point_System</title>
    <link rel="icon" href="./image/favicon.ico">
    <link rel="stylesheet" type="text/css" href="./style.css">
    <script type="text/javascript" src="./javascript.js"></script>
  </head>
  <body>
    <h1>SRR Point System</h1>
    <div style="margin: 0 20px; padding: 1em; border: solid 1px #aac; width: 500px; height: 200px;">
    <form id="btn_blk">
    <div class="pntblk">
    1:<input type="radio" onclick="send_status('set', parseInt(this.name), 0);" name="1" id="10">L<br>
    1:<input type="radio" onclick="send_status('set', parseInt(this.name), 1);" name="1" id="11">R
    </div>
    <div class="pntblk">
    2:<input type="radio" onclick="send_status('set', parseInt(this.name), 0);" name="2" id="20">L<br>
    2:<input type="radio" onclick="send_status('set', parseInt(this.name), 1);" name="2" id="21">R
    </div>
    <div class="pntblk">
    3:<input type="radio" onclick="send_status('set', parseInt(this.name), 0);" name="3" id="30">L<br>
    3:<input type="radio" onclick="send_status('set', parseInt(this.name), 1);" name="3" id="31">R
    </div>
    <input type="button" value="Reset" onclick="send_status('reset', 0, 0); resetDsp();" name="reset">
    </form>
    </div>
    <div id="btn_msg" style="margin: 0 20px; padding: 1em; border: solid 1px #aac; width: 500px; height: 1em;"></div>
  </body>
</html>

[ javascript.js ]

// json返り値のテンプレート
var json_temp = {
  COMMAND: "",
  PNT_NUMBER: 1,
  PNT_STATUS: 0
}
// 送信ステータス表示
function btn_msg_display(msg_txt, txt_color){
  var id_btn_msg = document.getElementById("btn_msg")
  id_btn_msg.style.color = txt_color;
  id_btn_msg.textContent = msg_txt;
  id_btn_msg.style.visibility ="visible";
}
// タイムスタンプ文字列の作成
function get_time_stamp() {
  var now_time = new Date();
  var now_date = ('000' + now_time.getFullYear()).slice(-4) + '-' + ('0' + (now_time.getMonth() + 1)).slice(-2) + '-' + ('0' + now_time.getDate()).slice(-2);
  var now_time_val = ('0' + now_time.getHours()).slice(-2) + ':' + ('0' + now_time.getMinutes()).slice(-2) + ':' + ('0' + now_time.getSeconds()).slice(-2);
  var time_stamp = now_date + " " + now_time_val + " ";
  return time_stamp;
}
// Pointの状態変更リクエストの送信
function send_status(cmd, pnt, send_status){
  var str_status = cmd;
  if (cmd == "set") {
    str_status += " Point" + pnt + " > ";
    if(send_status == 0) str_status += "L";
    else str_status += "R";
  }
  // 送信コマンド用JSONデータ作成
  var send_json = json_temp;
  send_json.COMMAND = cmd;
  send_json.PNT_NUMBER = pnt;
  send_json.PNT_STATUS = send_status;
  send_json = JSON.stringify(send_json);
  console.log(send_json);
  // リクエストを送信
  var xhr = new XMLHttpRequest()
  xhr.open("POST", "/post", true)
  xhr.setRequestHeader("Content-Type", "application/json")
  xhr.timeout = 5000; // タイムアウト設定(ms)
  formDisable(true);
  xhr.onload = () => {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
      formDisable(false);
    } else {
      console.error(xhr.statusText);
    }
    btn_msg_display(get_time_stamp() + str_status + " : OK", "#00aa00");
  };
  xhr.onerror = () => {
    btn_msg_display(get_time_stamp() + str_status + " : NG", "#ff0000");
  };
  xhr.ontimeout = () => {
    btn_msg_display(get_time_stamp() + str_status + " : TIMEOUT", "#ff0000");
  };
  xhr.send(send_json)
}
async function fetchFunc() {
  try {
    const res = await fetch("./config.json");
    if (!res.ok) {
      throw new Error("fetch failure");
    }
    const jdata = await res.json();
    return jdata;
  } catch (error) {
    console.error("fetchFunc error:", error);
  }
}
function resetDsp() {
  fetchFunc().then((data) => {
    let pnt_max = data["data"].length;
    for (let i = 0; i <= pnt_max-1; i++) {
      const pt = data["data"][i]["pnt_number"];  // ポイント番号取得
      const lr = data["data"][i]["srv_defo"];    // デフォルト方向取得
      let element = document.getElementById(String(pt) + String(lr));
      if(element) element.checked = true;
    }
  });
}
function formDisable(flag) {
  let formObj = document.getElementById("btn_blk");
  num = formObj.elements.length; //要素の数の取得
  for (i=0; i<num; i++) formObj.elements[i].disabled = flag;
}
window.onload = function() {
  resetDsp();
}
index20240308.png

検証動作状況の動画を上げておく。ポイント2は、R側を定位とした。現在サーボモーターの手持ちが 2個しかないので、3つ目のポイントはリレーのみ回路に入れてある。