2.8" TFT Touch Shield Keyboard

Adafruit Ethernet, Motor, Proto, Wave, Datalogger, GPS Shields - etc!

Moderators: adafruit_support_bill, adafruit

Please be positive and constructive with your questions and comments.
Locked
User avatar
asteroid
 
Posts: 300
Joined: Tue Oct 22, 2013 9:10 pm

2.8" TFT Touch Shield Keyboard

Post by asteroid »

Demonstrates using an UNO with v.2 Touch Shield to create a miniature keyboard:

http://youtu.be/3z3sUzaF4wo

User avatar
Franklin97355
 
Posts: 23938
Joined: Mon Apr 21, 2008 2:33 pm

Re: 2.8" TFT Touch Shield Keyboard

Post by Franklin97355 »

Nice job. Perhaps you could post up a description of how it was accomplished. I'm sure others are interested.

User avatar
asteroid
 
Posts: 300
Joined: Tue Oct 22, 2013 9:10 pm

Re: 2.8" TFT Touch Shield Keyboard

Post by asteroid »

> Perhaps you could post up a description of how it was accomplished.

This demo is a modification of Clay Furman's work (inspired by an Adafruit tutorial) found on the Arduino website. Hardware is described in the video. Arduino sketch follows:

Code: Select all

/*
  UNO + 2.8" TFT Touch Shield v.2 (Adafruit)
  USB on right
  Known problem: all notes are same duration
*/

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>
#include <Adafruit_STMPE610.h>

// Default values for Adafruit shield v2.
#define STMPE_CS 8
#define TFT_DC 9
#define TFT_CS 10

Adafruit_STMPE610 ts = Adafruit_STMPE610(STMPE_CS);
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

// Assign human-readable names to some common 16-bit color values:
#define	BLACK   0x0000
#define	BLUE    0x001F
#define	RED     0xF800
#define	GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF

//  Pin to which the speaker is connected
// Use 19 for UNO (A5 pin, as a digital output)
 const int speaker = 19;
 
 //Frequencies for notes
 // ================== //
 #define NOTE_C4  262
 #define NOTE_CS4 277
 #define NOTE_D4  294
 #define NOTE_DS4 311
 #define NOTE_E4  330
 #define NOTE_F4  349
 #define NOTE_FS4 370
 #define NOTE_G4  392
 #define NOTE_GS4 415
 #define NOTE_A4  440
 #define NOTE_AS4 466
 #define NOTE_B4  494
 // ================== //
 #define NOTE_C5  523
 #define NOTE_CS5 554
 #define NOTE_D5  587
 #define NOTE_DS5 622
 #define NOTE_E5  659
 
 #define TS_MINX 150
 #define TS_MINY 130
 #define TS_MAXX 3800
 #define TS_MAXY 4000

 #define color BLUE
 
 int counter;
 const int bKeyW = 20;
 const int bKeyH = 140;
 const int wKeyW = tft.height()/10;
 const int wKeyH = tft.width();
 const int spacing = 4;
  
 int duration = 300; //Default time to wait between notes

void drawKeys()
{
  //Draw the white keys
  for (int i = 0; i < 11; i++) {
    tft.fillRect( 0, i*wKeyW, wKeyH, wKeyW-spacing, WHITE );
   }
   //Draw the black keys   
   tft.fillRect( 0, wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );
   tft.fillRect( 0, 2*wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );
   tft.fillRect( 0, 4*wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );
   tft.fillRect( 0, 5*wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );
   tft.fillRect( 0, 6*wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );   
   tft.fillRect( 0, 8*wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );
   tft.fillRect( 0, 9*wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );
}

void setup() 
{
  tft.begin();
  ts.begin();  
  tft.fillScreen(BLACK);
  counter = 0;
  drawKeys();
}

void loop()
{
  uint16_t x, y;
  uint8_t z;
  //hang around in a while loop until the touch is released
  if (ts.touched()) {
  while (! ts.bufferEmpty())
   {
     counter++;
     ts.readData(&x, &y, &z);
     x = map( x, TS_MINY, TS_MAXY, 0, tft.width());
     y = map( y, TS_MINX, TS_MAXX, 0, tft.height());
      if (counter < 2) {
      if(x < 140)
      { // For sharps/flats split Y axis into black and white keys
            if (y>=290 && y<=312) tone(speaker,NOTE_C4);
            if (y>=256 && y<=283) tone(speaker,NOTE_CS4); 
            if (y>=264 && y<=275) tone(speaker,NOTE_D4);
            if (y>=245 && y<=260) tone(speaker,NOTE_DS4);
            if (y>=220 && y<=244) tone(speaker,NOTE_E4); 
            if (y>=199 && y<=219) tone(speaker,NOTE_F4);
            if (y>=181 && y<=196) tone(speaker,NOTE_FS4);
            if (y>=168 && y<=178) tone(speaker,NOTE_G4);
            if (y>=147 && y<=164) tone(speaker,NOTE_GS4);
            if (y>=136 && y<=146) tone(speaker,NOTE_A4);
            if (y>=117 && y<=132) tone(speaker,NOTE_AS4);
            if (y>=93 && y<=113) tone(speaker,NOTE_B4);           
            if (y>=70 && y<=90) tone(speaker,NOTE_C5);
            if (y>=53 && y<=66) tone(speaker,NOTE_CS5);
            if (y>=41 && y<=57) tone(speaker,NOTE_D5);
            if (y>=22 && y<=35) tone(speaker,NOTE_DS5);            
            if (y>=0 && y<=18) tone(speaker,NOTE_E5); 
            delay(duration);
            noTone(speaker);     
       } else {
            // Otherwise, split Y axis into white keys only    
            if (y>=289 && y<=313) tone(speaker,NOTE_C4);
            if (y>=257 && y<=281) tone(speaker,NOTE_D4);
            if (y>=224 && y<=251) tone(speaker,NOTE_E4);
            if (y>=191 && y<=217) tone(speaker,NOTE_F4);
            if (y>=160 && y<=187) tone(speaker,NOTE_G4);
            if (y>=127 && y<=154) tone(speaker,NOTE_A4);
            if (y>=95 && y<=122) tone(speaker,NOTE_B4);
            if (y>=65 && y<=91) tone(speaker,NOTE_C5);
            if (y>=31 && y<=59) tone(speaker,NOTE_D5);
            if (y>=2 && y<=26) tone(speaker,NOTE_E5);  
           delay(duration);
           noTone(speaker);       
        }                 
      }
    }
    ts.writeRegister8(STMPE_INT_STA, 0xFF); // reset all ints  
    } else {counter = 0;}
}

User avatar
asteroid
 
Posts: 300
Joined: Tue Oct 22, 2013 9:10 pm

Re: 2.8" TFT Touch Shield Keyboard

Post by asteroid »

New improved Arduino sketch will sustain note while key is down. Notes are no longer a fixed duration.

Code: Select all

/*
  UNO + 2.8" TFT Touch Shield v2
  Demonstrates a miniature keyboard
  Note will sustain while key is down
*/

#include <SPI.h>
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>
#include <Adafruit_STMPE610.h>

// Default values for Adafruit shield v2.
#define STMPE_CS 8
#define TFT_DC 9
#define TFT_CS 10

Adafruit_STMPE610 ts = Adafruit_STMPE610(STMPE_CS);
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

// Assign human-readable names to some common 16-bit color values:
#define	BLACK   0x0000
#define	BLUE    0x001F
#define	RED     0xF800
#define	GREEN   0x07E0
#define CYAN    0x07FF
#define MAGENTA 0xF81F
#define YELLOW  0xFFE0
#define WHITE   0xFFFF

 // ================== //
 #define NOTE_C4  262
 #define NOTE_CS4 277
 #define NOTE_D4  294
 #define NOTE_DS4 311
 #define NOTE_E4  330
 #define NOTE_F4  349
 #define NOTE_FS4 370
 #define NOTE_G4  392
 #define NOTE_GS4 415
 #define NOTE_A4  440
 #define NOTE_AS4 466
 #define NOTE_B4  494
 // ================== //
 #define NOTE_C5  523
 #define NOTE_CS5 554
 #define NOTE_D5  587
 #define NOTE_DS5 622
 #define NOTE_E5  659

 #define TS_MINX 150
 #define TS_MINY 130
 #define TS_MAXX 3800
 #define TS_MAXY 4000
 
 const int speaker = 19;
 
 const int bKeyW = 20;
 const int bKeyH = 140;
 const int wKeyW = tft.height()/10;
 const int wKeyH = tft.width();
 const int spacing = 4;
 
void drawKeys()
{
  //Draw the white keys
  for (int i = 0; i < 11; i++) {
    tft.fillRect( 0, i*wKeyW, wKeyH, wKeyW-spacing, WHITE );
   }
   //Draw the black keys   
   tft.fillRect( 0, wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );
   tft.fillRect( 0, 2*wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );
   tft.fillRect( 0, 4*wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );
   tft.fillRect( 0, 5*wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );
   tft.fillRect( 0, 6*wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );   
   tft.fillRect( 0, 8*wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );
   tft.fillRect( 0, 9*wKeyW - bKeyW/2 - spacing/2, bKeyH, bKeyW, BLACK );
}
void setup() 
{
 // Serial.begin(9600);
  tft.begin();
  ts.begin();  
  tft.fillScreen(BLACK);
  drawKeys();
}

void loop()
{
   uint16_t x, y;
   TS_Point p = ts.getPoint();

  if (! ts.touched()) {
    noTone(speaker);
    return;
  }
  
  delay(100);
  p = ts.getPoint();
 
  x = map( p.x, TS_MINY, TS_MAXY, 0, tft.width());
  y = map( p.y, TS_MINX, TS_MAXX, 0, tft.height());
  
  // *** For debugging *** //
  /*
  Serial.print("X = "); Serial.print(x);
  Serial.print("\tY = "); Serial.println(y);
  Serial.println("================");
  */
  
  while (ts.touched()) {   
      if(x < 140)
      { // For sharps/flats split Y axis into black and white keys
            if (y>=291 && y<=310) tone(speaker,NOTE_C4);
            if (y>=276 && y<=290) tone(speaker,NOTE_CS4); 
            if (y>=262 && y<=275) tone(speaker,NOTE_D4);
            if (y>=245 && y<=260) tone(speaker,NOTE_DS4);
            if (y>=220 && y<=244) tone(speaker,NOTE_E4); 
            if (y>=195 && y<=217) tone(speaker,NOTE_F4);
            if (y>=178 && y<=193) tone(speaker,NOTE_FS4);
            if (y>=161 && y<=177) tone(speaker,NOTE_G4);
            if (y>=144 && y<=160) tone(speaker,NOTE_GS4);
            if (y>=128 && y<=143) tone(speaker,NOTE_A4);
            if (y>=111 && y<=127) tone(speaker,NOTE_AS4);
            if (y>=89 && y<=110) tone(speaker,NOTE_B4);           
            if (y>=67 && y<=88) tone(speaker,NOTE_C5);
            if (y>=51 && y<=66) tone(speaker,NOTE_CS5);
            if (y>=36 && y<=50) tone(speaker,NOTE_D5);
            if (y>=21 && y<=35) tone(speaker,NOTE_DS5);            
            if (y>=0 && y<=20) tone(speaker,NOTE_E5);     
       } else {
            // Otherwise, split Y axis into white keys only    
            if (y>=289 && y<=313) tone(speaker,NOTE_C4);
            if (y>=257 && y<=281) tone(speaker,NOTE_D4);
            if (y>=224 && y<=251) tone(speaker,NOTE_E4);
            if (y>=191 && y<=217) tone(speaker,NOTE_F4);
            if (y>=160 && y<=187) tone(speaker,NOTE_G4);
            if (y>=127 && y<=154) tone(speaker,NOTE_A4);
            if (y>=95 && y<=122) tone(speaker,NOTE_B4);
            if (y>=65 && y<=91) tone(speaker,NOTE_C5);
            if (y>=31 && y<=59) tone(speaker,NOTE_D5);
            if (y>=2 && y<=26) tone(speaker,NOTE_E5);     
        }        
  }
}

Locked
Please be positive and constructive with your questions and comments.

Return to “Arduino Shields from Adafruit”