obnizにメモリ液晶をつなげてみた

obnizにシャープのメモリ液晶をつなげてみました。
obnizのOLEDディスプレイと同じで、canvasを使うと画像なども表示することができます。
Arduinoだとメモリ容量の関係で扱いが難しい液晶ですが、obnizなら画像の表示も簡単にできます。

# 購入先
obnizには、すでにメモリ液晶用のライブラリがあります。
wired関数の中で液晶のサイズを指定できるので、同じ駆動方式の液晶であれば型番によらず使うことができます。
以下の液晶であれば使うことができます。

<dl>
<dt>1.3インチ 96x96</dt>
<dd><a href="https://www.adafruit.com/product/1393">Adafruit - SHARP Memory Display Breakout - 1.3" 96x96</a></dd>
<br>
<dt>1.3インチ 168x144</dt>
<dd><a href="https://www.adafruit.com/product/3502">Adafruit - SHARP Memory Display Breakout - 1.3" 168x144</a></dd>
<dd><a href="https://www.switch-science.com/catalog/3350/">スイッチサイエンス - 1.3インチ シャープモノクロメモリ液晶モジュール</a></dd>
<br>
<dt>2.7インチ 400x240</dt>
<dd><a href="http://akizukidenshi.com/catalog/g/gP-04944/">秋月電子 - シャープ　モノクロＨＲ－ＴＦＴメモリ液晶モジュール　２．７インチ</a></dd>
</dl>
秋月から2.7インチのモジュールを購入する場合は、[フレキコネクタDIP化キット](http://akizukidenshi.com/catalog/g/gK-07253/)も忘れないでください。__※要はんだ付け__

#1.3インチ液晶を使ってみる
Adafruitのモジュールを使ってみます。1.3インチしかありませんが、ドットは非常に細かいです。
液晶は本来3V駆動ですが、このモジュールはレギュレータやレベル変換が付いています。
## obnizと接続
obnizにつなぎます。
![IMG_20181020_172641.jpg](https://qiita-image-store.s3.amazonaws.com/0/291462/a64763b7-a3e5-a572-46c5-27fca1782646.jpeg)

(素の液晶は3V駆動ですが、モジュールで変換してくれるので何も考えずにつなぎます)
## ピン割り当て
前項の写真と同じように、obnizの0番ピンから接続した場合は、以下のような割り当てになります。

```javascript
mdisp = obniz.wired("SharpMemoryTFT", {vcc:0 , gnd:2 , sclk:3 , mosi:4, cs:5, width:144, height:168});
```
96x96の液晶をお使いの場合は、widthとheightの値を96に変更してください。

#2.7インチ液晶を使ってみる
秋月電子のモジュールを使ってみます。液晶のサイズはクレジットカードよりも二回りほど小さいです。1.3インチの液晶と同じくドットは非常に細かいです。
## obnizと接続
フレキコネクタDIP化キットにあらかじめピンヘッダをはんだ付けしておきます。
次にフレキコネクタに液晶モジュールのフレキを接続します。
__フレキケーブルは断線しやすいので、力が加わらないように注意してください。__
特にフレキケーブルと液晶の付け根が外れやすいです。

下の写真のように、コネクタの茶色の部分を持ち上げます。
![IMG_20181020_171701.jpg](https://qiita-image-store.s3.amazonaws.com/0/291462/11cc6ebb-9e85-2232-33ea-05e87a91972a.jpeg)
ここに、液晶モジュールのフレキケーブルを入れます。
このときフレキケーブルの金色の部分がコネクタの下に来るようにしてください。
![IMG_20181020_171738.jpg](https://qiita-image-store.s3.amazonaws.com/0/291462/ea408c65-7c51-6e8f-cf2a-6705aa555732.jpeg)
フレキケーブルをセットしたら、下の写真のようにコネクタのロックを下げます。
![IMG_20181020_171754.jpg](https://qiita-image-store.s3.amazonaws.com/0/291462/b75f75cf-455e-6d59-424f-9492387183c0.jpeg)
ピンヘッダをobnizへ接続します。
![IMG_20181020_172429.jpg](https://qiita-image-store.s3.amazonaws.com/0/291462/6569380c-3a7e-9d20-c387-9ff3facc91bb.jpeg)

## ピン割り当て
前項の写真と同じように、obnizの0番ピンから接続した場合は、以下のような割り当てになります。

```javascript
mdisp = obniz.wired("SharpMemoryTFT", {vcc:6 , gnd:8, vcc_a:5, gnd_a:9, sclk:0 , mosi:1, cs:2, disp:4, extcomin:3, extmode:7, width:400, height:240});
```
Adafruitのように専用基板が無いため、設定する項目が増えました。
また、液晶のピン番号とDIP化基板のピン番号が逆になっているので、ピン割り当てを変更する場合は注意してください。

| データシート上の記号 | obnizの記号 | 液晶モジュールのピン番号 | DIP化基板のピン番号 |
|:-:|:-:|:-:|:-:|
| SCLK | sclk | 1 | 10 |
| SI | mosi | 2 | 9 |
|SCS| cs | 3 | 8 |
|EXTCOMIN| extcomin |4|7|
| DISP | disp |5|6|
| VDDA | vcc_a |6|5|
| VDD | vcc |7|4|
| EXTMODE | extmode | 8 | 3 |
| VSS | gnd | 9 | 2 |
| VSSA | gnd_a | 10 | 1 |

# 表示させてみる
QRコードを除いて、obniz本体のOLEDディスプレイの[描画関数](https://obniz.io/doc/sdk/doc/display)がそのまま使えます。

## 文字の表示
サンプルそのままですが、とりあえず文字を表示させてみます。

```javascript
mdisp.clear();
mdisp.print("Hello!");
```
![IMG_20181020_175627.jpg](https://qiita-image-store.s3.amazonaws.com/0/291462/7469e68d-5cd6-e428-bce1-096d236e9f46.jpeg)
小さめですが、ちゃんと表示されました。

2.7インチディスプレイでフォントを大きくして表示してみます。

```javascript
mdisp.font('serif',200)
mdisp.print("鬱")
```
![IMG_20181020_160932.jpg](https://qiita-image-store.s3.amazonaws.com/0/291462/8b9ba545-b5e8-052b-649f-229f997b435a.jpeg)
複雑な漢字もきれいに表示できます。

日本語の実用的な最小フォントは25程度でしょうか。それ以下だと文字がかすれてしまいます。(以下はsans-serif体,フォントサイズ25のときの写真)
![IMG_20181020_161600.jpg](https://qiita-image-store.s3.amazonaws.com/0/291462/a997f214-4756-415e-1137-6e8a3202b4ee.jpeg)
1.3インチ液晶の場合は、フォントサイズ16程度が下限でした。(sans-serif体)
![IMG_20181020_180427.jpg](https://qiita-image-store.s3.amazonaws.com/0/291462/5b5869a4-c2ee-b483-95e4-45f56bd3a5e2.jpeg)


## 写真の表示
次はcanvasを使って画像を表示してみます。
同じ画像をブラウザ上に表示させるため、html部分に以下のコードを追加します。
widthとheightは使用するディスプレイに合わせてください。

```html
<canvas id="c1" width="400" height="240"></canvas>
```

スクリプトは以下の通りです。
Image address hereの部分に画像のアドレスを入れると、その画像を表示します。
画像のサイズがディスプレイサイズより小さいと、余白が黒く表示されてしまいます。
canvas関連は[こちら](http://www.html5.jp/canvas/how6.html)のサイトを参考にしました。

```javascript
mdisp = obniz.wired("SharpMemoryTFT", {vcc:6 , gnd:8, vcc_a:5, gnd_a:9, sclk:0 , mosi:1, cs:2, disp:4, extcomin:3, extmode:7, width:400, height:240});
mdisp.clear();
        
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "Image address here";
img.onload = function() {
     ctx.drawImage(img,0,0);
     mdisp.draw(ctx);
}
```
![IMG_20181020_171335.jpg](https://qiita-image-store.s3.amazonaws.com/0/291462/d649941d-490a-6298-0fd6-ee604c5e8107.jpeg)

画像を使ったアニメーションは処理が重く表示できませんでした。
画像を変化させたい場合は、画像を何枚か用意して表示する必要がありそうです。
また、1.3インチ、2.7インチ液晶ともに画面の書き換えに0.5秒程度かかります。

電子工作でよく使われるSTN液晶よりもコントラストが高く、ドットも細かいので非常に見やすいです。
消費電力もフルカラー液晶に比べて少ないので、商品ポップなどによいかもしれません。