Tutorials

Arduino Prototyping with ProtoPie

Interaction prototyping across the boundary between software and hardware.

Tony Kim
Tony Kim, Chief Executive OfficerJune 14, 2017
Arduino Prototyping with ProtoPie thumbnail

Update 2020: I wrote another article about software & hardware integrated prototypes for beginners that explains how you can get started with Arduino & ProtoPie. You might be interested in reading that one first!

The products Apple unveiled during WWDC 2017 showed that software interactions are organically taking place with hardware interactions, and in some cases, there is no clear boundary between the two. However, having a designer background myself, I could say that there is a barrier between software and hardware that cannot be overcome easily. Software designers usually do not have a firm grasp of how to deal with hardware or create software interactions by using signals inputted into hardware. Besides that, hardware designers need to resort to coding in order to test software in their hardware.

ProtoPie communicates with Arduino.

ProtoPie’s Bridge function makes it possible to not only create interactions among smart devices, but also allows communication among IoT devices or physical computing tools such as Arduino (currently, communication with external devices is only possible using Android devices). ProtoPie’s Send Response and Receive Trigger can communicate with the Bridge app installed on an Android device through the Android Broadcasting Channel, and the Bridge app can communicate with external devices.

Communication between ProtoPie and Arduino
Communication between ProtoPie and Arduino

This example uses an Arduino device to mimic a car, featuring LEDs, pushbuttons, piezo buzzers and light sensors on a UNO board.

  • Pressing a switch will play a sound of a car engine turning on and change the screen on an Android phone to show a driver’s seat.
  • Tapping on the horn will cause the piezo buzzer to go off.
  • Pressing a button on the screen will turn on the LED.
  • Covering the light sensor (or darkening the surrounding) will darken the window view in the car.

You can check this prototype in action with the following video.

Set up ProtoPie

ProtoPie can make it possible to communicate with other devices by using the Receive Trigger and the Send Response. In order to communicate with an Arduino device, all that is needed is to set the Channel to “Android Broadcast” and set the Message ID that will be used for communication to whatever you wish. You can read up on the detail instructions.

Select “Android Broadcast” as a channel
Select “Android Broadcast” as a channel.

The following Message IDs were used for this example.

Arduino Sketch example

The source file for this example can be downloaded from the link.

Set up the Bridge App on Android

In order to use ProtoPie to communicate with Arduino devices, the Bridge app must be installed in the Android device. You can get the codes from here.

Set up Arduino

We put together the following code with the Message IDs mentioned above. Arduino Sketch example is here.

int lastSwVal = 0;
int lastBright = -1; // -1: unkown, 0: dark, 1: bright
 
void setup() {
  pinMode(13, OUTPUT); // LED
  pinMode(12, OUTPUT); // Piezo buzzer
  pinMode(8, INPUT);   // Switch
 
  Serial.begin(9600);  // For USB communication with Android
}
 
void loop() {
  // Read from the switch  
  int swVal = digitalRead(8);
  if (swVal != lastSwVal) {
    if (swVal == 0) {
      Serial.println("<SWITCH>"); // Send "SWITCH" to ProtoPie
    }
    lastSwVal = swVal;
  }
 
  // Read from the light sensor
  int lightVal = analogRead(A4);
  if (lastBright != 0 && lightVal < 150) {
    lastBright = 0;
    Serial.println("<DARK>"); // Send "DARK" to ProtoPie
  } else if (lastBright != 1 && lightVal > 200) {
    lastBright = 1;
    Serial.println("<BRIGHT>"); // Send "BRIGHT" to ProtoPie
  }
 
  // Read from ProtoPie
  while (Serial.available() > 0) {
    int b = Serial.read();
 
    if (b == 'O') { // Turn on the LED
      digitalWrite(13, HIGH);
    } else if (b == 'X') { // Turn off the LED
      digitalWrite(13, LOW);
    } else if (b == 'B') { // Play a beep
      tone(12, 1047, 100);
    }
  }
}

Put them together

At this stage, connect the Android device and the Arduino with a USB cable. In order to use a standard USB cable, you will need an OTG cable for the Android device. Once one end of the USB cable is connected via the OTG cable, connect the other end to the Arduino. The Android device and the Arduino communicates via USB-Serial communication, and to ensure that the communication takes place, Developer mode must be enabled on the Android device (instructions to enable Developer mode).

The USB cable is connected via the OTG cable
Connect the Android device and the Arduino with a USB cable.

You’re all set to play with Arduino!

Run the Bridge app in the Android device first, and then run the prototype on the ProtoPie Player. You’re all set!

The Arduino should be communicating with the Android device. Pressing a physical button on the Arduino will cause reactions on the Android device, while tapping on the touch screen of your Android device will trigger a reaction on the Arduino.

ProtoPie is a software prototyping tool that makes communication with hardware possible. ProtoPie aims to present designers with new revolutionizing possibilities in design.