Skip to main content

1.47インチLCD SPIディスプレイ

note

この文書は AI によって翻訳されています。内容に不正確な点や改善すべき点がございましたら、文書下部のコメント欄または以下の Issue ページにてご報告ください。
https://github.com/Seeed-Studio/wiki-documents/issues

1.47インチLCD SPIディスプレイ

今すぐ購入 🖱️

概要​

この1.47インチLCDディスプレイは、1.47インチのシリアル液晶ディスプレイで、丸みを帯びたコーナーが特徴です。172×320の高解像度と262KのRGB表示色を提供し、鮮明でカラフルな画像表示を実現します。このディスプレイの設計理念は、さまざまなDIYプロジェクトやIoT（モノのインターネット）プロジェクトのニーズを満たすために、シンプルで高品質なディスプレイソリューションを提供することです。

このディスプレイは、バックライト付きの4ピン電源供給とST7789V3ドライバICと通信する4ピンSPIを備えた8ピンインターフェースを採用しています。プロジェクト開発を迅速かつ便利に開始できるよう、ドライバライブラリとサンプルを用意しています。

仕様​

動作電圧3.3V / 5V解像度172 × 320 ピクセル
通信インターフェース4線式SPI表示サイズ17.39 × 32.35mm
ディスプレイパネルIPSピクセルピッチ0.0337 × 0.1011mm
ドライバST7789V3寸法22.0 × 38.5mm

外形寸法​

特徴​

  • 172×320の解像度、262KのRGBカラー、鮮明でカラフルな表示効果
  • SPIインターフェースにより必要なIOピンを最小限に抑え、XIAO/Raspberry Pi/Arduino/STM32などのコントローラーボードをサポート
  • 開発リソース付き（XIAO/Raspberry Pi/Arduino/STM32用のサンプルを含む）

応用アイデア​

  • バンドや時計: このディスプレイはXIAO MCUと組み合わせて、バンドや時計デバイスを構築できます。高解像度でカラフルな表示により、日付や時計情報を表示できます。その小型サイズにより、迅速にプロトタイプを作成するのに最適です。

  • PC情報表示画面: このLCDディスプレイをコンバーターボードと接続し、PCの動作情報（温度やファンの回転数など）を表示するために使用できます。ボルトを使用してPCケースに簡単に固定することができます。

ハードウェア概要​

はじめに​

ハードウェア準備​

ここでは、6自由度のIMU、Bluetooth、PDMマイクを搭載したXIAO nRF52840ボードの使用方法を説明します。このボードとディスプレイがあれば、デジタル時計を構築するための主要なコンポーネントが揃います。

XIAO nRF528401.47インチLCD SPIディスプレイ
今すぐ購入 🖱️
今すぐ購入 🖱️

次に、ディスプレイのピンをXIAO nRF52840ボードに接続する必要があります。以下の図を参考に接続してください：

1.47インチLCD SPIディスプレイXIAO nRF52840
VCC3V3
GNDGND
DIND10
CLKD8
CSD1
DCD3
RSTD0
BLD6

Arduinoライブラリ概要​

tip

Arduinoを初めて使用する場合は、Arduinoの使い方を参照することを強くお勧めします。

Waveshareが提供するArduinoのサンプルプログラムを基に、XIAOシリーズ全体で使用できるArduinoライブラリを作成しました。このライブラリは以下のボタンからGithubで直接ダウンロードできます。

ライブラリをダウンロード

機能​

スケッチの開発を始める前に、ライブラリで利用可能な機能を確認しましょう。

  • void Init(uint8_t cs = CS_PIN, uint8_t dc = DC_PIN, uint8_t rst = RST_PIN, uint8_t bl = BL_PIN) —— 共通レジスタの初期化。

    入力パラメータ

    • cs: チップセレクトピンを設定します。デフォルト値はXIAOのD1ピンです。
    • dc: DCピンを設定します。デフォルト値はXIAOのD3ピンです。
    • rst: リセットピンを設定します。デフォルト値はXIAOのD0ピンです。
    • bl: バックライト制御ピンを設定します。デフォルト値はXIAOのD6ピンです。

  • void SetBacklight(uint16_t Value) —— バックライトの設定。

    入力パラメータ

    • Value: バックライトの強度を0から255の範囲で設定します。

  • void Reset(void) —— ハードウェアリセット。

  • void SetCursor(uint16_t Xstart, uint16_t Ystart, uint16_t Xend, uint16_t Yend) —— カーソル位置を設定。

    入力パラメータ

    • Xstart: 開始位置のx座標。
    • Ystart: 開始位置のy座標。
    • Xend: 終了位置のx座標。
    • Yend: 終了位置のy座標。

  • void Clear(uint16_t Color) —— 画面を特定の色でクリアする機能。

    入力パラメータ

    • Color: 画面全体をクリアする色を設定します。

  • void ClearWindow(uint16_t Xstart, uint16_t Ystart, uint16_t Xend, uint16_t Yend, uint16_t color) —— 特定のエリアを同じ色でリフレッシュ。

    入力パラメータ

    • Xstart: 開始位置のx座標。
    • Ystart: 開始位置のy座標。
    • Xend: 終了位置のx座標。
    • Yend: 終了位置のy座標。
    • color: 色を設定します。

  • void SetWindowColor(uint16_t Xstart, uint16_t Ystart, uint16_t Xend, uint16_t Yend, uint16_t Color) —— エリアの色を設定。

    入力パラメータ

    • Xstart: 開始位置のx座標。
    • Ystart: 開始位置のy座標。
    • Xend: 終了位置のx座標。
    • Yend: 終了位置のy座標。
    • color: 色を設定します。

  • void SetUWORD(uint16_t x, uint16_t y, uint16_t Color) —— uint16_tを描画。

    入力パラメータ

    • x: X座標を設定します。
    • y: Y座標を設定します。
    • Color: 色を設定します。

  • void SetRotate(uint16_t Rotate) —— 画像の回転を選択。

    入力パラメータ

    • Rotate: ROTATE_0, ROTATE_90, ROTATE_180, ROTATE_270

  • void SetMirroring(uint8_t mirror) —— 画像のミラーリングを選択。

    入力パラメータ

    • mirror: MIRROR_NONE, MIRROR_HORIZONTAL, MIRROR_VERTICAL, MIRROR_ORIGIN

  • void SetPixel(uint16_t Xpoint, uint16_t Ypoint, uint16_t Color) —— ピクセルを描画します。

    入力パラメータ

    • Xpoint: X座標。
    • Ypoint: Y座標。
    • Color: 塗りつぶす色。

  • void DrawPoint( uint16_t Xpoint, uint16_t Ypoint, uint16_t Color, DOT_PIXEL Dot_Pixel, DOT_STYLE Dot_FillWay) —— 点 (Xpoint, Ypoint) を描画し、色で塗りつぶします。

    入力パラメータ

    • Xpoint: 点のX座標。
    • Ypoint: 点のY座標。
    • Color: 設定する色。
    • Dot_Pixel: 点のサイズ。

  • void DrawLine(uint16_t Xstart, uint16_t Ystart, uint16_t Xend, uint16_t Yend, uint16_t Color, DOT_PIXEL Line_width, LINE_STYLE Line_Style) —— 任意の傾斜の線を描画します。

    入力パラメータ

    • Xstart：開始点のX座標。
    • Ystart：開始点のY座標。
    • Xend：終了点のX座標。
    • Yend：終了点のY座標。
    • Color：線分の色。

  • void DrawRectangle(uint16_t Xstart, uint16_t Ystart, uint16_t Xend, uint16_t Yend, uint16_t Color, DOT_PIXEL Line_width, DRAW_FILL Filled) —— 長方形を描画します。

    入力パラメータ

    • Xstart：開始点のX座標。
    • Ystart：開始点のY座標。
    • Xend：終了点のX座標。
    • Yend：終了点のY座標。
    • Color：線分の色。
    • Filled: 塗りつぶしの有無--- 1: 塗りつぶし、0: 空。

  • void DrawCircle(uint16_t X_Center, uint16_t Y_Center, uint16_t Radius, uint16_t Color, DOT_PIXEL Line_width, DRAW_FILL Draw_Fill) —— 指定された位置に指定されたサイズの円を8点法で描画します。

    入力パラメータ

    • X_Center：中心のX座標。
    • Y_Center：中心のY座標。
    • Radius：円の半径。
    • Color：円の色。
    • Filled: 塗りつぶしの有無: 1: 塗りつぶし、0: 塗りつぶさない。

  • void DrawString_EN(int16_t Xstart, int16_t Ystart, const char * pString, sFONT* Font, int16_t Color_Background, int16_t Color_Foreground) —— 文字列を表示します。

    入力パラメータ

    • Xstart：X座標。
    • Ystart：Y座標。
    • pString：表示する英文字列の先頭アドレス。
    • Font：文字サイズを表示する構造体ポインタ。
    • Color_Background: 英文字の背景色を選択。
    • Color_Foreground: 英文字の前景色を選択。

  • void DrawNum(int16_t Xpoint, int16_t Ypoint, int32_t Nummber, sFONT* Font, int16_t Color_Background, int16_t Color_Foreground) —— 数字を表示します。

    入力パラメータ

    • Xstart：X座標。
    • Ystart：Y座標。
    • Nummber：表示する数字。
    • Font：文字サイズを表示する構造体ポインタ。
    • Color_Background: 英文字の背景色を選択。
    • Color_Foreground: 英文字の前景色を選択。

  • void DrawFloatNum(int16_t Xpoint, int16_t Ypoint, double Nummber, int8_t Decimal_Point, sFONT* Font, int16_t Color_Background, int16_t Color_Foreground) —— 浮動小数点数を表示します。

    入力パラメータ

    • Xstart：X座標。
    • Ystart：Y座標。
    • Nummber：表示する浮動小数点データ。
    • Decimal_Point：小数点以下の桁数を表示。
    • Font: 文字サイズを表示する構造体ポインタ。
    • Color: 英文字の背景色を選択。

  • void DrawImage(const unsigned char *image, int16_t xStart, int16_t yStart, int16_t W_Image, int16_t H_Image) —— 画像を表示します。

    入力パラメータ

    • image: 画像の開始アドレス。
    • xStart：X開始座標。
    • yStart：Y開始座標。
    • xEnd: 画像の幅。
    • yEnd: 画像の高さ。

デフォルト変数​

#define RST_PIN D0
#define DC_PIN  D3
#define BL_PIN  D6
#define CS_PIN  D1

#define LCD_WIDTH   172 //LCDの幅
#define LCD_HEIGHT  320 //LCDの高さ

/**
 * 画像の色
**/
#define WHITE         0xFFFF
#define BLACK         0x0000    
#define BLUE          0x001F  
#define BRED          0XF81F
#define GRED          0XFFE0
#define GBLUE         0X07FF
#define RED           0xF800
#define MAGENTA       0xF81F
#define GREEN         0x07E0
#define CYAN          0x7FFF
#define YELLOW        0xFFE0
#define BROWN         0XBC40 
#define BRRED         0XFC07 
#define GRAY          0X8430 
#define DARKBLUE      0X01CF  
#define LIGHTBLUE     0X7D7C   
#define GRAYBLUE      0X5458 
#define LIGHTGREEN    0X841F 
#define LGRAY         0XC618 
#define LGRAYBLUE     0XA651
#define LBBLUE        0X2B12

/**
 * 表示の回転
**/
#define ROTATE_0            0
#define ROTATE_90           90
#define ROTATE_180          180
#define ROTATE_270          270

#define MIRROR_NONE        0x00
#define MIRROR_HORIZONTAL  0x01
#define MIRROR_VERTICAL    0x02
#define MIRROR_ORIGIN      0x03

インストール​

ZIPライブラリをダウンロードした後、Arduino IDEを開き、スケッチ > ライブラリをインクルード > .ZIPライブラリを追加をクリックします。ダウンロードしたZIPファイルを選択し、ライブラリが正しくインストールされると、通知ウィンドウにライブラリがライブラリに追加されましたと表示されます。これでライブラリのインストールが成功したことを意味します。

XIAO 例​

ライブラリを正しくダウンロードしてインストールした後、examplesフォルダ内にhelloworld.inoとbgcolor.inoという2つのサンプルプログラムが見つかります。bgcolor.inoは背景色を表示する例で、デフォルトでは赤色に設定されています。そしてhelloworld.inoは弊社のロゴに関するアニメーションを表示する例で、この例にはbgcolorの例で使用されている効果も含まれています。

#include <st7789v3.h>
#include "SPI.h"
#include "seeed.h"

st7789v3 Display;

void setup() {
  // 初回実行時にセットアップコードを記述
  Display.SetRotate(270);
  Display.SetMirroring(MIRROR_VERTICAL);
  Display.Init();
  Display.SetBacklight(100);
  Display.Clear(WHITE);
}

void loop() {
  // 繰り返し実行されるメインコード
//  Display.SetPixel(100, 100, RED);
//  Display.DrawPoint(50, 50, YELLOW, DOT_PIXEL_8X8, DOT_FILL_AROUND);

  Display.DrawImage(gImage_seeed, 40, 60, 240, 47);

  Display.DrawLine(40, 50, 65, 50, MAGENTA, DOT_PIXEL_2X2, LINE_STYLE_SOLID);
  Display.DrawLine(40, 55, 80, 55, MAGENTA, DOT_PIXEL_2X2, LINE_STYLE_SOLID);
  
//  Display.DrawRectangle(15, 80, 265, 150, GRAY, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  
  Display.DrawCircle(0, 0, 25, BLUE, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(0, 0, 20, BLACK, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(0, 0, 15, RED, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(0, 0, 10, GREEN, DOT_PIXEL_2X2, DRAW_FILL_FULL);

  Display.DrawCircle(320, 0, 25, BLUE, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(320, 0, 20, BLACK, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(320, 0, 15, RED, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(320, 0, 10, GREEN, DOT_PIXEL_2X2, DRAW_FILL_FULL);

  Display.DrawCircle(0, 172, 25, BLUE, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(0, 172, 20, BLACK, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(0, 172, 15, RED, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(0, 172, 10, GREEN, DOT_PIXEL_2X2, DRAW_FILL_FULL);

  Display.DrawCircle(320, 172, 25, BLUE, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(320, 172, 20, BLACK, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(320, 172, 15, RED, DOT_PIXEL_2X2, DRAW_FILL_EMPTY);
  Display.DrawCircle(320, 172, 10, GREEN, DOT_PIXEL_2X2, DRAW_FILL_FULL);

  Display.DrawLine(242, 110, 282, 110, GRAYBLUE, DOT_PIXEL_2X2, LINE_STYLE_SOLID);
  Display.DrawLine(267, 115, 282, 115, GRAYBLUE, DOT_PIXEL_2X2, LINE_STYLE_SOLID);
  
  Display.DrawString_EN(100, 120, "By: Citric", &Font20, WHITE, BLACK);
//  Display.DrawNum(100, 220, 123456, &Font24, RED, BRED);
  Display.DrawFloatNum(130, 140, 1.00, 2, &Font20, WHITE, BLACK);
}

ディスプレイ上にSeeed Studioのロゴが動的に表示されるのを確認できます。

トラブルシューティング​

1. スクリーンを接続したまま再プログラムするとスクリーンが動作しないのはなぜですか？​

A: プログラムがスクリーンと継続的に通信している場合、再プログラムによってこのプロセスが中断され、スクリーンが正常に動作しなくなることがあります。電源をオフにして正常なスクリーン動作を復元することを試してください。

2. ディスプレイにはどのような電源を使用すればよいですか？​

A: 回路基板は3.3Vまたは5Vの入力電圧を受け入れることができますので、この範囲内の電源を使用してください。

3. ディスプレイの色が正しく表示されないのはなぜですか？​

A: コード内でディスプレイが正しく初期化されていること、正しい色値を使用していることを確認してください。それでも問題が解決しない場合、ディスプレイまたは接続ワイヤに問題がある可能性があります。接続を確認するか、別のディスプレイで試してみてください。

リソース​

技術サポート & 製品ディスカッション​

弊社製品をお選びいただきありがとうございます！お客様が弊社製品をスムーズにご利用いただけるよう、さまざまなサポートをご提供しております。お客様のご希望やニーズに応じた複数のコミュニケーションチャネルをご用意しています。

Loading Comments...