以下のスケッチをIDEに入力してみてください。//EasyWebSocketライブラリ。//EasyWebSocketライブラリ。過去の記事で解説しておりますので、所々説明を省かせていただきます。●12-13行:ご自分のルーターのSSIDとパスワードに書き換えてください。●15-16行:SPIFFSでアップロードしたHTMLヘッダ分割ファイルを定義しています。先頭にスラッシュを置くことです。LED素子の数を定義します。3原色をそれぞれ、256段階の数値で格納しておく変数を定義。12個の配列にしておきます。グローバル変数領域にしておくことで、ローテーションをストップしたりしてもメモリから呼び出すことができます。●48-50行:隣のLEDの明るさの差を格納しておきますが、float型にしておきます。いうと、フェードイン、フェードアウトするときに256段階にしたいので、256で割って、四捨五入した段階ずつフェードインしたいのです。そのため、後述するround関数を使うので、それにはfloat型でないと正常に動作しないという理由があるからです。●63-102行:115行目のEasyWebSocketライブラリ関数でスマホブラウザへ送信するHTMLのbody要素内をString変数に格納しておきます。関数は吐き出す文字列が多い為、一つのString変数に2つまでしか入れることができないことに注意してください。マウスでは操作できません。関数を使用してください。今回新たに追加した関数です。文字列を吐き出します。>というような文字列を吐き出します。“ID文字列”);相対座標は、カラーピッカーを置いた行からの座標になります。画面の左上からではありません。座標で決定するので、テキストにダブって表示される場合があります。テキストとうまく合わせて、97行のように適度に改行を入れてください。ID文字列とスマホブラウザのカラーピッカーボタンのIDと連動するようになってます。261-278行の関数でスマホへ送信されたカラーピッカーのValue値が更新されて色が変わるようになってます。LED素子の位置と、スマホブラウザの表示位置が異なるために、番号順とはいきませんでした。これは各自の環境に合わせて調節してみてください。iOSの場合は、後述しているようにカラーピッカーの表示が大きいので、別途位置調節してください。ローカルIPアドレスを自動取得しています。●115行:EasyWebSocket_SPIFFSライブラリで1.48から追加したものです。ブラウザからGETリクエストが発生したら、HTMLヘッダ分割ファイルと、ローカルIPアドレスとbody要素をマージ(合体)して、スマホのブラウザへ送信して、WebSocket通信を確立(ハンドシェイク)させています。●120行:スマホブラウザからWebSocket通信で送られてきたテキストデータを受信して、ret_strへ格納します。メッセージを表示できるようにしてます。●122-194行:スマホから明るさ調節スライダーを操作すると109|Brightness;という感じでテキストデータが送られてきます。いう文字をswich関数で分類してます。ローテーションスピードや、ストップ、オンオフボタンも同じ要領で分類してます。カラーピッカーは100|LED09,000,255,255;のような文字列で送られてきます。Char型文字列を数値化するには、関数を使うよりも、それぞれの桁から0x30を引いた方が計算が速いと思います。163-171行では、隣のLEDの明るさとの差を取り、256段階でフェードイン、アウトさせたい為に、256で割る必要があります。関数を使いますが、その引数はfloat型にしないと正しく計算されませんのでご注意ください。まりすさんから教わりました。まりすさん、ありがとうございます。Red値、Green値、Blue値をスマホブラウザへ送信します。●196-257行:ローテーションONボタンが押されたら、256段階で隣のLEDとフェードインアウトしていきます。色を隣にコピーさせてます。●261-278行:今回のプログラムの目玉は、私的にはここがポイントですね。Red値、Green値、Blue値をHTML形式のカラーコード文字列に変換してから、LED番号もマージしてスマホに送ります。分類して、カラーピッカーのvalue値が変更され、ボタンの色が変わります。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。Privacy-Policy。