CHIRIMENをNode.jsで使用してみる⑷ ー I2C編 part2 ー

## はじめに
本記事では、複数回に分けてCHIRIMENコミュニティが提供しているnpmパッケージnode-web-gpioとnode-web-i2cを使用してNode.jsからGPIOとI2Cを制御するために私が実施した方法とそのサンプルコードを記載した備忘録になっています。

今回はI2C編の第2回で、CHIRIMENから下記5種類のGroveセンサー/ディスプレイを使用する方法について説明していきます。前回の記事は[こちら](https://qiita.com/okojon/items/5de137b651cada660a3e)。

### 使用センサー
- I2C-Grove-Accelerometer
ADXL345搭載の三軸加速度センサー。

- I2C-Grove-Gesture
PAJ7620U2搭載のジェスチャーセンサー。

- I2C-Grove-Light
TSL2561で搭載の光センサー。

- I2C-Grove-OledDisplay
SSD1308搭載の小さなOLED（有機EL 128x64px）ディスプレイ。

- I2C-Grove-Touch
MPR121搭載の静電容量式タッチセンサー。

## コードの主な違い
Webブラウザ版とNode.js 版でのコードの主な違いについて説明します。
前回と同様ですが再掲します。

- navigator()関数がNode.jsでは使用不可、記述する必要がないため削除する。
- sleep()関数がNode.js には存在しないため、使用する場合は適宜実装する必要がある。
- その他、HTML下では動作するがNode.js下では動作しない記法を変更する必要がある。

## node-web-i2cを使う上での注意点
node-web-i2cを用いる場合、使用するI2Cパーツごとパッケージをインストールする必要があります。[CHIRIMENをNode.jsで使用してみる⑴ ー 導入編 ー](https://qiita.com/okojon/items/58726940ef51d1c4a74c)で作成したnode-web-i2c をインストールした場所と同じディレクトリで以下のようにパッケージのインストールを行ってください。また、パッケージ一覧は[こちら](https://github.com/chirimen-oh/chirimen-drivers)のURLを参照してください。


```
xxxxはパッケージ名
% npm i @chirimen/xxxx
```


## I2C-Grove-Accelerometer
CHIRIMENからI2C-Grove-Accelerometerを使用して3軸加速度センサーで取得した値を表示します。このセンサーはGroveケーブル経由で接続します。

### 使用パーツ
- GROVE - I2C 三軸加速度センサ ADXL345搭載 x 1
- Grove - ジャンパー線（メス）x 1

### 配線
以下の図のように配線してください。
![schematic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1797679/6a37eb3a-6ed2-334c-158f-42b7255c3f5a.png)


### パッケージのインストール
以下のようにI2C-Grove-Accelerometerのパッケージをインストールしてください。

```
% npm i @chirimen/grove-accelerometer
```
### Webブラウザ版のJavaScript
Webブラウザ版では、ループ処理によってI2C-Grove-Accelerometerから得たx, y, zの3軸の値を動的に出力しています。

```JavaScript
main();

async function main() {
  var ax = document.getElementById("ax");
  var ay = document.getElementById("ay");
  var az = document.getElementById("az");
  var i2cAccess = await navigator.requestI2CAccess();
  var port = i2cAccess.ports.get(1);
  var groveaccelerometer = new GROVEACCELEROMETER(port, 0x53);
  await groveaccelerometer.init();
  for (;;) {
    try {
      var values = await groveaccelerometer.read();
      ax.innerHTML = values.x ? values.x : ax.innerHTML;
      ay.innerHTML = values.y ? values.y : ay.innerHTML;
      az.innerHTML = values.z ? values.z : az.innerHTML;
    } catch (err) {
      console.log("READ ERROR:" + err);
    }
    await sleep(1000);
  }
}
```

### Node.js版のJavaScript
"i2c-grove-accelerometer.js"というファイル名で下記のコードを保存してください。
このNode.jsでは、コードを実行した時点でのx, y, zの3軸の値を出力する形で実装しています。

```JavaScript
// Grove-Accelerometer(ADXL345)で三軸加速度を表示させるチュートリアル
const { requestI2CAccess } = require("node-web-i2c");
const GROVEACCELEROMETER = require("@chirimen/grove-accelerometer");

async function adxl345() {
  const i2cAccess = await requestI2CAccess();
  const i2c1 = i2cAccess.ports.get(1);

  // ADT345の接続されているポートの指定
  const groveaccelerometer = new GROVEACCELEROMETER(i2c1, 0x53);
  await groveaccelerometer.init();
  const values = await groveaccelerometer.read();
  console.log(values);
}

adxl345();
```

### 実行してみよう
下記のようにコマンドラインから実行し、x, y, zの3軸の値が出力されれば成功です。

```
% node i2c-grove-accelerometer.js
{ x: -1.7593, y: -9.2938, z: -3.9776 }
```

## I2C-Grove-Gesture
CHIRIMENからI2C-Grove-Gestureを使用して、I2C接続のジェスチャーセンサー（センサーの前で手などを動かすと動かした方向などのモーションを検出するセンサー）の検出結果を表示します。このセンサーはGroveケーブル経由で接続します。

### 使用パーツ
- GROVE - ジェスチャー x 1
- Grove - ジャンパー線（メス）x 1 

### 配線
以下の図のように配線してください。
![schematic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1797679/cc6ae43f-e21c-b75c-e18c-81ab59cdb488.png)


### パッケージのインストール
以下のようにI2C-Grove-Gestureのパッケージをインストールしてください。

```
% npm i @chirimen/grove-gesture
```

### Webブラウザ版のJavaScript
Webブラウザ版では、ループ処理によってI2C-Grove-Gestureから抽出した手などを動かすと動かした方向などのモーションを動的に出力しています。

```JavaScript
main();

async function main() {
  var head = document.getElementById("head");
  head.innerHTML = "started";
  var i2cAccess = await navigator.requestI2CAccess();
  head.innerHTML = "initializing...";
  var port = i2cAccess.ports.get(1);
  var gesture = new PAJ7620(port, 0x73);
  await gesture.init();

  for (;;) {
    var v = await gesture.read();
    head.innerHTML = v;
    await sleep(1000);
  }
}
```

### Node.js版のJavaScript
"i2c-grove-gesture"というファイル名で下記のコードを保存してください。
このNode.jsでは、コードを実行した時点から5回分のモーションを検出すると終了するような形で実装しています。

```JavaScript
// Grove-Gestureでモーションを抽出するチュートリアル
const { requestI2CAccess } = require("node-web-i2c");
const GROVEGESTURE = require("@chirimen/grove-gesture");
const sleep = require("util").promisify(setTimeout);

async function main() {
  const i2cAccess = await requestI2CAccess();
  const port = i2cAccess.ports.get(1);

  // Grove-Gestureの接続されているポートの指定
  var grovegesture = new GROVEGESTURE(port, 0x73);
  await grovegesture.init();

  var i = 0;

  while (i < 5) {
    var v = await grovegesture.read();
    if(v !="----"){
      console.log(v);
      i = i + 1;
    }
    await sleep(1000);
  }
}

main();
```

### ​実行してみよう
下記のようにコマンドラインから実行し、5回分のモーションが抽出できれば成功です。

```
% node i2c-grove-gesture.js
up
back
back
down
forward
```

## I2C-Grove-Light
CHIRIMENからI2C-Grove-Lightを使用して、I2C接続の光センサーで取得した明るさを表示します。このセンサーはGroveケーブル経由で接続します。

### 使用パーツ
- GROVE - I2C デジタル光センサ x 1
- Grove - ジャンパー線（メス）x 1 

### 配線
以下の図のように配線してください。
![schematic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1797679/4d3d11fd-2c40-90c1-ae14-4bb0e80c9e70.png)


### パッケージのインストール
以下のようにI2C-Grove-Lightのパッケージをインストールしてください。

```
% npm i @chirimen/grove-light
```

### Webブラウザ版のJavaScript
Webブラウザ版では、ループ処理によってI2C-Grove-Lightから取得した明るさを動的に出力しています。

```JavaScript
main();

async function main() {
  var head = document.getElementById("head");
  var i2cAccess = await navigator.requestI2CAccess();
  var port = i2cAccess.ports.get(1);
  var grovelight = new GROVELIGHT(port, 0x29);
  await grovelight.init();
  for (;;) {
    try {
      var value = await grovelight.read();

      head.innerHTML = value ? value : head.innerHTML;
    } catch (error) {
      console.log(" Error : ", error);
    }
    await sleep(200);
  }
}
```

### Node.js版のJavaScript
"i2c-grove-light"というファイル名で下記のコードを保存してください。
このNode.jsでは、コードを実行した時点での明るさの値を出力する形で実装しています。

```JavaScript
const { requestI2CAccess } = require("node-web-i2c");
const GROVELIGHT = require("@chirimen/grove-light");

async function main() {
  const i2cAccess = await requestI2CAccess();
  const port = i2cAccess.ports.get(1);

  // Grove-Lightの接続されているポートの指定
  const grovelight = new GROVELIGHT(port, 0x29);
  await grovelight.init();
  const value = await grovelight.read();
  console.log(value);
}

main();
```

### ​実行してみよう
下記のようにコマンドラインから実行し、明るさの値を出力できれば成功です。

```
% node i2c-grove-light.js
86
```

## I2C-Grove-OledDisplay
CHIRIMENからI2C-Grove-OledDisplayを使用して、I2C接続の小さなOLED（有機EL 128x64px）ディスプレイへ文字を表示します。このディスプレイはGroveケーブル経由で接続します。

### 使用パーツ
- GROVE - I2C OLEDディスプレイ128×64 x 1
- Grove - ジャンパー線（メス）x 1 

### 配線
以下の図のように配線してください。
![schematic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1797679/99332163-37b7-0011-2723-5adbe837a425.png)

### パッケージのインストール
以下のようにI2C-Grove-OledDisplayのパッケージをインストールしてください。

```
% npm i @chirimen/grove-oled-display
```

### Webブラウザ版のJavaScript
Webブラウザ版では、I2C-Grove-OledDisplay上に"hello real world"と出力し、その進行状況をWebブラウザ上に表示しています。

```JavaScript
main();

async function main() {
  var head = document.getElementById("head");
  head.innerHTML = "started";
  var i2cAccess = await navigator.requestI2CAccess();
  head.innerHTML = "initializing...";
  var port = i2cAccess.ports.get(1);
  var display = new OledDisplay(port);
  await display.init();
  display.clearDisplayQ();
  await display.playSequence();
  head.innerHTML = "drawing text...";
  display.drawStringQ(0, 0, "hello");
  display.drawStringQ(1, 0, "Real");
  display.drawStringQ(2, 0, "World");
  await display.playSequence();
  head.innerHTML = "completed";
}
```

### Node.js版のJavaScript
"i2c-grove-oled-display"というファイル名で下記のコードを保存してください。
このNode.jsでは、Webブラウザ版と同様にI2C-Grove-OledDisplay上に"hello real world"と出力しますが、その進行状況はconsole.logでコマンドライン上に出力しています。

```JavaScript
// I2C-Grove-OledDisplayでディスプレイ表示させるチュートリアル
const { requestI2CAccess } = require("node-web-i2c");
const GroveOledDisplay = require("@chirimen/grove-oled-display");

async function main() {
  console.log("Started")
  const i2cAccess = await requestI2CAccess();
  console.log("initializing...");
  const port = i2cAccess.ports.get(1);
  const display = new GroveOledDisplay(port);
  await display.init();
  display.clearDisplayQ();
  await display.playSequence();
  console.log("drawing text...");
  display.drawStringQ(0, 0, "hello");
  display.drawStringQ(1, 0, "Real");
  display.drawStringQ(2, 0, "World");
  await display.playSequence();
  console.log("completed");
}

main();
```

### ​実行してみよう
下記のようにコマンドラインから実行し、I2C-Grove-OledDisplay上に"hello real world"と出力されれば成功です。実際に出力している様子もお見せしますね。

```
% node i2c-grove-oled-display.js
Started
initializing...
drawing text...
completed
```
![実行.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1797679/73ebef11-74a8-3e24-030b-bc275f2ccd06.jpeg)


## I2C-Grove-Touch
CHIRIMENからI2C-Grove-Touchを使用して、I2C接続のタッチセンサー（静電容量式タッチキー）によるタッチ検出をおこないます。このセンサーはGroveケーブル経由で接続します。

### 使用パーツ
- GROVE - I2C タッチセンサ x 1
- Grove - ジャンパー線（メス）x 1 

### 配線
以下の図のように配線してください。
![schematic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1797679/40547e24-fe81-7656-5ea6-8477ee0b69b5.png)

### パッケージのインストール
以下のようにI2C-Grove-Touchのパッケージをインストールしてください。

```
% npm i @chirimen/grove-touch
```

### Webブラウザ版のJavaScript
Webブラウザ版では、ループ処理によってI2C-Grove-Touchから得たタッチセンサーの入力状況を動的に表示しています。なお、タッチされていれば"true", タッチされていなければ"false"で出力されます。

```JavaScript
main();

async function main() {
  var i2cAccess = await navigator.requestI2CAccess();
  var port = i2cAccess.ports.get(1);
  var touchSensor = new GroveTouch(port, 0x5a);
  await touchSensor.init();
  for (;;) {
    var ch = await touchSensor.read();
    document.getElementById("debug").innerHTML = JSON.stringify(ch);
    await sleep(100);
  }
}
```

### Node.js版のJavaScript
"i2c-grove-touch"というファイル名で下記のコードを保存してください。
このNode.jsでは、コードを実行した時点でのタッチセンサーの状態を検出する形で実装しています。

```JavaScript
// Grove-Touchでタッチ検出するチュートリアル
const { requestI2CAccess } = require("node-web-i2c");
const GroveTouch = require("@chirimen/grove-touch");


async function main() {
  const i2cAccess = await requestI2CAccess();
  const port = i2cAccess.ports.get(1);
  
  // Grove-Touchの接続されているポートを指定
  const touchSensor = new GroveTouch(port, 0x5a);
  await touchSensor.init();
  const ch = await touchSensor.read();
  console.log(ch);
}

main();
```

### ​実行してみよう
下記のようにコマンドラインから実行し、タッチセンサーの状態を検出できれば成功です。

```
% node i2c-grove-touch.js
[ false,
  false,
  false,
  false,
  false,
  false,
  false,
  false,
  true,
  false,
  true,
  false ]
```

## さいごに
今回は以上になります。今回はnode-web-i2cでI2Cの使用方法の概要と5種類のGroveセンサー/ディスプレイを使用するコードについて説明しました。次回も引き続きnode-web-i2cで使用可能なI2Cパーツの使用方法についての記事になる予定です。