Tutorials

Software & Hardware Integrated Prototyping for Beginners

A step-by-step guide to getting started with Arduino & ProtoPie.

Tony Kim
Tony Kim, Chief Executive OfficerApril 5, 2020
Setup of ProtoPie Studio and Android device and microcontroller board

Digital transformation left its mark on companies across varying industries over the world: from large Fortune 500 companies all the way to that one small, emerging startup in your own backyard. Over the last years, the boundaries between software and hardware aren’t as clear as before, but rather blurry.

Tech giants like Google and Amazon, traditionally classified as “software companies”, made their way to creating their own hardware & software products, e.g. Google Nest and Amazon Alexa. Furthermore, the textbook example of a company that turned finding the right balance of hardware and software into art is Apple.

Key to a product being successful once it’s in the hands of users is multiple iterations of prototyping. Hence, this type of product that lives on the edge of software and hardware doesn’t escape the need for exploration and validation through realistic, interactive prototyping either.

Industrial designers have to prototype dynamic and flexible content on a display while software designers might be required to prototype various pieces of hardware connected to some digital content.

This challenge and pain point is one that’s growing in a time where IoT is playing a bigger role every day. Companies in the automotive and household appliance industries have been facing this already, and others will follow.

In this article, I will help you get started with your first software & hardware integrated prototype.

Create magic with Arduino & ProtoPie

Arduino has been loved by makers thanks to its gradual learning curve on writing code and active community sharing many examples.

However, it gets complex and overwhelming once you would like to use Arduino in conjunction with software prototypes (i.e. some kind of a display running a prototype that a user interacts with).

I will show how you can do this easily using ProtoPie. ProtoPie Player, that runs prototypes on smart devices, can send signals to and receive signals from Arduino. This means that you can have software prototypes communicate with an Arduino set-up dynamically, as seen below.

I will explain how to build this set-up yourself, a prototype of the old skool game Galaga that works with a DIY gamepad.

A game prototype that can be played with a DIY Arduino gamepad.

Arduino usually does involve coding, but you don’t need to fully understand every bit of it, in my opinion. If it works as you’d like to, that’d be sufficient.

Whenever you do need some code, you can find plenty of examples on Google that you can use.

Set up the Arduino environment

Prepare an Arduino Uno board, one of the basic and popular boards. It has 6 analog input pins and 14 digital input/output pins. Apart from the Arduino Uno board, the following parts are used in this example.

  • 1 Breadboard
  • 2 Pushbuttons
  • 2 Resistors (10kΩ): for pushbuttons
  • 1 Joystick module
  • 1 Resistor (1kΩ): for joystick
  • USB cable (type B to type A): to connect Arduino board to laptop
  • USB adapter (type A to type C/micro): to connect Arduino board to Android device.
  • Jumper wires

To assemble the electronic parts, you need a breadboard that’s basically a plastic board with a bunch of pinholes. Pins are connected vertically and horizontally, so no need to wire each electronic part end-to-end to make a circuit.

Breadboard with yellow dots
Breadboard: Yellow dots show how pinholes are connected to each other.

A resistor is required to be put in the middle of each circuit when you use an electronic part like a pushbutton, joystick or LED. It prevents the electronic parts to burn out due to overcurrent.

Let’s connect the parts using the diagram below (enlarged) and wire them carefully using the jumper wires. Doing this perhaps makes you feel like an electrical engineer. I sure do every time! Have fun :)

Diagram explaining how to assemble breadboard
Breadboard diagram: how to assemble electronic parts
Finished setup of breadboard and microcontroller
This is how your set-up looks like after assembling.

You need the Arduino IDE installed on your computer to write and adjust code. It’s time to switch your electrical engineering hat for a software engineering one.

You can grab the code needed (shown below) from here or here.

#include <PinChangeInterrupt.h>

//Define pins
const int pinA = 2; //A button
const int pinB = 3; //B button

const int X = A0; //Joystick X
const int Y = A1; //Joystic Y
const int Key = 8; //Joystic key button

void sendA() {
  delayMicroseconds(10000); //to avoid chattering effect
  int buttonA = digitalRead(pinA);
  if (buttonA == 1) {
    Serial.println("<a>"); //Send "a" to ProtoPie
  }
}

void sendB() {
  delayMicroseconds(10000); //to avoid chattering effect
  int buttonB = digitalRead(pinB);
  if (buttonB == 1) {
    Serial.println("<b>"); //Send "b" to ProtoPie
  }
}


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

  pinMode(pinA, INPUT);
  pinMode(pinB, INPUT);

  pinMode(Key, INPUT);

  attachInterrupt(digitalPinToInterrupt(pinA), sendA, RISING); //Send a signal once
  attachInterrupt(digitalPinToInterrupt(pinB), sendB, RISING); //Send a signal once
  
}

void loop() {

  int xVal = analogRead (X);
  int yVal = analogRead (Y);
  int buttonVal = digitalRead (Key);

  if (xVal < 300) {
    Serial.println("<left>"); //Send "left" to ProtoPie
    delay(500); //Send a signal per 500ms to avoid chatting effect
  }

  if (xVal > 723) {
    Serial.println("<right>"); //Send "right" to ProtoPie
    delay(500); //Send a signal per 500ms to avoid chatting effect
  }
  
  if (yVal < 300) {
    Serial.println("<up>"); //Send "up" to ProtoPie
    delay(500); //Send a signal per 500ms to avoid chatting effect
  }

  if (yVal > 723) {
    Serial.println("<down>"); //Send "down" to ProtoPie
    delay(500); //Send a signal per 500ms to avoid chatting effect
  }

  if (buttonVal == LOW) {
    Serial.println ("<press>"); //Send "press" to ProtoPie
    delay(500); //Send a signal per 500ms to avoid chatting effect
  }
}

Galaga_Controller hosted on codeEmbed.dev

After hooking up the Arduino board to your computer via USB cable, upload this sketch (code run on an Arduino board is called a sketch) to the board. If necessary, feel free to learn more about the Arduino UNO first.

  • Verify your sketch first by going to “Sketch > Verify/Compile”.
  • Upload the sketch by going to “Sketch > Upload”.
  • After uploading, test if the hardware works properly with the Serial Monitor (“Tools > Serial Monitor”).
  • Press the pushbuttons and play around with the joystick and check if signals come in on the monitor window.

Set up the software

Almost done! Now, you need ProtoPie Player and the ProtoPie Bridge app on your Android device. This example works on Android devices only since ProtoPie uses the Broadcasts feature on Android. Learn more about how ProtoPie communicates with Arduino using the Bridge app.

Get the Bridge app

Run the Bridge app first (and leave it running in the background). Open ProtoPie Player and scan the QR code to get the Galaga prototype. You can download the Pie file and make adjustments to your own liking using ProtoPie Studio.

Get the Galaga prototype

Download ProtoPie Studio

Interactive prototype of old school game Galaga

An interactive prototype of Galaga, an old skool game I used to play when I was a kid.

Connect Arduino to your Android device

Enable USB debugging on your Android device prior to connecting the device to Arduino via USB cable. You should see a dialog asking whether you allow data communication when you connect Arduino. While running the Bridge app in the background, you can run ProtoPie Player.

You’re all set!

You did it!

Congrats! You got your first hardware and software integrated prototype running successfully.

You might be interested in finding out what else you can prototype using ProtoPie and Arduino. Let me tell you now: the possibilities are endless.

Coding skills should not be a barrier for designers to explore and validate ideas. Neither, do you have to be an engineer to do this type of prototyping. Mix up what you have and can with what you can borrow from others. Save your time and prototype better and faster.

Learn more?

Interested in how I can help you?

My team at ProtoPie and I would love to help you with your prototyping needs in your industry.

If you’re looking for specific prototyping solutions integrating hardware, software, APIs for IoT-heavy industries, such as automotive, connected household appliances, or any other, feel free to contact me.

Learn more about the ProtoPie Industry Solutions

ProtoPie Automotive Solution

ProtoPie Automotive Solution is a prototyping solution tailored to the needs in the automotive industry. This allows automotive companies to build and test prototypes across multiple displays while integrating with any hardware and APIs.

Ultimately, automotive companies can reduce their prototyping cycle and go to market faster and better equipped.

Learn more about the ProtoPie Automotive Solution

Related Post