図形を表示する（Grove Beginner Kit For Arduino検証報告）

Grove Beginner Kit For Arduino（以下、Beginner Kit）検証報告の9番目です。前回の記事はこちらです。
hirocom777.hatenadiary.org

図形の表示

　前回はOLED ディスプレイで文字の表示をしてみました。でも、OLED ディスプレイは図形の表示も出来るのです。って言うか、こちらの方が本命の機能です。今回は、こちらをご紹介します。ライブラリは前回インストールしたものを使用します。以下にスケッチ例をご紹介します。

#include <U8g2lib.h>

U8G2_SSD1306_128X64_NONAME_1_HW_I2C u8g2(U8G2_R2, /* reset=*/U8X8_PIN_NONE);

void setup() {
  u8g2.begin();
  u8g2.setFlipMode(0);
}
void loop() {
  for (int i = 0; i <= 7; i++) {
    u8g2.firstPage();
    do {
      if (i == 0) {//線を描く
        u8g2.drawLine(20, 5, 120, 50);
      } else if (i == 1) {//四角形を描く
        u8g2.drawFrame(50, 7, 42, 55);
      } else if (i == 2) {//四角形を描く（塗りつぶし）
        u8g2.drawBox(30, 2, 25, 50);
      } else if (i == 3) {//円を描く
        u8g2.drawCircle(50, 30, 30, U8G2_DRAW_ALL);
      } else if (i == 4) {//三角形を描く（塗りつぶし）
        u8g2.drawTriangle(20, 5, 27, 50,120, 25);
      } else if (i == 5) {//四角形を描く（角丸）
        u8g2.drawRFrame(3, 7, 110, 25, 3);
      } else if (i == 6) {//四角形を描く（角丸、塗りつぶし）
        u8g2.drawRBox(3, 7, 100, 50, 5);
      } else if (i == 7) {//楕円を描く
        u8g2.drawEllipse(20, 25, 15, 10, U8G2_DRAW_ALL);
      }
    } while (u8g2.nextPage());
    delay(1000);
  }
}

いろいろな図形がかわるがわる描画されると思います。

スケッチの解説

　図形を表示するには、スケッチの先頭に#include ＜U8g2lib.h＞を記述します。文字表示の時とは違いますが、使用するライブラリファイルは同じです。そして、このライブラリも複数のOLED ディスプレイと接続方法に対応しています。そこで、以下の記述があります。

U8G2_SSD1306_128X64_NONAME_1_HW_I2C u8g2(U8G2_R2, /* reset=*/U8X8_PIN_NONE);

ここでも選択されているOLED ディスプレイはSSD1306という型名です。Beginner KitのOLED ディスプレイSSD1315とコンパチってことですね。

お次はsetup()の中身です。
・u8g2.begin()
　使用を開始する時に最初に宣言します。
・u8g2.setFlipMode()
　表示を180度反転させます。かっこの中に0を指定すると無効。1を指定すると有効になります。今回は反転指定していません。

続いてloop()の中身です。
・u8g2.firstPage()とu8g2.nextPage()
　ここが一番のポイントです。u8g2で図形を描画する場合は以下の手順を取ります。

u8g2.firstPage();　←　描画開始
do {
　　　//描画内容
} while (u8g2.nextPage());　←　描画が終了するまでループを繰り返す

8g2.firstPage()とu8g2.nextPage()は対で上記の様に使用します。ループの中に描画内容を記述します。描画する図形は表示位置、サイズを座標で指定するのですが、座標系は以下の様になります。
f:id:HiroCom777:20201114223243j:plain
この座標系で図形を描いていきます。

・u8g2.drawLine()
　2点間の線を描画します。
u8g2.drawLine(座標X1,座標Y1,座標X2,座標Y2)
・u8g2.drawFrame()
　左上の座標を起点に四角形を描画します。
u8g2.drawFrame(座標X,座標Y,幅,高さ)
・u8g2.drawBox()
　左上の座標を起点に四角形（塗りつぶし）を描画します。
u8g2.drawFrame(座標X,座標Y,幅,高さ);
・u8g2.drawCircle()
　円を描画します。
u8g2.drawCircle(中心座標X,中心座標Y,半径,描画方法);
・u8g2.drawCircle()
　三角形を描画します（塗りつぶし）
u8g2.drawTriangle(座標X1,座標Y1座標X1,座標Y1,座標X2,座標Y2,座標X3,座標Y3)
・u8g2.drawRFrame()
　四角形（角丸）を描画します
u8g2.drawRFrame(座標X,座標Y,幅,高さ,角半径)
・u8g2.drawRFrame()
　四角形（角丸、塗りつぶし）を描画します
u8g2.drawRBox(座標X,座標Y,幅,高さ,角半径)
・u8g2.drawEllipse()
　楕円を描画します
u8g2.drawEllipse(中心座標X,中心座標Y,横半径,縦半径,描画方法)