Aller à : navigation, rechercher

Panotour - Avancé - Créer des spots customisés

Introduction

Ce tutoriel est destiné aux utilisateurs de Panotour Pro qui souhaitent utiliser leurs propres hotspots depuis la librairie des spots de Panotour, au lieu de ceux proposés par défaut.
Ce tutoriel vous expliquera comment ajouter deux spots à Panotour, un spot animé et un spot image simple. Nous nous baserons sur deux hotspots pré-existant, en expliquant chaque élément composant les spots, ainsi que la création des images.



Conditions et notes

  • Vous devez posséder une licence Panotour Pro pour installer et utiliser des plugins customisés
  • Vous devez maîtriser les outils permettant la création et modification des icônes graphiques (Illustrator, Photoshop, Gimp, etc.).
  • Vous devez être en mesure de modifier les fichiers XML. Même si aucune connaissance de la syntaxe XML est nécessaire pour ce tutoriel, n’ayez aucune crainte à éditer ces fichiers. L'utilisation d'éditeurs de texte tels que Notepad ++ ou Sublimetext est recommandé pour visualiser et éditer correctement les fichiers XML.



Qu'est-ce qui compose un hotspot ?

Tout comme les plugins dans Panotour, les spots de la librairie des spots sont composés de plusieurs fichiers :

  • Dossier -nom-des-spots- - Vous placerez tous vos spots dans ce dossier. Créez un dossier par thème, par exemple.
  • Image(s) des spots
  • Spot_info.xml - Ce fichier XML décrit les spots, pour dire à Panotour s'ils sont animés ou non, et comment. Si vous avez plusieurs spots, ils seront tous décrit dans cet unique fichier XML.



Customisation de vos propres spots

Etape 1 : Copier un modèle

  • Lancez Panotour Pro.
  • Allez dans le menu Edition > Ouvrir le dossier des modèles. Ceci ouvrira une nouvelle fenêtre contenant tous les plugins et tout autre contenu disponible par défaut dans Panotour Pro.
  • Ouvrez le dossier Spots, et sélectionnez un style de spot à copier (Ctrl+C). Dans ce didacticiel nous allons nous baser sur les spots Black and Color spots, donc copiez le dossier nommé tuto.




Etape 2 : Coller et renommer le modèle

  • Retour dans Panotour Pro
  • Allez dans le menu Edition > Ouvrir le dossier de l'utilisateur. Ceci ouvrira une nouvelle fenêtre contenant tous les plugins et tout autre contenu que vous aurez ajouté à Panotour Pro.
  • Ouvrez le dossier Spots, et collez (Ctrl+V) le dossier de spot que vous avez copié, puis renommez-le. Dans mon exemple, mon dossier sera renommé "Triangles"



Etape 3 : Utiliser vos propres images

Nous allons commencer par analyser comment ces images sont utilisées dans les différent types de spots.
Dans le modèle que nous avons pris, il y a deux types d'image, un pour chaque type de spot : statique et animé.

  • Spot Animé

Le spot animé dans le modèle est nommé hotspot_animated.png. Il est composé de 10 frames qui font chacun 32x32 pixels, alignés verticalement. Vous devrez reprendre la même disposition pour vos propres spots.

  • Spot Statique

Le spot statique est nommé 'hotspot.png. Celui-ci est tout bonnement une image toute simple.
Panotour - 200 - Tutorial - CustomHotspot005.png


Vous pouvez recréer des spots en les utilisant comme base, ou simplement vous inspirer de l'agencement. Vous pouvez changer leur taille, ou dans le cas des spots animés, utiliser un nombre différent de frames. Il faudra simplement rapporter ces nouvelles informations dans le xml quand nous atteindrons cette étape.
C'est maintenant à vous de créer ou modifier vos spots. Une bonne source pour trouver des icônes est iconfinder.com. Pour mes nouveaux spots, je vais ré-utiliser des images qui étaient utilisées dans une ancienne version de Panotour mais ne sont plus utilisés actuellement.


Voici mes nouveaux spots :

  • Spot Animé

Il y a maintenant 14 frames, qui font 65x65 pixels par image, disposés sur une image à fond transparent de 910x65 pixels.

  • Spot Statique

Panotour - 200 - Tutorial - CustomHotspot008.png


Notes:
La création des icônes est ce qui prend le plus de temps dans ce didacticiel.
Si vous voulez que votre barre soit colorisable depuis Panotour, alors il faut que toutes vos icônes soient de la même couleur (privilégiez des couleurs vives comme le bleu ou rouge pour une intégration sans faille.
Des champs en blanc ou noir ne seront pas colorisables, et le resteront quelque soit la couleur choisie dans Panotour.



Maintenant que nous avons fini de créer nos spots, nous pouvons avancer vers la dernière étape qui consiste à éditer le spot_info.xml.



Etape 4 : Editer le xml

Vous devez éditer le spot_info.xml pour que le plugin puisse être utilisé par Panotour Pro, mais ce ne sont que quelques petits changements simples. Ouvrez le fichier dans un éditeur de texte.


Voici le spot_info.xml de notre modèle :

<spots id="ptp18tutorialspot" name="tr:Black and Color circles" version="1.0">
  <spot url="hotspot.png"                          baseColor="#ff6600" name="tr:Neutral"/>
  <spot url="hotspot_animated.png" type="sequence" baseColor="#ff6600" name="tr:Neutral" frames="10" frameWidth="32" frameHeight="32"/>
</spots>


Et voici comment chaque élément est utilisé :

  • ID

L'ID du plugin. Ceci est utilisé par Panotour pour identifier et utiliser le spot. L'ID doit être unique alors n'hésitez pas à être expressif.

  • name (dans les champs spots id)

Est utilisé dans Panotour quand vous choisisez votre spot, comme une sorte de nom de catégorie ou style. Les noms des spots sont en deux parties, celle-ci est la première.

  • url

Saisissez le nom de votre image.

  • type

Décrit le type de spot, image (statique) ou sequence (animé). Si votre spot est animé, Panotour ajoutera au nom du spot (Animation) ou (Séquence) selon la langue du logiciel.

  • baseColor

Décrit la couleur de base de vos spots si vous voulez que celles-ci soient colorisables dans Panotour.

  • name (dans la ligne du spot)

La seconde partie du nom du spot affiché dans la librairie des spots.

  • frames

Décrit le nombre de frames pour votre spot animé.

  • frameWidth/frameHeight

Décrit la hauteur (height) et largeur (width) de vos frames.


Avec toutes ces nouvelles informations en tête, voici mon spot_info.xml modifié pour mes nouveaux spots :

<spots id="triangleshotspots" name="tr:Triangles" version="1.0">
  <spot url="triangles_static.png"     type="image"        baseColor="#2680ff" name="tr:Direction"/>
  <spot url="triangles_sequence.png"   type="sequence"     baseColor="#2680ff" name="tr:Direction" frames="14" frameWidth="65" frameHeight="65"/>
</spots>

Et mes spots affichés dans la librairie des spots :
Panotour - 200 - Tutorial - CustomHotspot009.png


Quand vous aurez fini toutes ces modifications, vous pourrez lancer Panotour Pro et utiliser vos nouveaux spots dans vos prochaines visites virtuelles !










RETOUR : Documentation / Documentation Panotour