Skip to content

Get data from an Arduino to ProtoPie

ProtoPie is a powerful tool that can be used for making dynamic prototypes for web, mobile or desktop applications. With ProtoPie you can make complex hi-fi wireframes that use variables, conditions, timeline based animations and more…

For this article, I will focus on making stuff happen in ProtoPie Studio with an Arduino through ProtoPie Connect. Sending messages to an Arduino is also possible and is covered in a separate article.

Goal

In this article I will use an Ultronic sensor to measure the distance to another object. We will send the distance value to ProtoPie Connect to visualize it in ProtoPie Studio.

PS. ProtoPie is free for all students and teachers!

What you will need

I've also made a simple example ProtoPie file you can download below.

distance.pie

Instructions

Connect your Arduino to your computer and use the Arduino IDE to upload the code below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
//author: Jonathan van Denzen
//Date: 23-05-2024

// defines pins numbers

const int trigPin = 9;
const int echoPin = 10;

// defines variables
long duration;
int distance;



void setup() {
pinMode(trigPin, OUTPUT); // Sets the trigPin as an Output
pinMode(echoPin, INPUT); // Sets the echoPin as an Input
Serial.begin(9600); // Starts the serial communication
}



void loop() {

// Clears the trigPin
digitalWrite(trigPin, LOW);
delay(100); // Use delay() for 100 milliseconds

// Sets the trigPin on HIGH state for 10 microseconds
digitalWrite(trigPin, HIGH);
delayMicroseconds(10); // Keep this delayMicroseconds() if needed
digitalWrite(trigPin, LOW);

// Reads the echoPin, returns the sound wave travel time in microseconds
duration = pulseIn(echoPin, HIGH);

// Calculating the distance in centimeters
distance = duration * 0.034 / 2;  

// Calculating the distance in millimeters
int distance_mm = distance * 10;

// Prints the distance in millimeters on the Serial Monitor
Serial.print("distance||"); // this is the same message in ProtoPie under the 'Receive' trigger.
Serial.println(distance_mm); // this value will be stored in the variable attached to the message
delay(2900); // Delay for 2.9 seconds (total of 3 seconds loop time) You can reduce this to update the data faster.
}

After the upload, please make sure the Serial Monitor in Arduino IDE is NOT running. If it is, ProtoPie Connect will not be able to connect to your Arduino in the next steps.

Upload to ProtoPie Connect

Open ProtoPie Connect and add the distance.pie file by dragging it in or selecting New > Local Pie.

335495263-7c38abb5-3e71-4b58-acc0-717c49952b1f

Choose Plugin

Click on Plugin at the top right of the screen

01

Run Arduino plugin

Choose Arduino and select the right port. Leave the baud rate at 9600 and hit Run.

03

You should now see the message and value coming from the ultrasonic sensor in right section of Connect.

Run Pie file on mobile or browser

Choose Connect > QR code to view it on your mobile device or click the Web Browser icon to view it in the browser.

04

You should see something similar to the GIF below when you in- or decrease the distance to the ultrasonic sensor.

Have fun!