ESP32で1.44"OLEDディスプレイに文字と簡単グラフィック表示

 今回のOLEDディスプレイ：

　SPIで通信を行うため、SPIに関する。下記文章を参照してください。

　「SPI」の解説

■ピン一覧

　GND:　GND

　VCC:　3.5V~5V電源

　SCL:　SPIクロック

　SDA:　SPIデータ（MOSI）

　RES:　リセット

　DC:　HIGHのときデータ、LOWのときコマンドの送信を示す

　CS:　SPIの通信相手として選択するときLOWとする

　BLK:　LOWのときバックライトをオフ、HIGHのときオン

■部品一覧：

　・ESP-WROOM-32開発ボード

　・1.44"OLEDディスプレイ（ST7735適用）

　・USBケーブル

　・ブレッドボード

　・ジャンパーワイヤー

■ESP32とのつながる：

　　OLED　　　　　　　　ESP32

　　GND　　＜ーー＞　　　GND

　　VCC　　＜ーー＞　　　３V３

　　SCL　　＜ーー＞　　　D19

　　SDA　　＜ーー＞　　　D23

　　RES　　＜ーー＞　　　TX2（D17）

　　DC　 　＜ーー＞　　　RX2（D16）

　　CS　 　＜ーー＞　　　D5

　　BLK　　＜ーー＞　　　３V３

■プログラム：

　　事前に、Adafruit_GFXとAdafruit_ST7735はインストールしてください。

#include <SPI.h>

#include <Adafruit_GFX.h>

#include <Adafruit_ST7735.h>

#include <Fonts/FreeSerif12pt7b.h>

#include <Fonts/FreeSansBold9pt7b.h>

#include <Fonts/FreeSans9pt7b.h>

#define TFT_DC    16

#define TFT_CS    5

#define TFT_RST   17  

#define TFT_MOSI  23

#define TFT_CLK   19

Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_MOSI, TFT_CLK, TFT_RST);

void showIcons() {

  tft.fillRoundRect(30, 95, 30, 30, 5, ST77XX_MAGENTA);

  tft.fillCircle(80, 110, 15, ST77XX_BLUE); 

  delay(500);

}

void setup() {

  tft.initR(INITR_144GREENTAB);

  tft.setRotation(1);  //方向転換

  

  tft.fillScreen(ST7735_BLACK);  //背景色黒色

  tft.setCursor(0, 30);  //カーソル設定

  tft.setTextColor(ST7735_WHITE);  //文字色設定

  tft.setFont(&FreeSerif12pt7b);  //フォント

  tft.print("Hello World");  //文字表示

  tft.setCursor(20, 60);

  tft.setTextColor(ST7735_RED);

  tft.setFont(&FreeSansBold9pt7b);

  tft.print("ESP32");

  tft.setCursor(0, 80);

  tft.setTextColor(ST7735_YELLOW);

  tft.setFont(&FreeSans9pt7b);

  tft.print("PHOENIX-IoT");

  showIcons(); //グラフィック表示

}

void loop() {

}

■実物イメージ：

LCDディスプレイ1602A（I2C無篇）

 　LCDディスプレイの表示には、その接続(通信)方法として「パラレル通信方式」やI2C通信などの「シリアル通信方式」があります。

　今回は基本となる「パラレル通信方式」で接続し表示させてみたいと思います。

　パラレル通信方式でディスプレイに表示させるにはESP8266-LCDモジュール間の配線が多くなります。今回は理解を深めるため基本的な接続方法となるパラレル通信方式でESP8266と接続し文字を表示させてみたいと思います。

■配線図

■部品リスト

・ESP8266開発ボード

・LCDディスプレイ1602A

・ブレッドボード

・USBケーブル

・ジャンパーワイヤー

・可変抵抗（10KΩ小型ボリューム）

■1602 LCDモジュール端子構成

ピン(端子)	機能
VSS	GND(電源)
VDD	5V(電源)
V0	コントラスト調整(電源)
RS	ラッチピン (コントローラーにデータを入れる)
RW	リード/ライトピン (読み込み/書き込みの選択)
E	Enableピン (変更を許可するかを選択)
DB0~DB7	データビット(8ビット) (4ビットモードでは上位ビットDB4-DB7のみ使用)
A	LEDバックライト(アノード) : 5V
K	LEDバックライト(カソード) : GND

■ESP8266と1602LCDモジュール端子の接続

LCDモジュール	ESP8266
VDD	5V(VU)
VSS	GND
R0	可変抵抗器
RS	D6
RW	GND
E	D5
DB4	D1
DB5	D2
DB6	D3
DB7	D4
A	5V(VU)
K	GND

■データ送信量(4ビット or 8ビット)

　LCDモジュールにはDB0~DB7までの8本のデータバスがあります。

　ESP8266からLCDに送る1回のデータ量を4ビットまたは8ビットで使うことが出来ます。

　今回Arduino IDE標準ライブラリ『LiquidCrystalライブラリ』を使用しますが、データ信号は4ビットと8ビット両方使うことが出来ます。

　今回は4ビットでのデータのやり取りで使用します。

　4ビットでのデータのやり取りでは上位ビットDB4~DB7での接続となり、2回に別けてデータを送信する形となります。(DB0~DB3は使いません)

とは言っても『LiquidCrystalライブラリ』がこのあたりの処理は代わりにやってくれるので難しいことは考えなくてもできちゃいます！

　データ信号ピンDB4~DB7ピン(4本)とRSピン・RWピン・EnableピンをArduinoの適切な位置に接続するだけです。

　それぞれのピンはデジタル信号でのやり取りとなります。

　LiquidCrystalのダウンロード：

　https://www.arduino.cc/reference/en/libraries/liquidcrystal/

　ダウンロード後、下記のところでインストールできます。

■プログラム

#include <LiquidCrystal.h>

// LCD ←→ Arduinoのピンの割り当て

// rs      →   D6

// rw      →   GND

// enable  →   D5

// d4      →   D1

// d5      →   D2

// d6      →   D3

// d7      →   D4

// [構文]LiquidCrystal(rs, rw,  enable, d0, d1, d2, d3, d4, d5, d6, d7)

LiquidCrystal lcd(D6, D5, D1, D2, D3, D4);

void setup() {

  lcd.begin(16, 2);          // LCDの桁数と行数を指定する(16桁2行)

  lcd.clear();               // LCD画面をクリア

  lcd.setCursor(0, 0);       // カーソルの位置を指定

  lcd.print("Hello!");       // 文字の表示

  lcd.setCursor(0, 1);       // カーソルの位置を指定

  lcd.print("ESP8266");      // 文字の表示

}

void loop() {

}

■実物イメージ

 

RGB(フルカラー)LEDの様々

■RGBLEDとは

　RGBLEDとは、その名の通りRGB(Red, Green, Blue)の三原色の光が一つの素子で出せるようになっているLEDです。 

■種類

・普通のフルカラーRGBLED

・表面実装用フルカラーRGBLED

・マイコン内蔵型フルカラーRGBLED

■部品一覧

・ESP8266-CH340開発ボード

・カソードコモン型RGBLED

・SMDRGBLEDモジュール

・WS2812B-5050LED

・ブレッドボード

・USBケーブル

・ジャンパーワイヤー

■サンプル１ー単色切替

　配線図：

　

    プログラム：

#define B 4 // D2

#define R 14 // D5

#define G 12 // D6

void setup() {

    pinMode(R, OUTPUT);

    pinMode(G, OUTPUT);

    pinMode(B, OUTPUT);

}

void loop() {

  digitalWrite(R, HIGH);

  digitalWrite(G, LOW);

  digitalWrite(B, LOW);

  delay(1000);

  digitalWrite(R, LOW);

  digitalWrite(G, HIGH);

  digitalWrite(B, LOW);

  delay(1000);

  digitalWrite(R, LOW);

  digitalWrite(G, LOW);

  digitalWrite(B, HIGH);

  delay(1000);

}

    効果：

　■サンプル２ー任意色

　ESP8266の一部ピンはPWM出力できます。単純なHIGH、LOWの数字出力ではなく、0-255の範囲が出力可能ので、RGBの各数字を組み合わせて、任意の色が表示できます。

　上記のD2,D5,D6ピンは全部PWM出力が可能です。

　今回はカソードコモン型RGBLEDを利用します。

　

　プログラムは下記ように調整します：

#define B 4 // D2

#define R 14 // D5

#define G 12 // D6

void setup() {

    pinMode(R, OUTPUT);

    pinMode(G, OUTPUT);

    pinMode(B, OUTPUT);

}

void loop() {

  // 紫色

  analogWrite(R, 247);

  analogWrite(G, 130);

  analogWrite(B, 247);

  delay(1000);

}

　効果：

　

効果はちょっと良くないです、マスクして綺麗になる　：）

　■サンプル３ーWS2812B-5050LED

　　WS2812B-5050LEDモジュールは内蔵マイコンがあります。

　　ピン情報はこのようなことです。

    VCC：５V電源（ESP8266開発ボードのVU(V)ピン）

    GND：GND

    DIN：データインプット

    DOUT：データアウトプット

    DINとDOUTは違いところですが、もう一番重要なことです。

　　DINは最大800KBデータがインプットできます、一つのWS2812B-5050LEDを経過すると24B(RGB各8bit)を取得し、残りデータは次のWS2812B-5050LEDに渡します。で、沢山なLEDを同時的にコントロールが可能になりました。

    このイメージです。

　プログラム：

　　事前に、ライブラリーに下記を追加します。

#include <Adafruit_NeoPixel.h>

#define PIN 0  // D3

#define NUMPIXELS 1 // LED数

Adafruit_NeoPixel led(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);

void setup() {

  led.begin();

  led.setBrightness(10);  // 明るさ

}

void loop() {

  led.setPixelColor(0,led.Color(255,0,0));  // 赤

  led.show();

  delay(1000);

  led.setPixelColor(0,led.Color(0,255,0));  // 緑

  led.show();

  delay(1000);

  led.setPixelColor(0,led.Color(0,0,255));  // 青

  led.show();

  delay(1000);

  led.clear();

  led.show();

  delay(1000);

}

　効果：

半田付け能力不足ね。。。:(

時間を表示ーーTM1637LED表示器

 ■TM1637とは

TM1637 は、4桁7セグメントのLEDを簡単に表示するためのモジュールです。 7セグメントLEDはその名の通り、1文字 (または数字) 毎に7セグメントあるので、本来は制御するためにたくさんの入出力が必要になります。

■主な特徴

・電源電圧　3.3/5V

・表示　8セグメント×6ビット

・キー・スキャン　8×2ビット

・輝度　8レベル

・インターフェース　CLK、DIO

■配線図

■部品リスト

・ESP8266-CH340開発ボード

・TM1637LED表示器

・ブレッドボード

・USBケーブル

・ジャンパーワイヤー

■実物イメージ

■プログラム

　サンプルプログラムはTM1637専用のライブラリを利用しているため、下記場所にダウンロードできます。

　https://github.com/avishorp/TM1637

#include <TM1637Display.h>

const int CLK = 14;  //D5

const int DIO = 12;  //D6

TM1637Display display(CLK, DIO); //set up the 4-Digit Display.

void setup() {

  display.setBrightness(0x0a);

}

void loop() {

  uint8_t data[] = { 0xff, 0xff, 0xff, 0xff };

  // コロンマークを点滅する

  display.showNumberDecEx(1840,0x40,true);

  delay(1000);

  display.showNumberDecEx(1840,0x0,true);

  delay(1000);

}

■点滅効果