MenuToggle Menu

Managing & Using Prototypes

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

Managing Prototypes in ProtoPie Connect

Manage your prototypes and run them individually or altogether with ProtoPie Connect. Make sure to add them to ProtoPie Connect first.

  • To add prototypes, click on the + New button and select the prototype you want to add. Or simply drag-and-drop prototypes to ProtoPie Connect.
  • To remove a prototype from the list, select the Pie and click on the trash icon. Or click on Remove All from the overflow menu to remove them all.
  • To replace a prototype, place the cursor on the prototype and click on the two-way arrow icon.

Changes made to a prototype already added to ProtoPie Connect are reflected automatically.

[object Object]

Using Prototypes Added to ProtoPie Connect

There are three ways to use and test prototypes added to ProtoPie Connect.

Connecting ProtoPie Player to ProtoPie Connect

ProtoPie Player is not only a free companion app to ProtoPie Studio but to ProtoPie Connect as well. View, experience, and test prototypes—added to ProtoPie Connect—on iOS, iPadOS, and Android.

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

  • Scanning the QR code.
  • Entering the IP address.
  • Using a USB cable.

Learn more about ProtoPie Player.

Scanning the QR Code

  1. Make sure your computer and smart device are connected to the same WiFi network.
  2. Click on the Device icon for the prototype you want to open.
  3. Tap on the Scan QR Code button in ProtoPie Player.
  4. Scan the QR code.
  5. Once connected, click on the Run button in ProtoPie Connect. The prototype will run on your smart device.
[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. Once connected, click on the Run button in ProtoPie Connect. The first prototype in the list will run on your smart device.
[object Object]

In the Browser

To open a prototype in the browser, any major browser would do. There are two ways to open a prototype—added to ProtoPie Connect—in the browser.

  • On the same machine as where ProtoPie Connect is.
  • On a different machine. This could be, for example, a tablet or a different computer.

On the Same Machine

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

On a Different Machine

  1. Make sure your computer with ProtoPie Connect and the other machine are connected to the same WiFi network.
  2. Open the browser on the other machine.
  3. Enter ProtoPie Connect its IP address in the address bar. ProtoPie Connect its interface will show.
  4. Click on the Web Browser icon for the prototype you want to open.
  5. In the browser, the URL has the following format: http://protopie.connect.ip.address:9981/.
[object Object]

Opening All Prototypes

To open all prototypes in the browser altogether—arranged next to each other, click on View All in the overflow menu.

[object Object]

Customize the background color as well as rearrange the position and size of prototypes.

[object Object]

Managing Display Options

Similar to the display options in ProtoPie Cloud, it’s possible to customize these for prototypes in the browser using URL parameters.

  • The URL with parameters has the following format: http://localhost:9981/pie?pieid=1&param1=value1&param2=value2&...
  • pieid is a required parameter indicating which prototype to open.
  • Concatenate parameters with &.
  • If you are using a browser on a different machine, replace localhost with the IP address shown in ProtoPie Connect.
    • 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

Example URLs with parameters:

  • Show the full screen button, set the 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
  • Set the background color to black, show hotspot hints, and scale the prototype to fit the screen.
    • http://localhost:9981/pie?pieid=1&bg=black&touchHint=true&scaleToFit=true
  • Set the background color to yellow, and hide the cursor from showing.
    • http://localhost:9981/pie?pieid=1&bg=yellow&cursorHide=true
Back To Top