Sommaire

Insérer du contenu HTML

Le composant HTML décloisonne les frontières de votre application et vous permet de passer à une nouvelle dimension. Que vous souhaitiez intégrer des contenus web, afficher des animations HTML5 (réalisées sous Edge Animate, …) ou bien insérer des notions de “gamification”, il y en a pour tous les goûts !

Et comme tout composant PandaStudio, vous pouvez le faire interagir avec les autres composants, lui placer des marqueurs... bref, faire votre propre arrangement pour réaliser tout ce que vous avez en tête !

1. Insérer du contenu HTML

Vous pouvez insérer du contenu HTML de type hors ligne ou en ligne :
- en ligne : indiquez l’URL de référence
- hors ligne : insérez le fichier .zip correspondant

Si vous insérez un .zip, attention à bien mettre vos fichiers à la racine : ils doivent être directement accessibles dès l’extraction pour pouvoir être utilisés. Ne regroupez pas vos fichiers dans un dossier au moment de la compression.

Lorsque vous insérez le composant HTML, une zone transparente se créé : c’est l’emplacement dans lequel se trouvera le contenu web visible que vous souhaitez afficher. S’il n’y a pas de rendu visible, cette zone restera alors transparente.

A noter : quand vous créez au sein de PandaStudio, cette zone reste statique étant donné qu’elle n’appelle pas de contenu HTML.

La fenêtre Propriétés vous donne accès aux fonctionnalités suivantes :

Propriétés HTML
  • Editer le HTML : pour définir des marqueurs au sein du code HTML (sous la forme d’ID) et pouvoir leur associer une action au sein de PandaStudio.

  • Type : choisissez entre hors ligne ou en ligne

  • Changer la source : (uniquement disponible pour du contenu hors ligne) vous permet de remplacer le fichier .zip utilisé

  • Page HTML principale / URL : en fonction du type de contenu choisi, choisissez le chemin principal pour accéder au contenu : la page HTML (.html) ou bien l’URL

  • Options : vous pouvez choisir d’activer l’option de zoom ou de défilement lorsque vous insérez un contenu visuel

Lorsque vous insérez un composant HTML, vous avez accès à deux déclencheurs basiques dans la fenêtre Interactivités : “Connecté (en ligne)” / “Déconnecté (hors ligne)”. Vous pouvez ainsi définir une action pour chacune de ces situations : par exemple, afficher un message d’information pour prévenir les utilisateurs lorsqu’ils sont hors ligne.

2. Interagir avec le contenu HTML

Cette partie s’adresse à ceux qui s’y connaissent un peu en code. Si vous vous sentez un peu perdu(e), faites-nous signe ! :-) Sinon, c’est parti !

Si vous souhaitez interagir avec le contenu HTML, il vous faut définir des marqueurs au sein de votre code (voir l’article Comprendre les marqueurs). Pour cela, nous vous mettons à disposition une librairie Javascript (PandaBridge) permettant de communiquer avec votre application.

Les marqueurs s’expriment sous la forme d’ID. Pour définir vos marqueurs, il faut définir un ID unique permettant au Javascript et à l’application de communiquer entre eux.

Il vous est également possible d’automatiser vos marqueurs directement au sein de vos fichiers en paramétrant le fichier .json.

Si vous souhaitez créer une synchronisation, vous devez faire appel à une fonction spécifique, “Synchronize”, dans laquelle les arguments correspondent au pourcentage de synchronisation.

Découvrez l’ensemble des fonctions utiles ci-dessous :

<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Vous devez inclure ce fichier javascript pour communiquer avec votre application PandaSuite -->
<script src="https://data.pandasuite.com/proxy/panda-bridge-1.0.0.min.js"></script>
<script type="text/javascript">
/* La fonction init sera le point d'entrée de votre programme */
PandaBridge.init(function() {
/* Vous pouvez envoyer des marqueurs à l'application */
PandaBridge.send('MARKER_ID_1');
/* Mais aussi en recevoir */
PandaBridge.listen('MARKER_ID_1', function() {
// Je viens de recevoir le marqueur MARKER_ID_1
});
/* Le même exemple avec une variable */
var callback = function() {
// Je viens de recevoir le marqueur MARKER_ID_2
};
PandaBridge.listen('MARKER_ID_2', callback);
/* J'écoute sur l'ensemble des marqueurs */
PandaBridge.listen(function(marker) {
// marker est le nom du marqueur reçu (MARKER_ID_1 par exemple)
});
/* Je peux décider d'arrêter de recevoir un certain marqueur un peu plus tard */
PandaBridge.unlisten('MARKER_ID_1');
PandaBridge.unlisten('MARKER_ID_2', callback);
/* Ou l'ensemble des marqueurs */
PandaBridge.unlisten();
/* Un peu de synchronisation ? */
/* On utilise la même fonction que pour envoyer avec le nom 'synchronize' */
PandaBridge.send('synchronize', [45]); // 45 correspond au pourcentage de progression
PandaBridge.listen('synchronize', function(args) {
// args[0] est le pourcentage de progression
});
});
</script>
</head>
<body>
</body>
</html>
view raw index-fr.html hosted with ❤ by GitHub
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Vous devez inclure ce fichier javascript pour communiquer avec votre application PandaSuite -->
<script src="https://data.pandasuite.com/proxy/panda-bridge-1.0.0.min.js"></script>
<script type="text/javascript">
/* La fonction init sera le point d'entrée de votre programme */
PandaBridge.init(function() {
/* Vous pouvez envoyer des marqueurs à l'application */
PandaBridge.send('MARKER_ID_1');
/* Mais aussi en recevoir */
PandaBridge.listen('MARKER_ID_1', function() {
// Je viens de recevoir le marqueur MARKER_ID_1
});
/* Le même exemple avec une variable */
var callback = function() {
// Je viens de recevoir le marqueur MARKER_ID_2
};
PandaBridge.listen('MARKER_ID_2', callback);
/* J'écoute sur l'ensemble des marqueurs */
PandaBridge.listen(function(marker) {
// marker est le nom du marqueur reçu (MARKER_ID_1 par exemple)
});
/* Je peux décider d'arrêter de recevoir un certain marqueur un peu plus tard */
PandaBridge.unlisten('MARKER_ID_1');
PandaBridge.unlisten('MARKER_ID_2', callback);
/* Ou l'ensemble des marqueurs */
PandaBridge.unlisten();
/* Un peu de synchronisation ? */
/* On utilise la même fonction que pour envoyer avec le nom 'synchronize' */
PandaBridge.send('synchronize', [45]); // 45 correspond au pourcentage de progression
PandaBridge.listen('synchronize', function(args) {
// args[0] est le pourcentage de progression
});
});
</script>
</head>
<body>
</body>
</html>
view raw index-fr.html hosted with ❤ by GitHub
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Vous devez inclure ce fichier javascript pour communiquer avec votre application PandaSuite -->
<script src="https://data.pandasuite.com/proxy/panda-bridge-1.0.0.min.js"></script>
<script type="text/javascript">
/* La fonction init sera le point d'entrée de votre programme */
PandaBridge.init(function() {
/* Vous pouvez envoyer des marqueurs à l'application */
PandaBridge.send('MARKER_ID_1');
/* Mais aussi en recevoir */
PandaBridge.listen('MARKER_ID_1', function() {
// Je viens de recevoir le marqueur MARKER_ID_1
});
/* Le même exemple avec une variable */
var callback = function() {
// Je viens de recevoir le marqueur MARKER_ID_2
};
PandaBridge.listen('MARKER_ID_2', callback);
/* J'écoute sur l'ensemble des marqueurs */
PandaBridge.listen(function(marker) {
// marker est le nom du marqueur reçu (MARKER_ID_1 par exemple)
});
/* Je peux décider d'arrêter de recevoir un certain marqueur un peu plus tard */
PandaBridge.unlisten('MARKER_ID_1');
PandaBridge.unlisten('MARKER_ID_2', callback);
/* Ou l'ensemble des marqueurs */
PandaBridge.unlisten();
/* Un peu de synchronisation ? */
/* On utilise la même fonction que pour envoyer avec le nom 'synchronize' */
PandaBridge.send('synchronize', [45]); // 45 correspond au pourcentage de progression
PandaBridge.listen('synchronize', function(args) {
// args[0] est le pourcentage de progression
});
});
</script>
</head>
<body>
</body>
</html>
view raw index-fr.html hosted with ❤ by GitHub

3. Exemples d’applications

a. Insérer une animation

Vous avez au préalable créé votre animation HTML5 sous Edge Animate (ou autre). Vous disposez alors d’un fichier .zip comprenant vos différents éléments.

Insérez votre composant HTML et double-cliquez dessus. Insérez votre fichier .zip. Rendez-vous dans la fenêtre PROPRIETES pour définir la page HTML principale.

b. S’adapter à la météo

Pour l’exemple, nous souhaitons faire évoluer un texte en fonction de la météo. Il existe 6 versions du texte, chacune correspond à un temps : elles sont placées au sein d’un composant Multi-état.

  • Interrogeons une API nous permettant de récolter les informations de météo, ici il s’agit du site “openweathermap”.
  • Nous configurons le fichier HTML en insérant les fonctions PandaBridge et automatisons les marqueurs par l’utilisation du .json.

Découvrez le paramétrage défini pour cet exemple sur Git Hub et téléchargez le fichier .zip correspondant.

  • Maintenant que les marqueurs sont définis, il est possible de configurer tout type d’actions, et notamment d’afficher un état spécifique du composant Multi-état.
Marqueurs HTML Interactivité HTML

c. Le stockage local

Pour ceux qui connaissent la propriété localStorage, vous pouvez l’utiliser au sein du composant HTML pour stocker des données localement (dans la tablette) au travers du navigateur. Les données sont gardées en mémoire même lorsque l’application est fermée et peuvent être réutilisées par la suite.

Vous pouvez ainsi récupérer la progression d’un utilisateur, débloquer des jeux …