Responses

A Response is an Interaction Piece that follows the activation of a Trigger. A Response can have different properties based on how it is tied with a Trigger.

Move

Moving a layer to preset coordinates.

Move

Coordinates for a layer’s destination

Scale

Enlarging or shrinking a layer to preset sizes.

Size

It is possible to modify the size of a layer with fixed values for the width and the height. (When containers are resized, the layers within the container remain unchanged.)

Factor

It is possible to modify the size of a layer proportionally by a certain %. (When containers are resized, the layers within the container are also resized.)

Rotate

Turning a layer to preset angles.

Rotate To

The angle a layer rotates to

Rotate By

The amount of rotation a layer rotates by

Direction

The area towards which a layer moves

3D Rotate

Turning a layer to preset angles in a three-dimensional field.

Rotate To

The angle a layer rotates to

Rotate By

The amount of rotation a layer rotates by

Direction

The area towards which a layer moves

Pivot

The reference point from which a layer undergoes rotation or resizing

Perspective Depth

The distance between a layer and a point of focus for viewing

Opacity

Changing the transparency of a layer.

Change To

Changing the layer’s opacity

Color

Changing the layer’s color.

Fill

Changing the layer’s color

Border

Changing the layer’s border color

Shadow

Changing the layer’s shadow color

Shadow

Add shadows to a layer and adjust the color as well as other values.

Shadow

Shadows can be customized based on the chosen coordinates and blur

Border

Add borders to a layer and adjust the border position as well as color

Border Position

Borders can be placed on the inside, center or outside of a layer’s outline

Radius

Changing the layer’s radius.

Change To

Changing the radius of a layer

Scroll

This option scrolls a layer to a specified location.

Scroll

The amount a layer scrolls

Reorder

Changing the order of layers in a stack.

Reorder

The changes of a layer’s order

Jump

Go from one scene to another scene.

Scene

Jump to a certain scene

Transition

Transition effects when jumping to a scene

Reset the selected scene

The selected scene will be resetted when jumping to it. If this option is not enabled, the scene is left in its last state

Playback

Playback works with audio and video layers. Playback can be used to play, pause and seek.

Play

Play the video or audio file

Pause

Pause the video or audio file

Seek

Move to a specific point in the video or audio file. Input a desired point using the M:SS format

Text

A text’s property and the contents can be changed. Text Responses have no duration.

Change To

The text content will be changed to that desired by the user

Size

The text is resized

Weight

The text can be made bolder or lighter

Alignment

The text’s horizontal or vertical alignment can be adjusted

Line Spacing

The text’s line spacing can be adjusted

Stop

The Stop Response allows an animation like a progress bar or a loading animation to stop.

Send

Send responses make interactions among devices possible. These responses cannot be used by themselves, and must be used with Receive triggers. A response is activated when a device with the Receive trigger accepts a message sent from a different device using a Send response. The message received on one device should match the one sent from another device.

Furthermore, Send responses in combination with Receive triggers can be used in one scene to modularize interactions or reuse a set of responses avoiding repetitive work.

Channel [Component]

Inside the component, you can use the Send response to send a message and this can be received by a Receive trigger outside the component. This also works the other way around. Refer to Components for more information.

Channel [ProtoPie Studio]

Select ProtoPie Studio as a channel to allow interactions among devices.

Channel [Android Broadcast]

Android Broadcast allows prototypes on Android devices to communicate with other Android apps and external hardware. Refer to Interacting with other Android apps for more information.

Channel [Current Scene]

To modularize interactions or reuse a set of responses avoiding repetitive work, you can use Receive triggers and Send responses in one scene.

Message

A message is a string that is transmitted. When the message in the Receive trigger on one device matches the message in the Send response, interactions among devices can take place.

Assign to Variable

It is possible to send a value together with a message. This value would have to be assigned to a variable upon receiving.

Vibrate

Vibration and haptic feedback can be used on smart devices. Refer to Google's Android Developer Documentation and Apple's Human Interface Guidelines for more information about haptic feedback.

iOS
  • Default: Basic vibration.

  • Notification - Success: Indicates that a task or action, such as depositing a check or unlocking a vehicle, has completed.

  • Notification - Warning: Indicates that a task or action, such as depositing a check or unlocking a vehicle, has produced a warning of some kind.

  • Notification - Failure: Indicates that a task or action, such as depositing a check or unlocking a vehicle, has failed.

  • Impact - Light/Medium/Heavy: Provides a physical metaphor that complements the visual experience. For example, the user might feel a thud when a view slides into place or two objects collide.

  • Selection - Selection: Indicates that the selection is actively changing. For example, the user feels light taps while scrolling a picker wheel. This feedback is intended for communicating movement through a series of discrete values, not making or confirming a selection.

Android
  • Default: Basic vibration.

  • Keyboard Press: Haptic feedback when the user has pressed a virtual or software keyboard key.

  • Keyboard Tap: Haptic feedback when the user has pressed a soft keyboard key.

  • Long Press: Haptic feedback when the user has performed a long press on an object that is resulting in an action being performed.

  • Virtual Key: Haptic feedback when the user has pressed on a virtual on-screen key.

Focus

The cursor focuses in on or out of the selected Input Layer.

Focus In

The cursor focuses in on the selected Input Layer.

Focus Out

The cursor focuses out of the selected Input Layer.

Assign

The value of a variable can be overwritten with another one.

Link

Open websites or apps through URL schemes.

URL

You can enter website URLs and visit a website in the browser or the in-app browser on iOS.

  • e.g. https://protopie.io

  • e.g. https://www.google.com/search?q=protopie

URL schemes allow you to open system apps and third-party apps on iOS and Android devices. Third-party apps usually have their own defined URL schemes.

  • e.g. mailto:hello@protopie.io

  • e.g. tel:+1-212-555-1234

  • e.g. whatsapp://send?text=[[hello]]

  • e.g. fb://feed

  • e.g. slack://open?team={TEAM_ID}

Formula

You can enter formulas and use the Link response more dynamically.

  • e.g. "https://www.google.com/search?q=" + `Input 1`.text

  • e.g. "https://www.amazon.com/s/field-keywords=" + `keyword`.text

Camera

This works with the camera layer. It is used to start or stop the camera.

Action [Start]

Start the camera. You can choose between the front-facing camera and rear-facing camera.

Action [Stop]

Stop the camera.

Camera [Current Camera]

Use the current camera.

Camera [Front Camera]

Use the current camera.

Camera [Rear Camera]

Use the rear-facing camera.

Camera [Switch]

Use the camera facing the opposite side of the last used camera.

Reset

Reset the current scene, a layer or a variable. You can make a whole scene start over and make a layer or variable go back to its initial state.

Background Blur

You can blur underneath layers with different styles that are defined by Apple iOS as below:

Default Effects
  • Extra Light

  • Light

  • Dark

Material Effects (Light and Dark themes)
  • Ultra Thin Material

  • Thin Material

  • Material

  • Thick Material

  • Chrome Material

Condition

Conditions are essential for Responses as they set up the parameters that will trigger the Response. These parameters must be satisfied for the Response to be triggered.

> Greater than 

A Response is triggered when a property of the target layer exceeds that set for this property

≥ Greater than or equal to 

A Response is triggered when a property of the target layer reaches or exceeds that set for this property

< Less than 

A Response is triggered when a property of the target layer goes below that set for this property

≤ Less than or equal to 

A Response is triggered when a property of the target layer reaches or goes below that set for this property

= Equal to 

A Response is triggered when a property of the target layer is exactly the same as that set for this property.

≠ Not equal to 

A Response is triggered when a property of the target layer is not exactly the same as that set for this property

Speech Recognition

By default, the prototype does not pick up any speech. Hence, speech recognition needs to be enabled first. You should use the Speech Recognition response to make the prototype start speech recognition.

Learn more about voice prototyping.

Continuous

When speech recognition is enabled, speech recognition would stop automatically as soon as no speech is being picked up anymore. In order to avoid this, you can check Continuous to make sure speech recognition remains enabled even when no speech is picked up.

When Continuous has been checked, you would need a separate Speech Recognition response to stop speech recognition. This means that when Continuous is unchecked, you do not need a separate Speech Recognition response to stop speech recognition.

Text to Speech

You can make a prototype "speak" by reading a text, either as-is or via a formula, out loud.

Learn more about voice prototyping.

Text

You can enter the text to be read out loud.

Formula

To make your voice interaction more dynamic, you can use formulas as long as the used formula results in a text. Also, you can use the predefined variable $voiceTranscript that stores the last recognized speech.

Language

You can choose from 40 languages and language variants.

Voiced by

You can choose between a female and male voice per language.

Speed

You can adjust the speed by choosing a value between 0.5 and 2.

Pitch

You can adjust the pitch by choosing a value between 0.5 and 2.