arduinoでディスプレイに図形を出力させてみた（u8glib）

　　　　　（12ｃバス接続ミニグラフィックディスプレイを使ってみた）

　　今回は、以前大阪の電気町街に行って買った有機ELのミニグラフィックディス

プレイを使って図形を出力させていこうと思います。

■主な仕様

・電源電圧：DC3.3V

※５V電源は使えない

・画面サイズ：128×64ドット（0.96インチ）

・インターフェイス：12Cバス接続（プルアップ抵抗10KΩ内臓）

・コントローラー：SH1106 （SSD1306の上位互換）相当

■モジュールのピン配列

■ライブラリをダウンロードする

・まずライブラリを使うためにarduino IDEのライブラリマネージャーから

　ライブラリをインストールします。

１、arduino IDEの「ライブラリを管理」を押す

２、「ライブラリを管理」の中で「u8glib」を検索してインストールする

３、「ライブラリをインクルード」というところに「u8glib」が入っていたら成功

４、最初にライブラリをインクルードするといつもどうり使うことができる。

■配線図

■基本の形

#include "U8glib.h"
//U8GLIB_SSD1306_128X64 u8g(4, 5, 6, 7);
U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | U8G_I2C_OPT_FAST);

void setup(void) {
  u8g.setColorIndex(1);         // pixel on
}

void loop(void) {
　　

　u8g.firstPage();
  do {
　　　自分のやりたい処理をここに書く
　　} while ( u8g.nextPage() );

}

■実際に図形を出力させる

◎点を書く

u8g.drawPixel(x座標, y座標);

・サンプルコード

#include "U8glib.h"

//U8GLIB_SSD1306_128X64 u8g(4, 5, 6, 7);
　U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | 　U8G_I2C_OPT_FAST);

void setup(void) {}


void loop(void) {
  u8g.firstPage();
  do {

        u8g.setColorIndex(1);                   // pixel on

        u8g.drawPixel(10, 5);                   //点をかく
        
        u8g.setColorIndex(0);                   // pixel off
   } while ( u8g.nextPage() );
}

◎線を書く

u8g.drawLine(始点x座標, 始点y座標, 終点x座標, 終点y座標);

・サンプルコード

#include "U8glib.h"

//U8GLIB_SSD1306_128X64 u8g(4, 5, 6, 7);
U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | U8G_I2C_OPT_FAST);

void setup(void) {}


void loop(void) {
  u8g.firstPage();
  do {

        u8g.setColorIndex(1);                   // pixel on
       
        u8g.drawLine(0, 31, 127, 31);           //線

        u8g.setColorIndex(0);                   // pixel off
   } while ( u8g.nextPage() );
}

◎四角の枠をかく

u8g.drawFrame(始点x座標, 始点y座標, 長さ, 高さ);

・サンプルコード

#include "U8glib.h"

//U8GLIB_SSD1306_128X64 u8g(4, 5, 6, 7);
U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | U8G_I2C_OPT_FAST);

void setup(void) {}


void loop(void) {
  u8g.firstPage();
  do {

        u8g.setColorIndex(1);                   // pixel on

        u8g.drawFrame(31, 20, 64, 32);          //四角
        
        u8g.setColorIndex(0);                   // pixel off
   } while ( u8g.nextPage() );
}

◎塗りつぶしの四角を書く

u8g.drawBox(始点x座標, 始点y座標, 長さ, 高さ);

引数の後半は座標ではなく、大きさ（Pixel数）です。

線の描き方と指定方法が違う。

・サンプルコード

#include "U8glib.h"

//U8GLIB_SSD1306_128X64 u8g(4, 5, 6, 7);
U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | U8G_I2C_OPT_FAST);

void setup(void) {}


void loop(void) {
  u8g.firstPage();
  do {

        u8g.setColorIndex(1);                   // pixel oｎ

        u8g.drawBox(31, 15, 64, 32);            //四角を塗りつぶす
        
        u8g.setColorIndex(0);                   // pixel off
   } while ( u8g.nextPage() );
}

◎丸を書く

drawFilledEllipse(始点x座標, 始点y座標, 横幅, 縦幅);

横幅と縦幅が違うと楕円形になる

・サンプルコード

#include "U8glib.h"

//U8GLIB_SSD1306_128X64 u8g(4, 5, 6, 7);
U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | U8G_I2C_OPT_FAST);

void setup(void) {}


void loop(void) {
  u8g.firstPage();
  do {

        u8g.setColorIndex(1);                   // pixel on
 
        
        u8g.drawFilledEllipse(63, 31, 15, 15);  // 丸
        
        u8g.setColorIndex(0);                   // pixel off
   } while ( u8g.nextPage() );
}

◎全部

#include "U8glib.h"

//U8GLIB_SSD1306_128X64 u8g(4, 5, 6, 7);
U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | U8G_I2C_OPT_FAST);

void setup(void) {}


void loop(void) {
  u8g.firstPage();
  do {

        u8g.setColorIndex(1);                   // pixel on
 
        
        u8g.drawFilledEllipse(63, 31, 15, 15);  // 丸
       
        u8g.drawLine(0, 31, 127, 31);           //線

        u8g.drawFrame(31, 20, 64, 32);          //四角

        u8g.drawBox(31, 15, 64, 32);            //四角を塗りつぶす

        u8g.drawPixel(10, 5);                   //点をかく
        
        u8g.setColorIndex(0);                   // pixel off
   } while ( u8g.nextPage() );
}

次回は、文字を出力させたいと思います。

参考サイト

u8glibでOLEDを使う part 1 – jumbleat

u8glibでOLEDを使う part 2 – jumbleat