質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

IDE

IDE、統合開発環境((Integrated Development Environment)とは、テキストエディタ以上の機能を提供して、ソフトウェア開発を効率をあげるコンピュータプログラムを指す。

Arduino

Arduinoは、AVRマイコン、単純なI/O(入出力)ポートを備えた基板、C言語を元としたArduinoのプログラム言語と、それを実装した統合開発環境から構成されたシステムです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

3709閲覧

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

Rrrriiuu

総合スコア1

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

IDE

IDE、統合開発環境((Integrated Development Environment)とは、テキストエディタ以上の機能を提供して、ソフトウェア開発を効率をあげるコンピュータプログラムを指す。

Arduino

Arduinoは、AVRマイコン、単純なI/O(入出力)ポートを備えた基板、C言語を元としたArduinoのプログラム言語と、それを実装した統合開発環境から構成されたシステムです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/08/20 03:38

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

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

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

ありがとうございます
guest

0

ベストアンサー

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

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

0

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

if (client) {

...
while (client.connected()) {

の条件が成立しているときにしか走っていません。

スライダの数値、というのを変数にでも入れるようにしておいて、
クライアントの状態に関わらず、点滅の操作を常に走るようにする必要があります

# で、その際にはdelayの関数は使ってはダメです

投稿2020/08/20 03:47

y_waiwai

総合スコア87753

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Rrrriiuu

2020/08/20 03:54

早速のご回答ありがとうございます。 大変申し訳ないのですが、Arduino初心者なので、もう少し詳しく教えていただけるとありがたいです。 コード的な部分でどこをどう直せば良いのかというのは教えていただけますか?
y_waiwai

2020/08/20 04:00

そもそもの考え方を変える必要があります まずは、グローバル変数を定義しといて、スライダの値をその変数に入れるようなコードを組んでみてください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問