macsbug

Just another WordPress.com site

1.44″ 128×128 Color TFT in ESP8266

leave a comment »

1.44″ 128×128 SPI Color TFT LCD Display を ESP8266 で動かす。    2016.10.07

この TFT Display は ESP8266 へ接続でき 1個278円という最強の低価格品です。
サイズは 45 x 33 x 4.4 mm で WeMos D1 mini にピッタリの大きさです。

アナログ時計を表示しました。時刻情報は DS3231 RTC を使用しています。
スケッチは max mc costa : sumo toy氏の (Clock_exsample)を使用し
文字盤やデジタル表示、アイコンを追加しました。sumotoy氏 に感謝致します。


機能:
アナログ部は 時、分、秒。デジタル部は 年、月日、曜日 を表示します。
WiFi出力は送信停止 ( WiFi.mode(WIFI_OFF); ) にする事により 技適(TELEC)は非該当となります。


構成:
1. ディスプレーは 1.44″ 128×128 SPI Color TFT ST7735。 信号は3.3V動作です。
_  TFTの電源(VCC) は 3V〜5V です。LDO U1 は Marking が662Kで3.3V出力です 。
_  VCC:3.3V を接続し LDO を介しても正常に動作します。(確認済み)
_  VCC:3.3V を使用し LDO をパスする時は U1 隣の J1 をジャンパーします。(確認済み)
_  LED の電源:3.3V を接続し動作しますが 5Vを接続すると LEDが破損します。(確認済み)
_  ELECROW:1.44” 128x 128 TFT LCD with SPI Interface
_  ELECROW:TFT 1.44 SPI 配線図:このモジュールの回路図です。
2. リアルタイムクロックは I2C DS3231 RTC ( 右のIC [ DS3132 ] と 黄色の電池 )
3. 厚さ:WeMos D1 mini は 13.2mm。D1 mini pro は 11.6mm になります。
4. USB 5V の消費電流は 約130mAです。


準備:費用総計:822円。

No Nomen Link Price(円) Memo
1 1.44″ 128×128 SPI Color TFT *  1.44″ Color TFT 278  1個 $2.85
2 I2C DS3231 RTC Module  DS3231 RTC    89  1個 $0.91
3 WeMos D1 mini  D1 Mini 335  1個 $3.41
4 0.3mm厚基板  秋月    60  1個
5 シングルピンソケット(低メス)  秋月    60  1個
6 Resistor 10KΩ  –  5個
7 RTClib Library  RTClib  –  RTC
8 Adafrui-GFX Library  Adafruit-GFX Library  –  TFT
9 Adafruit-ST7735-Library  Adafruit-ST7735-Library  –  TFT

* ST7735S(V1.1),ST7735R(V1.4),ST7735(V2.1)の3つの Ver がある。
** ebay の価格は円レートで変動します。円高の時にお買い求めください。


配線:


手順:
1. 基板にコネクターと配線 ( SPI 5本、I2C 2本、電源 2本 ) を実施します。
_  プルアップ抵抗 10KΩ 5個を取り付けます。(無いと動作しません)
2. スケッチ1: RTCの初期化 は NTPを使用しない設定方法としました。
_  PC へ接続し RTC に PC の時刻を設定します。
_  PC の日付と時刻を RTC へ保存します。
_   今回 NTP (WiFi による時刻の通信)は使用しません。
_   NTP(WiFi) を使用する場合 ESP8266 は with TELEC を使用ください。
3. スケッチ2: アナログ時計。
_  アナログ時計を実行すると RTC の時刻で 時,分,秒,年,月日,曜日 を表示します。


補足: 2016.11.10 追記
1.44″ Color TFT には バージョンがあり 画像表示の違い が判明しました。
_  結果:購入に於いて選択が出来ない為に 今回の修正方法としました。
ネットで論議があり 3つのタイプが述べられています。
ライブラリー制作者もかなり苦労された様です。
_ 1. ST7735S:V1.1:初回購入したもの。
_ 2. ST7735R:V1.4
_ 3. ST7735 :V2.1:追加購入したもので 追記のお話です。
_  経緯:当初 基板に v1.1 と書かれた物を試用し 以下のスケッチで動いた。
_   その後 他の業者から購入し V2.1 が来た。販売画面に違いの表示はない。
_  現象:画像の位置ずれが起きました。
_  V1.2 の スケッチの修正:
_  TFT の選択変更:
_   tft.initR(INITR_144GREENTAB); から tft.initR(INITR_18GREENTAB);
_   tft.setRotation(1); から tft.setRotation(3); に変更します。
_  補正追加: ctrx = tft.width()/2; ctry = tft.height()/2; の後に以下を記述。
_   ctrx = ctrx – 18; ctry = ctry -1; // 1.44 v2.1 center
_   tft.fillRect(-2,-4,127,127,ST7735_BLACK); // 1.44 v2.1 screen clear


参考:
RTClib。  Adafruit-ST7735-Library。  Adafruit_ST7735_mfGFX
adafruit-gfx-graphics-library:グラフィックの使用方法が書かれています。
TFTのサンプル:アナログ時計は「Clock_example」を使用し幾つかの追加をしました。
カラーピッカーの値算出:名前が定義されていない色の値を取得します。(例:0xFFFF)
Arduino topic:1.44 inch TFT 128×128 GLCD ILI9163:TFTを使用する為の情報


奇麗なフォントを組み込む方法:
_ Adafuruit のフォントは奇麗でないです。
_ Squix TechBlog の Daniel Eichhorn氏は Adafuruit GFX Font 用の Font Converter
_ を作られました。以下の手順で奇麗なフォントを組み込む事が出来ます。
_ FONT CREATOR NOW CREATES ADAFRUIT GFX FONTS
_ Font Converter   Daniel Eichhorn氏に感謝致します。


感想:
1. アナログ時計(Clock_exsample)は max mc costa : sumotoy氏に感謝致します。
2. 価格:TFT Display は 278円 という超低価格品です。
_   理由は Nokia 5110 に使用された大量生産品の恩恵です。
3. サイズ:1.44″ 128×128 TFT LCD Display は 45 x 33 x 4.4 mm。
_   TFT + D1 mini で13mm厚、バッテリ(6mm) + ケースで 24mm厚です。
4. TELEC:テーマによっては WiFi を必要としないものが多数あります。
_   WiFiを使用しない( WiFi.mode(WIFI_OFF); ) 事で消費電力を押さえられます。
_   ESP8266 はこれでも かなりの電流を使用するチップである事は変わりません。
5. sumotoy氏のスケッチ:アナログ表示やメーターの円形表示は sumotoy氏の方法
_   が大変参考になります。高速化の為に 全体を消去せず 針の部分のみの消去
_   と抽画を繰り返し実行しています。
6. Adafuruit のライブラリーと速度: Adafuruit のライブラリは遅いです。
_   これに挑戦した mgo-tec電子工作 の mgo-tec氏の記事は大変参考になります。
_   「ESP8266 ( ESP-WROOM-02 ) SPI 通信の高速化に挑戦
_   衝撃の高速化:是非 記事にある 動画 を見てください。
_   更に SPISSFファイル方法よりも高速な SDの高速化 も実現されています。
_   mgo-tec氏の素晴らしい挑戦と実現に感謝致します。
7. Adafruit-ST7735-Library-master の graphics test はSPI接続により速いです。
8. TFT に SD Card Socket 付きの製品が 356円という格安で販売されています。
_   1.8″ 128×160 SPI TFT LCD ST7735B with SD。 現在、調査発注中です。


スケッチ1:RTC に PC の時刻を設定する。

// DS1307 TIME SET
#include <ESP8266WiFi.h>
#include <Wire.h>
#include "RTClib.h"
RTC_DS1307 rtc;
 
void setup(void) {
  WiFi.mode(WIFI_OFF);                      // TX OFF, without TELEC
  Serial.begin(115200);
  Wire.begin(D3,D4); delay(10);             // I2C, SDA,SCL
  rtc.begin();
  rtc.adjust(DateTime(__DATE__, __TIME__)); // PCの時刻を設定
}
 
void loop(){
  DateTime now = rtc.now(); 
  Serial.print  (now.year(),  DEC);Serial.print(".");
  Serial.print  (now.month(), DEC);Serial.print(".");
  Serial.print  (now.day(),   DEC);Serial.print(" ");
  Serial.print  (now.hour(),  DEC);Serial.print(":");
  Serial.print  (now.minute(),DEC);Serial.print(":");
  Serial.println(now.second(),DEC);
  delay(1000);
}

 


スケッチ2:アナログ時計

// D1 mini + 1.44" 128x128 SPI TFT + DS3231 RTC // 2016.10.03 macsbug
// https://github.com/adafruit/RTClib           // RTClib
// https://github.com/adafruit/Adafruit-ST7735-Library
// https://github.com/pkourany/Adafruit_ST7735_mfGFX
// https://cdn-learn.adafruit.com/downloads/pdf/adafruit-gfx-graphics-library.pdf
// https://github.com/sumotoy/TFT_ILI9163C/tree/Pre-Release-1.0p7/examples
// http://www.barth-dev.de/online/rgb565-color-picker/
#include <ESP8266WiFi.h>                        // WiFi
#include <Wire.h>                               //
#include <RTClib.h>                             // RTC
RTC_DS3231 rtc;                                 // RTC DS3231
#include <Adafruit_GFX.h>                       //
#include <Adafruit_ST7735.h>                    // TFT 128x128 ST7735
#define TFT_CS    16                            // TFT CS  : D2 = 16
#define TFT_RST    4                            // TFT RST : D0 =  4
#define TFT_DC     5                            // TFT DC  : D5 =  5 
#define TFT_SCLK  14                            // TFT SCK : D7 = 14 
#define TFT_MOSI  13                            // TFT MOSI: D6 = 13 
Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS,   //
          TFT_DC, TFT_MOSI, TFT_SCLK, TFT_RST); //
uint16_t ctrx, ctry;                            // center x,y of the clock
const uint16_t rad = 63;                        // radius of the clock
const float scosConst = 0.0174532925;
float sx=0, sy=1, mx=1, my=0, hx= -1, hy=0;
float sdeg = 0, mdeg = 0, hdeg = 0;
uint16_t osx, osy, omx, omy, ohx, ohy;
uint16_t x0 = 0, x1 = 0, yy0 = 0, yy1 = 0;
uint16_t xd = 0, yd = 0;
uint32_t targetTime = 0;                        // for next 1 second timeout
uint8_t hh, mm, ss;                             // containers for current time
const char* wk[] = {                            // week
  "Sun","Mon","Tru","Wed","Thu","Fri","Sat"};   //
const char* tm[] = { "12","1","2","3","4","5",  // dial
  "6","7","8","9","10","11","12"};              //
  
void drawClockFace() {
  tft.fillCircle(ctrx,ctry,rad,0x3CDF);         // BLUE
  tft.fillCircle(ctrx,ctry,rad-4,0x0000);       // BLACK
  for (int i = 0; i < 360; i += 30) {           // Draw 12 lines
    sx = cos((i - 90) * scosConst);
    sy = sin((i - 90) * scosConst);
    x0 = sx * (rad - 4) + ctrx;
    yy0 = sy * (rad - 4) + ctry;
    x1 = sx * (rad - 11) + ctrx;
    yy1 = sy * (rad - 11) + ctry;
    xd = sx * (rad - 8) + ctrx - 2;             // dial pos x 
    yd = sy * (rad - 9) + ctry - 3;             // dial pos y 
    //tft.drawLine(x0, yy0, x1, yy1, 0x3CDF);   // scale
    tft.drawPixel(x0, yy0, 0xFFFF);             // scale
    String dial = "12";                         // dial
    if ( i > 0 ){ dial = String(i/30);}
    if ( dial == "12" ){ xd = xd - 3;}
    tft.setTextColor(0x3CDF);                   // BLUE
    tft.setCursor(xd, yd);
    tft.println(dial);                          // dial
  }
}

void setup(void) {
  WiFi.mode(WIFI_OFF);                          // TX OFF, without TELEC
  Wire.begin(D3, D4); delay(10);                // I2C RTC : SDA,SCL
  //--------------------------------------------//
  tft.initR(INITR_144GREENTAB);                 // TFT setup
  tft.fillScreen(ST7735_BLACK);                 //
  tft.setTextColor(0x5FCC);                     // GREEN
  tft.setRotation(1);                           //
  tft.setTextSize(1);                           //
  //--------------------------------------------//
  ctrx = tft.width()/2; ctry = tft.height()/2;
  osx = ctrx; osy = ctry;
  omx = ctrx; omy = ctry;
  ohx = ctrx; ohy = ctry;
  drawClockFace();                              // Draw clock face
  //--------------------------------------------//
  int px = 0; int py = 0;                       // apple icon
  tft.drawLine(6+px, 1+py,7+px, 1+py,0x07E0);
  tft.drawLine(5+px, 2+py,6+px, 2+py,0x07E0);
  tft.drawLine(5+px, 3+py,5+px, 3+py,0x07E0);
  tft.drawLine(2+px, 4+py,8+px, 4+py,0xFFE0);
  tft.drawLine(1+px, 5+py,9+px, 5+py,0xFFE0);
  tft.drawLine(1+px, 6+py,7+px, 6+py,0xFD24);
  tft.drawLine(1+px, 7+py,7+px, 7+py,0xFD24);
  tft.drawLine(1+px, 8+py,9+px, 8+py,0xF800);
  tft.drawLine(1+px, 9+py,9+px, 9+py,0xF800);
  tft.drawLine(2+px,10+py,8+px,10+py,0x3CDF);
  tft.drawLine(3+px,11+py,4+px,11+py,0x3CDF);
  tft.drawLine(6+px,11+py,7+px,11+py,0x3CDF);
  //--------------------------------------------//
  DateTime now = rtc.now();                     // time geting from RTC
  hh = now.hour();
  mm = now.minute();
  ss = now.second();
  targetTime = millis() + 1000;
}

void drawClockHands(uint8_t h, uint8_t m, uint8_t s) {
  // Pre-compute hand degrees, x & y coords for a fast screen update
  sdeg = s * 6;                                 // 0-59->0-354
  mdeg = m * 6  + sdeg * 0.01666667;            // 0-59->0-360:inc sec 
  hdeg = h * 30 + mdeg * 0.0833333;             // 0-11->0-360:inc min & sec
  hx = cos((hdeg - 90) * scosConst);
  hy = sin((hdeg - 90) * scosConst);
  mx = cos((mdeg - 90) * scosConst);
  my = sin((mdeg - 90) * scosConst);
  sx = cos((sdeg - 90) * scosConst);
  sy = sin((sdeg - 90) * scosConst);
  //--------------------------------------------// yyyy.mm.dd
  DateTime now = rtc.now();                     // read 
  String yd = String(now.year());               // year
  String md = String(now.month());              // month
  String dd = String(now.day());                // day
  String we = String(wk[now.dayOfTheWeek()]);   // Week
  tft.setTextColor(0x5FCC);                     //
  tft.setCursor(103,   1); tft.println(yd);     // year
  if(now.month()<10){ md = "0" + md;}           // month add 0
  if(now.day()  <10){ dd = "0" + dd;}           // day   add 0
  tft.setCursor(  1, 120); tft.println(md+dd);  // month,day
  tft.setCursor(108, 120); tft.println(we);     // week
  //--------------------------------------------//
  tft.drawLine(ohx,ohy,ctrx+1,ctry+1,0x0000);   // Erase old positions
  tft.drawLine(omx,omy,ctrx+1,ctry+1,0x0000);
  tft.drawLine(osx,osy,ctrx+1,ctry+1,0x0000);
  // Draw new hand positions
  tft.drawLine(hx*(rad-28)+ctrx+1,hy*(rad-28)
     +ctry+1,ctrx+1,ctry+1,0xFFFF);
  tft.drawLine(mx*(rad-17)+ctrx+1,my*(rad-17) 
     +ctry+1,ctrx+1,ctry+1,0xFFFF);
  tft.drawLine(sx*(rad-14)+ctrx+1,sy*(rad-14) 
     +ctry+1,ctrx+1,ctry+1,0xFA06);
  tft.fillCircle(ctrx+1,ctry+1,3,0xFA06);
  //--------------------------------------------
  osx = sx * (rad - 14) + ctrx + 1;             // Update x & y coords
  osy = sy * (rad - 14) + ctry + 1;
  omx = mx * (rad - 17) + ctrx + 1;
  omy = my * (rad - 17) + ctry + 1;
  ohx = hx * (rad - 28) + ctrx + 1;
  ohy = hy * (rad - 28) + ctry + 1;
}

void loop() {
  if (targetTime < millis()) {
   targetTime = millis() + 1000; ss++;
   if (ss == 60) { ss = 0; mm++;
     if (mm > 59) { mm = 0; hh++;
        if (hh > 23) hh = 0;
      }
    }
    drawClockHands(hh, mm, ss);
  }
}

Written by macsbug

10月 7, 2016 @ 10:46 am

カテゴリー: ESP8266

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。