ESP32でArduinoからWebserverを立ち上げてLEDのオンオフ→連続点滅を制御したい

前提・実現したいこと

ESP32でWebserverを立ち上げてLEDを点滅させたいと考えています。
その際、オンオフボタンで点滅開始、終了を制御、スライダーを使って点滅中の点滅時間の間隔を変更したいです。

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

オンオフボタンなしで、スライダーのみでのLEDの点滅時間間隔の制御はできるのですが、オンオフボタンを追加し、オンを押したときだけ点滅をさせることができません。オンオフボタンでLED点灯の制御→スライダーでの点滅間隔制御ということを行いたいです。

該当のソースコード

Arduino
1#include <WiFi.h>
2
3// 使用するWi-Fiとそのパスワードに書き換え
4const char* ssid     = "＊＊＊＊＊";
5const char* password = "＊＊＊＊＊";
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//ledpin
19const int ledR = 13;
20
21
22void setup() {
23  //ledc setting
24  //R
25  ledcSetup(0, 2, 13);
26  // ledRをチャネル0へ接続
27  ledcAttachPin(ledR, 0);
28
29
30  Serial.begin(115200);
31
32  // Wi-Fiに接続
33  Serial.print("Connecting to ");
34  Serial.println(ssid);
35  WiFi.begin(ssid, password);
36  while (WiFi.status() != WL_CONNECTED) {
37    delay(500);
38    Serial.print(".");
39  }
40  // ローカルIP
41  Serial.println("");
42  Serial.println("WiFi connected.");
43  Serial.println("IP address: ");
44  Serial.println(WiFi.localIP());
45  server.begin();
46}
47
48void loop() {
49  WiFiClient client = server.available();   // Listen for incoming clients
50
51  if (client) {                             // If a new client connects,
52    Serial.println("New Client.");          // print a message out in the serial port
53    String currentLine = "";                // make a String to hold incoming data from the client
54    while (client.connected()) {            // loop while the client's connected
55      if (client.available()) {             // if there's bytes to read from the client,
56        char c = client.read();             // read a byte, then
57        Serial.write(c);                    // print it out the serial monitor
58        header += c;
59        if (c == '\n') {                    // if the byte is a newline character
60          // if the current line is blank, you got two newline characters in a row.
61          // that's the end of the client HTTP request, so send a response:
62          if (currentLine.length() == 0) {
63            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
64            // and a content-type so the client knows what's coming, then a blank line:
65            client.println("HTTP/1.1 200 OK");
66            client.println("Content-type:text/html");
67            client.println("Connection: close");
68            client.println();
69
70            // Display the HTML web page
71            client.println("<!DOCTYPE html><html>");
72            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>ESP32 RGB LED controller</title>");
73            client.println("<link rel=\"icon\" href=\"data:,\">");
74            // CSS to style the on/off buttons
75            // Feel free to change the background-color and font-size attributes to fit your preferences
76            client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial; margin-left:auto; margin-right:auto;}");
77            client.println("#servoPosR{color: red;}");
78            client.println(".slider { width: 300px; }</style>");
79            client.println("<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>");
80
81            // Web Page
82            client.println("</head><body><h1>ESP32 with RGB LED</h1>");
83
84            client.println("<form method='get'>");
85            client.println("<font size='4'>ESP-WROOM-32<br>");
86            client.println("Wi-Fi  LED  Switch</font><br>");
87            client.println("<br>");
88            client.println("<input type='submit' name=0 value='ON' style='background-color:#88ff88; color:red;'>");
89            
90            client.println("<input type='submit' name=1 value='OFF' style='background-color:black; color:white;'>");
91            client.println("</form>");
92
93            //R slide bar
94            client.println("<p>Brightness of R: <span id=\"servoPosR\"></span></p>");
95            client.println("<input type=\"range\" min=\"0\" max=\"100\" class=\"slider\" id=\"servoSliderR\" onchange=\"servo(this.value,'R')\" value=\"" + valueString + "\"/>");
96
97            client.println("<script>");
98            //send R value
99            client.println("var sliderR = document.getElementById(\"servoSliderR\");");
100            client.println("var servoPR = document.getElementById(\"servoPosR\"); servoPR.innerHTML = sliderR.value;");
101            client.println("sliderR.oninput = function() { sliderR.value = this.value; servoPR.innerHTML = this.value; }");
102
103
104            //HTTP getのための関数
105            client.println("$.ajaxSetup({timeout:1000}); function servo(pos,color) { ");
106            client.println("$.get(\"/?value\" + color + \"=\" + pos + \"&\"); {Connection: close};}</script>");
107
108            client.println("</body></html>");
109        
110           if (currentLine.endsWith("GET /?0=ON")) {
111            //HTTPリクエストの処理部分
112            //GET /?value=180& HTTP/1.1
113               if (header.indexOf("GET /?valueR=") >= 0) {
114              pos1 = header.indexOf('=');
115              pos2 = header.indexOf('&');
116              valueString = header.substring(pos1 + 1, pos2);
117
118              //LEDをvalueStringの値で点灯
119              ledcWrite(0, 8192 * valueString.toInt() / 100);
120              Serial.println(valueString);
121            }
122            }
123            if (currentLine.endsWith("GET /?1=OFF")) {
124              ledcWrite(0, 0);
125            }
126           
127
128
129            // HTTPレスポンスの終了
130            client.println();
131            // Break out of the while loop
132            break;
133          } else {
134            currentLine = "";
135          }
136        } else if (c != '\r') {
137          currentLine += c;
138        }
139
140      }
141    }
142    // Clear the header variable
143    header = "";
144    // 接続を切断
145    client.stop();
146    Serial.println("Client disconnected.");
147    Serial.println("");
148  }
149}