カラーセンサーで取得した色を描画する

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

What's this

S11059 のExampleプロジェクトです。

カラーセンサーで取得した色をHTMLに表示します。

だいたい同じような色になりますが、調整が必要です。

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>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script src="https://unpkg.com/obniz@1.6.1/obniz.js"></script>
</head>
  
<body>
  <div id="obniz-debug"></div>
  <div id="color" style="width:100%;height:100%;"></div>

<script>
  var obniz = new Obniz("OBNIZ_ID_HERE");
  obniz.onconnect = async function () {
    
    var colorSens = obniz.wired("S11059", {vcc:0, sda:1, scl:2, gnd:3});
    colorSens.init(1,2);
    
    while(true){
      var ret = await colorSens.getVal();
      var red = ret[0];
      var green = ret[1];
      var blue = ret[2];
      red = Math.round(map(red));
      green = Math.round(map(green));
      blue = Math.round(map(blue));
      console.log("r"+red +"g"+green +"b"+blue);
      var redStr = red.toString(16);
      var greenStr = green.toString(16);
      var blueStr = blue.toString(16);
      
      var colorCode = '#' + ( '00'  + redStr ).slice( -2 ) + ( '00'  + greenStr ).slice( -2 ) + ( '00'  + blueStr ).slice( -2 );      
      console.log("colorcode:"+colorCode);
      
      var obj = document.getElementById('color');
      obj.style.backgroundColor = colorCode;
      obniz.wait(100);
    }
    
  
    function map(input){
      var inputMin = 100;
      var inputMax = 2000;
      var outputMin = 0;
      var outputMax = 255;
      return (input - inputMin) * (outputMax - outputMin) / (inputMax - inputMin) + outputMin;
    };

  };
  
</script>
</body>
</html>

今すぐ実行

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