行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

教程

6

阅读时间

使用 ProtoPie 进行 Arduino 原型设计

跨越软件与硬件边界的交互原型设计。

托尼·金, 首席执行官兼联合创始人

2021 更新:我还写了另一篇关于面向初学者的软件与硬件一体化原型的文章,讲解了如何开始使用 Arduino 和 ProtoPie。你可能会想先读那一篇!

如今,软件交互常常与硬件交互自然地同时发生——在某些情况下,两者之间甚至没有清晰的边界。不过,作为一名设计师,我知道软件与硬件之间传统上一直存在一道难以轻易跨越的巨大鸿沟。软件设计师通常不确定如何处理硬件,或如何利用输入到硬件中的信号来创建软件交互。同样,硬件设计师通常需要借助编程,才能测试嵌入其硬件中的软件。

这正是 Arduino 和 ProtoPie 发挥作用的地方。

ProtoPie 通过 ProtoPie Connect 与 Arduino 通信

ProtoPie 是一款适用于移动端、网页、仪表盘、数字屏幕等的高保真原型工具。它的扩展功能ProtoPie Connect可帮助你将这些原型真正落地。你可以在智能设备之间创建交互,并在 IoT 设备或 Arduino 等物理计算工具之间进行通信。你可以查看一些

ProtoPie Connect 可以直接与支持 socket.io 信号的硬件通信。这意味着你无需开发任何其他桥接应用,只需将 ProtoPie Connect 与 Arduino 连接即可。在本文中,我们将展示一种更简单的方法:通过 USB 通信。该方法意味着你不需要为桥接应用编写任何代码。


Communication between ProtoPie and Arduino


*Arduino 可以像其他硬件一样,无需 Bridge 应用即可直接连接 ProtoPie Connect。*

本示例使用 Arduino 设备来模拟汽车,在 UNO 板上配有 LED、按键、压电蜂鸣器和光传感器。

  • 按下开关会播放汽车发动机启动的声音,并将 Android 手机上显示的画面切换为驾驶座视图。

  • 点击喇叭会触发压电蜂鸣器发声。

  • 按下屏幕上的按钮会点亮 LED。

  • 遮住光传感器(或让周围环境变暗)会使车内窗外视图变暗。

观看下方视频,看看这个原型如何运作。

设置 ProtoPie

ProtoPie 允许你通过 Receive Trigger 和 Send Response 与其他设备通信。为了与 Arduino 设备通信,只需将 Channel 设置为“ProtoPie Studio”,并将 Message 设置为你想要的内容即可。


Select “Android Broadcast” as a channel


将“ProtoPie Studio”选为频道。

供参考,本示例中使用了以下 Message。


Arduino Sketch example

[下载 Pie 文件]

设置 Arduino

要完成设置,我们需要一个光敏电阻、一个 LED、一个压电蜂鸣器、一个开关和 2 个电阻(LED 使用 330Ω,光敏电阻使用 10kΩ)。准备好后,请按照此电路图进行连接。


Arduino circuit diagram


Arduino 电路图

我们根据上面提到的 Message 整理了以下代码。这是 Arduino Sketch 示例。

把它们连接起来

  1. 使用 USB 线连接你的笔记本电脑和 Arduino Uno。

  2. 在 Arduino Sketch(Arduino IDE)中将 Arduino 代码上传到 Arduino Uno。

  3. 让你的笔记本电脑和手机连接在同一网络环境中。

  4. 点击“...”将 Arduino 与 ProtoPie Connect 连接,选择 USB 端口(端口名称可能与我的不同),并将波特率设置为 9600。

💡* *如果 Arduino IDE 中开启了串口监视器,你将无法连接,因此请先确保关闭串口监视器。

  1. 然后,点击 NEW 按钮将 pie 文件上传到 ProtoPie Connect。

  2. 最后一步是在手机上打开 ProtoPie Player,并扫描 ProtoPie Connect 上显示的二维码。随后你会看到原型已从 Connect 同步到 Player。

💡 要通过二维码连接 Player 和 Connect,你必须确保它们都连接在同一网络下。如果不是,建议使用 USB 进行连接。

你已准备好开始玩 Arduino 了!

借助 ProtoPie Connect,Arduino 可以与 Android 和 iOS 设备通信。按下 Arduino 上的实体按键会在手机上触发响应,而点击手机触摸屏也会在 Arduino 上触发响应。

ProtoPie 是一款软件原型工具,可让你的软件原型与硬件设备进行通信。按照上述步骤操作,从今天开始拥抱革命性的设计可能性。

哦,不过请记住——你首先需要 ProtoPie Connect。

[申请 ProtoPie Connect 免费试用]