言語切り替え

スライダーに合わせて光るLEDの数を変える

Webページ上のスライダーの位置に合わせて、テープLED上の点灯するLEDの数が変わるようにします。

用意するもの

  • WS2812を使用したテープLEDやリングLED
  • obniz Board
  • モバイルバッテリーなど
  • スマートフォン or PC

接続方法

obniz WS2812搭載テープLED
0 GND
1 DIN
2 VCC

 

プログラム

15行目 <input id="slider" type="range" value="0" min="0" max="8" step="1">max="8" の部分を、お手持ちのテープLEDのLED数に応じて書き換えてください。
また、22行目 const NUM_OF_LEDS = 8; の部分も同様に書き換えてください。

23行目 let obniz = new Obniz('OBNIZ_ID_HERE');OBNIZ_ID_HERE の部分を、お手持ちのobniz IDに書き換えてください。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/obniz@3.0.0/obniz.js" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <title>Slider to Tape LED</title>
</head>
<body>
  <div class="container">
    <h2 class="text-center" style="margin:40px">Slider to Tape LED</h2>
    <div class="text-center">
      <input id="slider" type="range" value="0" min="0" max="8" step="1">
    </div>
  </div>
<script>
  $(() => {
    const WHITE = [255,255,255];
    const BLACK = [0,0,0];
    const NUM_OF_LEDS = 8;
    let obniz = new Obniz('OBNIZ_ID_HERE');
    
    obniz.onconnect = async () => {
      let leds = obniz.wired("WS2812", {gnd:0, din:1, vcc:2});
      
      $('#slider').change(async () => {
        let colorsArray = [];
        let numOfWhiteLeds = $('#slider').val();
        
        if(numOfWhiteLeds === '0'){
          for(let i=0; i<NUM_OF_LEDS; i++){
            await colorsArray.push(BLACK);
          }
        }else{
          for(let i=0; i<numOfWhiteLeds; i++){
            await colorsArray.push(WHITE);
          }
          for(let j=0; j<(NUM_OF_LEDS - numOfWhiteLeds); j++){
            await colorsArray.push(BLACK);
          }
        }
        await leds.rgbs(colorsArray);
        
      });
    }
  });
</script>
</body>
</html>

うごかす

Webページ上のスライダーを動かすと、その位置に応じてテープLED上で点灯しているLEDの数が増減します。

関連記事