こんな記事もあります!ESP32でwebserverを立ち上げてRGBLEDをスマホから調光するこんにちは。今日はタイトルの通りスマホからRGBLEDの値を変えて調光していきます。動いている様子ESP32開発ボードでRGBLEDをスマホから操作できました。参考記事においてはサーボモーターをスマホから操作していましたが、その部分を本記事ではRGBLEDへと変更しています。それに伴ってスライドバーも3つ付けました。回路はESP32でRGBLEDを使うと全く同じです。RGBLEDの使い方・購入がまだな方はこちらの記事を先にお試しください。}}ソースコードの解説まずwebserver部分ですが、これはESP32を使ってスマホからLチカ(LED点滅)する【webserver】と全く同様です。こちらの記事をご覧になり、HTTPリクエスト関係の理解を深めましょう。今回肝となるのが、スライドバーの値の送信です。そこを詳しく解説します。RGBLEDの接続ESP32でRGBLEDを使うで使用したledcWrite系の関数を使います。A5;でそれぞれのLEDがつながっているAポートのピンを登録しています。0);とすることで、赤色LEDをチャンネル0に登録しました。よって赤色LEDを点灯させたい場合はledcWrite(0,value);とすればvalueの分だけ明るく光ります。valueの最大値は8bitを指定したので255です。スライドバーを表示するコード上では一行ずつ表示されているので非常に見にくいですね。html形式だけで取り出してみると、表示されるページの部分は以下のようになります。value="5"/>とすることで以下のようになります。後でこのバーの値を取得するため、idを付けておきます。スライドバーのRなのでservoSliderRとしました。スライドバーの値が確定した時にonchange属性にある関数が呼び出されます。関数を指定しておきます。名前は参考にした記事の名残なので、適当に変えて構いません。スライダーの値を更新するスライダーの値を更新しないと、動かしても元に戻ってしまいます。これはjavascriptで解決します。}</script>最初にスライダーの要素をsliderRに、スライダーの上にある値を表示する要素をservoPRに入れます。次にservoPRの値をsliderRの値に変更します。これで初期設定ができました。5という初期設定値が指定されるはずです。スライダーが変更された時に起こるsliderR.oninputを設定します。これは見ての通りですが、sliderRの値をinputの値(this.value)に、そしてその値をservoPRの値にも入れ込み表示します。close};}</script></body></html>ここでやっとajaxを使うときが来ました。ajaxの使い方はここでの開設の範囲を超えるので、各自お調べくださいm(__)m私はここで色の情報を入れ込むために、参考ページでのservo関数の引数にcolorを追加しました。HTTP/1.1のように送信することにしました。2行目でそのGETの中身の判定をしています。これで、RGBの出力を分けて認識できるようになりました。次の行は=と&の間にある値を抜き出すものです。これでスライドバーの値が200の時はvalueStringに200が入ります。この値は文字列として入るので、実際の値にするにはtoInt()メソッドを使います。valueString.toInt());これで無事赤色LEDがスライドバーの値で点灯するようになりました。他の色に関しては、ソースを見てもらえば分かりますが全てRの場合をコピペしただけです。がんばればもっときれいなソースコードになる。