ESP32でArduinoからWebserverを立ち上げてLEDの連続点滅を制御したいです。

前提・実現したいこと

ESP32でWebserverを立ち上げてLEDを点滅させたいと考えています。
その際、スライダーを使って点滅間隔を変更したいです。

発生している問題・エラーメッセージ

スライドバーを動かすと、スライドの秒数間隔でLEDが点滅するのですが、点滅が一回限りで終わってしまいます。恐らく、ループさせる処理が必要なのですが、どう書けば良いか分かりません。
これをスライドバーを動かした後、そのスライドバーの数値の秒数で連続して点滅をして欲しいです。
現状：スライドバーを動かす→そのスライドバーの時間でLEDが一回だけ点滅する→別の値にスライドバーを動かす→その時間でLEDが一回だけ点滅・・・・・・
**実現したいこと：スライドバーを動かす→そのスライドバーの時間でLEDを連続で点滅させる→別の値にスライドバーを動かす→その時間でLEDを点滅させる・・・・・・
**

該当のソースコード

Arduino
1#include <WiFi.h>
2
3// 使用するWi-Fiとそのパスワードに書き換えてください
4const char* ssid     = "myWifi";
5const char* password = "myPassword";
6
7// ポート80番を使用
8WiFiServer server(80);
9
10// HTTPリクエストを格納する変数
11String header;
12
13// 値の設定に使用する変数
14String valueString = String(5);
15int pos1 = 0;
16int pos2 = 0;
17
18
19void setup() {
20  //led setting
21  //R
22  pinMode(13, OUTPUT);
23
24  Serial.begin(115200);
25
26  // Wi-Fiに接続
27  Serial.print("Connecting to ");
28  Serial.println(ssid);
29  WiFi.begin(ssid, password);
30  while (WiFi.status() != WL_CONNECTED) {
31    delay(500);
32    Serial.print(".");
33  }
34  // ローカルIP表示
35  Serial.println("");
36  Serial.println("WiFi connected.");
37  Serial.println("IP address: ");
38  Serial.println(WiFi.localIP());
39  server.begin();
40}
41
42void loop() {
43  WiFiClient client = server.available();   // Listen for incoming clients
44
45  if (client) {                             // If a new client connects,
46    Serial.println("New Client.");          // print a message out in the serial port
47    String currentLine = "";                // make a String to hold incoming data from the client
48    while (client.connected()) {            // loop while the client's connected
49      if (client.available()) {             // if there's bytes to read from the client,
50        char c = client.read();             // read a byte, then
51        Serial.write(c);                    // print it out the serial monitor
52        header += c;
53        if (c == '\n') {                    // if the byte is a newline character
54          // if the current line is blank, you got two newline characters in a row.
55          // that's the end of the client HTTP request, so send a response:
56
57          if (currentLine.length() == 0) {
58            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
59            // and a content-type so the client knows what's coming, then a blank line:
60            client.println("HTTP/1.1 200 OK");
61            client.println("Content-type:text/html");
62            client.println("Connection: close");
63            client.println();
64
65            // Display the HTML web page
66            client.println("<!DOCTYPE html><html>");
67            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>ESP32 RGB LED controller</title>");
68            client.println("<link rel=\"icon\" href=\"data:,\">");
69            // CSS to style the on/off buttons
70            // Feel free to change the background-color and font-size attributes to fit your preferences
71            client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial; margin-left:auto; margin-right:auto;}");
72            client.println("#servoPosR{color: red;}");
73            client.println(".slider { width: 300px; }</style>");
74            client.println("<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>");
75
76            // Web Page
77            client.println("</head><body><h1></h1>");//ESP32 with LED
78
79            //R slide bar
80            //id=\"servoSliderR\" idがバーの値を取得するための変数、servoSliderRがバーの値
81            //onchangeの属性に値をESP32へ送信するservo() 関数を指定、スライドバーの値が変わったらservo()関数が実行
82            client.println("<p>Release time: 0.<span id=\"servoPosR\"></span>s</p>");
83            client.println("<input type=\"range\" min=\"0\" max=\"100\" class=\"slider\" id=\"servoSliderR\" onchange=\"servo(this.value,'R')\" value=\"" + valueString + "\"/>");
84
85            client.println("<script>");
86            //send R value
87            //スライダーの要素をsliderRに、スライダーの上にある値を表示する要素をservoPRに入れる
88            //servoPRの値をsliderRの値に変更
89            //ライダーが変更された時に起こるsliderR.oninputを設定。sliderRの値をinputの値（this.value)に、そしてその値をservoPRの値にも入れ込み表示
90            client.println("var sliderR = document.getElementById(\"servoSliderR\");");
91            client.println("var servoPR = document.getElementById(\"servoPosR\"); servoPR.innerHTML = sliderR.value;");
92            client.println("sliderR.oninput = function() { sliderR.value = this.value; servoPR.innerHTML = this.value; }");
93
94            //HTTP getのための関数 スライダーの値を送る
95            client.println("$.ajaxSetup({timeout:1000}); function servo(pos,color) { ");
96            client.println("$.get(\"/?value\" + color + \"=\" + pos + \"&\"); {Connection: close};}</script>");
97
98            client.println("</body></html>");
99
100
101            //HTTPリクエストの処理部分
102            if(header.indexOf("GET /?valueR=") >= 0) {
103            client.println("</body></html>");
104            pos1 = header.indexOf('=');
105            pos2 = header.indexOf('&');
106            valueString = header.substring(pos1 + 1, pos2);
107            Serial.println(valueString);
108            digitalWrite(13, HIGH);
109            delay(valueString.toInt() * 10);
110            digitalWrite(13, LOW);
111            delay((100 - valueString.toInt()) * 10);
112
113          }
114
115          // HTTPレスポンスの終了
116          client.println();
117          // Break out of the while loop
118          break;
119        } else {
120          currentLine = "";
121        }
122      } else if (c != '\r') {
123        currentLine += c;
124      }
125
126    }
127  }
128  // Clear the header variable
129  header = "";
130  // 接続を切断
131  client.stop();
132  Serial.println("Client disconnected.");
133  Serial.println("");
134}
135}

試したこと

おそらくスライダーをHTMLで表示、その後スライダーの値をHTTP GETで送り、HTTPリクエストをESP32側で処理してLチカを行う流れの部分をループさせるのでしょうが、そのやり方がわかりません。初歩的なことだと思いますがご回答していただけるとありがたいです。

補足情報（FW/ツールのバージョンなど）

Arduino IDE

行動規範の内容に同意します

回答3件

LEDを指定されたタイミングでON/OFFする
HTTPサーバー

の２つの仕事を同時にさせようとしています。その場合、コードの書き方を大きく変える必要があります。
疑似コードで書きますが、以下のような形に書き換える必要があります。

arduino
1unsigned long led_previous_ms = 0; // 
2const long led_interval_ms = 1000; // LED点滅間隔
3
4const int led_state = HIGH;  // LED HIGH or LOW
5
6void loop() {
7  if (client) {
8    Serial.println("New Client.");
9    String currentLine = "";      
10    while (client.connected()) {    
11        // 元の処理そのまま
12        // スライダーが変わっていたら led_interval_ms を変更する部分だけ追記
13    }
14  }
15
16  // LEDの状態を変えるか判定
17  // millis() で起動からの経過時間を取得して、前回のLEDの切り替えをしたときから
18  // 規定の時間が経過していたらLEDの ON/OFF を変える
19  if ( (millis() - led_previous_ms) > led_interval_ms ) { 
20      // LEDのON/OFFを切り替え
21      led_previous_ms = millis();  // LED切り替えた時間を保存
22  }
23}
24

この書き方の場合、例えばHTTPの処理に時間がかかったりするとLEDのタイミングがズレたりします。
ESP32なら能力が高いので大丈夫だと思いますが…
あと、y_waiwaiさんも書いてらっしゃいますが、この書き方の場合、 delay() を使うとそこで処理が止まってしまうので基本的にはNGです。

投稿2020/08/20 04:45

編集2020/08/20 05:11

YakumoSaki

総合スコア2027

Rrrriiuu

2020/08/20 05:05

ご回答ありがとうございます。 http受信処理 (質問者さんのコードの whileとはどの部分のことでしょうか？ Arduinoは初心者でほとんど理解していないので…すみませんが教えていただけますでしょうか

YakumoSaki

2020/08/20 05:11

ごめんなさい、編集中のゴミが残ってしまっていました。回答を編集しました。

Rrrriiuu

2020/08/20 05:23

ありがとうございます

行動規範の内容に同意します

ベストアンサー

delay()とdigitalWrite()使うのやめてledc使いましょう

setup()に

arduino
1ledcSetup(0, 周波数, 13);
2ledcAttachPin(ピン番号, 0);

デューティー比変更したいところで

arduino
1ledcWrite(0, 8192*デューティー比);

投稿2020/08/20 04:03

編集2020/08/20 04:46

ozwk

総合スコア13521

Rrrriiuu

2020/08/20 04:42

ありがとうございます。教えていただいた通りに変更してみたのですが、LEDが点灯したままで点滅しません。チカチカと点滅させたいのですが方法はわかりますか？

ozwk

2020/08/20 04:44

デューティー比は0~1の値ですけど大丈夫です?

ozwk

2020/08/20 04:48

一応なんですど、質問文のコードの digitalWrite(13, HIGH); delay(valueString.toInt() * 10); digitalWrite(13, LOW); delay((100 - valueString.toInt()) * 10); 4行をledcWrite1行で置き換えます

Rrrriiuu

2020/08/20 05:22

できました！ありがとうございます！！

行動規範の内容に同意します

LEDを点滅しているコードは