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.

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

Changes made in ProtoPie Studio to a prototype already loaded to ProtoPie Connect will be reflected automatically.

[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]

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