Skip to content

Control an Arduino with 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 using ProtoPie Studio (to make the prototype), ProtoPie Player and ProtoPie Connect to light up the onboard LED on an Arduino UNO. It is focused on making the connection between Arduino and ProtoPie, so once that connection is in place, the step to using other output on the Arduino is easy. Sending messages to ProtoPie is also possible and will be covered in a separate article.

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.

//update link Arduino.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
48
49
#include <string.h>

struct MessageValue {
  String message;
  String value;
};

struct MessageValue getMessage(String inputtedStr) {
  struct MessageValue result;

  char charArr[50];
  inputtedStr.toCharArray(charArr, 50);
  char* ptr = strtok(charArr, "||");
  result.message = String(ptr);
  ptr = strtok(NULL, "||");

  if (ptr == NULL) {
    result.value = String("");
    return result;
  }

  result.value = String(ptr);

  return result;
}

struct MessageValue receivedData;

void setup() {
  pinMode(LED_BUILTIN, OUTPUT);

  Serial.begin(9600);
  Serial.setTimeout(10);  // Set waiting time for serial data to 10 milliSeconds
}

void loop() {
  while (Serial.available() > 0) {                         // Take out strings until Serial is empty
    String receivedString = Serial.readStringUntil('\0');  // From 1.9.0 version, We can use '\0' as delimiter in Arduino Serial
    receivedData = getMessage(receivedString);
  }

  if (receivedData.message.equals("on")) {
    digitalWrite(LED_BUILTIN, HIGH);  // turn the LED on (HIGH is the voltage level)
    delay(20);
  } else if (receivedData.message.equals("off")) {
    digitalWrite(LED_BUILTIN, LOW);  // turn the LED on (HIGH is the voltage level)
    delay(20);
  }
}

Open ProtoPie Connect and add the Arduino.pie file //update link img

Choose Device (QR code) next to the file name.

//update link img

Scan the QR code with the ProtoPie Player and press the buttons to see if ProtoPie Connect receives messages from the Player.

//update link video

https://user-images.githubusercontent.com/52886201/205966678-80edb16c-49b0-4bcd-88c2-c53939c6841f.mov

//update link video

Click on Plugin at the top right of the screen

//update link img

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

//update link img

//update link img

Hit Run and see if the LED on the Arduino will turn off and on when you press the buttons on your phone.