3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

購入先

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

1.3インチ 96x96
Adafruit - SHARP Memory Display Breakout - 1.3" 96x96

1.3インチ 168x144
Adafruit - SHARP Memory Display Breakout - 1.3" 168x144
スイッチサイエンス - 1.3インチ シャープモノクロメモリ液晶モジュール

2.7インチ 400x240
秋月電子 - シャープ モノクロHR-TFTメモリ液晶モジュール 2.7インチ
秋月から2.7インチのモジュールを購入する場合は、[フレキコネクタDIP化キット](http://akizukidenshi.com/catalog/g/gK-07253/)も忘れないでください。__※要はんだ付け__

#1.3インチ液晶を使ってみる
Adafruitのモジュールを使ってみます。1.3インチしかありませんが、ドットは非常に細かいです。
液晶は本来3V駆動ですが、このモジュールはレギュレータやレベル変換が付いています。

obnizと接続

obnizにつなぎます。
IMG_20181020_172641.jpg

(素の液晶は3V駆動ですが、モジュールで変換してくれるので何も考えずにつなぎます)

ピン割り当て

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

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
ここに、液晶モジュールのフレキケーブルを入れます。
このときフレキケーブルの金色の部分がコネクタの下に来るようにしてください。
IMG_20181020_171738.jpg
フレキケーブルをセットしたら、下の写真のようにコネクタのロックを下げます。
IMG_20181020_171754.jpg
ピンヘッダをobnizへ接続します。
IMG_20181020_172429.jpg

ピン割り当て

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

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ディスプレイの描画関数がそのまま使えます。

文字の表示

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

mdisp.clear();
mdisp.print("Hello!");

IMG_20181020_175627.jpg
小さめですが、ちゃんと表示されました。

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

mdisp.font('serif',200)
mdisp.print("")

IMG_20181020_160932.jpg
複雑な漢字もきれいに表示できます。

日本語の実用的な最小フォントは25程度でしょうか。それ以下だと文字がかすれてしまいます。(以下はsans-serif体,フォントサイズ25のときの写真)
IMG_20181020_161600.jpg
1.3インチ液晶の場合は、フォントサイズ16程度が下限でした。(sans-serif体)
IMG_20181020_180427.jpg

写真の表示

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

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

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

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

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

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?