Control an Arduino with ProtoPie and vice versa¶

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¶

• Arduino (I'm using the Arduino UNO R3)
• USB-A Cable
• Arduino IDE
• ProtoPie Studio
• ProtoPie Player
• ProtoPie Connect

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

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

#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)
  } else if (receivedData.message.equals("off")) {
    digitalWrite(LED_BUILTIN, LOW);  // turn the LED on (HIGH is the voltage level)
  }
}

Open ProtoPie Connect and add the Arduino.pie file

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

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

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

Click on Plugin at the top right of the screen

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

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