言語切り替え

HTMLのカラーピッカーでフルカラーLEDの色を変える

HTMLのカラーピッカーでフルカラーLEDの色を変える

HTML5のカラーピッカーを使って、選択した色をそのままフルカラーLEDで表示してみます。

用意するもの

用意するものはたった2つです。

  • obniz Board
  • PL9823 (WS2811内蔵フルカラーLED)

接続方法

obniz BoardとLED(PL9823)を接続します。
LED(PL9823)の4本の足を、長いのを0,1番に、短いのを3,4番に接続します。

 

プログラム

colorPickerの色が変わったらその値をRGB値に変換してフルカラーLEDの色を変更します。
colorPickerの色は #RRGGBB の形式で取得ができるので、それを分解してRGBそれぞれ0〜255の値に変換しています

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@3.2.0/obniz.js" crossorigin="anonymous"></script>
  </head>
  <body>

    <div id="obniz-debug"></div>
    <h2>Color Picker with LED</h2>
    <input type="color" value="#333300" id="colorPicker">

    <script>
      var obniz = new Obniz("OBNIZ_ID_HERE");
      obniz.onconnect = async function () {

        var led = obniz.wired("WS2811", {din: 3, vcc: 2, gnd: 1});
        led.rgb(0x33,0x33,0)

        $("#colorPicker").on("change", function (val) {
          let colorString = $('#colorPicker').val();

          let rgb = colorString2hex(colorString);
          led.rgb(rgb[0],rgb[1],rgb[2])
        });

      };

      function colorString2hex(hex){
        if ( hex.slice(0, 1) == "#" ) hex = hex.slice(1) ;
        if ( hex.length == 3 ) hex = hex.slice(0,1) + hex.slice(0,1) + hex.slice(1,2) + hex.slice(1,2) + hex.slice(2,3) + hex.slice(2,3) ;

        return [ hex.slice( 0, 2 ), hex.slice( 2, 4 ), hex.slice( 4, 6 ) ].map( function ( str ) {
          return parseInt( str, 16 ) ;
        } ) ;
      }

    </script>
  </body>
</html>


 

 

うごかしてみる

HTMLをひらいて動作させてみましょう。

カラーピッカーをクリックすると、色を選ぶことができ、色に応じてフルカラーLEDの色が変わります

関連記事