<< back

Interface & Application Programming

As mentioned on my page for the Input Devices week, my final project would be a digital wristband that can turn our fingers and hand into digital interface. It would detect which segment of the finger my thumb is touching and therefore trigger different functions. This week I bought a 1.27" Color OLED screen and wanted to make a very simple graphic interface for the wristband. It is basically like a menu, when my thumb touches different parts of the finger, the rectangle moves to different functions, indiciating the selection.

When I connect the OLED screen to my board, I tested with the Software SPI and Hardware SPI connection. For Software SPI you can use any pins on your board but it is slower. For Hardware SPI it is faster but you have to connect to specific pins on your board. For my board which uses the 328p chip, the connection is as below:

Software SPI:

Pins on My Board

OLED

GND

GND

VCC

VIN(+)

13

SCLK (CL)

12

MOSI (SI)

11

DC

10

OLEDCS (OC)

9

RST (R)

 

Hardware SPI:

Pins on My Board

OLED

GND

GND

VCC

VIN(+)

13

SCLK (CL)

11

MOSI (SI)

8

DC

10

OLEDCS (OC)  

9

RST (R)

 

Then I learnt and used the Adafruit GFX Graphics Library for Arduino to make a simple interface. It is very easy to use but also has a lot of limitations. For example, for text there is only one font you can use and for the size of the text you can only multiply that by integers, so it is impossible to make fine adjustments. Later I will try to work with the U8glib library to see if it would be more flexible.

For the below pictures, the black jumper wire on the left would actually be the metallic tattoo on my thumb, and the blue, green and yellow wires would be that on different segment of my fingers. When the black and the color ones are connected, different functions are selected on the screen.

(The background color of the menu is actually blue, and the rectangle and the texts are in white)

I 'm still working on the metallic temporary tattoo. Hope I can integrate that with these next week.

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

My arduino code

// SPI Hardware Pins
#define sclk 13
#define mosi 11
#define dc 8
#define cs 10
#define rst 9
// Color definitions
#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1351.h>
#include <SPI.h>
//Adafruit with SPI Hardware Pins
Adafruit_SSD1351 tft = Adafruit_SSD1351(cs, dc, rst);
const int buttonPin01 = 2; // Which Pin as Button
const int buttonPin02 = 3;
const int buttonPin03 = 4;
int buttonState01 = 0; // Set Buttons State as O
int buttonState02 = 0;
int buttonState03 = 0;
void setup(void)
{
pinMode(buttonPin01, INPUT);
pinMode(buttonPin02, INPUT);
pinMode(buttonPin03, INPUT);

digitalWrite(buttonPin01, HIGH); // turn on pullup resistors
digitalWrite(buttonPin02, HIGH);
digitalWrite(buttonPin03, HIGH);

tft.begin();
tft.fillScreen(BLUE);
drawtext_3watchfunctions(); //Draw function to create texts "Phone", "Music", "Email"
}
void loop()
{
buttonState01 = digitalRead(buttonPin01);
buttonState02 = digitalRead(buttonPin02);
buttonState03 = digitalRead(buttonPin03);


if (buttonState01 == LOW)
{
tft.drawRect(5.5, 39, 38, 20, WHITE); //Phone selected
tft.drawRect(45.5, 39, 38, 20, BLUE); //Music deselected
tft.drawRect(85.5, 39, 38, 20, BLUE); //Email deselected
}

if (buttonState02 == LOW)
{
tft.drawRect(45.5, 39, 38, 20, WHITE); //Music selected
tft.drawRect(5.5, 39, 38, 20, BLUE);
tft.drawRect(85.5, 39, 38, 20, BLUE);
}

if (buttonState03 == LOW)
{
tft.drawRect(85.5, 39, 38, 20, WHITE); //Email selected
tft.drawRect(5.5, 39, 38, 20, BLUE);
tft.drawRect(45.5, 39, 38, 20, BLUE);
}

if (buttonState01 == HIGH && buttonState02 == HIGH && buttonState03 == HIGH)
{
tft.drawRect(85.5, 39, 38, 20, BLUE); //Deselect Everything
tft.drawRect(5.5, 39, 38, 20, BLUE);
tft.drawRect(45.5, 39, 38, 20, BLUE);
}

}

void drawtext_3watchfunctions()
{
tft.setCursor(10.5,45);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.print("Phone");

tft.setCursor(50.5,45);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.print("Music");

tft.setCursor(90.5,45);
tft.setTextColor(WHITE);
tft.setTextSize(1);
tft.print("Email");


}