nüno ver.2 TINYキットをM5Stackと連携する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242072/9f422cc4-3aaf-036b-5bca-104d47d9765a.png)


この記事は導電布を用いたインターフェースキットnüno ver.2 TINYキット を使用して、
M5Stackと連携する記事です。

※nüno ver.2 TINYキットはスイッチサイエンスさんで販売しています。

https://www.switch-science.com/catalog/7038/


# nüno ver.2 TINYキット とは
[nüno ver.2 TINYキット](https://newno.info/) の詳細については下記の記事を参考にして下さい。

https://qiita.com/tendots/items/95f4f618c302f1c73fff

### M5Stackとの接続方法
以下は上記の記事で
「フレキシブル基板とリジット基板を接続」
までを完了していることを前提として進めます。


## 注意点

M5StackのI2CのGrove端子は電圧が5Vとなっています。
nünoで使用しているMTCH6102は許容電圧が **4V** までとなっており、接続すると不具合の原因となります。
（筆者も当初その仕様に気づかず、ICが使えなくなってしまいました）

これを回避するためにM5Stackシリーズと接続する際は、
電源をI2Cからではなく3.3Vのピンから取るようにしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242072/753c0895-546b-6c6e-3a95-3fedaa2fd3aa.png)

この画像のようにnünoの基板から出ているGroveケーブルの
SDAをGPLの __21番__ に、SCLを __22番__ に接続し、
VDDを__3.3V__へ、GNDは__GND__へ接続することで対応できます。

GROVEケーブルのケーブル色はメーカーごとに異なるので注意してください。

# プログラム
下記はM5StackのLCDディスプレイにセンサー値を表示するサンプルプログラムです。

nünoをArduinoで使用するためにMTCH6102用のライブラリをインクルードが必要です。
MTCH6102のライブラリは下記のファイルから拝借します。

https://github.com/theapi/touch_timer

```
#include <M5Stack.h>
#include "MTCH6102.h"
#define ADDR 0x25
#define ScreenWidth 320
#define ScreenHeight 240

MTCH6102 mtch = MTCH6102();
int len = 8;

void setup() { 

  // Initialize the M5Stack object
  M5.begin();
  //Wire.begin();
  M5.Power.begin();



  //Serial.begin(115200);
  delay(100);
  Serial.println();
  Serial.println("start");

  //Wire.begin();
  mtch.begin();
  mtch.writeRegister(MTCH6102_MODE, MTCH6102_MODE_STANDBY);
  mtch.writeRegister(MTCH6102_NUMBEROFXCHANNELS, 0x08);
  mtch.writeRegister(MTCH6102_NUMBEROFYCHANNELS, 0x03);//最低3点必要なため
  mtch.writeRegister(MTCH6102_MODE, MTCH6102_MODE_FULL);

  byte data;

  // the operating mode (MODE)
  data = mtch.readRegister(MTCH6102_MODE);
  Serial.print("MODE: ");
  Serial.println(data,BIN);

  data = mtch.readRegister(MTCH6102_NUMBEROFXCHANNELS);
  Serial.print("NUMBEROFXCHANNELS: ");
  Serial.println(data);

  data = mtch.readRegister(MTCH6102_NUMBEROFYCHANNELS);
  Serial.print("NUMBEROFYCHANNELS: ");
  Serial.println(data);

  mtch.writeRegister(MTCH6102_CMD, 0x20);
  delay(500);


}

void loop() {
  M5.Lcd.setCursor(0, 70);

  byte data; 
  float sensVals[10]={0,0,0,0,0,0,0,0,0,0};

  //背景ライン
  for(int i=0; i<len; i++){
    M5.Lcd.drawLine((i+1)*35, ScreenHeight-40, (i+1)*35, 0, 0x0000cc);
  }
  for(int i=1; i<11; i++){
    M5.Lcd.drawLine(0, i*20, ScreenWidth, i*20, 0x0000cc);
  }

  Serial.print("SENSORVALUE_RX <i>: ");
  //for (byte i = MTCH6102_SENSORVALUE_RX0; i < MTCH6102_SENSORVALUE_RX0+10; i++) {
  for (int i = 0; i < len; i++) {
     data = mtch.readRegister(MTCH6102_SENSORVALUE_RX0+(i+2));

    Serial.print(data);
    Serial.print(", ");

    sensVals[i] = data;

    M5.Lcd.fillRect(30+(i*35), ScreenHeight-20, 30, 10, TFT_BLACK);
    M5.Lcd.setCursor(30+(i*35), ScreenHeight-20);
    M5.Lcd.print(data);
  }

  //グラフ線の描画
  int leftMargin = 0;
  for (int i = 0; i<len+1; i++){
    float prev;
    float current;
    if(i==0){
       prev = 0;
    }if(i==len+1){
      current = 0;
    }else{
       prev=sensVals[i-1];
       current = sensVals[i];
    }

    M5.Lcd.drawLine(leftMargin+(i*35), 200-(prev/255)*200, leftMargin+((i+1)*35), 200-(current/255)*200, TFT_WHITE);
  }
  delay(50);



  //グラフ線の消去
  for (int i = 0; i<len+1; i++){
    float prev;
    float current;
    if(i==0){
       prev = 0;
    }if(i==len+1){
      current = 0;
    }else{
       prev=sensVals[i-1];
       current = sensVals[i];
    }
    M5.Lcd.drawLine(leftMargin+(i*35), 200-(prev/255)*200, leftMargin+((i+1)*35), 200-(current/255)*200, TFT_BLACK);
  }

  Serial.println();
  M5.Lcd.println();
  M5.update();

 }
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242072/b73c7da1-78bb-84c4-9dc2-603dc069851e.png)

これでうまく動作していれば、
M5Stackのディスプレイに折れ線グラフが表示され、布にタッチした位置に合わせてグラフが変化すると思います。

これでM5Stackの動作は完了です！