narita2 commented 6 years ago

素子とは

電気回路などの構成要素

装置・電子回路などの構成要素となる個々の部品

独立した固有の機能をもつ

エネルギーの発生・変換などの機能をもつ能動素子（トランジスタ・圧電素子など）と、抵抗・コンデンサーなどの受動素子に分かれる

焦電素子とは

焦電効果を利用した電気素子
- 焦電効果とは(パイロ効果、ピロ効果)
- 誘電体結晶に熱を加えたとき、その表面の両端に正負の電荷が分かれて発生する現象
  このような現象を示す物質を焦電体という
  - 誘電体
    - 直流の電気は通さない（直流に対しては絶縁体。しかし交流は通す）
    - セラミックス、ガラス、プラスチックなど
温度変化によって素子の両端に正負の電荷が生じ、電圧の変化として計測できる

赤外線センサ

赤外領域の光を受光し電気信号に変換して, 必要な情報を取り出して応用する

赤外線とは

熱線とも呼ばれる
可視光線の赤色よりも波長が長い
「赤色の外」に存在する電磁波
- 電磁波とは
- 電気と磁気の性質を持つ「波」
  
  電気の作る「電場」と、磁気の作る「磁場」が互いに影響し合ってできる波が電磁波

narita2 commented 6 years ago

人感センサCによる記述

C言語での記述を元にJS

navigator.requestGPIOAccess()
- GPIO.setmode(GPIO.BCM)
  
  ファイルの変換モードを設定
var port = gpioAccess.ports.get(26); & port.export("out")
- GPIO.setup(26, GPIO.OUT)

(HIGH)

var port = gpioAccess.ports.get(26); & port.export("out") & port.write(1)
- GPIO.output(25, GPIO.HIGH)

(LOW)

var port = gpioAccess.ports.get(26); & port.export("out") & port.write(0)
- GPIO.output(25, GPIO.LOW)

narita2 commented 6 years ago

i2c-grove-light

'use strict';

window.addEventListener('load', function (){
  var head = document.querySelector('#head');

  navigator.requestI2CAccess().then((i2cAccess)=>{
    var port = i2cAccess.ports.get(1);
    var grovelight = new GROVELIGHT(port,0x29);
    grovelight.init().then(()=>{
      setInterval(()=>{
        grovelight.read().then((value)=>{
//            console.log('value:', value);
          head.innerHTML = value ? value : head.innerHTML;
        });
      },200);
    });
  }).catch(e=> console.error('error', e));
}, false);

readGpioValue

'use strict';

window.addEventListener('load', function (){
  navigator.requestGPIOAccess().then(
    function(gpioAccess){
      console.log("GPIO ready!");
      return gpioAccess;
    }).then(gpio=>{
      var port = gpio.ports.get(5);
      port.export("in").then(()=>{
        setInterval(()=>{
          port.read().then((value)=>{
            console.log("gpio= "+value);
          });
        },1000);
      });
  }).catch(error=>{
    console.log("Failed to get GPIO access catch: " + error.message);
  });
}, false);

narita2 commented 6 years ago

未完成

<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2018 by anonymous (http://jsbin.com/calahisimu/6/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">

#viewMessage{
  width:60px;
  height:60px;
  border-radius:30px;
  background-color:black;
}

</style>
</head>
<body>

  <div id="viewMessage"></div>
  <script src="https://mz4u.net/libs/gc2/polyfill.js"></script>

<script id="jsbin-javascript">

(async ()=>{
    var sleep = (ms)=>{
        return new Promise((resolve)=>setTimeout(resolve,ms));
    };

    var viewMessage = document.getElementById("viewMessage");

    var gpioAccess = navigator.requestGPIOAccess();
    //var v = 0;
    var port = gpioAccess.ports.get(12); //人感センサのポート
    await port.export("in");//入力モードで初期化

  function detection(v){
    if(v === 0){//
        //port.write(0);
      viewMessage.style.backgroundColor = "black";
    }else{
        //port.write(1);
      viewMessage.style.backgroundColor = "red";
    }
  }

//   await port.export("in");
//   port.onchange = (val)=>{
//       val ^= 1;
//     detection(val);
//   }

 while(1){
   var val = await port.read();
   val ^= 0;//プルダウンに接続したので
   detection(val);
   await sleep(100);
 }
})();

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

narita2 commented 6 years ago

プログラム概要　試

CSSにある図と対応づける（id）
Web GPIOを利用するために最初のAPI呼び出し
GPIOポート番号(12)を指定してportオブジェクト取得
取得したGPIOポートを「入力モード」で初期化
人感センサが反応したときの処理

CSSにある図の色を変える

narita2 commented 6 years ago

Promise.all()

引数に指定した全てのPromiseを実行するメソッド
全てのPromiseが履行(fulfilled)になるか、または1つでも拒否(rejected)になった時点で処理が終了

narita2 commented 6 years ago

3

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2018 by anonymous (http://jsbin.com/qomekonare/3/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#view{
  width:60px;
  height:60px;
  border-radius:30px;
  background-color:black;
}
</style>
</head>
<body>
  <div id="view"></div>
  <script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
<script id="jsbin-javascript">
(async ()=>{
//   var sleep = (ms)=>{ // 一定時間待つ関数
//     return new Promise((resolve)=>setTimeout(resolve,ms));
//   };

  var view = document.getElementById("view"); // 図と対応づけ
  var gpioAccess = await navigator.requestGPIOAccess(); // Web GPIO利用のための最初のAPI呼び出し
  var port = gpioAccess.ports.get(12); // GPIOポート番号12番を指定
  await port.export("in"); //（GPIOポート12番を）入力モードで初期化

  function detection(v){
    if(port.read() === 0){
      port.write(0);
      view.style.backgroundColor = "black";
    }else{
      port.write(1);
      view.style.backgroundColor = "red";
    }
  }

//   while(1){
//     var val = await port.read();//12番の状態を読み込む
//     val ^= 0;
//     detection(val);
//     await sleep(100);
//   }

  port.onchange = (val)=>{ // port（GPIO12番）の状態を取得する,引数はval...無名・アロー関数
    detection(val);
  }

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

narita2 commented 6 years ago

4

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2018 by anonymous (http://jsbin.com/qomekonare/5/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#view{
  width:60px;
  height:60px;
  border-radius:30px;
  background-color:black;
}
</style>
</head>
<body>
  <div id="view"></div>
  <script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
<script id="jsbin-javascript">
(async ()=>{
  var view = document.getElementById("view"); // 図と対応づけ
  var gpioAccess = await navigator.requestGPIOAccess(); // Web GPIO利用のための最初のAPI呼び出し
  var port = gpioAccess.ports.get(12); // GPIOポート番号12番を指定
  await port.export("in"); //（GPIOポート12番を）入力モードで初期化

  function detection(v){
    if(port.read() === 0){
      port.write(0);
      view.style.backgroundColor = "blue";
    }else{
      port.write(1);
      view.style.backgroundColor = "red";
    }
  }

  port.onchange = (val)=>{ // port（GPIO12番）の状態を取得する,引数はval...無名・アロー関数
    val ^= 0;
    detection(val);
  }

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

narita2 commented 6 years ago

5

<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com

Copyright (c) 2018 by anonymous (http://jsbin.com/zolisupefi/4/edit)

Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#view{
  width:60px;
  height:60px;
  border-radius:30px;
  background-color:black;
}

</style>
</head>
<body>
  <div id="view"></div>
  <script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
<script id="jsbin-javascript">
(async ()=>{ //1
  var sleep = (ms)=>{ //一定時間待つ関数
    return new Promise((resolve)=>setTimeout(resolve,ms));
  }
  var view = document.getElementById("view");//図と対応づけ
  var gpioAccess = await navigator.requestGPIOAccess(); //Web GPIO利用のための最初のAPI呼び出し
  var port = gpioAccess.ports.get(12);//GPIOポート番号12番を指定
  await port.export("in");//（GPIOポート12番を）入力モードで初期化

  function detection(){
    if(port.read === 0){
      port.write(0);
      view.style.backgroundColor = "black";
    }else{
      port.write(1);
      view.style.backgroundColor = "red";
    }
  }

  while(1){
    var val = await port.read();//12番の状態を読み込む
    detection(val);
    val ^= 0;
    await sleep(100);
  }

})();

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

narita2 commented 6 years ago

原型完成・・・１

以下は修正　試作（HUMAN-SENSOR　ver）

CSS含む

HTML(index.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>HUMAN-SENSOR</title>
<script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
<script src="./main.js"></script>
<style>
p{
color:blue;
text-align: center;
font-size: 24px;
}
img{
display:block;
margin-left:auto;
margin-right:auto;
}
#view{
width:60px;
height:60px;
border-radius:30px;
background-color:black;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<p>HUMAN-SENSOR:GPIO-12</p>
<div id="view"></div>
<img src=".png" height="400px">
</body>
</html>

JS(main.js)

'use strict';

navigator.requestGPIOAccess().then((gpioAccess)=>{ // WebGPIOのため
  var view = document.getElementById('view');
  var dPort = gpioAccess.ports.get(12);//人感センサ
  return Promise.all([ 
    dPort.export("in")
  ]).then(()=>{
      dPort.onchange = function(v){
      if(v === 1){
        view.style.backgroundColor = "red";
      }else{
        view.style.backgroundColor = "blue";
      }
    }
  });
});

narita2 commented 6 years ago

原型完成・・・27日

以下は修正　試作（KP-IR412　ver）

HTML (index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>KP-IR412</title>
    <script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
    <script src="./main.js"></script>
    <style>
      p{
          color:blue;
          text-align: center;
          font-size: 24px;
        }
        img{
          display:block;
          margin-left:auto;
          margin-right:auto;
        }
        #view{
          width:60px;
          height:60px;
          border-radius:30px;
          background-color:black;
          margin-left:auto;
          margin-right:auto;
        }
    </style>
  </head>
  <body>
    <p><a href="http://eleshop.jp/shop/g/gE3336G/" target="_blank">Human body infrared sensing element KP-IR412</a></p>
    <div id="view"></div>
    <img src=".png" height="400px">
  </body>
</html>

JS

'use strict';

navigator.requestGPIOAccess().then((gpioAccess)=>{
  var view = document.getElementById('view');
  var dPort = gpioAccess.ports.get(12);
  return Promise.all([ 
    dPort.export("in")
  ]).then(()=>{
      dPort.onchange = function(v){
      if(v === 1){
        view.style.backgroundColor = "red";
      }else{
        view.style.backgroundColor = "blue";
      }
    }
  });
});

narita2 commented 6 years ago

JavaScript　8/28(自)

Promise.allの引数を配列から変更（動作未確認）

'use strict';

navigator.requestGPIOAccess().then((gpioAccess)=>{
  var view = document.getElementById('view');
  var dPort = gpioAccess.ports.get(12);
  return Promise.all(dPort.export("in")).then(()=>{
      dPort.onchange = function(v){
      if(v === 1){
        view.style.backgroundColor = "red";
      }else{
        view.style.backgroundColor = "blue";
      }
    }
  });
});

narita2 commented 6 years ago

<正規　修正版>

HTML <正規>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
    <title>KP-IR412</title>
    <script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
    <script src="./main.js"></script>
    <style>
      p{
        color:blue;
        text-align: center;
        font-size: 24px;
      }
      img{
        display:block;
        margin-left:auto;
        margin-right:auto;
      }
    </style>
  </head>
  <body>
    <p><a href="http://eleshop.jp/shop/g/gE3336G/" target="_blank">人体赤外線感知素子
KP-IR412</a></p>
    <!--このあたりに回路図とか、パーツURLなどが入る。他の/gc/gpio/配下のサンプル参照-->
    <img src="./schematic.png" height="400px">
    <h1><div id="sensor">---</div></h1>
  </body>
</html>

JavaScript　<正規>

'use strict';

navigator.requestGPIOAccess().then((gpioAccess)=>{
  var sensor = document.getElementById('sensor');
  var dPort = gpioAccess.ports.get(12);
  return Promise.all([dPort.export("in")]).then(()=>{
      dPort.onchange = function(v){
      if(v === 1){
        sensor.innerHTML = "ON";
      }else{
        sensor.innerHTML = "OFF";
      }
    }
  });
});

narita2 commented 6 years ago

JS 微調整

document.getElementById()を代入する変数名を変更

'use strict';

navigator.requestGPIOAccess().then((gpioAccess)=>{
  var sensor = document.getElementById('sensor');
  var dPort = gpioAccess.ports.get(12);
  return Promise.all([dPort.export("in")]).then(()=>{
      dPort.onchange = function(v){
      if(v === 1){
        sensor.innerHTML = "ON";
      }else{
        sensor.innerHTML = "OFF";
      }
    }
  });
});

narita2 commented 6 years ago

git

初心者向けGithubへのPullRequest方法 (検索)

narita2 commented 6 years ago

schematic

narita2 / -internship

焦電素子、人感センサ（KP-IR412）の学習 #6

焦電素子とは

赤外線センサ

赤外線とは

C言語での記述を元にJS

(HIGH)

(LOW)

i2c-grove-light

readGpioValue

未完成

プログラム概要　試

Promise.all()

3

4

5

原型完成・・・１

以下は修正　試作（HUMAN-SENSOR　ver）

HTML(index.html)

JS(main.js)

原型完成・・・27日

以下は修正　試作（KP-IR412　ver）

HTML (index.html)

JS

JavaScript　8/28(自)

Promise.allの引数を配列から変更（動作未確認）

<正規　修正版>

HTML <正規>

JavaScript　<正規>

JS 微調整

document.getElementById()を代入する変数名を変更

git

narita2 / -internship

焦電素子、人感センサ（KP-IR412）の学習 #6

焦電素子とは

赤外線センサ

赤外線とは

C言語での記述を元にJS

(HIGH)

(LOW)

i2c-grove-light

readGpioValue

未完成

プログラム概要 試

Promise.all()

3

4

5

原型完成 ・・・１

以下は修正 試作（HUMAN-SENSOR ver）

HTML(index.html)

JS(main.js)

原型完成 ・・・27日

以下は修正 試作（KP-IR412 ver）

HTML (index.html)

JS

JavaScript 8/28(自)

Promise.allの引数を配列から変更（動作未確認）

<正規 修正版>

HTML <正規>

JavaScript <正規>

JS 微調整

document.getElementById()を代入する変数名を変更

git

プログラム概要　試

原型完成・・・１

以下は修正　試作（HUMAN-SENSOR　ver）

原型完成・・・27日

以下は修正　試作（KP-IR412　ver）

JavaScript　8/28(自)

<正規　修正版>

JavaScript　<正規>