複数のPWM出力をESPを使ってWifiを通して操作するプログラムが正常に動作しません。

前提・実現したいこと

モーターをPWM出力でWifiを通して操作しようと思い、ある外国のサイトさんから、コードをコピペしたのですが、そのサイトでは一つのピンしかPWM出力ができなかったので、モーターを正転、逆転できるように改良しようとしたのですが、行き詰ってしまいました。

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

現在できている事は、スライダーを2つ表示できていることと、表示されたスライダーの値はESPにちゃんと送信されていることです。しかし、なぜかslider1のスライダーを動かしても両方のLEDが一瞬光るだけですぐ消えてしまい、slider2のスライダーを動かすと両方のLEDがPWM出力できてしまいます。なぜ両方のLEDがついてしまうのか、プログラムを眺めても分からなかったので、今回質問しました。
一つだけならちゃんとサイト通りにできていたので、サイトさんに間違いはないはずです。

arduino
1#include <WiFi.h>
2#include <AsyncTCP.h>
3#include <ESPAsyncWebServer.h>
4
5// Replace with your network credentials
6const char* ssid = "mozaiku";
7const char* password = "mozaiku";
8
9const int output1 = 26;
10const int output2 = 27;
11
12String sliderValue1 = "0";
13String sliderValue2 = "0";
14
15// setting PWM properties
16const int freq = 5000;
17const int ledChannel1 = 0;
18const int ledChannel2 = 0;
19const int resolution = 8;
20
21const char* PARAM_INPUT1 = "value";
22const char* PARAM_INPUT2 = "value";
23
24
25// Create AsyncWebServer object on port 80
26AsyncWebServer server(80);
27
28const char index_html[] PROGMEM = R"rawliteral(
29
30<!DOCTYPE HTML><html>
31<head>
32  <meta name="viewport" content="width=device-width, initial-scale=1">
33  <title>ESP Web Server</title>
34  <style>
35    html {font-family: Arial; display: inline-block; text-align: center;}
36    h2 {font-size: 2.3rem;}
37    p {font-size: 1.9rem;}
38    body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
39    .slider1 { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
40      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
41    .slider1::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
42    .slider1::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } 
43    
44    .slider2 { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFC65C;
45      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
46    .slider2::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
47    .slider2::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } 
48  </style>
49</head>
50<body>
51  <h2>ESP Web Server</h2>
52  <p><span id="textSliderValue1">%SLIDERVALUE1%</span></p>
53  <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider1" min="0" max="255" value="%SLIDERVALUE1%" step="1" class="slider1 "></p>
54  <p><span id="textSliderValue2">%SLIDERVALUE2%</span></p>
55  <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider2" min="0" max="255" value="%SLIDERVALUE2%" step="1" class="slider2 "></p>
56<script>
57  function updateSliderPWM(element) {
58  var sliderValue1 = document.getElementById("pwmSlider1").value;
59  var sliderValue2 = document.getElementById("pwmSlider2").value;
60  document.getElementById("textSliderValue1").innerHTML = sliderValue1;
61  document.getElementById("textSliderValue2").innerHTML = sliderValue2;
62  console.log(sliderValue1);
63  console.log(sliderValue2);
64  //デバック的な
65  var xhr1 = new XMLHttpRequest();
66  var xhr2 = new XMLHttpRequest();
67  //テキストデータを読み込んでいる
68  xhr1.open("GET", "/slider?value="+sliderValue1, true);
69  xhr2.open("GET", "/slider?value="+sliderValue2, true);
70  xhr1.send();
71  xhr2.send();//通信します
72  
73}
74</script>
75</body>
76</html>
77)rawliteral";
78
79// Replaces placeholder with button section in your web page processor動かすとslider2の初期位置が真ん中になる
80String processor(const String& var){
81  //Serial.println(var);ブラウザで初めてアクセスしたときに、HTMLテキストのプレースホルダーを現在のスライダー値に置き換える
82  if (var == "SLIDERVALUE1"){
83    return sliderValue1;
84  }
85
86  else if (var == "SLIDERVALUE2"){
87    return sliderValue2;
88  }
89  else return String();
90}
91
92void setup(){
93  // Serial port for debugging purposes
94  Serial.begin(115200);
95  
96  // configure LED PWM functionalitites
97  ledcSetup(ledChannel1, freq, resolution);
98  ledcSetup(ledChannel2, freq, resolution);
99  
100  // attach the channel to the GPIO to be controlled
101  ledcAttachPin(output1, ledChannel1);
102  ledcAttachPin(output2, ledChannel2);
103  
104  ledcWrite(ledChannel1, sliderValue1.toInt());//tolnt有効な文字列を整数に変換する非整数が現れたら変換を終了する
105  ledcWrite(ledChannel2, sliderValue2.toInt());
106
107
108  // Connect to Wi-Fi
109  WiFi.begin(ssid, password);
110  while (WiFi.status() != WL_CONNECTED) {
111    delay(3000);
112    Serial.println("Connecting to WiFi..");
113  }
114
115  // Print ESP Local IP Address
116  Serial.println(WiFi.localIP());
117
118  // Route for root / web page *はポイント（アドレス）宣言
119  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request1){
120    request1->send_P(200, "text/html", index_html, processor);
121  });
122  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request2){
123    request2->send_P(200, "text/html", index_html, processor);
124  });
125  // Send a GET request to <ESP_IP>/slider?value=<inputMessage> sliderは変えてはいけない
126  server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request1) {
127    String inputMessage1;                                                                                
128    // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
129    if (request1->hasParam(PARAM_INPUT1)) {
130      inputMessage1 = request1->getParam(PARAM_INPUT1)->value();
131      sliderValue1 = inputMessage1;
132      ledcWrite(ledChannel1, sliderValue1.toInt());
133    }
134    else{
135      inputMessage1 = "No message sent";
136    }
137    Serial.println(inputMessage1);
138    request1->send(200, "text/plain", "OK");
139  });
140
141 
142  server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request2) {
143    String inputMessage2;                                                                                
144    // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
145    if (request2->hasParam(PARAM_INPUT2)) {
146      inputMessage2 = request2->getParam(PARAM_INPUT2)->value();
147      sliderValue2 = inputMessage2;
148      ledcWrite(ledChannel2, sliderValue2.toInt());
149    }
150    else{
151      inputMessage2 = "No message sent";
152    }
153    Serial.println(inputMessage2);
154    request2->send(200, "text/plain", "OK");
155  });
156  
157  
158  // Start server
159  server.begin();
160}
161  
162void loop() {
163  
164}

y_waiwai

2021/07/17 22:16

このままではコードが見づらいので、質門を編集し、<code>ボタンで、出てくる’’’の枠の中にコードを貼り付けてください

PeachX

2021/07/18 08:54

分かりました。

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

回答2件

えと、つまりラムダ関数は数字を表示させているだけで、定義してあげればLEDが真面目に?つくということですかね？
すみません。知識が浅くて分かりません。

投稿2021/07/23 09:15

PeachX

総合スコア1

ベストアンサー

httpプロトコルはあまりちゃんと調べてませんが、とにかくシンボル"/slider"で2つの要素が混ざっているのではないかと妄想して

Javascript
1  //テキストデータを読み込んでいる
2  xhr1.open("GET", "/slider1?value="+sliderValue1, true);
3  xhr2.open("GET", "/slider2?value="+sliderValue2, true);

C++
1  // Send a GET request to <ESP_IP>/slider?value=<inputMessage> sliderは変えてはいけない
2  server.on("/slider1", HTTP_GET, [] (AsyncWebServerRequest *request1) {
3    String inputMessage1;                                                                                
4    // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
5    if (request1->hasParam(PARAM_INPUT1)) {
6      inputMessage1 = request1->getParam(PARAM_INPUT1)->value();
7      sliderValue1 = inputMessage1;
8      ledcWrite(ledChannel1, sliderValue1.toInt());
9    }
10    else{
11      inputMessage1 = "No message sent";
12    }
13    Serial.println(inputMessage1);
14    request1->send(200, "text/plain", "OK");
15  });
16
17
18  server.on("/slider2", HTTP_GET, [] (AsyncWebServerRequest *request2) {
19    String inputMessage2;                                                                                
20    // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
21    if (request2->hasParam(PARAM_INPUT2)) {
22      inputMessage2 = request2->getParam(PARAM_INPUT2)->value();
23      sliderValue2 = inputMessage2;
24      ledcWrite(ledChannel2, sliderValue2.toInt());
25    }
26    else{
27      inputMessage2 = "No message sent";
28    }
29    Serial.println(inputMessage2);
30    request2->send(200, "text/plain", "OK");
31  });

としてみるとそれっぽく動いている気がします。

前のは、server.onに登録したラムダ関数中で数字を表示させてみただけだったから気が付かなかったのだけれど、LEDを真面目に?点けてみると、ふむふむ。

C++
1const int ledChannel1 = 0;
2const int ledChannel2 = 0;

これってどう思います?

つまり、以下の間違いを含んだプログラムを修正してLEDが然るべく制御できるようにしてみましょう、ということです。これを確かめないで先へ進んだからわけがわからなくなってしまったのではないでしょうか。

Arduino
1const int output1 = 26;
2const int output2 = 27;
3
4const int ledChannel1 = 0;
5const int ledChannel2 = 0;
6const int freq = 5000;
7const int resolution = 8;
8
9void setup() {
10  pinMode(output1,OUTPUT);
11  pinMode(output2,OUTPUT);
12
13  ledcSetup(ledChannel1, freq, resolution);
14  ledcSetup(ledChannel2, freq, resolution);
15  ledcAttachPin(output1, ledChannel1);
16  ledcAttachPin(output2, ledChannel2);
17}
18
19void loop() {
20  static int val=0;
21  ledcWrite(ledChannel1,val);//LED1は段々明るくなる
22  ledcWrite(ledChannel2,255-val);//LED2は段々暗くなる
23  val=(val+1)%256;//valを0～255に制限、繰り返し
24  delay(10);
25}