Difference between pages "Mbits" and "2.8'' TFT Touch Shield"

From Elecrow
(Difference between pages)
Jump to navigation Jump to search
 
 
Line 1: Line 1:
=='''Introduction'''==
+
== Introduction ==
  
Mbits is a pocket-sized microcontroller has lots of features the same as Microbit V2. Mbits is an ESP32-WROVER-B based educational hardware suitable for kids to learn how to program and experience hot topics such as IoT and AI.  
+
This TFT Touch Shield is Arduino/Crowduino/Arduino Mega compatible, it integrated a 2.8” TFT Display and a resistive touch panel, to make this shield suitable for handheld devices.<br>
 +
This TFT Touch Shield has 240x320 pixels with individual pixel control, it uses the ILI9341 driver and SPI interface to communicate with controllers such as Arduino, saving you much Arduino pins for other usages in your projects. Besides, A SD card socket is also added to help you develop applications that data storage is needed such as digital picture album.<br>
  
'''Model: [https://www.elecrow.com/stereo-vision-expansion-board-for-raspberry-pi-compute-module-cm3-cm3-lite-cm3-cm3-lite.html RPA20901S]'''
+
'''Model: [https://www.elecrow.com/28-tft-touch-shield-v43-p-1056.html AMS320240TFT]'''<br>
 +
[[File:TFT Touch Shileld1.jpg | 400px]][[File:TFT Touch Shileld2.jpg| 400px]]
  
[[File:Binocular Stereo Vision Expansion Board for Raspberry Pi 1.jpg ||600px]]
+
[[Image:Get_one_now.png|300px|link=https://www.elecrow.com/28-tft-touch-shield-v43-p-1056.html?wiki|alt=Alt text|Title text]]
  
 +
== Features  ==
  
=='''Features'''==
+
*LCD Driver: ILI9341
*Pocket-sized microcontroller designed
+
*Backlight controllable
*Wireless connectivity with built-in 2.4GHz micro:bit radio and BLE Bluetooth 4.2
+
*65535 rich colors
*Onboard MEMS microphone, speaker, 25 RGB LEDs
+
*SPI Communication
*Onboard accelerometer for motion sensing applications
+
*Voltage:4.8~5.5 V
*Notched edge connector for easier connections
+
*Max Current: 200 mA
*Dedicated I2C bus for peripherals
+
*Resolution:320x 240
*Two programmable buttons
+
*LCD Panel Size: 2.8”
*Supports graphical programming (Lestscode, based on Scratch3.0) and Arduino IDE
+
*Touch Mode: Resistance
 +
*Dimensions(mm):72.0(L)x14.5(W)x55.0(H)
  
 +
== Cautions  ==
  
=='''Use on Arduino'''==
+
*Please Be careful to deposit the fragile scree,pressing too hard on the screen might cause display damage.<br>
*'''Part 1. Setting up the programming environment'''<br>
 
  
1:Download and install the latest version of Arduino IDE, Windows Installer from https://www.arduino.cc/en/software
+
== Pins usage on Arduino  ==
 +
{| style="width: 609px; height: 215px" border="1" cellspacing="0"
 +
| style="width: 40%" scope="col" align="center"| '''Function'''
 +
| scope="col" align="center"| '''Pin Name'''
 +
| scope="col" align="center"| '''Arduino pin'''
 +
| scope="col" align="center"| '''Description'''
 +
|-
 +
|rowspan=4 align="center"| '''TFT Screen Control'''
 +
|align="center"| TF_CS
 +
|align="center"| D4
 +
|align="center"| SD card select input
 +
|-
 +
|align="center"| TFT_CS
 +
|align="center"| D5
 +
|align="center"| TFT chip select input
 +
|-
 +
|align="center"| TFT_D/C
 +
|align="center"| D6
 +
|align="center"| TFT Data/Command control
 +
|-
 +
|align="center"| BACKLIGHT
 +
|align="center"| D7
 +
|align="center"| TFT backlight control pin
 +
|-
 +
|rowspan=3 align="center"| '''TFT SPI Interface'''
 +
|align="center"| SPI_MOSI
 +
|align="center"| D11
 +
|align="center"| SPI data pin MOSI
 +
|-
 +
|align="center"| SPI_MISO
 +
|align="center"| D12
 +
|align="center"| SPI data pin MISO
 +
|-
 +
|align="center"| SPI_SCK
 +
|align="center"| D13
 +
|align="center"| SPI Clock Pin SCK
 +
|-
 +
|rowspan=4 align="center"| '''Touch Interface'''
 +
|align="center"| ADC0
 +
|align="center"| A0
 +
|align="center"| Touch Screen Y- input
 +
|-
 +
|align="center"| ADC1
 +
|align="center"| A1
 +
|align="center"| Touch Screen X- input
 +
|-
 +
|align="center"| ADC2
 +
|align="center"| A2
 +
|align="center"| Touch Screen Y+ input
 +
|-
 +
|align="center"| ADC3
 +
|align="center"| A3
 +
|align="center"| Touch Screen X+ input
  
2:Add ESP32 development board data in Arduino IDE
+
|}
  
a)Click "File" → "Preferences" to enter the Preferences interface.
+
== Usage  ==
 +
=== Hardware connection ===
 +
Plug 2.8'' TFT Touch Shileld into Arduino or Crowduino.<br>
 +
Connect Arduino to PC via a USB cable.<br>
 +
[[File:TFT Touch Shileld hardware1.jpg |500px]]
  
b)Add the URL https://dl.espressif.com/dl/package_esp32_index.json to "Additional Boards Manager URLs".
+
=== Program ===
 +
1.We suggest using the Seeedstudio TFT Library for this shield. please download them [https://www.elecrow.com/wiki/index.php?title=File:TFTTouch_Shield_demo_code.zip Demo code]<br>
 +
<br>
 +
2.Install the library to the Arduino IDE library to ''...\Arduino\libraries'', but please note that if you downloaded the library in .zip file, you should delete the "-master" in the library name when you unzip it, as the "-" can not be recognized in the Arduino Library.<br>
  
c)After adding the URL, you can search and download the ESP32 development board data package in: Tool→Board→Boards Manager.
+
=== Draw Circle===
 +
1.Open the code directly by the path:File -> Examples ->TFT_Touch_Shield_v2->drawCircle.<br>
 +
<pre>
 +
#include <stdint.h>
 +
#include <TFTv2.h>
 +
#include <SPI.h>
  
d)So far, the environment has been set up.
+
void setup()
 +
{
 +
    TFT_BL_ON;                                          //turn on the background light
 +
   
 +
    Tft.TFTinit();                                      //init TFT library           
  
 +
    Tft.drawCircle(100, 100, 30,YELLOW);                //center: (100, 100), r = 30 ,color : YELLOW             
 +
   
 +
    Tft.drawCircle(100, 200, 40,CYAN);                  //center: (100, 200), r = 10 ,color : CYAN 
 +
   
 +
    Tft.fillCircle(200, 100, 30,RED);                  //center: (200, 100), r = 30 ,color : RED   
 +
   
 +
    Tft.fillCircle(200, 200, 30,BLUE);                  //center: (200, 200), r = 30 ,color : BLUE               
 +
}
  
*'''Part 2: Some examples'''<br>
+
void loop()
 +
{
  
1.5*5 RGB dot matrix and buttons
+
}
 +
</pre>
 +
2.Upload the code,you will see that.<br>
 +
[[File:TFT Touch Shileld display1.jpg |500px]]
  
The 5*5RGB dot matrix is controlled by GPIO13, Button A is controlled by GPIO36, and Button B is controlled by GPIO39.
+
=== Touch Screen===
 +
1.Open the code directly by the path:File -> Examples ->Touch_Screen_Driver->touchScreen.<br>
 +
<pre>
 +
#include <stdint.h>
 +
#include <SeeedTouchScreen.h>
  
a)Copy the following three library files (Button, FastLED-master, RGB_Font) to the libraries under the Arduino installation directory;
+
#if defined(__AVR_ATmega1280__) || defined(__AVR_ATmega2560__) // mega
 +
#define YP A2  // must be an analog pin, use "An" notation!
 +
#define XM A1  // must be an analog pin, use "An" notation!
 +
#define YM 54  // can be a digital pin, this is A0
 +
#define XP 57  // can be a digital pin, this is A3
  
b)Download the following program (RGB_Test) to the Mbits board;
+
#elif defined(__AVR_ATmega32U4__) // leonardo
 +
#define YP A2  // must be an analog pin, use "An" notation!
 +
#define XM A1  // must be an analog pin, use "An" notation!
 +
#define YM 18  // can be a digital pin, this is A0
 +
#define XP 21  // can be a digital pin, this is A3
  
  #include <FastLED.h>
+
#else //168, 328, something else
   #include "Dots5x5font.h"
+
#define YP A2   // must be an analog pin, use "An" notation!
  #define NUM_ROWS 5
+
#define XM A1   // must be an analog pin, use "An" notation!
   #define NUM_COLUMNS 5
+
#define YM 14   // can be a digital pin, this is A0
  #define NUM_LEDS (NUM_ROWS * NUM_COLUMNS)
+
#define XP 17   // can be a digital pin, this is A3
   #define LED_PIN 13
+
 
  #define LED_TYPE WS2812B
+
#endif
  #define COLOR_ORDER GRB
 
  #include <Button.h>
 
  CRGBArray<NUM_LEDS> leds;
 
  uint8_t max_bright = 10;
 
   CRGB myRGBcolor_uijf(0, 255, 21);
 
  CRGB myRGBcolor_28dt(34, 0, 255);
 
  void plotMatrixChar(CRGB (*matrix)[5], CRGB myRGBcolor, int x, char character, int width, int height) {
 
    int y = 0;
 
    if (width > 0 && height > 0) {
 
      int charIndex = (int)character - 32;
 
      int xBitsToProcess = width;
 
      for (int i = 0; i < height; i++) {
 
        byte fontLine = FontData[charIndex][i];
 
        for (int bitCount = 0; bitCount < xBitsToProcess; bitCount++) {
 
          CRGB pixelColour = CRGB(0, 0, 0);
 
          if (fontLine & 0b10000000) {
 
            pixelColour = myRGBcolor;
 
          }
 
          fontLine = fontLine << 1;
 
          int xpos = x + bitCount;
 
        int ypos = y + i;
 
          if (xpos < 0 || xpos > 10 || ypos < 0 || ypos > 5);
 
          else {
 
            matrix[xpos][ypos] = pixelColour;
 
          }
 
        }
 
      }
 
    }
 
  }
 
  void ShowString(String sMessage,CRGB myRGBcolor) {
 
    CRGB matrixBackColor[10][5];
 
    int mapLED[] = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24};
 
  int messageLength = sMessage.length();
 
    for (int x = 0; x < messageLength; x++) {
 
      char myChar = sMessage[x];
 
      plotMatrixChar(matrixBackColor, myRGBcolor, 0 , myChar, 5, 5);
 
      for (int sft = 0; sft <= 5; sft++) {
 
        for (int x = 0; x < NUM_COLUMNS; x++) {
 
          for (int y = 0; y < 5; y++) {
 
            int stripIdx = mapLED[y * 5 + x];
 
            if (x + sft < 5) {
 
              leds[stripIdx] = matrixBackColor[x + sft][y];
 
            } else {
 
              leds[stripIdx] = CRGB(0, 0, 0);
 
  
 +
//Measured ADC values for (0,0) and (210-1,320-1)
 +
//TS_MINX corresponds to ADC value when X = 0
 +
//TS_MINY corresponds to ADC value when Y = 0
 +
//TS_MAXX corresponds to ADC value when X = 240 -1
 +
//TS_MAXY corresponds to ADC value when Y = 320 -1
  
 +
#define TS_MINX 116*2
 +
#define TS_MAXX 890*2
 +
#define TS_MINY 83*2
 +
#define TS_MAXY 913*2
  
  
 +
// For better pressure precision, we need to know the resistance
 +
// between X+ and X- Use any multimeter to read it
 +
// The 2.8" TFT Touch shield has 300 ohms across the X plate
 +
TouchScreen ts = TouchScreen(XP, YP, XM, YM);
  
            }
+
void setup(void) {
          }
+
  Serial.begin(9600);
        }
+
}
        FastLED.show();
 
        if (sft == 0) {
 
          FastLED.delay(200);
 
        } else {
 
          FastLED.delay(30);
 
        }
 
      }
 
    }
 
  }
 
  
 +
void loop(void) {
 +
  // a point object holds x y and z coordinates
 +
  Point p = ts.getPoint();
  
   void setup() {
+
   if (p.z > __PRESURE) {
    FastLED.addLeds<LED_TYPE, LED_PIN, COLOR_ORDER>(leds, NUM_LEDS);
+
    Serial.print("Raw X = "); Serial.print(p.x);
    FastLED.setBrightness(max_bright);
+
    Serial.print("\tRaw Y = "); Serial.print(p.y);
 +
    Serial.print("\tPressure = "); Serial.println(p.z);
 +
  }
 +
 
 +
 +
  p.x = map(p.x, TS_MINX, TS_MAXX, 0, 240);
 +
  p.y = map(p.y, TS_MINY, TS_MAXY, 0, 320);
 +
 
 +
  // we have some minimum pressure we consider 'valid'
 +
  // pressure of 0 means no pressing!
 +
  if (p.z > __PRESURE) {
 +
    Serial.print("X = "); Serial.print(p.x);
 +
    Serial.print("\tY = "); Serial.print(p.y);
 +
    Serial.print("\tPressure = "); Serial.println(p.z);
 
   }
 
   }
  
   void loop() {
+
   delay(100);
    if (buttonA.isPressed() && !buttonB.isPressed()) {
+
}
      ShowString("welcome",myRGBcolor_uijf);
+
</PRE>
    }
+
2.Upload the code,then open the serial monitor and touch the screen,you will see some information.<br>
    if (buttonB.isPressed() && !buttonA.isPressed()) {
+
[[File:TFT Touch Shileld display2.jpg |500px]]
      ShowString("elecrow",myRGBcolor_28dt);
+
 
    }
+
== Resources  ==
  }
+
This TFT Shield uses the ILI9341 Driver IC, thanks to the Seeed TFT library, It works OK on this TFT Touch Shiled:
 +
*[https://github.com/Seeed-Studio/TFT_Touch_Shield_V2 SeeedTFTV2.0 Library for Arduino 1.0]
 +
*[https://github.com/Seeed-Studio/Touch_Screen_Driver SeeedTouchScreen Library for Arduino 1.0]<br>

Revision as of 14:30, 1 April 2022

Introduction

This TFT Touch Shield is Arduino/Crowduino/Arduino Mega compatible, it integrated a 2.8” TFT Display and a resistive touch panel, to make this shield suitable for handheld devices.
This TFT Touch Shield has 240x320 pixels with individual pixel control, it uses the ILI9341 driver and SPI interface to communicate with controllers such as Arduino, saving you much Arduino pins for other usages in your projects. Besides, A SD card socket is also added to help you develop applications that data storage is needed such as digital picture album.

Model: AMS320240TFT
400pxTFT Touch Shileld2.jpg

Alt text

Features

  • LCD Driver: ILI9341
  • Backlight controllable
  • 65535 rich colors
  • SPI Communication
  • Voltage:4.8~5.5 V
  • Max Current: 200 mA
  • Resolution:320x 240
  • LCD Panel Size: 2.8”
  • Touch Mode: Resistance
  • Dimensions(mm):72.0(L)x14.5(W)x55.0(H)

Cautions

  • Please Be careful to deposit the fragile scree,pressing too hard on the screen might cause display damage.

Pins usage on Arduino

Function Pin Name Arduino pin Description
TFT Screen Control TF_CS D4 SD card select input
TFT_CS D5 TFT chip select input
TFT_D/C D6 TFT Data/Command control
BACKLIGHT D7 TFT backlight control pin
TFT SPI Interface SPI_MOSI D11 SPI data pin MOSI
SPI_MISO D12 SPI data pin MISO
SPI_SCK D13 SPI Clock Pin SCK
Touch Interface ADC0 A0 Touch Screen Y- input
ADC1 A1 Touch Screen X- input
ADC2 A2 Touch Screen Y+ input
ADC3 A3 Touch Screen X+ input

Usage

Hardware connection

Plug 2.8 TFT Touch Shileld into Arduino or Crowduino.
Connect Arduino to PC via a USB cable.
TFT Touch Shileld hardware1.jpg

Program

1.We suggest using the Seeedstudio TFT Library for this shield. please download them Demo code

2.Install the library to the Arduino IDE library to ...\Arduino\libraries, but please note that if you downloaded the library in .zip file, you should delete the "-master" in the library name when you unzip it, as the "-" can not be recognized in the Arduino Library.

Draw Circle

1.Open the code directly by the path:File -> Examples ->TFT_Touch_Shield_v2->drawCircle.

#include <stdint.h>
#include <TFTv2.h>
#include <SPI.h>

void setup()
{
    TFT_BL_ON;                                          //turn on the background light 
    
    Tft.TFTinit();                                      //init TFT library             

    Tft.drawCircle(100, 100, 30,YELLOW);                //center: (100, 100), r = 30 ,color : YELLOW              
    
    Tft.drawCircle(100, 200, 40,CYAN);                  //center: (100, 200), r = 10 ,color : CYAN  
    
    Tft.fillCircle(200, 100, 30,RED);                   //center: (200, 100), r = 30 ,color : RED    
    
    Tft.fillCircle(200, 200, 30,BLUE);                  //center: (200, 200), r = 30 ,color : BLUE                 
}

void loop()
{

}

2.Upload the code,you will see that.
TFT Touch Shileld display1.jpg

Touch Screen

1.Open the code directly by the path:File -> Examples ->Touch_Screen_Driver->touchScreen.

#include <stdint.h>
#include <SeeedTouchScreen.h> 

#if defined(__AVR_ATmega1280__) || defined(__AVR_ATmega2560__) // mega
#define YP A2   // must be an analog pin, use "An" notation!
#define XM A1   // must be an analog pin, use "An" notation!
#define YM 54   // can be a digital pin, this is A0
#define XP 57   // can be a digital pin, this is A3 

#elif defined(__AVR_ATmega32U4__) // leonardo
#define YP A2   // must be an analog pin, use "An" notation!
#define XM A1   // must be an analog pin, use "An" notation!
#define YM 18   // can be a digital pin, this is A0
#define XP 21   // can be a digital pin, this is A3 

#else //168, 328, something else
#define YP A2   // must be an analog pin, use "An" notation!
#define XM A1   // must be an analog pin, use "An" notation!
#define YM 14   // can be a digital pin, this is A0
#define XP 17   // can be a digital pin, this is A3 

#endif

//Measured ADC values for (0,0) and (210-1,320-1)
//TS_MINX corresponds to ADC value when X = 0
//TS_MINY corresponds to ADC value when Y = 0
//TS_MAXX corresponds to ADC value when X = 240 -1
//TS_MAXY corresponds to ADC value when Y = 320 -1

#define TS_MINX 116*2
#define TS_MAXX 890*2
#define TS_MINY 83*2
#define TS_MAXY 913*2


// For better pressure precision, we need to know the resistance
// between X+ and X- Use any multimeter to read it
// The 2.8" TFT Touch shield has 300 ohms across the X plate
TouchScreen ts = TouchScreen(XP, YP, XM, YM);

void setup(void) {
  Serial.begin(9600);
}

void loop(void) {
  // a point object holds x y and z coordinates
  Point p = ts.getPoint();

  if (p.z > __PRESURE) {
     Serial.print("Raw X = "); Serial.print(p.x);
     Serial.print("\tRaw Y = "); Serial.print(p.y);
     Serial.print("\tPressure = "); Serial.println(p.z);
  }
  
 
  p.x = map(p.x, TS_MINX, TS_MAXX, 0, 240);
  p.y = map(p.y, TS_MINY, TS_MAXY, 0, 320);
  
  // we have some minimum pressure we consider 'valid'
  // pressure of 0 means no pressing!
  if (p.z > __PRESURE) {
     Serial.print("X = "); Serial.print(p.x);
     Serial.print("\tY = "); Serial.print(p.y);
     Serial.print("\tPressure = "); Serial.println(p.z);
  }

  delay(100);
}

2.Upload the code,then open the serial monitor and touch the screen,you will see some information.
TFT Touch Shileld display2.jpg

Resources

This TFT Shield uses the ILI9341 Driver IC, thanks to the Seeed TFT library, It works OK on this TFT Touch Shiled: