Components

Components are the cornerstone of creation in PandaSuite Studio, and they give you the greatest creative freedom. They are flexible, powerful and synchronizable with each other. Discover the list of components, their role and how to edit them.

What is a component?

Here are the characteristics of a component:

• It has properties
• It has triggers to start an action
• It can be the target of one or more actions
• It is customizable using markers
• It can be synchronized with all other components
• It reacts according to languages
• It can receive data.

Types of components

Graphic components

They allow you to create visual effects in your screen. Insert your content inside these components and customize their properties.

• Interactive zone: this is a transparent zone to place where you want to trigger an action. 
• Gallery: a kind of carousel or slideshow that scrolls horizontally or vertically. It is composed of pages in which you can insert any type of content. 
• Multi-state: this component allows you to create several states of an object or a section of your screen to animate it.
• Pop-up: also called modal, it is displayed above your screen and must be closed to continue browsing. 
• Drag & Drop: drag (with your finger or mouse) a draggable object to a droppable container while keeping it selected.
• Video player: display video on your screen. You can display or not the video player controls. 
• Image sequence: insert a GIF, an image sequence or to transform a video automatically into an image sequence. 
• HD Image: only with very high quality images (HD). It allows you to zoom in on the image to see the smallest details.
• Web: display web content in your application via a webview/iframe and create actions on the web content. It also allows you to insert custom components.
• Camera
• After Effects: export your animations in JSON format from After Effects with the Bodymovin plug-in, optimize the weight and improve the quality of your animations. Create numerous interactions between your animations and other components. 
• 3D/Augmented Reality (AR): insert a 3D object, create interactions and visualize it in a real environment with augmented reality.
• URL Media Player: insert audio or video content from an online platform (YouTube, Facebook, Soundcloud, Vimeo, Twitch...). An Internet connection is required to display the content.
• 360°: display a 360° image or video and create specific interactions. 
• Map: you can display a map in your application, create markers (points of interest, zones) or display a route. 

Layout components

• Group: group your objects. This is particularly useful to represent an element in a collection, to associate the same interactivity to several objects, to create an animation or to facilitate the responsive management of your screens. 
• Scrolling Area: create a scrolling list, a scrolling page, a scrolling image... transform your content into a scrolling object according to a horizontal or vertical axis or both.
• Flexbox: arrange objects in rows or columns along a main axis. Elements expand or retract to occupy the available space.

System components

These components expose native device functionality. Warning: some of them are not compatible with the web app/PWA because browsers limit access to these system features. 

• Motion Sensor: create motion and tilt related effects on your iOS or Android device using the accelerometer and gyroscope. 
• Blow Sensor: using the microphone saturation, create a breath related action on an iOS & Android device.
• Compass sensor
• Shake sensor
• Beacon Sensor: beacon sensors are small devices running under the Bluetooth Low Energy (BLE) standard. They emit a signal that can trigger actions on an iOS or Android device when it is next to, near or far from this sensor. 
• Video (full screen): display a video in full screen 
• Audio: insert an audio file and associate actions to it (play, pause, create markers, synchronize...)
• Timer: manage the notion of time, for example to create a counter. It synchronizes with all other components. 
• Bluetooth BLE: it allows communication between devices via the Bluetooth Low Energy (BLE) connection. Specifically, this connection is made via the transmission and reception of features within an application (or even several).
• Image recognition: scan an image with the camera and trigger the action of your choice. Ideal for guided tours and treasure hunts. 
• Download: by default your entire app is downloaded by users. This component allows you to manage partial downloads of some parts of your application. 
• GPS: define zones around GPS coordinates to which you can associate actions when the user enters or leaves the zone. 
• Synchronization: this is a special component: it allows you to synchronize several components to create a palette of effects. 

Data components

These components allow you to interact with data and services external to PandaSuite

• Authentication: insert an authentication form, manage a user database and associate data to your users (score, progress, account type...). 
• Collection: this component manages an ordered collection of data and presents them in the form of a list of elements in a horizontal or vertical orientation. 
• Search: perform a search on a data source or on all the texts of your application.
• Text Input: insert an input field. 
• Virtual keyboard 
• HTTP: to connect your app to other apps or services using APIs.
• Form (Tripetto): integrate a form created from the Tripetto online service, view it offline and associate events and actions to it. 
• QR Reader:
• In-app Purchase: to set up in-app payments in your app (in-app) using the Apple App Store and Google Play Store payment system.

Edit a component

Create marker on a component

Trigger an action from a component

Interact with a component

Exposing the value of a component (bind)(bind)

Each component exposes data. For example, if a user uses the Text Input component to type text or the Gallery component to select a visual, these text and page values can be found in the application and acted upon.

Create custom component