macsbug

Just another WordPress.com site

1.8″ 128×160 Color TFT in ESP8266

leave a comment »

1.8″ 128×160 Color TFT ST7735B と ESP8266 でアナログ時計を作る。     2016.10.23

ケースのサイズは 60 x 51 x 17mm。費用は 総計859円です。


1.8″ 128×160 Color TFT

1.44″ 128×128 Color TFT

1.44″ 128×128 Color TFT in ESP8266 :2016.10.07 から 今回は
1.8″ 128×160 TFT + SD Slot を使用。価格は 317円 と低価格です。
詳細は上記の記事を参照願います。
1.44″ より少し大きくなりますが SD SLOT があり用途が広がります。


 

準備:費用総計:859円。 :基板とピンを使用しなければ(直付け) 719円で出来ます。

No. Nomen Link Price(円) Memo
01 1.8″ 128X160 SPI Color TFT  1.8″ Color TFT 317  1個 GBP 2.50
02 I2C DS3231 RTC Module  DS3231 RTC    89  1個 USD 0.91
03 WeMos D1 mini 又は Pro *  D1 Mini 313  1個 USD 2.47
04 0.3mm厚基板  秋月    60  1個
05 シングルピンソケット(低メス)  秋月    60  1個
06 ロー ピンヘッダ(低オス)  秋月    40  1個
07 Resistor 10KΩ  –  –  5個
08 ケース(3Dプリンターで製作)  –  –  1個
09 RTClib Library  RTClib  –  RTC
10 Adafrui-GFX Library  Adafruit-GFX Library  –  TFT
11 Adafruit-ST7735-Library  Adafruit-ST7735-Library  –  TFT

 
* WiFi.mode(WIFI_OFF);:この命令で送信電波を停止し without TELEC にします。


 

配線:
1 :TFT MODULE:
_  裏にロー ピンヘッダ(低オス:黒)を取り付けます。(左)
_  黄色のピンは D1 mini が接触しない様に幾つかのピンを外す。(理由:USB端子側)
_  J1 端子(U1 LDOの左)はハンダ・ジャンパーをします。(理由:電源は3Vで使用)
_   基板の裏に「 Vin : VCC = 3V:J1 SHORT 」と書かれている。
_   (詳細:電源を3.3Vで使用する場合は U1 LDO(AMS1117-33)をパスします。

 

2 :基板表: 0.3mm基板 + WeMos D1 mini 又は D1 mini Pro + RTC を取り付ける。
_  低メスコネクターピンを使用する。(理由:厚さを薄くする為)
_  部品の位置は厚さが薄くなる様に配置します。
_  接触しやすい部分はカプトンテープ等で絶縁します。

 

3 :基板裏:
_  10KΩチップ抵抗 5個を基板に取り付けます。
_  電源+TFT SPI+SD+RTC 16本の配線をします。
_  SD Slot は 動作確認をしていませんので使用しない場合は配線不要です。

_   

_ 配線は極力平行になるようにしました。これにより2回目以降も楽に配線できます。

 

_ 直付け方式:基板とコネクターを使用しない為 製作の簡略化と費用削減ができます。
_  RTC と D1 mini Pro は両面テープで固定。
_  チップパーツは耐熱(カプトン)テープの上でハンダ付けする。
_  厚さは 9.6mm 。費用は 合計 984円 ( D1 mini Pro=582円 )。製作時間は 2時間20分。

 

4 :TFT + 基板 を ケースに入れる。(裏側)


 

TFT 2.4インチ タイプの改修:過去に製作した 2.4″ TFT LCD も同様に行いました。
_ 2.4″ 320×240 TFT ILI9341 Display に RTC(中央) を取り付け4本配線します。
_ スケッチは 記載しませんが ほぼ同じで位置やサイズを変えます。
_ この 2.4″ は ESP8266をTFT基板に両面テープで直づけし配線しています。
_ 直付けは手間と費用が省け(基板とコネクターが不要)ます。


 

TFT  ディスプレーを並べてみました。
_ 1.44″ 128×128、1.44″ 128×128。(上)。同じ物です。
_ 2.4″ 320×240、1.8″ 128×160。(下)


 

他の 1.8″ 128×160 SPI TFT ST7735 Color Display
1.8″ TFT LCD Display module ST7735S 128×160:449円

1.8″ SPI TFT Color LCD Module Display Screen128 x 160:419円

1.8″ 128×160 TFT LCD Shield Module SPI serial interface:622円


 

感想:
サイズ:1.44″ は手の平に入る「可愛い」大きさです。
_   1.8″ も手の平に入る「ピッタリ」の大きさです。この感触はかなり良いです。
厚さ:ケースの厚さを薄くするトライをしていますが今の所 最薄は 17mmです。
LEDの輝度:基板にある抵抗(30Ωや100Ω)を変更無く使用しています。
_   比較すると 1.44″ は 1.8″ より少し暗めです。
_   電流を流し過ぎたり 5V を加えるとLEDが破損しますので注意してください。
価格と容易さ:「千円以内」で「簡単に出来る」事で この物を沢山用意できます。
_   思いついた時や プログラムに集中して 直ぐ完成品が出来る様になります。
_   さらに費用を減らすには TFT基板に部品を直接接着すれば 719円で出来ます。
基板が欲しい:パターンは簡単です。どなたか基板を作って頂けると良いかも知れません。
_      条件は基板が薄くできる事と低価格、そしてもう一捻りの案です。
GPIO端子:ESP8266はGPIO端子が少ない為に端子の割り振りはパズルの様になります。
_     TFTのCSはLowにしておけば正常に動きます。つまりGPIOに接続しなく
_     とも動作します。これは少ないGPIO端子を有効に使用できます。
_     RSTもそのはずで端子の使用方法として検討課題です。


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

// D1 mini + 1.8" 128x160 SPI TFT + DS3231 RTC  // 2016.10.19 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    15                            // TFT CS  : D8 = 15
#define TFT_RST   16                            // TFT RST : D0 = 16
#define TFT_DC    14                            // TFT DC  : D5 = 14 
#define TFT_SCLK  13                            // TFT SCK : D7 = 13 * 
#define TFT_MOSI  12                            // TFT SDA : D6 = 12 **
#define RTC_SDA    5                            // RTC D   : D1 =  5
#define RTC_SCL    4                            // RTC C   : D2 =  4
#define SD_CS      2                            // SD  CS  : D4 =  2
#define SD_MOSI    0                            // SD  MOSI: D3 =  0
#define SD_MISO    4                            // SD  MISO: D6 = 12 **
#define SD_CLK    13                            // SD  CLK : D7 = 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) {
  //Serial.begin(115200);
  WiFi.mode(WIFI_OFF);                          // without TELEC
  Wire.begin(RTC_SDA, RTC_SCL); delay(10);      // RTC : SDA,SCL,D6,D1
  //--------------------------------------------//
  tft.initR(INITR_BLACKTAB);                    // 1.8" 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(135,   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(135, 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);
  //--------------------------------------------//
  tft.drawLine(hx*(rad-28)+ctrx+1,hy*(rad-28)   // Draw new hand positions
     +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月 22, 2016 @ 2:28 pm

カテゴリー: ESP8266

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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