このチュートリアルでは、OLEDディスプレイをNodeMCUESP8266とインターフェースします。NodeMCUは、EspressifSystemsの低コストWi-Fi対応ESP8266Wi-FiSoCで実行されるファームウェアを含むオープンソースIoTプラットフォームです。他の周辺機器を接続するためのGPIOピンがあり、SPI、I2C、およびUARTピンを使用したシリアル通信をサポートします。ADCとPWM用のピンもあります。以前、OLEDをESPファミリーのコントローラー（ESP32）を含む他のマイクロコントローラーとインターフェースしました。
- SSD1306OLEDディスプレイとRaspberryPiのインターフェース
- SSD1306OLEDディスプレイとArduinoのインターフェース
- Arduinoを使用してOLEDディスプレイをAndroidフォンとインターフェースしてスマートウォッチを構築する
- ESP32とOLEDディスプレイを使用したインターネット時計
このチュートリアルでは、SPIプロトコルを使用してモノクロ7ピンSSD1306 0.96 OLEDディスプレイをNodeMCUとインターフェースし、NodeMCUESP8266を使用してOLED画面に画像を表示する方法を学習します。
OLEDディスプレイ
有機発光ダイオード（OLED）は、電流を流すと有機化合物でできた発光層が発光する発光ダイオードの一種です。この層は2つの電極の間に配置されます。この技術は、コンピューター、テレビ、スマートフォンなどのディスプレイ画面で使用されます。OLEDディスプレイは独自の光を持ち、LCDのようにバックライトを必要としないため、電力効率が高く、多くのマイクロコンピューターで使用されます。 LCDよりもOLEDディスプレイを使用するもう1つの利点は、OLEDで大きくて高品質のグラフィックスを表示できることです。 OLEDディスプレイ技術の詳細については、こちらをご覧ください。
市場にはさまざまな種類のOLEDディスプレイがあります。これらのディスプレイは、色、ピン数、コントローラーIC、および画面のサイズに基づいて特徴付けられます。色に基づいて、OLEDはモノクロブルー、モノクロホワイト、イエロー/ブルーカラーで利用できます。また、通信に基づいて、主に2種類のOLED（3ピンと7ピン）を使用できます。3ピンOLEDはI2Cモードの通信で使用でき、7ピンOLEDはSPIモードまたはI2Cモードで使用できます。
このチュートリアルでは、幅128ピクセル、長さ64ピクセルの「モノクロ7ピンSSD13060.96」OLEDディスプレイを使用します。このディスプレイは、SPIとI2Cの両方の通信プロトコルで機能します。このチュートリアルでは、SPIプロトコルを使用します。SSD1306 ICはこのOLEDに搭載されており、画面にピクセルを表示するのに役立ちます。
必要なコンポーネント
- モノクロ7ピンSSD13060.96インチOLEDディスプレイ
- NodeMCU ESP8266
- マイクロUSBケーブル
- ブレッドボード
- オス-オスジャンパー線
NodeMCUとOLEDディスプレイ間のSPIピン接続
以下は、7ピンOLEDディスプレイをNodeMCUに接続して、 SPIシリアル通信プロトコルを使用して通信するための回路図です。
以下の表は、OLEDディスプレイとNodeMCUESP8266の間の接続を示しています。GNDピンはNodeMCUGNDに接続され、VDDピンは3.3Vまたは5Vに接続でき、SCKはSPIクロック用にNodeMCUのD5に接続されているOLEDディスプレイのクロックピンです。SPIインターフェースのOLEDのMOSIピンであるSDAピンはNodeMCUのD7に接続されます。RESETピンはD3に接続されます。DC、データコマンドピンはNodeMCUのD2に接続されています。最後のピンはCSがD8、NodeMCUのチップセレクトに行くことです。
|
番号。 |
有機ELディスプレイ |
NodeMCU |
|
1 |
GND |
GND |
|
2 |
VDD |
3.3V |
|
3 |
SCK |
D5 |
|
4 |
MOSI（SPI）またはSDA（I2C） |
D7 |
|
5 |
リセット |
D3 |
|
6 |
DC |
D2 |
|
7 |
CS |
D8 |
ここでは、「使用する Adafruit _SSD1306.h」 と「 Adafruit_GFX.h のための」ライブラリをNodeMCUとOLEDのインタフェース。Arduino IDEを開き、Arduino IDEから最新バージョンをインストールし ます （[スケッチ]> [ライブラリを含める]> [ライブラリの管理]またはCtrl + Shift_I ）。
以来、当社のOLEDディスプレイID 128×64のピクセルサイズ、したがって、我々はAdafruit_SSD1306のヘッダファイルの変更を行う必要があります。 Arduinoライブラリを開き、 Adafruit_SSD1306 に移動して、そのヘッダーファイル（ Adafruit _SSD1306.h ）を開きます。次の図に示すように、 「#define SSD1306_128_32 」行を コメントアウト し、「 #define SSD1306_128_64 」行のコメントを解除して、ファイルを保存します。デフォルトでは、このライブラリには「# defineSSD1306_128_32 」が付属してい ます 。
最後に、上記の表に従って、「 ssd1306_128x64_spi 」AdafruitSSD1306の例のピン番号を変更します。これで、OLEDディスプレイをNodeMCUに適切に接続した後でスケッチを実行すると、OLEDディスプレイにAdafruitのロゴが表示されます。これは、デフォルトでライブラリに保存されています。Adafruitのロゴの後に、線、長方形、三角形、円、文字列、数字、アニメーション、ビットマップなど、他の多くのグラフィックが表示されます。このチュートリアルでは、NodeMCUESP8266を使用してOLEDに画像を表示する方法を学習します。
OLEDとインターフェースするためのNodeMCUのプログラミング
常に完全なコードが最後に提供されているので、ここではコードを詳細に説明しました。
必要なライブラリをインポートしてコードを開始します。SPIプロトコルを使用しているため、「SPI.h」ライブラリをインポートし、OLEDディスプレイ用に「Adafruit_GFX.h」と「Adafruit_SSD1306.h」もインポートします。
#include
OLEDのサイズは128x64なので、画面の幅と高さをそれぞれ128と64に設定しています。したがって、SPI通信用にNodeMCUに接続されたOLEDピンの変数を定義します。
#define SCREEN_WIDTH 128 // OLEDディスプレイ幅（ピクセル単位） #define SCREEN_HEIGHT 64 // OLEDディスプレイ高さ（ピクセル単位） //ソフトウェアSPIを使用して接続されたSSD1306ディスプレイの宣言（デフォルトの場合）： #define OLED_MOSI D7 #define OLED_CLK D5 #define OLED_DC D2 #define OLED_CS D8 #define OLED_RESET D3 Adafruit_SSD1306 display（SCREEN_WIDTH、SCREEN_HEIGHT、 OLED_MOSI、OLED_CLK、OLED_DC、OLED_RESET、OLED_CS）;
SSD1306_SWITCHCAPVCCを使用してOLEDディスプレイを初期化し、内部で3.3Vを生成してディスプレイを初期化します。
if（！display.begin（SSD1306_SWITCHCAPVCC）） { Serial.println（F（ "SSD1306の割り当てに失敗しました"））; にとって（;;）; //先に進まないで、永遠にループする }
関数display.clearDisplay（）を呼び出すことにより、何かを表示する前にOLED画面の表示がクリアされます。我々は2にフォントサイズを設定する関数を呼び出すことによって setTextSize（フォントサイズ）、 及びテキストの色とカーソル位置を設定して使用して SETTEXTCOLOR と はsetCursorの 機能を 。 Display.display（） コマンドは、SSD1306コントローラーの内部メモリにデータを転送するために使用されます。転送後、ピクセルが画面に表示されます。これで、 display.startscrollright（x-pos、y-pos） および display.startscrollleft（x-pos、y-pos）を 呼び出すことにより、さまざまな方法でテキストのスクロールを開始できます。 遅延関数で指定された時間。テキストのスクロールは、関数display.stopscroll（）を使用して停止できます。
void testscrolltext（void）{display.clearDisplay（）; // OLED display.setTextSize（2）;の表示画面をクリアします。// 2倍スケールのテキストを描画しますdisplay.setTextColor（WHITE）; display.setCursor（0、0）; display.println（F（ "CIRCUIT"））; display.println（F（ "DIGEST"））; display.display（）; //初期テキストを表示delay（100）; //さまざまな方向にスクロールし、その間を一時停止します：display.startscrollright（0x00、0x0F）; delay（2000）; display.stopscroll（）; delay（1000）; display.startscrollleft（0x00、0x0F）; delay（2000）; display.stopscroll（）; delay（1000）; display.startscrolldiagright（0x00、0x07）; delay（2000）; display.startscrolldiagleft（0x00、0x07）; delay（2000）; display.stopscroll（）; delay（1000）; }
6つのパラメータ（x座標、y座標、ビットマップ配列、幅、高さ、色）を使用してOLEDに画像を描画する display.drawBitmap（） 関数を呼び出します。ディスプレイサイズは128x64なので、幅と高さをそれぞれ128と64に設定します。ここで、ビットマップ配列には、画像を作成するために画面上にピクセルを描画するためのピクセル情報が含まれています。このビットマップ配列は、以下で説明するオンラインで生成できます。または、画像をビットマップ配列に変換するために利用できる多くのソフトウェアがあります。
const unsigned char myBitmap PROGMEM = { 0xff、0xff、0xff、0xe0、0x0f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xff、0xff、0xc0 、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xff、0xf7、0xc0、0x00、0x1f、0xff、0xff、0xff、0xff、0xff、0xff、0xff 、0xff、 0xff、0xff、0xc7、0x80、0x00、0x03、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xff、0x0f、0x01、0xc0、0x00 、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xfe、0x0f、0x03、0xff、0xc0、0x7f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff 、0xf8、0x1e、0x03、0x3f、0xf8、0x1f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xf0、0x3e、0x03、0x3f、0xfc、0x0f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xe0、0x3c、0x03、0x7f、0xfe、0x 0xFFで、0xffで、0xffで、0xffで、0xffで、0xffで、0xffで、 0xffで、0xc0から、0x7c、0x03の、0xF0が、0x3fを、0x83の、0xFFで、0xffで、0xffで、0xffで、0xffで、0xffで、0xffで、0xffで、0xffで、 0xffで、0x80を、 0x78、0x00、0xc0、0x0f、0xc1、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff 、0x00、0xf8、0x00、0x00、0x07、0xe0、0xff、0xff、0xff 0xff、0xff、0xff、0xff、0xff、 0xfe、0x01、0xf0、0x00、0x00、0x03、0xf8、0x7f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xfc、0x01、0x 0x00、0x00、0xfc、0x3f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xfc、0x03、0xe0、0x00、0x0f、0x00、0x7e、0x3f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xf8、0x07、0xc0、0x3f、 0xff、0x80、0x 0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xc0、0x7f、0xf9、0x80、0x0f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xff 0x80、0xff、0xf9、0x80、0x07、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0x80、0xff、0xff、0x80、0x03、0xff 、0xff、0xff 0xff、0xff、0xff、0xff、0xff、 0xff、0xff、0x01、0xf0、0x1f、0x80、0x00、0x07、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xc0、0x00、0x 0x06、0x00、0x00、0x07、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xc0、0x00、0x03、0xc0、0x00、0x00、0x00、0x03、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xc0、0x00、0x07、0xc0、0x00、0x00、0x00、0 0xff、0xff、0xff、0xff、0xff、0xff、0xff 、0x80、0x00、0x07、0x80、0x00、0x00、0x00、0x03、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0x80、0x 0x0f、0x80、0x00、0x00、0x00、0x01、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff 、0x80、0x00、0x0f、0x00、0x80、0x00、0x00、0x01、0xff、0x 0xff、0xff、0xff、0xff、0xff、 0x80、0x00、0x1e、0x01、0xe0、0x00、0x00、0x01、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff 、0x00、0x00、0x1 0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0x00、0x00、0x3c、0x03、0x3f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff 、0x00、0x00、0x7c、0x03、0x3f、0xff、0xff、0xff 0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xff、0xf8、0x03、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xff 0xf8、0x01、0xe0、0x00、0x00、0x00、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xff、0xf0、0x00、0x00、0x00、0x00、0x00、0xff、0x 0xFFで、0xffで、0xffで、0xffで、0xffで、 0xffで、0xffで、0xF0が、$ 00、$ 00、$ 00、$ 00、$ 00、0xffで、0xffで、0xffで、0xffで、0xffで、0xffで、0xffで、0xffで、 0x00に、0x00で、0x00に、0x00に、 0x00、0x00、0x00、0x00、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0x00、0x00、0x00、0x00、0x00、0x00、0x00、0x00、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff 、0x00、0x00、0x00、0xc0、0x00、0x00、0x00、0x00 0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0x80、0x00、0x01、0xf0、0x00、0x00、0x00、0x01、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0x80 0x03、0xb0、0x00、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff 、0xff、0x80、0x00、0x03、0x18、0x01、0xff、0xff、0xff、0xff、0xff 0xff、0xff、0xff、0xff、0xff、 0x80、0x00、0x03、0xbc、0x07、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xc0、0x00、0x01 0x1f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xc0、0x00、0x00、0xff、0xff、0x80、0x00、0x03、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xf0、0x00、0x1f、0xff、0x00、0x00、0x 0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xfe、0x00、0x07、0xfc、0x00、0x00、0x07、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xff 0x80、0x03、0xf0、0x00、0x00、0x07、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xff、0xe0、0x01、0xc0、0x00、0x00、0x0f、0xff、0xff 0xff、0xff、0xff、0xff、0xff、 0xff、0xff、0xf8、0x00、0x00、0x00、0x00、0x0f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xf8、0x03、0x 0x00、0x00、0x00、0x1f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xf8、0x00、0xff、0xe0、0x00、0x07、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xfc、0x00、0x3f、0xe0、0x00、0x1f、0xff 0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xfe、0x00、0x0e、0x30、0x00、0x7f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0x 0x07、0x70、0x00、0xff、0x01、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0x80、0x03、0xe0、0x1b、0xfc、0x01、0xff、0xff、0x 0xff、0xff、0xff、0xff、0xff、 0xff、0xc0、0x01、0xc0、0x7f、0xf0、0x03、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xe0 0x7f、0xc0、0x07、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xf0、0x00、0x00、0x67、0x00、0x0f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xf8、0x00、0x00、0x66、0x00、0x1f、0 0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xfe、0x00、0x00、0x7e、0x00、0x7f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0x 0x00、0x00、0x3c、0x01、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xff、0xc0、0x00、0x00、0x03、0xff、0xff、0xff、0x 0xff、0xff、0xff、0xff、0xff、 0xff、0xff、0xf0、0x00、0x00、0x1f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xff、0x 0x00、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、 0xff、0xff、0xff、0xf8、0x1f、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff、0xff }; display.drawBitmap（35、0、myBitmap、128、64、BLACK、WHITE）; display.display（）;
画像をビットマップ値に変換する
オンラインビットマップはhttp://javl.github.io/image2cpp/から生成できます。OLEDに表示したい画像ファイルをアップロードし、サイズを128x64に設定します。プレビュー画像が表示され、ビットマップ配列が生成されます。
以下のスクリーンショットは、任意の画像のビットマップ値を生成するプロセスを示しています。
最後に、完全なコードをNodeMCU ESP8266にアップロードすると、OLED画面に画像が表示されます。ここでは、OLEDディスプレイにCircuitDigestのロゴを表示しています。
