The Technical Corner

The technological back-end stuff, explained in detail! You know you want to read all this.


Coding


Arduino

The programs that we used were Arduino and Processing to display the messages on-screen. Arduino reads the button states - whenever it is pressed. If pressed, then the program prints whatever value that button was (e.g. what key it represented) to the Serial Monitor (see below, Processing, for more about that).

The Keypad library was used in Arduino the easily read the button states of multiple buttons, which helped to shorten the amount of work we would have had to do in terms of wiring and coding.

Below is the code that was used for Arduino and Processing, respectively.
All coding (Arduino and Processing) was hard-coded, done by hand, by ourselves.

ARDUINO CODE

#include <Keypad.h>

const byte COLS = 10;
const byte ROWS = 5;

char keys[ROWS][COLS] = {
 {'S','I','Y','Q','A','L','E','3','2','1'},
 {'B','O','D','R','T','U','N','4','S','6'},
 {'F','M','P','H','K','C','W','9','8','7'},
 {':','\'','X','G','V','J','Z','#','0','+'},
 {'!','?',' ',' ',' ','.',',','(',')','-'}
};

byte rowPins[ROWS] = {22, 24, 26, 28, 30};
byte colPins[COLS] = {32, 34, 36, 38, 40, 42, 44, 46, 48, 50};

Keypad keypad = Keypad(makeKeymap(keys), rowPins, colPins, ROWS, COLS);

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

void loop(){
 char key = keypad.getKey();

 if(key == '#'){
  Serial.println();
 } else if(key) {
  Serial.print(key);
 }
}

Screenshot of the Arduino program

Processing

We used Processing as a medium to display our messages with. Using only Arduino and its serial monitor worked, but its plainness of the record was just not enough for us. We decided to make use of Processing, and thought t

We used images for the background, and these background images changed every 10 seconds. This was to represent the(unconsciously) distracting elements that often takes place within virtual communication. The images were put into an array, initialized as such, and then called to become the image for the background via the Timer class's attributes.

The Timer class easily tells time in the program for a given set time. Once called to start, the timer begins to count time as it passes, and returns a boolean value (true/false; 0 or 1) that indicates when the given set time is up or not.

On top of the background images is an opaque grey box that the input text from the users would be on top of (this grey box was used to improve readability of the conversation on the display). 

To connect to Arduino, the Serial library had to be imported to read the data from the serial port (that is, Arduino). Once a connection was established, the letters/numbers/symbols that were being typed out by the users with the physical keyboard would be displayed as the text on top of the grey opaque box. Text would only be read if and only if there was a connection Processing could acquaint to - otherwise, it will not display any messages at all.

PROCESSING CODE

Main Class

import processing.serial.*;
Serial port;

Timer timer;

PImage[] arrayOfImages = new PImage[7];
int r;

PFont font;
String typedText = "";

void setup(){
 size(1024,720);
 smooth();
 noStroke();

 timer = new Timer(10000);
 timer.start();
 for(int i=0; i<arrayOfImages.length; i++){
  arrayOfImages[i]=loadImage("images/"+i+".jpg");
 }

 font = loadFont("data/ArialMT-22.vlw");

 port = new Serial(this, Serial.list()[0], 9600);
}

void draw(){
 textFont(font);
 fill(255);

 if(port.available(>0){
  typedText = port.readStringUntil('\n');
  if(typedText!=null){
   text(typedText, 100, 100);
  }
 }

 if(timer.isFinished()){
  background(arrayOfImages[r]);
  tint(200, 100);
  r++;
  timer.start();
  if(r>=7) r=0;
  fill(100, 200);
  rect(50,50,width-100,height-100);
 }
}

Timer Class

class Timer{
 int start;
 int total;

 Timer(int inputTime) {
  total = inputTime;
 }

 void start() {
  start = millis();
 }

 boolean isFinished() {
  int passedTime = millis()- start;
  if (passedTime > total) return true;
   else return false;
  }
}

Screenshot of the Processing program

When the above processing code is run, the following display showed up on the computer screen. As people type on the keyboard, the letters get dislayed inside the opaque grey box. Here are just a few screenshots of our results:

Blank screen - no messages were typed yet.

Electronics & Hardware

As we had 48 keys, we needed 48 push buttons to work with, and subsequently 48 3cm by 3cm boards for the push buttons to sit on.

We got the copper boards and used an etch pen to route copper, forming a circuit that would allow connection between the push buttons and the wires. All of this was done at school, with the help of Mr. Roselli, an electronics teacher from Killarney Secondary School.

After the etch tank process and steel wool, the boards looked like this

We then cut them into 3cm by 3cm squares, and drilled four holes into each square for each push button to sit on (you can see the four holes on the boards at the top). The wires would be soldered at one end of the copper, and these wires would be connected to a breadboard on the other end.

Soldering the push button on to the baord

The wires for the buttons were measured precisely to ensure they reached the breadboard at the bottom.
This was not connected to Arduino yet.

Because there were so many buttons, we had to use an Arduino Mega 2560 board (it had 56 I/O pins!), and many, many metres of wires to bridge all of the connections (see: Materials and Process posts).

Above is the schematic diagram of our circuit. As there are two wires for each button, one wire would connect to the pin on the horizontal row, and the other would connect to the pin on the vertical row. Note that as it is a 10 x 5 grid, so there are 50 buttons on this schematic - but, because the spacebar takes up 3 keys, we really only have 48 keys. The spacebar is connected with a button in the middle (pin30 and pin38); there are no buttons for the first and third key in this diagram.

Once connected, Arduino is used to read the values of which key is pressed, which is then passed off to Processing to display on the screen. In reality, a push button would be connected differently (e.g. to ground, with a resistor, etc.), but in utilizing Arduino's built-in resistors and the Keypad library, we were able to easily connect the wires to Arduino directly without any other component.

See the above coding section for the Arduino and Processing code.