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

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

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

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

IDE

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

Arduino

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

HTML

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

解決済

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

Rrrriiuu
Rrrriiuu

総合スコア1

HTTP

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

IDE

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

Arduino

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

HTML

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

3回答

0評価

0クリップ

2276閲覧

投稿2020/08/20 03:38

前提・実現したいこと

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

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

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

該当のソースコード

Arduino

#include <WiFi.h> // 使用するWi-Fiとそのパスワードに書き換えてください const char* ssid = "myWifi"; const char* password = "myPassword"; // ポート80番を使用 WiFiServer server(80); // HTTPリクエストを格納する変数 String header; // 値の設定に使用する変数 String valueString = String(5); int pos1 = 0; int pos2 = 0; void setup() { //led setting //R pinMode(13, OUTPUT); Serial.begin(115200); // Wi-Fiに接続 Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } // ローカルIP表示 Serial.println(""); Serial.println("WiFi connected."); Serial.println("IP address: "); Serial.println(WiFi.localIP()); server.begin(); } void loop() { WiFiClient client = server.available(); // Listen for incoming clients if (client) { // If a new client connects, Serial.println("New Client."); // print a message out in the serial port String currentLine = ""; // make a String to hold incoming data from the client while (client.connected()) { // loop while the client's connected if (client.available()) { // if there's bytes to read from the client, char c = client.read(); // read a byte, then Serial.write(c); // print it out the serial monitor header += c; if (c == '\n') { // if the byte is a newline character // if the current line is blank, you got two newline characters in a row. // that's the end of the client HTTP request, so send a response: if (currentLine.length() == 0) { // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK) // and a content-type so the client knows what's coming, then a blank line: client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println("Connection: close"); client.println(); // Display the HTML web page client.println("<!DOCTYPE html><html>"); client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>ESP32 RGB LED controller</title>"); client.println("<link rel=\"icon\" href=\"data:,\">"); // CSS to style the on/off buttons // Feel free to change the background-color and font-size attributes to fit your preferences client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial; margin-left:auto; margin-right:auto;}"); client.println("#servoPosR{color: red;}"); client.println(".slider { width: 300px; }</style>"); client.println("<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>"); // Web Page client.println("</head><body><h1></h1>");//ESP32 with LED //R slide bar //id=\"servoSliderR\" idがバーの値を取得するための変数、servoSliderRがバーの値 //onchangeの属性に値をESP32へ送信するservo() 関数を指定、スライドバーの値が変わったらservo()関数が実行 client.println("<p>Release time: 0.<span id=\"servoPosR\"></span>s</p>"); client.println("<input type=\"range\" min=\"0\" max=\"100\" class=\"slider\" id=\"servoSliderR\" onchange=\"servo(this.value,'R')\" value=\"" + valueString + "\"/>"); client.println("<script>"); //send R value //スライダーの要素をsliderRに、スライダーの上にある値を表示する要素をservoPRに入れる //servoPRの値をsliderRの値に変更 //ライダーが変更された時に起こるsliderR.oninputを設定。sliderRの値をinputの値(this.value)に、そしてその値をservoPRの値にも入れ込み表示 client.println("var sliderR = document.getElementById(\"servoSliderR\");"); client.println("var servoPR = document.getElementById(\"servoPosR\"); servoPR.innerHTML = sliderR.value;"); client.println("sliderR.oninput = function() { sliderR.value = this.value; servoPR.innerHTML = this.value; }"); //HTTP getのための関数 スライダーの値を送る client.println("$.ajaxSetup({timeout:1000}); function servo(pos,color) { "); client.println("$.get(\"/?value\" + color + \"=\" + pos + \"&\"); {Connection: close};}</script>"); client.println("</body></html>"); //HTTPリクエストの処理部分 if(header.indexOf("GET /?valueR=") >= 0) { client.println("</body></html>"); pos1 = header.indexOf('='); pos2 = header.indexOf('&'); valueString = header.substring(pos1 + 1, pos2); Serial.println(valueString); digitalWrite(13, HIGH); delay(valueString.toInt() * 10); digitalWrite(13, LOW); delay((100 - valueString.toInt()) * 10); } // HTTPレスポンスの終了 client.println(); // Break out of the while loop break; } else { currentLine = ""; } } else if (c != '\r') { currentLine += c; } } } // Clear the header variable header = ""; // 接続を切断 client.stop(); Serial.println("Client disconnected."); Serial.println(""); } }

試したこと

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

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

Arduino IDE

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTTP

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

IDE

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

Arduino

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

HTML

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