128×64モノクログラフィックLCDシールドサポートページ(5)

このページをスマホなどでご覧になる場合は、画面を横長にする方が読みやすくなります。
目次へ  前のページへ (1) (2) (3) (4) (5) (6) 次のページへ
128×64モノクログラフィックLCDシールド 商品名 128×64モノクログラフィックLCDシールド
税抜き小売価格 3600円
販売店 スイッチサイエンス
2016年07月28日 暫定公開。
2016年08月18日 正式公開。

6-7.MGLCDライブラリの主な関数(グラフィック表示編)

このページでは、MGLCDライブラリの、主なグラフィック表示関数について説明します。このページで紹介しきれなかった関数については、リファレンスマニュアルをご覧ください。

6-7-1.グラフィック座標系

128×64モノクログラフィックLCDシールドは、横128ピクセル、縦64ピクセルのグラフィックLCDモジュールを使っています。MGLCDライブラリでは、画面左上が(0,0)、右下が(127,63)の座標系を使います。(図8参照)

図8、128×64モノクログラフィックLCDシールドのグラフィック座標系
↑ 画像をクリックすると拡大
図8、128×64モノクログラフィックLCDシールドのグラフィック座標系

6-7-2.SetPixel関数

画面に点を打つにはをSetPixel関数を使います。SetPixel関数の構文は次の通りです。

SetPixel(x座標,y座標,色);

色は、白い点を打つ場合は1を、黒い点を打つ場合は0を指定してください。省略すれば、白い点になります。

注:MGLCDライブラリの標準では、0が白、1が黒を表す数字ですが、128×64モノクログラフィックLCDシールドは白黒が反転しているLCDを採用しているため、0が黒、1が白になります。

例えば次の例では、座標(10,56)に白い点を打ちます。(写真23参照。この写真では見にくいですが、左下の方に点を打っています)

MGLCD.SetPixel(10,56);
写真23、MGLCD.SetPixel(10,56);の実行結果
↑ 画像をクリックすると拡大
写真23、MGLCD.SetPixel(10,56);の実行結果

6-7-3.Line関数

画面に線を引くには、Line関数を使います。Line関数の構文は次の通りです。

Line(x座標1,y座標1,x座標2,y座標2,色);

これで、(x座標1,y座標1)から(x座標2,y座標2)まで直線を引きます。色は白の場合1、黒の場合0です。色を省略すると白い線を引きます。

例えば、次の例では、座標(10,5)から(100,56)まで、白い直線を引きます。(写真24参照)

MGLCD.Line(10,5,100,56);
写真24、MGLCD.Line(10,5,100,45);の実行結果
↑ 画像をクリックすると拡大
写真24、MGLCD.Line(10,5,100,45);の実行結果

6-7-4. Rect関数

画面に長方形を描くには、Rect関数を使います。Rect関数の構文は次の通りです。

Rect(x座標1,y座標1,x座標2,y座標2,色);

これで、(x座標1,y座標1)と(x座標2,y座標2)を対角とする長方形を、指定した色で描きます。色を省略すると白(1)となります。

例えば、次の例では座標(10,5)と座標(100,56)を対角とする、白い長方形を描きます。(写真25参照)

MGLCD.Rect(10,5,100,56);
写真25、MGLCD.Rect(10,5,100,56);の実行結果
↑ 画像をクリックすると拡大
写真25、MGLCD.Rect(10,5,100,56);の実行結果

6-7-5. FillRect関数

もし、長方形を描く時に、枠を描くだけでなく中も塗りつぶしたいなら、Rect関数の代わりにFillRect関数を使います。

例えば、次の例では座標(10,5)と座標(100,56)を対角とする、白い、中を塗りつぶした長方形を描きます。(写真26参照)

MGLCD.FillRect(10,5,100,56);
写真26、MGLCD.FillRect(10,5,100,56);の実行結果
↑ 画像をクリックすると拡大
写真26、MGLCD.FillRect(10,5,100,56);の実行結果

6-7-6.Circle関数

円を描きたいなら、Circle関数を使います。Circle関数の構文は次の通りです。

Circle(x座標,y座標,半径,色);

これで、(x座標,y座標)を中心に、指定した半径で、指定した色の円を描きます。色を省略すると白(1)となります。

例えば、次の例では座標(60,31)を中心に、半径28の白い円を描きます。(写真27参照)

注:128×64モノクログラフィックLCDシールドのアスペクト比は1:1ではなく、1:1.190なので、縦長の楕円が表示されます。

MGLCD.Circle(60,31,28);
写真27、MGLCD.Circle(60,31,28);の実行結果
↑ 画像をクリックすると拡大
写真27、MGLCD.Circle(60,31,28);の実行結果

6-7-7. FillCircle関数

もし、外枠を描くだけでなく、円の中を塗りつぶしたいなら、Circle関数の代わりにFillCircle関数を使います。

例えば、次の例では座標(60,31)を中心に、半径28の白い円を、中を塗りつぶして描きます。(写真28参照)

MGLCD.FillCircle(60,31,28);
写真28、CAPTION
↑ 画像をクリックすると拡大
写真28、CAPTION

6-7-8.Line関数を用いたデモスケッチ

最後に、Line関数を用いた簡単なデモスケッチを紹介します。リスト5のスケッチを実行すると、写真29~写真31に示すような図形を表示します。

リスト5、Line関数を用いたデモスケッチCOPY
// ヘッダファイルのインクルード
#include <MGLCD.h>
#include <MGLCD_SPI.h>
#include <SPI.h>

// ピン割り当てとSPIクロック周波数の宣言
#define CS_PIN   10
#define DI_PIN    9
#define MAX_FREQ (7400*1000UL)

// オブジェクト変数の宣言
MGLCD_GH12864_20_SPI MGLCD(MGLCD_SpiPin2(CS_PIN, DI_PIN), MAX_FREQ);

void setup()
{
  // LCDの初期化
  MGLCD.Reset();
}

void loop ()
{
  MGLCD.ClearScreen();
  for(int i=0; i<63; i+=7) {
    delay(200);
    MGLCD.Line(i,0,63,i);
    delay(200);
    MGLCD.Line(63,i,63-i,63);
    delay(200);
    MGLCD.Line(63-i,63,0,63-i);        
    delay(200);
    MGLCD.Line(0,63-i,i,0);        
  } // for

  delay(1000);
}
写真29、Line関数のデモスケッチの画面(1)
↑ 画像をクリックすると拡大
写真29、Line関数のデモスケッチの画面(1)
写真30、Line関数のデモスケッチの画面(2)
↑ 画像をクリックすると拡大
写真30、Line関数のデモスケッチの画面(2)
写真31、Line関数のデモスケッチの画面(3)
↑ 画像をクリックすると拡大
写真31、Line関数のデモスケッチの画面(3)
写真32、Line関数のデモスケッチの画面(4)
↑ 画像をクリックすると拡大
写真32、Line関数のデモスケッチの画面(4)
目次へ  前のページへ (1) (2) (3) (4) (5) (6) 次のページへ

このページで使われている用語の解説

関連ページ

関連製品

122X32モノクログラフィックLCDシールド 商品名 122X32モノクログラフィックLCDシールド
税抜き小売価格 3333円
販売店 スイッチサイエンス
サポートページ
GLCD学習シールドキット 商品名 GLCD学習シールドキット
税抜き小売価格 1410円
販売店 スイッチサイエンス
サポートページ
Arduino 電子工作
このサイトの記事が本になりました。
書名:Arduino 電子工作
ISBN:978-4-7775-1941-5
工学社の書籍の内容の紹介ページ
本のカバーの写真か書名をクリックすると、Amazonの書籍購入ページに移動します。