MenuToggle Menu

Managing & Testing Prototypes

Once you've made your prototypes in ProtoPie Studio, start testing them out on your smart devices or in the desktop browser using ProtoPie Connect. You can download ProtoPie Connect here.

Testing Prototypes in ProtoPie Connect

Testing prototypes in ProtoPie Connect involves two steps:

  • Step 1. Loading the prototype/s to ProtoPie Connect
  • Step 2. Testing the loaded prototype/s

1. Loading Prototypes

First, you need to load your prototypes to ProtoPie Connect. In ProtoPie Connect you can run one or several Pie files simultaneously.

  • To add prototypes, click on the + New button and select the prototype you want to add. Or simply drag-and-drop prototypes into ProtoPie Connect's interface.
  • To remove a prototype from the list, select the Pie file and click on the trash icon.
  • To replace a prototype, place the cursor on the prototype and click on the two-way arrow icon.

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).

Adding a new pie file creates a new pieId. Replacing a pie file reuses the same pieId of the previous prototype.

[object Object]

2. Testing Prototypes

There are three ways to test prototypes using ProtoPie Connect.

Testing Prototypes with ProtoPie Connect and ProtoPie Player

ProtoPie Player is not only a free companion app to ProtoPie Studio, but to ProtoPie Connect as well. 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.

Scanning the QR Code

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

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 with ProtoPie Connect and 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. Both are part of the ProtoPie Smartwatch Solution.

  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 with ProtoPie Connect

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

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]

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/.

Opening Multiple Prototypes in the Same Browser Tab

  1. Click on the + New button and select Group
  2. Drag-and-drop your prototypes into the new Multiview group
  3. Click on the Multiview icon to open them in one single browser tab, side by side.
[object Object]

Right-click the screen to open the control menu. By clicking Settings, you can customize the background color and resize/rearrange your prototypes.

[object Object]

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 set up

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

Debugging Messages in ProtoPie Connect

You can see all messages sent and received by all the connected prototypes, custom plugins, and hardware devices on the right side of the ProtoPie Connect interface. For debugging purposes, you can try sending a message from the dashboard and check if it’s received correctly in the prototype.

[object Object]
Back To Top