[MEMO] 人感センサ 『GPIO』

[narita2]

• プラス：Vdd側（5v）

  Vdd（プラス端子）は、5Vが出力されれば（Raspberry Piの）どのピンに接続しても動くはず

• 真ん中の端子：センサーが反応した時だけ電圧がかかる、信号取り出し用の端子（GPIO18）
• マイナス：GND側（GND）

参考にしたページ1

参考にしたページ2

参考にしたページ3

参考にしたページ4

参考に？ページ

[narita2]

0826 試作

HTML

<script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
<script src="https://mz4u.net/libs/gc2/i2c-ADT7410.js"></script>

<div id="detection"></div>

---

CSS

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

---

JavaScript

(async ()=>{
    var detection = document.getElementById('detection');

  navigator.requestGPIOAccess().then( (gpioAccess)=>{
    var port = gpioAccess.ports.get(18);
    await.port.export("out").then( ()=>{
        setInterval(function(){
        var ^= 1;
        port.write(v);
        detection.style.backgroundColor = (v)? "red" : "black";
      }, 2000);
    });
  });
})();

[narita2]

asyncなし　試作

(()=>{
    var detection = document.getElementById('detection');

  navigator.requestGPIOAccess().then( (gpioAccess)=>{
    var port = gpioAccess.ports.get(18);
    port.export("out").then( ()=>{
        setInterval( function(){
        var ^= 1;
        port.write(v);
        detection.style.backgroundColor = (v)? "red" : "black";
      }, 2000);
    });
  };
})();

[narita2]

人感センサが反応したらLED点灯　試作

(async()=>{
    navigator.requestGPIOAccess().then( gpioAccess=>{
    var ledport = gpioAccess.ports.get(26);
    var dport = gpioAccess.ports.get(18);
    var v = 0;
    return dport.export("out").then( ()=>{
        setInterval( function(){
        v ^= 1;
        ledport.write(v);
      }, 2000);
    });
  });
})();

[narita2]

asyncなし

人感センサが反応したらLED点灯

(()=>{
    navigator.requestGPIOAccess().then((gpioAccess)=>{
    var ledport = gpioAccess.ports.get(26);
    var dport = gpioAccess.ports.get(18);
    return dport.export("out").then(()=>{
        setInterval(function()=>{
        v ^= 1;
        ledport.write(v);
      },2000);
    });
  });
})();

[narita2]

GPIO

緑色のピンを、Webアプリから利用可能なGPIOとして設定している GPIOとは_Qiita

[narita2]

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

    navigator.requestGPIOAccess().then((gpioAccess)=>{
    var ledport = gpioAccess.ports.get(26);
        var dport = gpioAccess.ports.get(5);
    var v = 0;
    await dport.export("in").then(()=>{
        ledport.write(v) = (v == 1) ? 1 : 0;
    });
  });
})();

[narita2]

1. GPIOAccess インタフェースを取得するための最初のAPI呼び出し
2. LEDのポート

   GPIOポート番号 26を指定してportオブジェクトを取得

3. 人感センサのポート

   GPIOポート番号 5を指定してportオブジェクトを取得

4. LEDのポートを出力モードで初期化

[narita2]

0827

【Arduino】焦電型赤外線センサーを使って人を検知する

[narita2]

SB412A

[narita2]

HTML]

<div id="viewMessage"></div>

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

CSS

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

JS

(async ()=>{

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

    var gpioAccess = await navigator.requestGPIOAccess();
  var port = gpioAccess.ports.get(5); //人感センサのポート

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

})();

[narita2]

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

  var viewMessage = document.getElementById("viewMessage");
  var gpioAccess = await navigator.requestGPIOAccess();
  var port = gpioAccess.ports.get(5); //人感センサのポート
  function detection(v){
    if(v === 0){
        port.write(0);
      viewMessage.style.backgroundColor = "black";
    }else{
        port.write(1);
      viewMessage.style.backgroundColor = "red";
    }
  }

  while(1){
    var val = await port.read();
    val ^= 1;
    function(val);
    await sleep(100);
  }

})();

[narita2]

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

    var viewMessage = document.getElementById("viewMessage");
  var gpioAccess = await navigator.requestGPIOAccess();
  var port = gpioAccess.ports.get(12); //人感センサのポート

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

[narita2]

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

    var viewMessage = document.getElementById("viewMessage");
    var gpioAccess = await navigator.requestGPIOAccess();
  var port = gpioAccess.ports.get(12); //人感センサのポート

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

---

<div id="viewMessage"></div>

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

---

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

[narita2]

DC

[narita2]

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

Copyright (c) 2018 by anonymous (http://jsbin.com/qayerabapa/1/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 slepp = (ms)=>{
        return new Promise((resolve)=>setTimeout(resolve,ms));
    };

    var viewMessage = document.getElementById("viewMessage");
    var gpioAccess = await navigator.requestGPIOAccess();
  var port = gpioAccess.ports.get(12); //人感センサのポート

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

  port.onchange
})();

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