フルカラーLED で作った時計

このエントリーをはてなブックマークに追加

NeoPixcel WS2812B には12のフルカラーLEDがあります。

ちょうど12個ですし、時計を作ってみましょう!

用意するもの

obniz

Battery

NeoPixcel ( soldered three pins )

Program

毎秒LEDのどこを光らせるのかプログラムで決めます
あとは、パーツライブラリにある WS2812B obniz.js parts libraryを使います。

Program

<!-- HTML Example -->
<html>
<head>
  <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@1.2.1/obniz.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="obniz-debug"></div>
  

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

  const leds = obniz.wired("WS2812B", {gnd:2, vcc: 1, din: 0});
  
  let positions = [0,0,0];
  
  obniz.repeat(()=>{
    
    var date = new Date();
    positions[0] = date.getHours() % 12;
    positions[1] = parseInt(date.getMinutes() / 5);
    positions[2] = parseInt(date.getSeconds() / 5);
    
    updateLED();
    
    var ctx = obniz.display._ctx();
    ctx.fillStyle='#000'
    ctx.fillRect(0, 0, obniz.display.width, obniz.display.height);
    ctx.fillStyle='#FFF';
    ctx.strokeStyle='#FFF';
    obniz.display.font('Avenir', 50)
    obniz.display.pos(0,0);
    obniz.display.print(`${date.getHours()}:${date.getMinutes()}`)
    
  }, 1000);
  
  function updateLED() {
    let brightness = 20;
    
    let arr = [];
    for (let i=0; i<12; i++){
      arr.push([0, 0, 0]);
    }
    arr[positions[0]][0] = brightness;
    arr[positions[0]][1] = brightness;
    arr[positions[1]][1] = brightness;
    arr[positions[1]][2] = brightness;
    if ((new Date()).getSeconds()%2==0) {
        arr[positions[2]][0] = brightness;
        arr[positions[2]][1] = brightness;
        arr[positions[2]][2] = brightness;
    }
    
    arr.unshift(arr.splice(-1, 1)[0])
    
    leds.rgbs(arr);
  }

}

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

今すぐ実行

HTMLがブラウザで開かれて実行されます。