Skip to main content

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

note

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

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

今すぐ購入 🖱️

概要​

この1.69インチLCDディスプレイは、1.69インチのシリアル液晶ディスプレイで、角が丸いデザインが特徴です。240×280の高解像度と262K RGB表示色を提供し、鮮明でカラフルな画像表現を実現します。このディスプレイの設計理念は、さまざまなDIYプロジェクトやIoT（Internet of Things）プロジェクトのニーズを満たすために、シンプルで高品質なディスプレイソリューションを提供することです。

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

仕様​

動作電圧3.3V / 5V解像度240 × 280 ピクセル
通信インターフェース4線式SPI表示サイズ27.97 × 32.63mm
ディスプレイパネルIPSピクセルピッチ0.11655 × 0.11655mm
ドライバーST7789V2寸法31.50 × 39.00mm

外形寸法​

特徴​

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

応用アイデア​

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

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

ハードウェア概要​

はじめに​

ハードウェア準備​

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

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

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

1.69インチ 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   240 //LCDの幅
#define LCD_HEIGHT  280 //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 <st7789v2.h>
#include "SPI.h"
#include "seeed.h"

st7789v2 Display;

void setup() {
  // 初回実行時にセットアップコードを記述します:
  Display.SetRotate(270);
  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, 20, 90, 240, 47);

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

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

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

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

  Display.DrawLine(200, 160, 265, 160, GRAYBLUE, DOT_PIXEL_2X2, LINE_STYLE_SOLID);
  Display.DrawLine(215, 165, 265, 165, GRAYBLUE, DOT_PIXEL_2X2, LINE_STYLE_SOLID);
  
  Display.DrawString_EN(20, 180, "By: Citric", &Font20, WHITE, BLACK);
//  Display.DrawNum(100, 220, 123456, &Font24, RED, BRED);
  Display.DrawFloatNum(100, 210, 1.00, 2, &Font16, WHITE, BLACK);
}

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

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

1. スクリーンを接続したままプログラムを書き換えるとスクリーンが動作しない？​

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

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

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

3. ディスプレイの色が正しく表示されません。原因は何でしょうか？​

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

リソース​

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

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

Loading Comments...