Ajout de contenus multimédia dans Chimère

Cette page est un petit guide qui recense les différentes modifications à réaliser pour permettre l'utilisation de fichiers vidéos, audios ou flash (panoptisons) dans Chimère. Ces fichiers multimédia sont rendus visibles à l'aide de balise html5.

Voici la marche à suivre:

On commence par ajouter les catégories et sous catégories qui seront utilisée pour classer les différents points d'intérêts, cette étape est facultative mais elle permettra de faciliter le trie des POI sur la carte

• Ajout d'une catégorie “Média”
• Ajout des sous catégories:
  1. “Vidéo”
  2. “Audio”
  3. “Flash”

L'étape suivante consiste à ajouter 3 nouveaux modèles de propriétés, un pour chacune des sous catégories, on fera attention à l'ordre de déclaration des propriété car c'est sur cet ordre que nous allons jouer pour afficher les bons players

• Ajout des modèles de propriété:
  1. “Vidéo (ogv)” → ordre 2
  2. “Audio (ogg)” → ordre 3
  3. “Flash (swf)” → ordre 4

Ici mon numéro d'ordre commence à 2 car je dispose déjà d'un modèle “Description” permettant de décrire le point à l'aide d'un texte. Chaque modèle de propriété est déclaré avec un type “Texte” (simple champ input)

L'étape suivante consiste à modifier le code de certains fichiers utilisés par l'application pour permettre l'affichage des players multimédia en fonction des modèles de propriétés créés précédemment.

templates/detail.html: Nous allons modifier le template d'affichage des détails d'un point d'intérêt. Cette modification va permettre de générer un player en fonction du modèle de propriété appelé (son identifiant), évidemment il reste possible d'écrire directement le code html complet dans une propriété de type “texte long” mais ceci nécessite de bien maitriser la syntaxe html:

• chercher le bloc suivant

{% for property in marker.getProperties %}
  <p id='{{property.propertymodel.getNamedId}}'>
    {{ property.value|sanitize:"p b i br hr strong em span:style a:href:target ul li ol h1 h2 h3 h4"|safe}}
  </p>
{% endfor %}

• remplacez le par celui-ci:

{% for property in marker.getProperties %}
  {% if property.value %}
    {% ifequal property.propertymodel.getNamedId  "property_1_1" %}
      <p id='{{property.propertymodel.getNamedId}}'>
        {{ property.value|sanitize:"p b i br hr strong em span:style a:href:target ul li ol h1 h2 h3 h4"|safe}}
      </p>
    {%endifequal%}
    {% ifequal property.propertymodel.getNamedId  "property_2_2" %}
      <video controls autobuffer autoplay='autoplay' width='300' height='240' >
        <source type='video/ogg' src='<nowiki>{{ property.value}}</nowiki>' />
      </video>
    {%endifequal%}
    {% ifequal property.propertymodel.getNamedId  "property_3_3" %}
      <audio controls="controls" autoplay="autoplay" preload="auto">
        <source src="<nowiki>{{ property.value}}</nowiki>" type="audio/ogg" />
      </audio>
    {%endifequal%}
    {% ifequal property.propertymodel.getNamedId  "property_4_4" %}
      <embed src="<nowiki>{{ property.value}}</nowiki>" width="300" height="240">
    {%endifequal%}
  {% endif %}
{% endfor %}

static/main_map.js: Ici il s'agit de modifier le code javascript d'affichage de la carte pour changer le comportement du clique sur l'infobulle. Cette modification n'est pas utile sur la carte principale, les détails du points n'étant pas affichés dans l'infobulle, mais si l'on passe sur la version simple de la carte il devient nécessaire d'empécher la fermeture de l'infobulle lorsque l'on clique dessus (les menus des différents players n'étant accessible que depuis l'infobulle)

• Chercher les lignes suivantes (ligne 137 - 138):

/* hide on click on the cloud */
currentPopup.groupDiv.onclick = hidePopUp;

• Commenter la seconde ligne:

/* hide on click on the cloud */
/* currentPopup.groupDiv.onclick = hidePopUp; */

That's All Folks …