行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

菜单

将 Arduino 与 ProtoPie Connect 搭配使用

借助 ProtoPie Connect 内置的 Arduino 插件,在软件与硬件之间创建多屏体验。

ProtoPie Connect 支持与 Arduino 开发板进行 串行通信 。最常见的设置是通过 USB 将 Arduino 硬件连接到运行 ProtoPie Connect 的设备。

了解更多 关于如何使用 Arduino。

通过 USB 将 Arduino 连接到 ProtoPie Connect

  1. 在 ProtoPie Connect 的插件列表中选择 Arduino


{'_type': 'localeString', 'en': 'Connect Arduino to ProtoPie Connect', 'ja': 'Connect Arduino to ProtoPie Connect', 'ko': 'Connect Arduino to ProtoPie Connect', 'zh': 'Connect Arduino to ProtoPie Connect'}
  1. 选择所需的 端口波特率

  • 端口:选择与你的 Arduino 开发板对应的端口。


{'_type': 'localeString', 'en': 'Connect Arduino: select port.', 'ja': 'Connect Arduino: select port and baud rate', 'ko': 'Connect Arduino: select port and baud rate', 'zh': 'Connect Arduino: select port and baud rate'}
  • 波特率:该值决定了串行连接检查更新的频率。你可以选择默认值 9600。


{'_type': 'localeString', 'en': 'Connect Arduino: select the baud rate.'}

*请注意,Arduino 插件适用于任何通过串行通信的微控制器。例如,如果你想使用 ESP32 微控制器,在连接 ESP32 后,你可以选择合适的端口和波特率来打开 ESP32 的串口,并在 ProtoPie Connect 中接收数据。

在 ProtoPie Connect 中使用 Arduino

ProtoPie Connect 与 Arduino 使用 Message||Value 格式进行通信。如果只是想发送不带值的消息,仅使用 Message 即可。

从 Arduino 发送消息

使用 Serial.println() 函数将消息(和值)发送到 ProtoPie Connect,随后 ProtoPie Connect 会将其传递给所有对应的原型。

在以下示例中,Arduino 每 2 秒向 ProtoPie Connect 发送消息 ROTATE 和数值 90

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

void loop() {
  // Send "ROTATE" to ProtoPie
  // message: ROTATE
  // value: 90
  Serial.println("ROTATE||90");
  delay(2000);
}
void setup() {
  Serial.begin(9600);
}

void loop() {
  // Send "ROTATE" to ProtoPie
  // message: ROTATE
  // value: 90
  Serial.println("ROTATE||90");
  delay(2000);
}
void setup() {
  Serial.begin(9600);
}

void loop() {
  // Send "ROTATE" to ProtoPie
  // message: ROTATE
  // value: 90
  Serial.println("ROTATE||90");
  delay(2000);
}
void setup() {
  Serial.begin(9600);
}

void loop() {
  // Send "ROTATE" to ProtoPie
  // message: ROTATE
  // value: 90
  Serial.println("ROTATE||90");
  delay(2000);
}
void setup() {
  Serial.begin(9600);
}

void loop() {
  // Send "ROTATE" to ProtoPie
  // message: ROTATE
  // value: 90
  Serial.println("ROTATE||90");
  delay(2000);
}

向 Arduino 发送消息

Arduino 硬件需要单独的代码来解析传入的 Message||Value 格式消息。

在下面的示例中,Arduino 接收并解析来自 ProtoPie Connect 的消息。

#include <string.h>

// Declare struct
struct MessageValue {
  String message;
  String value; // Note that value is of String type
};

// Declare function that parse message format
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; 
}

// Declare MessageValue struct's instance
struct MessageValue receivedData;

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

/*
		if you want to make waiting time for reading serial data short,
		set waiting time with `Serial.setTimeout` function.
	*/
	Serial.setTimeout(10);
}

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

		receivedData = getMessage(receivedString);
  }

	// Do something with received message from ProtoPie Connect

	if (receivedData.message.equals("FIRST")) { // If message from ProtoPie Connect equals "FIRST" do the following 
		l1 = receivedData.value.toInt(); // receivedData.value.toInt() converts the value from ProtoPie Connect to integer type and assigns it to l1
		analogWrite(firstLED, l1); 
	} 
}
#include <string.h>

// Declare struct
struct MessageValue {
  String message;
  String value; // Note that value is of String type
};

// Declare function that parse message format
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; 
}

// Declare MessageValue struct's instance
struct MessageValue receivedData;

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

/*
		if you want to make waiting time for reading serial data short,
		set waiting time with `Serial.setTimeout` function.
	*/
	Serial.setTimeout(10);
}

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

		receivedData = getMessage(receivedString);
  }

	// Do something with received message from ProtoPie Connect

	if (receivedData.message.equals("FIRST")) { // If message from ProtoPie Connect equals "FIRST" do the following 
		l1 = receivedData.value.toInt(); // receivedData.value.toInt() converts the value from ProtoPie Connect to integer type and assigns it to l1
		analogWrite(firstLED, l1); 
	} 
}
#include <string.h>

// Declare struct
struct MessageValue {
  String message;
  String value; // Note that value is of String type
};

// Declare function that parse message format
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; 
}

// Declare MessageValue struct's instance
struct MessageValue receivedData;

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

/*
		if you want to make waiting time for reading serial data short,
		set waiting time with `Serial.setTimeout` function.
	*/
	Serial.setTimeout(10);
}

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

		receivedData = getMessage(receivedString);
  }

	// Do something with received message from ProtoPie Connect

	if (receivedData.message.equals("FIRST")) { // If message from ProtoPie Connect equals "FIRST" do the following 
		l1 = receivedData.value.toInt(); // receivedData.value.toInt() converts the value from ProtoPie Connect to integer type and assigns it to l1
		analogWrite(firstLED, l1); 
	} 
}
#include <string.h>

// Declare struct
struct MessageValue {
  String message;
  String value; // Note that value is of String type
};

// Declare function that parse message format
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; 
}

// Declare MessageValue struct's instance
struct MessageValue receivedData;

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

/*
		if you want to make waiting time for reading serial data short,
		set waiting time with `Serial.setTimeout` function.
	*/
	Serial.setTimeout(10);
}

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

		receivedData = getMessage(receivedString);
  }

	// Do something with received message from ProtoPie Connect

	if (receivedData.message.equals("FIRST")) { // If message from ProtoPie Connect equals "FIRST" do the following 
		l1 = receivedData.value.toInt(); // receivedData.value.toInt() converts the value from ProtoPie Connect to integer type and assigns it to l1
		analogWrite(firstLED, l1); 
	} 
}
#include <string.h>

// Declare struct
struct MessageValue {
  String message;
  String value; // Note that value is of String type
};

// Declare function that parse message format
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; 
}

// Declare MessageValue struct's instance
struct MessageValue receivedData;

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

/*
		if you want to make waiting time for reading serial data short,
		set waiting time with `Serial.setTimeout` function.
	*/
	Serial.setTimeout(10);
}

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

		receivedData = getMessage(receivedString);
  }

	// Do something with received message from ProtoPie Connect

	if (receivedData.message.equals("FIRST")) { // If message from ProtoPie Connect equals "FIRST" do the following 
		l1 = receivedData.value.toInt(); // receivedData.value.toInt() converts the value from ProtoPie Connect to integer type and assigns it to l1
		analogWrite(firstLED, l1); 
	} 
}

使用场景

尝试复现以下用例,以更好地理解 Arduino 如何与 ProtoPie Connect 协同工作。

控制家中的灯光

连续打开和关闭灯光。使用连接到 ProtoPie Connect 的 Arduino 开发板亲自测试一下。

  1. 此原型 添加到 ProtoPie Connect。

  2. 按照此电路图设置你的 Arduino 开发板和灯光控制。


{'_type': 'localeString', 'en': 'Connect Arduino Use Case', 'ja': 'Connect Arduino Use Case', 'ko': 'Connect Arduino Use Case', 'zh': 'Connect Arduino Use Case'}
  1. 将你的 Arduino 开发板连接到 ProtoPie Connect。

  2. 使用此示例代码将消息从 Arduino 发送到 ProtoPie Connect。

#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;
}

int firstLED = 3;
int secondLED = 5;
int thirdLED = 6;
struct MessageValue receivedData;

void setup() {
  pinMode(firstLED, OUTPUT);
  pinMode(secondLED, OUTPUT);
  pinMode(thirdLED, 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("FIRST")) {
    analogWrite(firstLED, receivedData.value.toInt());
    delay(30);
  } else if (receivedData.message.equals("SECOND")) {
    analogWrite(secondLED, receivedData.value.toInt());
    delay(30);
  } else {
    analogWrite(thirdLED, receivedData.value.toInt());
    delay(30);
  }
}
#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;
}

int firstLED = 3;
int secondLED = 5;
int thirdLED = 6;
struct MessageValue receivedData;

void setup() {
  pinMode(firstLED, OUTPUT);
  pinMode(secondLED, OUTPUT);
  pinMode(thirdLED, 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("FIRST")) {
    analogWrite(firstLED, receivedData.value.toInt());
    delay(30);
  } else if (receivedData.message.equals("SECOND")) {
    analogWrite(secondLED, receivedData.value.toInt());
    delay(30);
  } else {
    analogWrite(thirdLED, receivedData.value.toInt());
    delay(30);
  }
}
#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;
}

int firstLED = 3;
int secondLED = 5;
int thirdLED = 6;
struct MessageValue receivedData;

void setup() {
  pinMode(firstLED, OUTPUT);
  pinMode(secondLED, OUTPUT);
  pinMode(thirdLED, 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("FIRST")) {
    analogWrite(firstLED, receivedData.value.toInt());
    delay(30);
  } else if (receivedData.message.equals("SECOND")) {
    analogWrite(secondLED, receivedData.value.toInt());
    delay(30);
  } else {
    analogWrite(thirdLED, receivedData.value.toInt());
    delay(30);
  }
}
#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;
}

int firstLED = 3;
int secondLED = 5;
int thirdLED = 6;
struct MessageValue receivedData;

void setup() {
  pinMode(firstLED, OUTPUT);
  pinMode(secondLED, OUTPUT);
  pinMode(thirdLED, 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("FIRST")) {
    analogWrite(firstLED, receivedData.value.toInt());
    delay(30);
  } else if (receivedData.message.equals("SECOND")) {
    analogWrite(secondLED, receivedData.value.toInt());
    delay(30);
  } else {
    analogWrite(thirdLED, receivedData.value.toInt());
    delay(30);
  }
}
#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;
}

int firstLED = 3;
int secondLED = 5;
int thirdLED = 6;
struct MessageValue receivedData;

void setup() {
  pinMode(firstLED, OUTPUT);
  pinMode(secondLED, OUTPUT);
  pinMode(thirdLED, 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("FIRST")) {
    analogWrite(firstLED, receivedData.value.toInt());
    delay(30);
  } else if (receivedData.message.equals("SECOND")) {
    analogWrite(secondLED, receivedData.value.toInt());
    delay(30);
  } else {
    analogWrite(thirdLED, receivedData.value.toInt());
    delay(30);
  }
}

外科手术机器人手臂

了解如何为由无线控制器操控的机器人手臂(Arduino Braccio 机器人手臂)制作原型。

查看这篇文章,探索 ProtoPie 在机器人原型设计中的实际应用。

Arduino 中使用的代码