• Group Assignment:
    • Compare as many tool options as possible
  • Individual Assignment:
    • Write an application that interfaces a user with an
      input &/or output device that you made
Evaluation Standards 
  • Link to the group assignment page
  • Document my process
  • Explaine the UI that I made and how I did it
  • Outline problems and how I fixed them
  • Include original code (or a screenshot of the app code if that's not possible)
  • Include a ‘hero shot/video’ of my application running with my board
Output Preview  

Visual Basic .NET app Inventor python Processing Arduino

 Group Assignment

Google says that "A GUI displays objects that convey information, and represent actions that can be taken by the user. The objects change color, size, or visibility when the user interacts with them". I thought that if I tried to convey info, represent actions, and change the properties of the objects I would have mastered the basics of the tools that I was going to use.

I decided to build a simple stopwatch using both VB.NET and App Inventor. A simple stopwatch contains

  • A Label for showing time
  • A Start button
  • A Stop button
  • A Reset button

First I tried using Visual Studio to design and program my GUI.

To create a GUI for windows you need to select Windows Forms App

Building a GUI in Visual Studio was pretty simple; just drag and drop the elements from the Toolbox on the left, then change each Item properties from the Properties panel on the bottom right of the screen.

There is an element called Timer which is basically needed to give the sense of time to the application, because it can be linked to a function that can be executed each time the timer interval is reached. I set the interval for the timer to be 1000ms in order to have my code executed each second.

After finishing the design, I went to write the basic code for the buttons and the timer.

The code is straightforward:

  • There are two global variables for storing the minutes and the seconds
  • When the timer is enabled it increases the seconds and shows the new time on the label
  • The Start button just enables the timer
  • The Stop button disables the timer
  • and finally the Reset button resets the global variables and changes the text on the label.

I ran the code and the application worked well.

The second trial would be in App Inventor. I created the roughly the same GUI using the same element; except for the name of the Timer element was named Clock in App Inventor.

I implemented the same previous algorithm but using blocks this time.

In order to test the code in App Inventor, I had to install the Android Emulator.

After that the application ran nicely.

 Preparing the Board

The board I'm using this week is the board I designed at Week 6. This board contained:
  • LED on pin 7
  • Button on pin 8
The board is so simple, but I'll make it as informative as I can. I the following bytes for the following actions:
  • 0x01 - Button pressed
  • 0x02 - Button Released
  • 0x0A - Turn LED ON
  • 0x0B - Turn LED OFF
I made a flow chart of the conditions at which these bytes will be: and This is the final Arduino Code. One trick I always used is to add a small delay when a button is pressed. This is to solve the mechanical problems of the normal push-button that makes it open and close the circuit many times in short milliseconds causing the code to misbehave because it counts the single button press as if it was pressed many times, and it's called the bouncing behavior. Putting that small delay is not the best solution but it does the job by pausing the MCU for a very short time, and this is a method for debouncing. This solution would be very dangeraous in critical systems, but it's fine for my setup. Please refer to line 20 in the code.
I also used the SoftwareSerial library because the ATTiny44 doesn't have hardware UART interface.
#define btn 7
#define led 8
#include <SoftwareSerial.h>

SoftwareSerial mySerial(0, 1); // RX, TX
bool pressed = false;

void setup() {
  pinMode(btn, INPUT_PULLUP);
  pinMode(led, OUTPUT);

void loop() {
  if (digitalRead(btn) == LOW && pressed == false)
    pressed = true;
    delay(100); // debouncing 
  if (digitalRead(btn) == HIGH && pressed == true)
    pressed = false;
  if (mySerial.available())
    byte msg =;
    if (msg == 0x0A) digitalWrite(led, HIGH);
    if (msg == 0x0B) digitalWrite(led, LOW);
After compiling the code, I used the fab ISP I made in Week 4 to upload the code to my board. through the Arduino IDE.

 Processing Interface

Since I'm going to test simple responses for my board, I decided to make a simple UI that can react with those simple responses. I made a button-like square inside the screen. This square should change colors for the following actions:
  • Green - at Button Press
  • White - at Button Release
  • Blue - at recieving '0x01' from the board
  • White - at recieving '0x02' from the board
The code is also pretty straightforward.
  • In the main loop; it checks the Serial data to update the rectangle colors.
  • When the mouse is pressed; it makes sure that the mouse location is on the square, changes the square color, and sends a byte value to the board turning its LED ON
  • When the mouse is released; it changes the square color back to white, and sends a byte value to turn the LED OFF.
import processing.serial.*;
Serial mySerial;

color value = color(255, 255, 255);
boolean pressed = false;

void setup() {
  surface.setTitle("Test I/O");
  size(500, 500);
  mySerial = new Serial(this, Serial.list()[0], 9600);

void draw() {
  if (mySerial.available()>0)
    byte msg = mySerial.readBytes(1)[0];
    if (msg == 0x01) value = color(0, 0, 255);;
    if (msg == 0x02) value = color(255, 255, 255);;
  rect(125, 125, 250, 250);

void mousePressed() {
  if (mouseX>125 && mouseX <375 && mouseY>125 && mouseY<375 )
    pressed = true;
    value = color(0, 255, 0);

void mouseReleased() {
  if (pressed)
    pressed = false;
    value = color(255, 255, 255);
I then ran my application, and captured that video.

 Python Interface

The interface I coded in processing wasn't fun enough. I wanted to do something fun and yet simple, so I decided to use python to run the dinosaur game from a website, and make my board act like a game controller. This was very easy to do. I first needed to install a library called Selenium WebDriver. pip install -U selenium I then got those lines from the web examples. They simply do the following:
  • Import the required libraries
  • Creates the driver and action objects
  • Launches the website
  • Press space every 1.5 seconds, foreverrr
   from selenium import webdriver
   from selenium.webdriver.common.keys import Keys
   from selenium.webdriver.common.action_chains import ActionChains
   import time

   def createWebDriver(browserNumber):
       if   browserNumber == 0: return webdriver.Firefox()		# FireFox
       elif browserNumber == 1: return webdriver.Chrome()		# Chrome
   driver = createWebDriver(1)		
   actions = ActionChains(driver)

   while True:
The result was very quick and very satisfying : D I added the lines that sends and recieve the bytes the board uses through ther serial port.
  • I had to check the COM port number from the device manager. It was 22. I defined it in line 6
  • In line 15, I'm creating the object that i'm going to use for serial
  • In line 16 and 17, I'm flushing all the old data accumulated in the buffer, so that the program won't misbehave
  • From line 19 to 25, I'm making the program press the space-bar when it recieves the button press byte '0X01'
  • It also send the data to make the LED turn ON when the dinosaur starts jumping, and turn OFF when it finishes
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.action_chains import ActionChains
import serial
port = 'COM22'

def createWebDriver(browserNumber):
	if   browserNumber == 0: return webdriver.Firefox()		# FireFox
	elif browserNumber == 1: return webdriver.Chrome()		# Chrome

driver = createWebDriver(1)		
actions = ActionChains(driver)
monitor = serial.Serial(port,9600,timeout=5)	
while True:
	data =
	if (data== bytes(b'\x01')):
The game was very fun to play this way : D
There something weird that I've noticed, after two or three rounds of the game, the dinosaur starts jumping multiple times at each button press. I checked my code multiple times, but I think its somehow related to the webdriver library not to my code. I had no solution for this till now.