Nefryのディスプレイを使おう


本記事は[Nefryアドベントカレンダー](https://qiita.com/advent-calendar/2017/nefry)5日目の記事です。
前日は@ShirataHikaruさんで[NefryBTでIoTこたつを作る](https://qiita.com/ShirataHikaru/items/a772240250e6e4ea1df1)でした。
安全な強電系の制御、良いですね。火事のリスクも軽減できそうです。

そういえば先日PRがマージされ、[ファームウェアの更新に寄与](https://github.com/Nefry-Community/arduino-esp32/pull/78)しました。やったぜ。

## About

[自分のブログの内容](http://m2wasabi.hatenablog.com/entry/2017/11/16/131030)と重複する部分もありますが、今回はディスプレイに表示させることについて重点的に説明します。

![nefry_display3.gif](https://qiita-image-store.s3.amazonaws.com/0/35009/68474308-3a38-f826-87fa-ace14284b87a.gif)


## スケッチ例の説明

本記事ではディスプレイ表示のサンプルについて説明します。

ArduinoIDEから 1.1.3以上のNefryBTのファームウェアをインストールした状態で、
`スケッチの例`→`Nefry Display` → `Draw Pictures` を参照すると完全なソースコードが得られます。

![キsample.PNG](https://qiita-image-store.s3.amazonaws.com/0/35009/0b5605df-10c8-7cdd-6e40-7b0d266bc3e6.png)

### NefrySetting

起動時に割り込んで設定を変更できる機能です。

#### Nefry.disableDisplayStatus();

WiFi接続時のステータスをディスプレイに表示しなくなります。
これを使うと生でdisplay()してもWiFiステータスに上書きされることはなくなります。
つまり画面描画のすべてを自分で制御できるようになります。

```C
#include <Nefry.h>
#include <NefryDisplay.h>
#include <NefrySetting.h>
void setting(){
  Nefry.disableDisplayStatus();
}
NefrySetting nefrySetting(setting);
```

### 画像表示

任意の画像を表示させます。

1. [Convert Image to XBM](https://www.online-utility.org/image/convert/to/XBM)で画像をXBMに変換してソースコードに貼り付けます。
1. `NefryDisplay.drawXbm`で描画します。

```C
#define iotlogo_width 51
#define iotlogo_height 64
static char iotlogo_bits[] = {
  0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0x07, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 
/* ～中略～ */
  0x80, 0x7F, 0x0F, 0x00,
};

void drawIotlogo() {
  NefryDisplay.drawXbm(0, 0, iotlogo_width, iotlogo_height, iotlogo_bits);
}

void loop() {
  NefryDisplay.clear();
  drawIotlogo();
  NefryDisplay.display();
}
```

![NefryDisplay_logopic1 1.png](https://qiita-image-store.s3.amazonaws.com/0/35009/b5f7b622-e8fa-e411-6d59-8f699d2d7952.png)

### 文字を描画

任意のフォントで画面に文字を描画します。
サンプルでは画面をクリアしない事で、アニメーションのような効果を表現しています。
**描画**なので座標を重ねると文字も重なります。

1. `NefryDisplay.setFont`でフォントを指定します。内蔵されているフォントは`Arimo_12`, `ArialMT_Plain_10`, `ArialMT_Plain_16`, `ArialMT_Plain_24` です。
2. `NefryDisplay.drawString` で文字を描画します。フォントは半角英数字のみ対応しています。


```C
void drawTextJDI() {
  NefryDisplay.setFont(Arimo_12);
  NefryDisplay.drawString(0, 0, "Just Do IT!");
  NefryDisplay.display();
  delay(1000);

  NefryDisplay.setFont(ArialMT_Plain_10);
  NefryDisplay.drawString(0, 10, "Just Do IT!");
  NefryDisplay.display();
  delay(1000);

  NefryDisplay.setFont(ArialMT_Plain_16);
  NefryDisplay.drawString(0, 20, "Just Do IT!");
  NefryDisplay.display();
  delay(1000);

  NefryDisplay.setFont(ArialMT_Plain_24);
  NefryDisplay.drawString(0, 32, "Just");
  NefryDisplay.display();
  delay(800);
  NefryDisplay.drawString(51, 32, "Do");
  NefryDisplay.display();
  delay(800);
  NefryDisplay.drawString(88, 32, "IT!");
  NefryDisplay.display();
}

void loop() {
  NefryDisplay.clear();
  drawTextJDI();
}
```
![NefryDisplay_logopic2 8.png](https://qiita-image-store.s3.amazonaws.com/0/35009/b77327e9-2c4a-18a7-1eb7-ea61cc461167.png)

### 図形を描画

簡単な図形を描画します。

使える関数は以下です。

<dl>
<dt>NefryDisplay.setPixel(X, Y)</dt>
<dd>点を描画します。</dd>
<dt>NefryDisplay.drawLine(X0, Y0, X1, Y1)</dt>
<dd>直線を描画します。</dd>
<dt>NefryDisplay.drawRect(X, Y, WIDTH, HEIGHT)</dt>
<dd>四角形を描画します。</dd>
<dt>NefryDisplay.fillRect(X, Y, WIDTH, HEIGHT)</dt>
<dd>四角形を塗りつぶします。</dd>
<dt>NefryDisplay.drawCircle(X, Y, RADIUS)</dt>
<dd>円形を描画します。</dd>
<dt>NefryDisplay.fillCircle(X, Y, RADIUS)</dt>
<dd>円形を塗りつぶします。</dd>
<dt>NefryDisplay.drawHorizontalLine(X, Y, LENGTH)</dt>
<dd>画面に水平に線を描画します。</dd>
<dt>NefryDisplay.drawVerticalLine(X, Y, LENGTH)</dt>
<dd>画面に垂直に線を描画します。</dd>
</dl>

描画関数で簡単に描ける[ドットスタジオ](https://dotstud.io/)のロゴ、良いですね。IoT的に。

```C
void drawDotlogo() {
  NefryDisplay.drawRect(14, 10, 32, 32);
  NefryDisplay.drawRect(15, 11, 30, 30);
  NefryDisplay.drawRect(34, 0, 32, 32);
  NefryDisplay.drawRect(35, 1, 30, 30);
  NefryDisplay.setFont(Arimo_12);
  NefryDisplay.drawString(0, 48, "dotstudio, inc.");
}

void loop() {
  NefryDisplay.clear();
  drawDotlogo();
  NefryDisplay.display();
}
```

![NefryDisplay_logopic3 2.png](https://qiita-image-store.s3.amazonaws.com/0/35009/011753e5-0d2a-ee59-baec-9f5ee881fdd9.png)

## おわりに

これで、画面に自由な描画をさせることができるようになり、デバイスとして表現の幅が広がります。
NefryBTはGrooveやMilkcocoaを使ったIoTだけでなく違ったアプローチでもいろいろ出来るので、可能性にあふれたデバイスです。
要はみんないろいろやろうぜ！ということです。

明日は…誰もいない。
その次の日は@tokutoku393さんです。電気風呂を超えるコンテンツを期待です。