软硬件交互

使用ProtoPie实现Arduino原型设计

实现软硬之间的交互原型设计。

Tony Kim, CEO & Co-Founder

August 11, 2023

使用ProtoPie实现Arduino原型设计
2021年更新:感兴趣的读者可以先读一读我写的另一篇关于初学者的软硬件交互原型设计 的文章,其中解释了如何开始使用Arduino和ProtoPie。
如今,软件交互通常与硬件交互并存,有时两者之间没有明确的界限。然而,作为一名设计师,我知道在软件和硬件之间通常存在着一个很难克服的障碍。软件设计师通常不确定如何处理硬件,或者如何通过使用输入到硬件中的信号来与软件交互。同样,硬件设计师通常需要借助编码来测试嵌入到硬件中的软件。
这就是Arduino和ProtoPie的用武之地。

ProtoPie 通过 ProtoPie Connect 与 Arduino 进行通信

ProtoPie 是一个适用于移动设备、网页、仪表盘、数字屏幕等的高保真原型设计工具。它的扩展功能 ProtoPie Connect 可以帮助您将这些原型投入实践。您可以创建智能设备之间的交互,并在物联网设备或 Arduino 等物理计算工具之间进行通信。您可以在 ProtoPie 的视频平台 上查看一些使用 ProtoPie Connect 制作的演示视频。
ProtoPie Connect 可以直接与支持 socket.io 信号的硬件进行通信。这意味着您无需开发任何其他桥接应用,只需将 ProtoPie Connect 与 Arduino 连接起来。在本文中,我们将向您展示一种更简单的方法:通过 USB 进行通信。这种方法意味着您无需编写任何桥接应用代码。
1
Arduino 可以直接与 ProtoPie Connect 连接,无需像其他硬件那样使用桥接应用程序。
本示例使用 Arduino 设备模拟一辆汽车,UNO 板上配有 LED、按钮、压电蜂鸣器和光传感器。
  • 按下一个开关会播放汽车引擎启动的声音,并改变安卓手机的改屏幕以显示驾驶员座椅。
  • 点击喇叭会触发压电蜂鸣器发声。
  • 按下屏幕上的按钮会将打开 LED。
  • 遮挡光传感器(或使周围变暗)将使车内的车景变暗。
观看下面的视频,看看这个原型的实际运行效果。
  • Bilibili视频

设置 ProtoPie

ProtoPie 允许您通过使用「接收」触发和「发送」反应与其他设备进行通信。要与 Arduino 设备进行通信,只需将通道设置为"ProtoPie Studio",并将信息设置为需要的内容。
2
渠道选择“ProtoPie Studio”
作为参考,以下是在此示例中使用的信息。

设置 Arduino

为了进行设置,我们需要一个光敏电阻、一个 LED、一个压电蜂鸣器、一个开关和两个电阻(330Ω用于LED,10kΩ用于光敏电阻)。准备好后,请按照以下电路图连接它们。
4
Arduino 电路图
用上面提到的信息编写了以下代码。这是 Arduino 的示例代码。
// pin numbers
const int LED = 13;
const int PIEZO = 12;
const int SWITCH = 8;

const int LIGHT_VAL_CRITERIA = 600;

int lastSwVal = 0;
int lastBright = -1;// -1: unkown, 0: dark, 1: bright

void setup() {
  pinMode(PIEZO, OUTPUT);
  pinMode(LED, OUTPUT);
  pinMode(SWITCH, INPUT_PULLUP);

  Serial.begin(9600);
}

void loop() {
// Read from the switch
  int swVal = digitalRead(SWITCH);
  if (swVal != lastSwVal) {
    if (swVal == 0) {
      Serial.println("SWITCH");
    }
    lastSwVal = swVal;
  }

// Read from the light sensor
  int lightVal = analogRead(A4);
  if (lastBright != 0 && lightVal < LIGHT_VAL_CRITERIA) {
    lastBright = 0;
    Serial.println("BRIGHT");// Send "BRIGHT" to ProtoPie
  } else if (lastBright != 1 && lightVal >= LIGHT_VAL_CRITERIA) {
    lastBright = 1;
    Serial.println("DARK");// Send "DARK" to ProtoPie
  }

// Read from ProtoPie-Connect
  while (Serial.available() > 0) {
    int b = Serial.read();

    if (b == 'O') {// Turn on the LED
      digitalWrite(LED, HIGH);
    } else if (b == 'X') {// Turn off the LED
      digitalWrite(LED, LOW);
    } else if (b == 'B') {// Play a beep
      tone(PIEZO, 1047, 100);
    }
  }
}

将它们组合起来

  1. 使用 USB 将笔记本电脑和 Arduino Uno 连接起来。
  2. 将 Arduino 代码发送到 Arduino Uno 上的 Arduino Sketch(Arduino IDE)中。
  3. 在相同的网络环境下将笔记本电脑和手机连接起来。
  4. 点击"..."菜单,选择 USB 端口(端口名称可能与下图中的不同),并输入9600作为波特率,将 Arduino 与 ProtoPie Connect 连接起来。💡 如果 Arduino IDE 中的串口监视器处于打开状态,则无法连接,请确保首先关闭串口监视器。
5
用 ProtoPie Connect 连接 Arduino
  1. 然后,点击“NEW”菜单,将 Pie 文件上传到 ProtoPie Connect。
  2. 最后,在手机上打开 ProtoPie Player,扫描 ProtoPie Connect 上显示的二维码。然后您将看到原型已经从 Connect 同步到 Player。💡 要通过二维码连接 Player 和 Connect,需确保它们都通过相同的网络连接。如果没有连接在同一网络上,建议您使用USB进行连接。

您已经可以开始使用 Arduino 了!

借助 ProtoPie Connect,Arduino 可以与安卓和 iOS 设备进行通信。按下 Arduino 的物理按钮时将触发手机上的反应,触摸手机屏幕时将触发 Arduino 上的反应。
ProtoPie 是一款软件原型设计工具,使软件原型能够与硬件设备进行通信。按照上述步,开始拥抱革命性的设计可能性吧!
但请记住,首先需要安装 ProtoPie Connect。