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?

🤷 A component is a ready-to-use module that allows you to add interactive effects (scrolling, pop-up,...) and to add features (integrated purchase, authentication...) to your application. You can customize it with your content.

Here are the characteristics of a component:

Types of components

Click on the Components icon to access the list of components. 
There are 4 types of components: graphic components, layout components, system components and data 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

These components facilitate the layout of your screens.
  • 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

To add a component, click on the Components icon.
Go to the Properties window to edit its properties. 
It is possible to go inside a graphic or layout component to edit its content. Double-click on the component or click on the EDIT button in the Properties window. The breadcrumb trail will help you find your way around.

Create marker on a component

🤷 A marker is a specific behavior of your component: for example, the time of a video, the position of a scroll, a degree of tilt of the device... A marker allows you to define a default behavior for this component, trigger an action and be the target of an action.

To create a marker, enter the edition of your component and go to the Edition window on the left. 

marqueur_zone_de_de_filement.png

Trigger an action from a component

Each component has its own list of triggers
Click on Actions in the right window. 
If you have created markers, they appear in the list of triggers. 

Interact with a component

It is possible to create actions with all components. 
Select a trigger and choose the action Interact with a component
In the orange mode, select the component. You can select any component in your project. 

agir_sur_un_composant.png

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

You can also create your own components using our PandaBridge libraries (Javascript & React) to send and retrieve information and interact with other components.

Still need help? Contact Us Contact Us