LoginSignup
7
7

More than 3 years have passed since last update.

@a10teki(スギヤマ ヒロユキ)

makerfocusで購入したWIFIKit8 搭載の0.91インチOLEDディスプレイCP2102　Arduino IDEで書くプログラム記述まとめました。

Last updated at Posted at 2020-09-01

WIFIKIT8とはESP8266を使用するボードで、
0.91インチ128 * 32ドットマトリックスOLEDディスプレイと
リチウムバッテリーインタフェース（充電回路付き）がついてるのが特徴
IMG-5431.jpg

0.91インチ128 * 32ドットマトリックスOLEDディスプレイ文字表示だけでなく
四角や円の描画ができドットの組み合わせで絵なども描けます。
OLEDディスプレイに表示するプログラム記述をまとめました。

基本の記述

文字表示を例に表示するまでの書式を説明します。

手順

手順は３つ
　1.画面クリア
　2.表示内容の設定
　3.表示命令
の3つを順に行います。

画面クリア

表示切替行うだけでは前の表示が残った状態で
上書きされる状態になりますので画面クリアを行う必要があります。

 Heltec.display->clear();

で画面クリアされます。

表示内容の設定

表示内容は下記に記しますが共通してることだけ書いときます。
表示位置は左上から横何ポイント縦何ポイントかを指定します。
そのあとにそれぞれのパラメーターの設定をします。

表示命令

表示するには表示コマンドが必要です。

Heltec.display->display();

文字表示

表示内容設定

固定表示の場合

 Heltec.display->drawString(左端からのポイント数,上からのポイント数,"表示内容");

変数表示は下記にしるします。

文字サイズ

使用できる文字サイズは3種類S,M,L

　Heltec.display->setFont(ArialMT_Plain_ポイント数);

Sサイズのポイント数１０を記述する
Mサイズは１６、Lサイズは２４に記述する。

Sサイズ

１０ポイントで三行書きできる

  Heltec.display->setFont(ArialMT_Plain_10);//10,16,24
  Heltec.display->drawString(0,0,"aaaaaaaaaaa");
  Heltec.display->drawString(0,10,"12345678901/*;:");
  Heltec.display->drawString(100,20,"ABCD");
  Heltec.display->display();

Mサイズ

１６ポイントで二行書きできる

  Heltec.display->setFont(ArialMT_Plain_16);//10,16,24
  Heltec.display->drawString(0,0,"aaaaaaaa");
  Heltec.display->drawString(0,10,"bbbbbbbbbbbbb");
  Heltec.display->display();

Lサイズ

２４ポイントで一行書きできる

  Heltec.display->setFont(ArialMT_Plain_24);//10,16,24
  Heltec.display->drawString(0,0,"Hello World");
  Heltec.display->display();

変数表示

変数表示はString(変数名)

 Heltec.display->drawString(左端からのポイント数,上からのポイント数,String(変数名));

単体変数表示

  Heltec.display->drawString(20,0,String(変数名));

複数変数表示

複数の変数や文字列を表示する場合＋を間に入れます。

  Heltec.display->drawString(20,0,String(変数名１)+String(変数名２)+"文字列");//

注記：同じ変数を使うと表示されません。

描画

ドット

Heltec.display->setPixel(左端からのポイント数,上からのポイント数);

斜め線を表示する場合

  for (int i = 0; i < 32; i++) {
    Heltec.display->setPixel(i, i);//右下がり斜め線
    Heltec.display->setPixel(32 - i, i);//右上がり斜め線
    }
  Heltec.display->display();

縦線

  Heltec.display->drawVerticalLine(左端からのポイント数,上からのポイント数１,上からのポイント数２);

上からのポイント数１から上からのポイント数２の部分に縦線を表示できます。
注意事項はポイント数２の値が値小さいときは表示されません。

横線

  Heltec.display->drawHorizontalLine(左端からのポイント数１,上からのポイント数,左端からのポイント数２);

左端からのポイント数１から左端からのポイント数２の部分に横線を表示できます。

円

  Heltec.display->drawCircle(左端からのポイント数,上からのポイント数、半径）

指定した左端からのポイント数、、上からのポイント数を中心に輪郭円を描画します。

塗りつぶし円

  Heltec.display->fillCircle(左端からのポイント数,上からのポイント数、半径）

指定した左端からのポイント数、、上からのポイント数を中心に塗りつぶし円を描画します。

四角

  Heltec.display->drawRect(左端からのポイント数,上からのポイント数,幅,高さ）

指定した左端からのポイント数、上からのポイント数を基準に輪郭四角を描画します。

塗りつぶし四角

  Heltec.display->fillRect(左端からのポイント数,上からのポイント数,幅,高さ）

指定した左端からのポイント数、上からのポイント数を基準に塗りつぶし四角を描画します。

バーグラフ

  Heltec.display->drawProgressBar(10, 0, 100, 30, 80);//(左端からのポイント数,上からのポイント数,グラフ幅,割合)

指定した左端からのポイント数、上からのポイント数を基準にグラフを描画します。
割合の部分にパーセント（％）値を入力します。

文字位置指定

文字列の表示を記述する前に文字位置指定を行うと
次の文字列位置指定が設定されるまで適用されます。
尚、初期設定は左寄せとなっており記述を行わない場合左寄せになります。

センター合わせ

  Heltec.display->setTextAlignment(TEXT_ALIGN_CENTER);

右寄せ

  Heltec.display->setTextAlignment(TEXT_ALIGN_RIGHT);

左寄せ （初期設定）

  Heltec.display->setTextAlignment(TEXT_ALIGN_LEFT);

サンプルプログラム

上記のプログラムを連続表示させたものをYoutubeheにアップしてます。
IMAGE ALT TEXT HERE

プログラムはこちらです。

#include <Wire.h>  // Only needed for Arduino 1.6.5 and earlier
#include "heltec.h" // alias for `#include "SSD1306Wire.h"`
int progress=999;
int ppp=123;

void setup() {
  Heltec.begin(true /*DisplayEnable Enable*/, true /*Serial Enable*/);
  Heltec.display->init();
  Heltec.display->flipScreenVertically();
  Heltec.display->setFont(ArialMT_Plain_10);//10,16,24

  Heltec.display->drawString(0,0,"Hello World!");
  Heltec.display->display();
}

void loop() {
//文字サイズS(10)
  Heltec.display->setFont(ArialMT_Plain_10);//10,16,24
  Heltec.display->drawString(0,0,"aaaaaaaaaaa");
  Heltec.display->drawString(0,10,"12345678901/*;:");
  Heltec.display->drawString(100,20,"ABCD");
  Heltec.display->display();
    delay(1000);
  Heltec.display->clear();

//文字サイズM(16)
  Heltec.display->setFont(ArialMT_Plain_16);//10,16,24
  Heltec.display->drawString(0,0,"aaaaaaaa");
  Heltec.display->drawString(0,10,"bbbbbbbbbbbbb");
  Heltec.display->display();
    delay(1000);
  Heltec.display->clear();

//文字サイズL(24)  
  Heltec.display->setFont(ArialMT_Plain_24);//10,16,24
  Heltec.display->drawString(0,0,"Hello World");
  Heltec.display->display();
    delay(1000);
  Heltec.display->clear();

//文字サイズL(24)  変数表示
  Heltec.display->setFont(ArialMT_Plain_24);//10,16,24
  Heltec.display->drawString(20,0,String(progress));
  Heltec.display->display();
    delay(1000);

//文字サイズL(24)  複数変数表示
  Heltec.display->clear();
  Heltec.display->setFont(ArialMT_Plain_24);//10,16,24
  Heltec.display->drawString(20,0,String(progress)+String(ppp)+"%");//同じ変数を使うと表示されない
  Heltec.display->display();
    delay(1000);
  Heltec.display->clear();

  //ドット   
  for (int i = 0; i < 32; i++) {
    Heltec.display->setPixel(i, i);//右下がり斜め線
    Heltec.display->setPixel(32 - i, i);//右上がり斜め線
    }
  Heltec.display->display();
    delay(1000);
  Heltec.display->clear();  

//縦線
  Heltec.display->drawVerticalLine(40, 0, 32);
  Heltec.display->drawVerticalLine(80, 32, 0);//NG
  Heltec.display->drawVerticalLine(100, 16, 32);
  Heltec.display->display();//表示命令
    delay(1000);    
  Heltec.display->clear();

//横線
  Heltec.display->drawHorizontalLine(0, 20, 100);
  Heltec.display->display();//表示命令
    delay(1000);    
  Heltec.display->clear();

//円
  Heltec.display->drawCircle(32, 16, 15);//(中心x、中心y、半径）
  Heltec.display->display();//表示命令
    delay(1000);
  Heltec.display->clear();

//四角
  Heltec.display->drawRect(10, 6, 100, 20);//(左上x、左上y、辺x、辺ｙ）
  Heltec.display->display();//表示命令
    delay(1000);
  Heltec.display->clear();

//バーグラフ
  Heltec.display->drawProgressBar(10, 0, 100, 30, 80);//(左上x,左上y,グラフ幅,%)
  Heltec.display->display();//表示命令
    delay(1000);
  Heltec.display->setFont(ArialMT_Plain_10);//10,16,24
  Heltec.display->clear();

//文字センター合わせ
  Heltec.display->setTextAlignment(TEXT_ALIGN_CENTER);
  Heltec.display->drawString(64, 10, "Center aligned (64,10)");
  Heltec.display->drawString(0, 20, "Cen");
  Heltec.display->display();//表示命令
    delay(1000);
  Heltec.display->clear();

//文字右寄せ
  Heltec.display->setTextAlignment(TEXT_ALIGN_RIGHT);//設定は残る
  Heltec.display->drawString(120, 10, "Right aligned (120,10)");
  Heltec.display->drawString(20, 20, "Rig");
  Heltec.display->display();//表示命令
    delay(1000);
  Heltec.display->clear();

//文字左寄せ （初期設定）
  Heltec.display->setTextAlignment(TEXT_ALIGN_LEFT);//初期設定
  Heltec.display->drawString(0, 10, "Left aligned (0,10)");
  Heltec.display->display();//表示命令
    delay(1000);
  Heltec.display->clear();
  }

参考にしたサイト
GIT
makerfocus

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
7