[Beta] ProtoPie MCP 现已上线!了解更多

[Beta] ProtoPie MCP 现已上线!了解更多

介绍 ProtoPie

入门

制作你的第一个原型

ProtoPie 生态系统

ProtoPie Studio 界面

导入

入门

从 Adobe XD 导入

从 Figma 导入

从 Sketch 导入

ProtoPie 精灵

基本元素

容器

设备

图层

预览窗口

场景

滚动/分页

快捷键

系统状态栏

触发条件与响应

缓动

注释

回复

时间线

触发器

公式

入门

功能

图层属性

语法

公式使用场景

变量

入门

变量

预定义变量

变量使用案例

AI

入门

AI 交互创作

AI 文档问答

AI 面板界面

获得最佳效果的提示

ProtoPie MCP

Getting Started

Studio MCP 介绍

Studio MCP 安装与设置

Code MCP Introduction

Code MCP 安装与设置

Dev View 开发者视图

自动布局

入门

自动布局属性

组件

入门

组件指南

编辑组件

嵌套组件

发送和接收消息

交互库

入门

管理交互库

管理图书馆会员

语音原型设计

入门

收听回复

朗读回复

应用场景

语音命令触发

连接设备

连接 blokdots

连接移动设备

ProtoPie Cloud

入门

管理原型

管理存储

共享原型

ProtoPie Player

测试原型

管理字体

离线测试

适用于 Wear OS 的 ProtoPie Player

团队

入门

编辑者和查看者

让您的团队快速上手

项目

团队所有者和团队管理员

交接

入门

创建交互录制

管理交互录制

录制页面

用户测试

入门

概述

创建测试房间

外部集成

管理测试会话

测试结果与分析

ProtoPie Cloud 上的用户测试

ProtoPie Connec

入门

API 插件

Arduino 插件

blokdots 插件

嵌入式 Connect

自定义层集成

自定义插件

连接设备

游戏手柄插件

IFTTT 插件

罗技 G29 方向盘插件

测试原型

功能比较

Unity 插件

ProtoPie 企业版

入门

组织设置

服务管理员

单点登录(SSO)

安全

概述

访问控制

数据传输、存储与备份

事件响应

网络与 ProtoPie Player 应用的安全性

物理安全

风险管理

菜单

介绍 ProtoPie

入门

制作你的第一个原型

ProtoPie 生态系统

ProtoPie Studio 界面

导入

入门

从 Adobe XD 导入

从 Figma 导入

从 Sketch 导入

ProtoPie 精灵

基本元素

容器

设备

图层

预览窗口

场景

滚动/分页

快捷键

系统状态栏

触发条件与响应

缓动

注释

回复

时间线

触发器

公式

入门

功能

图层属性

语法

公式使用场景

变量

入门

变量

预定义变量

变量使用案例

AI

入门

AI 交互创作

AI 文档问答

AI 面板界面

获得最佳效果的提示

ProtoPie MCP

Getting Started

Studio MCP 介绍

Studio MCP 安装与设置

Code MCP Introduction

Code MCP 安装与设置

Dev View 开发者视图

自动布局

入门

自动布局属性

组件

入门

组件指南

编辑组件

嵌套组件

发送和接收消息

交互库

入门

管理交互库

管理图书馆会员

语音原型设计

入门

收听回复

朗读回复

应用场景

语音命令触发

连接设备

连接 blokdots

连接移动设备

ProtoPie Cloud

入门

管理原型

管理存储

共享原型

ProtoPie Player

测试原型

管理字体

离线测试

适用于 Wear OS 的 ProtoPie Player

团队

入门

编辑者和查看者

让您的团队快速上手

项目

团队所有者和团队管理员

交接

入门

创建交互录制

管理交互录制

录制页面

用户测试

入门

概述

创建测试房间

外部集成

管理测试会话

测试结果与分析

ProtoPie Cloud 上的用户测试

ProtoPie Connec

入门

API 插件

Arduino 插件

blokdots 插件

嵌入式 Connect

自定义层集成

自定义插件

连接设备

游戏手柄插件

IFTTT 插件

罗技 G29 方向盘插件

测试原型

功能比较

Unity 插件

ProtoPie 企业版

入门

组织设置

服务管理员

单点登录(SSO)

安全

概述

访问控制

数据传输、存储与备份

事件响应

网络与 ProtoPie Player 应用的安全性

物理安全

风险管理

将 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 中使用的代码