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.

To better organize and view your Pies, you can arrange them into groups. Click on the Group icon to create a new Pie group. To add a Pie to a group, simply drag and drop the Pie into the group (make sure that the group is expanded).

• To move a Pie from a group to a another one drag and drop it to another group.
• Only groups containing at least one Pie can be expanded/ collapsed.
• Only groups containing at least one Pie can be selected/ deselected.
• Every newly created group will be added at the top of the groups.
• Every newly imported Pie will be added at the bottom of the groups.
• 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.

2. Testing Prototypes

There are three ways to test prototypes using ProtoPie Connect.

• ProtoPie Player (iOS, iPadOS, or Android)
• Desktop web browsers
• ProtoPie Player for Wear OS (Enterprise plan users only)

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

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.

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

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. Add the prototypes to the same group
2. Select the prototypes (you can select all the prototypes in the group by clicking on the checkbox next to the group name)
3. Click on the MultiView icon to open them in one single browser tab, side by side.

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

Next time you reopen the prototypes in the MultiView, they will be displayed with the new layout settings. If you remove or reorder the pies within a group the layout settings will be reset.

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:

• Voice Command Trigger
• Speak Response
• Listen Response

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.

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.

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.

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

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.

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.