Take Photo

Taking pictures within the app is a great way to involve your users. Many applications allow you to customize the main character of the story with the face of the child.

To make life easier, we have prepared a ready-to-use module: it allows both to take a photo from and display it inside the application. Feel free to download and customize your application.

In this article, we explain how to use this model for those who would like to customize, we also explain how it was made.



1. Use the shooting module

This module allows to communicate directly with the tablet camera and allows taking pictures directly from the app.

It should be used twice in your application:

  • To trigger the photo taking
  • To display the photo

In the  studio, insert an HTML component: it allows the release of the photo shoot. In the  Properties window, select the type OFFLINE, click ADD SOURCE and upload the .zip file. In the Properties window, select the capture.

component's properties

Insert a second component to display the photo. Clear the capture in the Properties window.

Select the first component and open the Interactivities window. This component includes two default triggers corresponding to the two possible situations: Image Storage failed or Image stored. We can create interactions based on two triggers:

  • When the picture is taken: view the photo in the second component
  • When the photo fails: open the error pop-up (for example)

component's interactivity


2. Customize photo taking

In this section, we explain how we made the connection to the camera and set the various customization settings.

 Note : This section is for advanced users who know Javascript.

This model is built from a javascript file, an index.html, the PandaBridge link and the pandasuite.jsonfile.

modules's files'


The description pandasuite.json file

The pandasuite.json file allows us to describe the properties that we need in our component.

  • Properties

To be able to take several pictures, we add a property that offers the possibility or not to take pictures. It is boolean, that is to say true or false.

module's properties

This property is at the bottom of the Properties window.

  • Triggers

It is interesting to know if the picture has been taken or if it failed. These triggers can help you unlock an activity or display an error pop-up.

module's triggers

These triggers are found in Interactivities window for selecting the HTML component.

triggers in studio

  • Actions

We reported two actions on the HTML component: refreshing the image and erasing all the pictures taken. These actions can be customized according to your choice.

module's actions 

These actions are found to create action on the HTML component.

actions in studio


The file PandaBridge

The PandaBridge makes it easy to communicate between the HTML component and the application, in terms of transmission and reception. You must insert this file in your .zip file.

There are no changes required.

The methods of the class PandaBridge

The init method allows the initialization, it is what will allow to perform the functionality of PandaBridge.

The onLoad method is called when the component is visually supported. It can receive properties and custom markers component.

The methods of the class PandaBridge


The insertion of the .zip file

Once you have set the files, unzip the whole.

Be Careful: your main HTML file must be accessible from the roots at the time of compression. Do not bundle these files in a folder at the time of compression.

It's your turn ! ;-)


Still need help? Contact Us Contact Us