MenuToggle Menu

Custom Layer Integrations

ProtoPie Connect's Stage view 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.

Creating a Stage View

Follow these steps to create a Stage view:

  1. Open ProtoPie Connect.
  2. Create a new Group and drag & drop your prototypes (Pies) into the group.
  3. Select the group.
  4. Click on the View icon to open the prototypes in a Stage.

Embedding Custom Layers

After creating the Stage view, access the stage option menu by right-clicking. To begin editing, click the Edit button. An "Edit Mode" message will confirm that editing is enabled.

To add new prototypes or custom layers:

  • From the upper-left corner, click on Add.
  • You can include the following layers in the Stage:
    • ProtoPie prototypes
    • Web embed via URL or iframe code (supports Maps, Spline, Rive, Bezi, etc.)
    • Live camera (select from available cameras or live streaming options)
[object Object]

Configuring Web Embed Layers

You can set its URL via the properties panel after adding a new Web Embed layer to the Stage.

You can provide a full URL or iframe code. Web embeds support various formats such as Maps, Spline, Rive, and Bezi. It is important to ensure the URL is valid and you have the necessary permissions to access it.

[object Object]

Configuring Live Camera Layers

To add camera feeds to your project, utilize the Live Camera layer. This feature supports:

  • USB-connected cameras, such as webcams
  • Your laptop’s camera
  • Live streaming URLs (HLS)

Before using the camera layer, make sure to grant permission to your web browser. After adding the camera layer, configure its properties through the Camera properties panel.

[object Object]

Previewing the Stage View

After adding and configuring layers, rearrange them within the Stage by dragging. To access positioning options, right-click on a layer. Preview the Stage by clicking View when ready.

FAQs

  • What are the supported URL types for the web embed source?

    You can use either a full URL or iframe code for embedding. The web embed feature supports formats such as Maps, Spline, Rive, Bezi, etc. Ensure the URL is valid and you have the necessary permission to access it.

    Here are some additional details to consider:

    1. Full URL embedding: If you opt for embedding with a full URL, ensure that the server providing the URL has appropriate CORS (Cross-Origin Resource Sharing) policy settings. This detail is crucial, especially if you are embedding a coded prototype running locally or hosted online.
    2. Iframe code embedding: When embedding iframe code from services like Spline, Rive, Mapbox, etc., make sure to use the iframe code generated directly from the respective services. You can insert the entire iframe code or extract only the src section. For example:

    <iframe

    src="https://my.spline.design/miniroomartcopy-51fb8d8402219e5b621015be7fae806d/"

    frameborder="0"

    width="100%"

    height="100%"

    ></iframe>

  • Why do some keyboard inputs fail in the Unity layer?

    Depending on the WebGL build inside Unity, certain keyboard inputs might not work with ProtoPie. This is because Unity WebGL's default settings are set to capture all keyboard inputs, which may interfere with ProtoPie's functionality. However, installing the Unity Plugin will solve this issue by disabling the Unity WebGL property.

    Alternatively, you can modify the code in your Unity project to prevent Unity WebGL from capturing all keyboard inputs.

Back To Top