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インチ
#1.3インチ液晶を使ってみる
Adafruitのモジュールを使ってみます。1.3インチしかありませんが、ドットは非常に細かいです。
液晶は本来3V駆動ですが、このモジュールはレギュレータやレベル変換が付いています。
obnizと接続
(素の液晶は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化キットにあらかじめピンヘッダをはんだ付けしておきます。
次にフレキコネクタに液晶モジュールのフレキを接続します。
フレキケーブルは断線しやすいので、力が加わらないように注意してください。
特にフレキケーブルと液晶の付け根が外れやすいです。
下の写真のように、コネクタの茶色の部分を持ち上げます。
ここに、液晶モジュールのフレキケーブルを入れます。
このときフレキケーブルの金色の部分がコネクタの下に来るようにしてください。
フレキケーブルをセットしたら、下の写真のようにコネクタのロックを下げます。
ピンヘッダをobnizへ接続します。
ピン割り当て
前項の写真と同じように、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!");
2.7インチディスプレイでフォントを大きくして表示してみます。
mdisp.font('serif',200)
mdisp.print("鬱")
日本語の実用的な最小フォントは25程度でしょうか。それ以下だと文字がかすれてしまいます。(以下はsans-serif体,フォントサイズ25のときの写真)
1.3インチ液晶の場合は、フォントサイズ16程度が下限でした。(sans-serif体)
写真の表示
次は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);
}
画像を使ったアニメーションは処理が重く表示できませんでした。
画像を変化させたい場合は、画像を何枚か用意して表示する必要がありそうです。
また、1.3インチ、2.7インチ液晶ともに画面の書き換えに0.5秒程度かかります。
電子工作でよく使われるSTN液晶よりもコントラストが高く、ドットも細かいので非常に見やすいです。
消費電力もフルカラー液晶に比べて少ないので、商品ポップなどによいかもしれません。