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.
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)
2. Customize photo taking
In this section, we explain how we made the connection to the camera and set the various customization settings.
The description pandasuite.json file
The pandasuite.json file allows us to describe the properties that we need in our component.
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.
This property is at the bottom of the Properties window.
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.
These triggers are found in Interactivities window for selecting the HTML component.
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.
These actions are found to create action on the HTML component.
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 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 ! ;-)