有機ELディスプレ(OLED SSD1306)をArduino(I2C通信)からライブラリを使って表示する方法をサンプルソースコードと解説付きで纏めておきます。
が、ちょっとライブラリでは(私にとって)気になるところもあるため、別途ライブラリを使わずに表示する方法も纏める予定です。
▼ライブラリ無しでの使用方法▼
使用するOLEDは、制御チップにSSD1306が使われているよく見かけるOLEDです。
▲見難いですが、アインシュタインさんをビットマップ表示してます。
結線
▼結線▼
今回は、ArduinoからI2C通信で制御してます。なのでVcc、Gnd、SDA、SCLの4本を繋ぐだけでO.K。
▼テスト表示▼
▲ライブラリにあるサンプルを表示してます。保護フィルム貼ったままなので少し見難いですが、表示はくっきりしていていいですね。
では順にソース絡めながらよくライブラリの使い方を説明していきます。
セットアップとテキスト表示
#include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> Adafruit_SSD1306 display(128, 64, &Wire, -1); void setup() { display.begin(SSD1306_SWITCHCAPVCC, 0x3C); display.clearDisplay(); display.display(); display.setTextSize(1); display.setTextColor(WHITE); display.setCursor(25, 28); display.print("OLED Display"); display.display(); }
まずは事前準備。最初の3行で必要なライブラリを取り込みます。次に5行目でインスタンスを生成してます。引数は、( 横px, 縦px, &wire, -1)
こんな感じで引数はおまじないと思って記述しておきす。
*.begin()
で内部チャージ回路をON。2つ目の引数 「0X3C」 はOLEDのデバイスアドレスです。9、10行目でディスプレをクリア。ここまでが事前準備になります。以降からがテキストを表示している部分になります。
*.setTextSize()
でフォントサイズを指定。1~でサイズ指定します。
*.setTextColor()
でフォント色、
*setCursor(X, Y)
でテキスト表示する座標を指定してします。写真の向き、ディスプレ左上が原点でX右、Y下向き が正となります。
*.print("")
で、” “内に表示したいテキストを記述して、最後に*.display()
で画面にテキスト表示します。
基本的なテキスト表示方法はこんなところです。
白黒反転、改行
display.setTextSize(1); display.setTextColor(BLACK, WHITE); display.setCursor(0, 10); display.println("OLED Display"); display.print("imo Lab."); display.print("@garchiving.com"); display.display();
白黒反転と改行についてです。*setTextColor(BLACK, WHITE);
で文字・背景色が反転します。改行についてはArduinoのシリアル通信のライブラリと同様です。 *.println(" ");
で文字列最後に改行コードが付与されるので続くテキスト表示は改行されます。また画面をはみ出ると勝手に改行されます。
数字、数値の表示
display.setTextSize(1); display.setTextColor(WHITE); display.setCursor(0, 0); display.println(127); display.println(127, BIN); display.println(127, HEX); display.println(127, OCT); display.println(127, DEC); display.println(1.234, 0); display.println(1.234, 1); display.println(1.234, 2); display.display();
数字(数値)の表現もArduinoシリアル通信ライブラリと似ています。 ” ” で挟まずにそのまま記述するだけ。進数表記も続いて記述すればいいだけです。少数の表示桁数も続いて記述すればO.K。
記号の表示
display.setTextSize(2); display.setTextColor(WHITE); display.setCursor(0, 0); display.write(1); display.write(2); display.write(3); display.write(4); display.write(5); display.write(6); display.write(7); display.display();
記号は *.write();
で表示します。小さくて見難かったのでサイズを「2」にしてます。いろいろ記号が準備されているようでとりあえず「1」~「7」まで表示してみました。ほかに何があるかはよくわかりません・・。
画面スクロール
display.setTextSize(1); display.setTextColor(WHITE); display.setCursor(0, 0); display.println("imo Lab."); display.println("scrolling"); display.display(); display.startscrollright(0x00, 0x07); delay(2000); display.startscrollleft(0x00, 0x07); delay(2000); display.startscrolldiagright(0x00, 0x07); delay(2000); display.startscrolldiagleft(0x00, 0x07); delay(2000);
テキスト表示した後に *.startscrollright(), *.startscrollleft()
で横スクロール *.startsclolldiagright(), *.startsclolldiagleft()
で斜めスクロールを開始します。画面は行で0~7までの8分割(8ページ)されてます。(0x00, 0x07)
で全ページ(全画面)のスクロールを開始します。
部分的にスクロール
display.setTextSize(1); display.setTextColor(WHITE); display.setCursor(0, 0); display.println("imo Lab."); display.println("scrolling"); display.println("Garchiving"); display.display(); display.startscrollright(0x01, 0x01);
引数でスクロールしたいページ(部分)を指定します。ここでは1ページ目(ここでは2行目)だけをスクロールさせてます。例えば1~2ページ目をスクロールする場合は(0x01, 0x02)
とすればOKです。
ビットマップ表示
const unsigned char Bitmap [] PROGMEM = { 0xff, 0xff, 0xff, 0xff, ............... }; display.drawBitmap(0, 0, Bitmap, 128, 64, WHITE); display.display();
アインシュタインのビットマップ画像です。配列で準備したビットマップデータを *.drawBitmap(X位置, Y位置, "配列データ", Xサイズ, Yサイズ, 色);
で定義して表示します。詳細な方法は割愛します。ここでは紹介程度。
図形の表示
display.setTextSize(1); display.setTextColor(WHITE); display.drawRect(0, 0, 30, 15, WHITE); display.fillRect(0, 20, 30, 15, WHITE); display.drawRoundRect(0, 40, 30, 15, 5, WHITE); display.drawCircle(50, 15, 10, WHITE); display.drawTriangle(90, 15, 70, 60, 110, 60, WHITE); display.display();
▲図形の表示です。
四角は *.drawRect()
を使います。引数は (X座標, Y座標, 幅, 高さ)
。関数を fillRect()
や drawRoundRect()
とすると塗り潰ししたり、角を丸くしたりできます。
円は *.drawCircle(X中心, Y中心, 半径, 色);
で描けます。
三角形は *.drawTriangle(x1, y1, x2, y2, x3, y3);
でそれぞれ頂点の座標が引数となります。
基本的な使い方は以上です。ほかにもいろいろ関数が準備されていそうですがとりあえずよく使いそうなところを纏めておきました。
このライブラリ非常に便利なのですが、処理時間が個人的にちょっと気になります。きちんと検証してませんが、おそらく表示量にかかわらず *.display()
処理だけで40ms近くも時間がかかっているようです。SPI通信ならまだましなのでしょうか?。またメモリ消費量が大きいです・・・。ここら辺問題無ければライブラリ使用をおすすめです。
コメント