الاثنين، 25 أغسطس، 2014

الشاشة الرسومية الملونة TFT LCD 1.8 Inch

TFT LCD 1.8 inch ST7735 Controller



تعتبر هذه الشاشه من فئة شاشات العرض الصغيره الملونه .


شاشه 1.8TFT Display يوجد اشكال كثيره منها متوفره كغطاء  Arduino shield و كلوحات سهله التوصيل مع الاردوينو breakout boards . سنستخدم في هذا المقال شاشه العرض  1.8 inch TFT color display بابعاد 128*160بكسل ومزوده  (micro SD )لتخزين الصور والملفات .



تحتوي هذه الشاشة على 160 صف و 128 عمود (128*160 ) بكسل على عكس شاشه Nokia 6110

اسم المتحكم المستخدم في الشاشه ST7735R يمكنه عرض 18بت لون كامله اي 262,144لون , المتحكم ST7735 هو رقاقه تحكم ب262K لون .نوع الرسم TFT-LCD .هذه الرقاقه قادره على الربط مع متحكم خارجي مباشره يتصل عن طريق البروتوكول SPI




 بورد الشاشه يحتوي على منظم للفولتيه لذلك يمكننا استخدام 3.3فولت او 5 فولت لتزويد الشاشه بالطاقه.وايضا تحتوي على حافظه SD card حتى نتمكن من تحميل صور ملونه بسهوله.
تتم برمجتها عبر برتوكول SPI نظرا لما تحتاجه هذه الشاشه من سرعه عاليه لنقل البيانات من المتحكم (الاردوينو ) وبين متحكم الشاشه ST7735R


3) ستقسم مقالات هذه الشاشة إلى  3 أجزاء :

1)التحكم فيها بواسطة مكتبة ادافروت Adafruit و أوامرها البسيطة .

سنستخدم لبرمجه هذه الشاشه مكتبه Adafruit_GFX حيث توفر مجموعه من اقترانات الجمل والرسومات لكل من شاشات الكرستال السائلهLCDوشاشات الOLED وهذا يسمح لنا من برمجه هذه الشاشات عن طريق الاردوينو بسهوله وتحسين ادائها
تعمل هذه المكتبه جنبا الى جنب مع مكتبه مخصصه لنوع الشاشه المستخدمه .لذلك سنستخدم بلاضافه لهذه المكتبه مكتبه Adafruit_ST7735.

2) كيفية تحميل الصور على هذه الشاشة و ضبطها .

3) برمجتها بواسطة مكتبة اردوينو الرسمية .

قبل البداية سنقوم بتحميل مكتبة Adafruit الخاصة بهذه الشاشة من هنا 

و تحميل  مكتبة gfx من هنا 


التوصيل :




شرح اوامر المكتبه :

1) لبدأ العمل مع هذه الشاشه نعمل على تهيئتها بواسطه الامر 

TFT_name.initR(INITR_BLACKTAB);

2) لضبط اللون المستخدم بالكتابه نستخدم الامر 
TFT_name.setTextColor(ST7735_COLOR);

3) لضبط حجم الخط المستخدم نستخدم الامر 
TFT_name.setTextSize(n);

حيث ان n رقم بين 1 -4 كلما زاد الرقم n زاد حجم الخط 


4)لرسم نقطه على الشاشه نستعمل الامر 
TFT_name.drawPixel(x1,y1,ST7735_COLOR);
حيث x1,y1 هي احداثيات النقطه.




وهذا المثال يوضح طريقه رسم نقطه على الشاشه
//Simple Code to Draw pixel on TFT 1.8 Inch
//#define sclk 13
//#define mosi 11
#define cs   10
#define dc   9
#define rst  8  // you can also connect this to the Arduino reset

#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7735.h> // Hardware-specific library
#include <SPI.h>
// define Library Object , using SPI Interface
Adafruit_ST7735 GenoTFT = Adafruit_ST7735(cs, dc, rst);


void TFTDrawPixel(){
  GenoTFT.setTextColor(ST7735_YELLOW);
  GenoTFT.setTextSize(1);
  GenoTFT.println("Draw Pixel :");
  //Draw a pixel on LCD , Alike: 
  //GenoTFT.drawPixel(x,y,color);

  GenoTFT.drawPixel(15,15,ST7735_RED);
  GenoTFT.drawPixel(38,55,ST7735_BLUE);
  GenoTFT.drawPixel(70,75,ST7735_GREEN);
//........
  GenoTFT.drawPixel(24,33,ST7735_RED);
  GenoTFT.drawPixel(48,65,ST7735_BLUE);
  GenoTFT.drawPixel(90,105,ST7735_GREEN);

}

void setup() {
  // put your setup code here, to run once:
  // initialize a ST7735S chip, black tab
  GenoTFT.initR(INITR_BLACKTAB);
  delay(500);
  //Set black Background
  GenoTFT.fillScreen(ST7735_BLACK);
  //Draw Pixel , void ....
  TFTDrawPixel();
}
void loop() {
  // put your main code here, to run repeatedly: 
  
}



5) لرسم خط مستقيم نستخدم الامر 
TFT_name.drawLine(x1,y1,x2,y2,ST7735_COLOR);
x1,y1 احداثيات النقطه الاولى 
x2,y2 احداثيات النقطه الثانيه 
ST7735_COLOR  لون الخط المستقيم
بالاضافه لوجود اوامر خاصه لرسم الخط وهي :
رسم خط مستقيم افقيا 
TFT_name.drawFastHLine(x1,y1,L,ST7735_COLOR);

حيث X1,Y1 نقطه بدايه هذا الخط
L طول الخط 


ولرسم خط مستقيم عاموديا 
TFT_name.drawFastVLine(x1,y1,L,ST7735_COLOR);

حيث X1,Y1 نقطه بدايه هذا الخط
L طول الخط





وهذا البرنامج مثال لرسم الخطوط المختلفه على الشاشه 
//Simple Code to Draw pixel on TFT 1.8 Inch
//#define sclk 13
//#define mosi 11
#define cs   10
#define dc   9
#define rst  8  // you can also connect this to the Arduino reset

#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7735.h> // Hardware-specific library
#include <SPI.h>
// define Library Object , using SPI Interface
Adafruit_ST7735 GenoTFT = Adafruit_ST7735(cs, dc, rst);


void TFTDrawLine(){
  GenoTFT.setTextColor(ST7735_YELLOW);
  GenoTFT.setTextSize(1);
  GenoTFT.setCursor(0, 0);
  GenoTFT.println("Draw line :");
  //Draw a pixel on LCD ,we Know two point
 // (x0,y0) and (x1,y1)  Alike: 
  //GenoTFT.drawLine(x0,y0,x1,y1,color);
  GenoTFT.drawLine(18,18,50,30,ST7735_RED);
  GenoTFT.drawLine(38,55,71,26,ST7735_BLUE);
  GenoTFT.drawLine(70,75,108,140,ST7735_GREEN);
}

void TFTDrawHorLine(){
  //Draw Horizontal line ,starting from a point
  //(x0,y0) with length in Horizontal
//GenoTFT.drawFastHLine(x0,y0,length,color);
  GenoTFT.setTextColor(ST7735_YELLOW);
  GenoTFT.setCursor(0, 0);
  GenoTFT.setTextSize(1);
  GenoTFT.println("Draw Horizontal line :");
  GenoTFT.drawFastHLine(20,30,60,ST7735_GREEN);
  GenoTFT.drawFastHLine(10,80,100,ST7735_RED);
}
void TFTDrawVerLine(){
  //Draw Vertical line ,starting from a point
  //(x0,y0) with length in Vertical
//GenoTFT.drawFastVLine(x0,y0,length,color);
  GenoTFT.setTextColor(ST7735_YELLOW);
  GenoTFT.setTextSize(1);
  GenoTFT.setCursor(0, 0);
  GenoTFT.println("Draw Vertical line :");
  GenoTFT.drawFastVLine(5,8,60,ST7735_GREEN);
  GenoTFT.drawFastVLine(60,58,90,ST7735_RED);
}

void setup() {
  // put your setup code here, to run once:
  // initialize a ST7735S chip, black tab
  GenoTFT.initR(INITR_BLACKTAB);
  delay(500);
  //Set black Background
  GenoTFT.fillScreen(ST7735_BLACK);
  //Draw line , void ....
}
void loop() {
    //Draw line , void ....

  TFTDrawLine();
  delay(2000);
  GenoTFT.fillScreen(ST7735_BLACK); 
  TFTDrawHorLine();
   delay(2000);
  GenoTFT.fillScreen(ST7735_BLACK);
  TFTDrawVerLine();
   delay(2000);
  GenoTFT.fillScreen(ST7735_BLACK);
}


6) لرسم مستطيل فارغ نستخدم الامر 
  TFT_name.drawRoundRect(X1,Y1,X2,Y2,5,ST7735_COLOR);
X1,Y1 نقطه بدايه المستطيل 
X2,Y2 نقطه نهايه المستطيل 
ST7735_COLOR لون اطار المستطيل

7)لرسم مستطيل ممتلئ بلون  نستخدم الامر 
  TFT_name.fillRoundRect(X1,Y1,X2,Y2,5,ST7735_COLOR);
X1,Y1 نقطه بدايه المستطيل 
X2,Y2 نقطه نهايه المستطيل
ST7735_COLOR لون الذي سيملئ بها المستطيل 




وهذا المثال يوضح طريقه رسم مستطيل فارغ وممتلئ 
//Simple Code to Draw pixel on TFT 1.8 Inch
//#define sclk 13
//#define mosi 11
#define cs   10
#define dc   9
#define rst  8  // you can also connect this to the Arduino reset

#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7735.h> // Hardware-specific library
#include <SPI.h>
// define Library Object , using SPI Interface
Adafruit_ST7735 GenoTFT = Adafruit_ST7735(cs, dc, rst);

void DrawRectangle(){
  //Draw a rectangle , starting from a point
//  (x0,y0) , with width w and height h
//the format of the code alike :
//GenoTFT.drawRect(x0,y0,w,h,color);
  GenoTFT.setTextColor(ST7735_YELLOW);
  GenoTFT.setTextSize(1);
  GenoTFT.setCursor(0, 0);
  GenoTFT.println("Draw Rectangular:");
  GenoTFT.drawRect(10,40,50,30,ST7735_BLUE);
  GenoTFT.drawRect(10,75,80,50,ST7735_RED);
  GenoTFT.drawRect(25,140,10,10,ST7735_CYAN);
}

void DrawFilledRectangle(){
//Draw a rectangle ,and fill it  starting from a point
//  (x0,y0) , with width w and height h
//the format of the code alike :
//GenoTFT.fillRect(x0,y0,w,h,color);
  GenoTFT.setTextColor(ST7735_YELLOW);
  GenoTFT.setTextSize(1);
  GenoTFT.setCursor(0, 0);
  GenoTFT.println("Draw filled Rectangle:");
  GenoTFT.fillRect(10,40,50,30,ST7735_BLUE);
  GenoTFT.fillRect(10,75,80,50,ST7735_RED);
  GenoTFT.fillRect(25,140,10,10,ST7735_CYAN); 
}
void DrawRoundRectangle(){
 //Draw a rectangle with rounded corners
 //starting from a point
 //(x0,y0) , with width w and height h 
 //and Radius for corner 
 //the format of the code alike :
 //GenoTFT.drawRoundRect(x0,y0,w,h,r,color);
  GenoTFT.setTextColor(ST7735_YELLOW);
  GenoTFT.setTextSize(1);
  GenoTFT.setCursor(0, 0);
  GenoTFT.println("Draw Rectangular:");
  GenoTFT.drawRoundRect(10,40,50,30,5,ST7735_BLUE);
  GenoTFT.drawRoundRect(10,75,80,50,5,ST7735_RED);
  GenoTFT.drawRoundRect(25,140,10,10,5,ST7735_CYAN);
}
void DrawfilledRoundRectangle(){
 //Draw a rectangle with rounded corners
 //starting from a point
 //(x0,y0) , with width w and height h 
 //and Radius r for corner 
 //the format of the code alike :
 //GenoTFT.fillRoundRect(x0,y0,w,h,r,color);
  GenoTFT.setTextColor(ST7735_YELLOW);
  GenoTFT.setTextSize(1);
  GenoTFT.setCursor(0, 0);
  GenoTFT.println("Draw filled Rectangle:");
  GenoTFT.fillRoundRect(10,40,50,30,5,ST7735_BLUE);
  GenoTFT.fillRoundRect(10,75,80,50,5,ST7735_RED);
  GenoTFT.fillRoundRect(25,140,10,10,5,ST7735_CYAN); 
}

void setup() {
  // put your setup code here, to run once:
  GenoTFT.initR(INITR_BLACKTAB);
  delay(500);
  //Set black Background
  GenoTFT.fillScreen(ST7735_BLACK);
}

void loop() {
 DrawRectangle();
  delay(2000);
  GenoTFT.fillScreen(ST7735_BLACK);
  DrawFilledRectangle();
  delay(2000);
  GenoTFT.fillScreen(ST7735_BLACK);
  DrawRoundRectangle();
  delay(2000);
  GenoTFT.fillScreen(ST7735_BLACK);
  DrawfilledRoundRectangle();  
  delay(2000);
  GenoTFT.fillScreen(ST7735_BLACK);
}


8) لرسم مثلث نستخدم الامر 
 TFT_name.drawTriangle(X1,Y1,X2,Y2,X3,Y3,ST7735_COLOR);
 X1,Y1,X2,Y2,X3,Y3 حيث هذه الاحداثيات رؤوس المثلث  ST7735_COLOR لون اطار المثلث
9) لرسم مثلث ممتلئ بلون نستخدم الامر 
 TFT_name.fillTriangle(X1,Y1,X2,Y2,X3,Y3,ST7735_COLOR);
 X1,Y1,X2,Y2,X3,Y3 حيث هذه الاحداثيات رؤوس المثلث  ST7735_COLOR لون الممتلئ به المثلث 
//Simple Code to Draw pixel on TFT 1.8 Inch
//#define sclk 13
//#define mosi 11
#define cs   10
#define dc   9
#define rst  8  // you can also connect this to the Arduino reset

#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7735.h> // Hardware-specific library
#include <SPI.h>
// define Library Object , using SPI Interface
Adafruit_ST7735 GenoTFT = Adafruit_ST7735(cs, dc, rst);

void DrawCircle(){
 //Draw a circle with radius r
 //starting from a center point
 //(x0,y0) , with radius r
 //the format of the code alike :
 //GenoTFT.drawRoundRect(x0,y0,r,color);
   GenoTFT.drawCircle(64,80,30,ST7735_YELLOW);
   GenoTFT.drawCircle(64,135,20,ST7735_RED);
   GenoTFT.drawCircle(20,30,5,ST7735_BLUE);
}
void DrawFilledCircle(){
 //Draw a circle with radius r
 //starting from a center point
 //(x0,y0) , with radius r
 //the format of the code alike :
 //GenoTFT.drawRoundRect(x0,y0,r,color);
   GenoTFT.fillCircle(64,80,30,ST7735_YELLOW);
   GenoTFT.fillCircle(64,135,20,ST7735_RED);
   GenoTFT.fillCircle(20,30,5,ST7735_BLUE);
}

void DrawTriangle(){
 //Draw a triangle with 3 points
 //(x0,y0) , (x1,y1) ,(x2,y2) 
 //the format of the code alike :
 //GenoTFT.fillTriangle(x0,y0,x1,y1,x2,y2,color);
   GenoTFT.drawTriangle(50,50,20,90,80,90,ST7735_BLUE);
   //filled triangle
   GenoTFT.fillTriangle(50,100,20,150,80,150,ST7735_RED);
} 
void setup() {
  // put your setup code here, to run once:
  GenoTFT.initR(INITR_BLACKTAB);
  delay(500);
  //Set black Background
  GenoTFT.fillScreen(ST7735_BLACK);
}

void loop() {
  // put your main code here, to run repeatedly: 
  DrawCircle();
  delay(2000);
  GenoTFT.fillScreen(ST7735_BLACK);
  DrawFilledCircle();
  delay(2000);
  GenoTFT.fillScreen(ST7735_BLACK);
  DrawTriangle(); 
  delay(2000);
  GenoTFT.fillScreen(ST7735_BLACK);
  
}




هذا هو الجزء الأول من المقال و في الجزء الثاني سنتحدث عن كيفية تحميل صورة على هذه الشاشة باستخدام SD Card


4 التعليقات :

  1. هل هذة الشاشة عرض نصوص واشكال وصور فقط اويمكن ان تكون دخل لاوامر معينة مثلا التحكم بليد خارجي اي هل هي شاشة لمس اذا كانت لاتدعم اللمس ماهي الشاشة التي تدعم اللمس وتركب فوق الاردينو مباشرة مثل lcd1602 shield

    ردحذف
  2. هو فين الجزء التاني

    ردحذف
    الردود
    1. للاسف لم يتم نشره لتوقفنا عن التدوين منذ فترة

      حذف
  3. يا ريت تشرح عن شاشة tft 2.4 استاذ

    ردحذف

 
Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.