MenuToggle Menu

Testing Prototypes in ProtoPie Connect

After creating prototypes in ProtoPie Studio, use ProtoPie Connect to test them on your smart devices or desktop browser. Download ProtoPie Connect here.

You can test prototypes with ProtoPie Connect through various methods:

  1. Testing Prototypes using ProtoPie Connect & ProtoPie Player
  2. Testing Prototypes using ProtoPie Connect & ProtoPie Player for Wear OS
  3. Testing Prototypes on Web Browsers
  4. Testing Prototypes in Stage View

Adding Prototypes to ProtoPie Connect

Before testing, load your prototypes into ProtoPie Connect by following these simple steps:

  • Click on the + New button and select the prototypes you want to add. Or simply drag-and-drop prototypes into ProtoPie Connect's interface.
    • Enterprise plan users can open prototypes directly from ProtoPie Cloud by selecting Cloud Pie. To fetch the most recent version of a Cloud Pie, click on the circular arrow icon (Reload).
  • Select the Pie file and click on the trash icon to remove a prototype from the list.
  • To replace a prototype, place the cursor on the prototype and click on the two-way arrow icon.
    • Adding a new Pie file creates a new pieid. Replacing a Pie file reuses the same pieId of the previous prototype.
[object Object]

Arranging Pies into Groups

To neatly arrange and manage your Pies, you can group them together. To create a new Pie group, simply click on the Group icon. To add a Pie to a group, just drag and drop it into the group. Be sure to expand the group before doing so.

  • To move a Pie from one group to another one, drag and drop it into another group.
  • Only groups containing at least one Pie can be expanded/ collapsed.
  • Only groups containing at least one Pie can be selected/ deselected.
  • To rename a group, double-click on the group name and enter the new name.
  • To delete a group, hover over it with the cursor and click on the Trash icon.
[object Object]

Testing Prototypes Using ProtoPie Connect & ProtoPie Player

ProtoPie Player is a free companion app for both ProtoPie Studio and ProtoPie Connect. View, experience, and test any prototypes added to ProtoPie Connect on iOS, iPadOS, and Android devices.

There are three ways to connect ProtoPie Player to ProtoPie Connect:


  1. Scanning the QR code
  2. Entering the IP address
  3. Using a USB cable

Learn more about the ProtoPie Player app.

Connect ProtoPie Player to ProtoPie Connect Scanning the QR Code

  1. Ensure your computer and smart device are connected to the same WiFi network.
  2. Click on Connect for the prototype you want to open in ProtoPie Connect.
  3. Select QR Code from the list.
  4. Tap on the Scan QR Code button in ProtoPie Player.
  5. Scan the QR code to run the prototype in the Player.
[object Object]

Connect ProtoPie Player to ProtoPie Connect Entering the IP Address

  1. Make sure your computer and smart device are connected to the same WiFi network.
  2. Tap on Type IP Address from the dropdown menu in ProtoPie Player.
  3. Enter the IP address shown in ProtoPie Connect.
  4. Tap on the Connect button to run the prototype on your smart device.
[object Object]

Testing Prototypes Using ProtoPie Connect & ProtoPie Player for Wear OS

ProtoPie Player for Wear OS, unlike the regular ProtoPie Player, only works in conjunction with ProtoPie Connect for the Enterprise plan.

  1. Make sure both ProtoPie Player for Wear OS and ProtoPie Connect are connected to the same internet network.
  2. Open them—ProtoPie Player for Wear OS and ProtoPie Connect will automatically detect each other
  3. Click on Tap to connect in the ProtoPie Player for Wear OS to pair it with ProtoPie Connect.
  4. Add a smartwatch prototype to ProtoPie Connect.
  5. Click on the Run button at the top of ProtoPie Connect's interface to open the prototype in the Player for Wear OS.
  6. To restart or exit the prototype, double-tap the smartwatch screen.

Testing Prototypes on Web Browsers

You can use any major browser for this. There are two ways to open a prototype on a desktop web browser from ProtoPie Connect.

  • On the same machine where ProtoPie Connect is running
  • On a different machine

Testing Prototypes On the Same Machine

  1. Click on the Web Browser icon next to the prototype you want to open.
  2. In the browser, the URL will have the following format: http://localhost:9981/.
[object Object]

Testing Prototypes On a Different Machine

  1. Make sure the machine where ProtoPie Connect is running and the second one are connected to the same WiFi network.
  2. Open any web browser on the other machine.
  3. Enter your ProtoPie Connect IP address in the address bar. The ProtoPie Connect interface will be displayed.
  4. Click on the Web Browser icon next to the prototype you want to open.
  5. In the browser, the URL will have the following format: http://protopie.connect.ip.address:9981/.

Using Voice Prototyping Features in the Web Browser

Starting from ProtoPie Connect 1.8.0 voice prototyping features are supported in the Web Player, just like they are in the ProtoPie Player app for iOS/Android and in ProtoPie Studio's Preview window. Currently, the supported features are:

Compatible web browsers

Each browser behaves differently when dealing with microphone permissions. To use the Voice Command Trigger and Listen Response, the browser needs microphone permission from the user. The browser will ask for microphone permission when microphone needs to be enabled in the prototype, like in the screenshot below. To enable microphone access, simply click Allow.

[object Object]

Voice prototyping features for the ProtoPie Connect’s Web Player work best in Chromium browsers such as Google Chrome and Microsoft Edge. To properly play voice interactions some setup may be required on the browser side depending on the browser used and how the prototype is loaded.

Web Browser Setup

There are two ways to play prototypes in the web browser:

  1. On IP address
  2. On http://localhost:9981/

Playing prototypes on http://localhost:9981/ requires no setup and works across browsers.

Playing prototypes on IP address (e.g., http://192.168.0.40:9981/) requires a one-time browser setup to enable microphone usage, and is supported on Google Chrome and Microsoft Edge.

Chromium browsers will only allow your device's microphone permission when a site has a secure origin — i.e. serve from https or localhost.

The following one-time setup is required to use microphone with ProtoPie Connect's Web Player.

1. In the Chrome/Edge browser navigate to flags.

chrome://flags/#unsafely-treat-insecure-origin-as-secure

edge://flags/#unsafely-treat-insecure-origin-as-secure

2. Enable Insecure origins treated as secure.

[object Object]

3. Add the ProtoPie Connect server address with port number 9981.

Note: The server address can be found in the bottom left corner in ProtoPie Connect.

[object Object]

4. Relaunch (Restart) the Chrome/Edge browser.

[object Object]

Customizing View Options

As on ProtoPie Cloud, you can customize how prototypes display on the web browser using URL parameters.

  • URLs with such parameters have the following format: http://localhost:9981/pie?pieid=[ number]&name=[pie name]…
  • Use the “&” symbol to separate parameters in the URL.
  • If you are using a browser on a different machine, replace localhost with the IP address shown in ProtoPie Connect. For example: http://192.168.123.101:9981/pie?pieid=23.

pieid: Pie ID

  • Values: number
  • Default Value: (required)
  • Example: http://localhost:9981/pie?pieid=1

fullscreen: Show quick access button for going fullscreen in browser

  • Values: true | false
  • Default Value: false
  • Example: http://localhost:9981/pie?pieid=1&fullscreen=true

bg: Background color

  • Values:
    - CSS color, e.g., red, black, transparent
    - HEX, e.g., #ffffff
    - rgb, e.g., rgb(255,255,0)
    - rgba, e.g., rgba(200,100,20,0.4)
  • Default Value: transparent
  • Example: http://localhost:9981/pie?pieid=1&bg=#000000

hotspotHints: Show hotspot hints in prototype

  • Values: true | false
  • Default Value: Default set in ProtoPie Connect
  • Example: http://localhost:9981/pie?pieid=1&hotspotHints=true

cursorHide: Hide the cursor in prototype

  • Values: true | false
  • Default Value: false
  • Example: http://localhost:9981/pie?pieid=1&cursorHide=true

scaleToFit: Scale the prototype to fit the screen

  • Values: true | false
  • Default Value: true
  • Example: http://localhost:9981/pie?pieid=1&scaleToFit=false

Some examples of URLs with parameters:

  • Show in full screen mode, change background color to rgba(0,0,255,0.8), show hotspot hints, and don’t scale the prototype to fit the screen.
    • http://localhost:9981/pie?pieid=1&fullscreen=true&bg=rgba(0,0,255,0.8)&touchHint=true&scaleToFit=false
  • Change the background color to white, show hotspot hints, and scale the prototype to fit the screen.
    • http://localhost:9981/pie?pieid=1&bg=white&touchHint=true&scaleToFit=true
  • Change the background color to yellow, and hide the cursor
    • http://localhost:9981/pie?pieid=1&bg=yellow&cursorHide=true

Testing Prototypes with Custom Layers in Stage View

ProtoPie Connect's Stage feature enables you to integrate ProtoPie prototypes with diverse custom layers, including web embeds and live cameras. This integration enhances the user testing experience and renders your designs more dynamic.

FAQs

Back To Top