Utiliser l'appareil photo

Permettre à l'utilisateur de prendre une photo depuis l'application, c'est le meilleur moyen d'impliquer vos utilisateurs. De nombreuses applications permettent de personnaliser le personnage principal avec le visage de l'enfant.

Pour vous simplifier la vie, nous avons préparé un module de prise de photos prêt à l'emploi : il permet à la fois de prendre une photo depuis l'application et de l'afficher dans vos écrans. N'hésitez pas à le télécharger et à le personnaliser dans votre application.

Dans cet article, nous vous expliquons comment utiliser ce modèle et pour ceux qui voudraient le personnaliser, nous vous détaillons également sa construction.

TÉLÉCHARGER LE MODULE

 

1. Utiliser le module de prise de photos

Ce module permet de communiquer directement avec l'appareil photo de la tablette et permet la prise de photos directement depuis l'application.

Il doit être utilisé deux fois dans votre application :

  • Pour le déclenchement de la prise de photo
  • Pour l'affichage de la photo

Dans le studio de création, insérez un composant HTML : il permet le déclenchement de la prise de photo. Dans la fenêtre Propriétés du composant, sélectionnez le type HORS LIGNE, cliquez sur AJOUTER UNE SOURCE et uploadez le dossier .zip. Dans la fenêtre Propriétés, activez la capture.

proprietes du composant HTML

Insérez un 2ème composant pour afficher la photo. Décochez la capture dans la fenêtre Propriétés.

Sélectionnez le 1er composant et ouvrez la fenêtre Interactivités. Ce composant comprend deux déclencheurs par défaut correspondant aux deux situations possibles : Stockage image échoué ou Image stockée. Nous pouvons créer les interactions en fonction des deux situations :

  • Quand la photo est prise : afficher la photo dans le 2ème composant
  • Quand la photo échoue : ouvrir la pop-up d'erreur (par exemple)

interactivites du composant

 

2. Personnaliser la prise de photo

Dans cette partie, nous expliquons comment nous avons établi la connexion à l'appareil photo et configuré les différents paramètres de personnalisation. 

 Note : Cette partie est réservée aux utilisateurs avancés qui connaissent Javascript.

Ce modèle est construit à partir d'un fichier javascript, d'un index.html, du lien PandaBridge et du fichier de description pandasuite.json

Capture_d_e_cran_2018-03-28_a__12.23.28.png

 

 

Le fichier de description : pandasuite.json

Le fichier pandasuite.json nous permet de décrire les propriétés dont nous aurons besoin dans notre composant.

  • Les propriétés

Pour être en mesure de prendre plusieurs photos, nous rajoutons une propriété qui  offre la possibilité ou non de prendre des photos. Elle est donc de type boolean, c'est-à-dire true ou false.

proprietes du fichier de description

Cette propriété se retrouve en bas de la fenêtre Propriétés.

 

  • Les déclencheurs

Il est intéressant de connaître si l'image a bien été prise ou si elle a échoué. Ces déclencheurs peuvent vous permettre de débloquer une activité ou d'afficher une pop-up d'erreur.

déclencheurs du fichier de description

Ces déclencheurs se retrouvent dans la fenêtre Interactivités à la sélection du composant HTML.

déclencheurs du studio

  • Les actions

Nous avons déclaré deux actions sur le composant HTML : le rafraîchissement de l'image et l'effacement de toutes les photos prises. Ces actions peuvent être personnalisées en fonction de vos choix.

actions du fichier de description

Ces actions se retrouvent à la création d'une action sur le composant HTML.

 

actions dans le studio

 

Le fichier PandaBridge

Pour que le dossier .zip communique avec le studio, il est nécessaire d'inclure ce fichier qui permet d'accéder à la classe PandaBridge et ses différentes méthodes. Il n'y a aucune modification à apporter à ce fichier.

 

Les méthodes de la classe PandaBridge

La méthode init permet l'initialisation, c'est elle qui va permettre d'exécuter les fonctionnalités de PandaBridge.

La méthode onLoad est appelée quand le composant se charge visuellement. Elle permet de recevoir les propriétés et les marqueurs personnalisés du composant.Capture_d_e_cran_2018-03-28_a__12.33.19.png

 

L'insertion du dossier .zip

Une fois que vous avez paramétré les fichiers, zippez le tout.

Attention : votre fichier HTML principal doit être accessible dès la racine au moment de la compression. Ne regroupez pas ces fichiers dans un dossier au moment de la compression.

A vous de jouer ! ;-)

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !