Aller à : navigation, rechercher

Panotour - Avancé - Créer une barre de contrôle customisée

Introduction

Ce tutoriel est destiné aux utilisateurs de Panotour Pro qui souhaitent utiliser leurs propres icônes dans une barre de contrôle plutôt que les barres de contrôle offertes par défaut par le logiciel.

Ce tutoriel se basera sur une barre de contrôle pré-existante, en expliquant chaque élément composant une barre de contrôle, ainsi que la création des icônes pour les boutons.



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.


La barre de contrôle utilisée comme exemple dans ce tutoriel est disponible en téléchargement sur ​​notre page Extra Plugins.



Qu'est-ce qui compose une barre de contrôle ?

Comme tous les plugins être utilisés dans Panotour Pro, un plugin de barre de contrôle est composé de plusieurs fichiers:

  • Plug_info.xml - Ce fichier XML décrit le plugin et son interface contenant les paramètres qui seront affichés dans Panotour. Il décrit aussi beaucoup d'autres choses comme les dépendances, ou des ressources que vous souhaitez intégrer.
  • PluginName.tmpl - Ce fichier est un fichier template, vous pouvez le nommer comme vous le souhaitez, il sera appelé par plug_info.xml. Dedans, vous trouverez scripts Krpano, actions et XML personnalisé qui seront utilisés dans la visite.
  • Images pour chaque icône utilisée par la barre de contrôle
  • Dossier Ptpreview - Ce dossier contient l'image d'aperçu affiché dans Panotour Pro quand vous naviguez dans la bibliothèque de plugins.
  • Dossier Skins - Ce dossier n'est pas présent dans chaque modèle de barre de contrôle, mais tous les plugins de Panotour sont codées pour reconnaître et utiliser ce dossier Skins si elle est ajoutée à votre barre.

Note:
Certains fichiers supplémentaires en plus des icônes pour la barre de contrôle peuvent être présents dans le dossier modèle, certaines barres viennent avec des ressources graphiques supplémentaires (hotspots, images de fond) qui ne sont pas utilisés actuellement mais le seront peut-être dans le futur. Vous pouvez les supprimer ou les laisser dans le dossier, ces fichiers n'affecteront pas votre barre de contrôle.




Customisation de votre propre barre de contrôle

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 Plugins, et sélectionnez une barre de contrôle à copier (Ctrl+C). Dans ce didacticiel, nous allons nous baser sur la iControl Bar.


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 Plugins, et collez (Ctrl+V) le dossier de la barre de contrôle que vous avez copié, puis renommez-le. Dans mon exemple, je vais appeler ma nouvelle barre "CicrclesControlBar".


Etape 3 : Utiliser vos propres images

Nous allons commencer par analyser comment ces images sont utilisées.
Chaque image contient trois icônes, une pour trois états :

iControl bar info button

normal


au survol


au clic


Vous devrez créer une icône pour chaque état.
C'est ici qu'entrent en jeu vos connaissances en création de graphiques, nous n'expliquerons pas cela en détail. Modifiez chaque ficher en remplaçant chaque icône avec les vôtres et écrasez le fichier (vous devez utiliser le même nom de fichier pour que l'image soit reconnue comme faisant partie de la barre).

Ici j'ai remplacé toutes mes icônes et créée une barre de contrôle avec des icônes circulaires, en utilisant des icônes gratuites trouvées sur iconfinder.com (cliquez sur l'image pour l'agrandir, les deux autres états sont blanc) :

Circular control bar info icon

normal


au survol


au clic

Et ma barre finie ressemble à ceci avec tous les contrôles activés :

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 remplacé toutes les icônes, nous avançons vers la prochaine étape où il faut éditer le plug_info.xml.


Etape 4 : Editer le xml

Vous devez éditer le plug_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 textes


ID et Nom

Vous devez changer l'ID et le nom (la description est facultative) pour que la la barre puisse être ouverte et utilisée par PTP. L'ID doit être unique alors n'hésitez pas à être expressif.

  • La première ligne de la plug_info.xml sera :
<plugin id="controlBar_i" category="tr:Control Bar" name="tr:iControl Bar" description="tr:Allows your visitor to browse your tour and interact with widgets" version="2.0" isGraphical="true" multipleInstance="true">
  • Donc, pour ma barre CirclesControlBar cela devient :
<plugin id="CirclesControlBar" category="tr:Control Bar" name="tr:Circles Control Bar" description="tr:Allows your visitor to browse your tour and interact with widgets" version="2.0" isGraphical="true" multipleInstance="true">


Couleur

Ensuite, vous devrez modifier la couleur par défaut de vos icônes, de sorte à ce que lorsque la couleur est modifiée dans Panotour, la bonne couleur soit utilisée dans la visite. Cette option est facultative, si vous voulez que vos boutons restent de la même couleur, voir le 3e exemple de cette section.

L'information sur les couleurs se trouve plus bas dans le fichier, après l'attribut <resources>.

  • Ligne d'exemple pour l'icône info :
<file url="btn_info.png"                 color="color" baseColor="#b7ae9e" conditionalParam="displayinfo"          conditionalValues="true"/>
  • Remplacez le code de couleur hex (exemple: #ffffff = blanc) avec celui de la couleur que vous avez utilisé pour vos icônes pour que celle-ci soient colorisables. Dans mon cas, la couleur est #00cccc:
<file url="btn_info.png"                 color="color" baseColor="#00cccc" conditionalParam="displayinfo"          conditionalValues="true"/>
  • Si vous ne souhaitez pas que les icônes changent de couleur, alors vous pouvez tout simplement enlever les informations de couleur (peut être utile pour que l'icône ressorte plus) :
<file url="btn_info.png"                conditionalParam="displayinfo"          conditionalValues="true"/>

Une fois ces modifications faites, vous pourrez ouvrir le plugin dans Panotour Pro et utiliser la barre dans vos prochaines visites virtuelles.


(optional) Image d'aperçu

Vous pouvez modifier l'image d'aperçu affichée dans Panotour Pro.
L'image se trouve dans un répertoire nommé ptpreview.

Vous pouvez remplacer cette image avec la vôtre, mais certaines conditions doivent être maintenues :

  • L'image doit être nommée ptpreview.png
  • Si vous souhaitez avoir un aperçu animé, vous pouvez en ajouter plusieurs, dans ce cas là les noms seront ptpreview_1, ptpreview_2, etc...
  • L'image doit faire 280x94 pour être visualisée de manière optimale. Toute taille plus grande ou plus petite finira écrasée ou étirée dans l'interface.


(optional) Modification du fichier .tmpl

Voici quelques conseils pour personnaliser encore plus votre plugin, cette fois-ci vous allez éditer le fichier PluginName.tmpl, ou, dans le cas d'une barre basée sur la iControl Bar comme sur cette page, vous modifierez le fichier theme11.tmpl.
Tout comme le fichier .xml, ouvrez le ficher .tmpl dans un éditeur de texte.

  • Modifier la taille des boutons :

Ligne 8 - {% with 40 as button_width %} - 40 représente la taille du bouton en pixels, affiché dans la visite.

  • Modification de l'espacement entre les boutons :

Line 1267 - {% with 5 as button_margin %} - 5 représente la marge en pixels.


Notes:
Ces conseils et lignes correspondent à l'emplacement de l'information dans le theme11.tmpl, cette même information peut être située ailleurs dans le fichier si vous utilisez un autre modèle.
Les modifications de ce fichier peuvent affecter la façon dont fonctionne le plugin et s'il fonctionne, donc soyez prudents avec vos modifications.



(optional) Dossier Skins

Ce dossier n'est pas présent dans chaque modèle de barre de contrôle, mais tous les plugins de Panotour sont codées pour reconnaître et utiliser ce dossier Skins si elle est ajoutée à votre barre, donc il suffit de créer un dossier nommé skins avec le reste des fichiers de votre barre de contrôle.

Dans ce dossier, vous pouvez placer des icônes du même format que ceux utilisés par votre barre, et vous pourrez ensuite basculer facilement vers le skin depuis Panotour.
L'intérêt est simple, cela vous permet de remplacer quelques boutons sans avoir à éditer tous les boutons de la barre, ou de basculer entre plusieurs skins utilisant la même base sans avoir à créer plusieurs plugins pratiquement identiques.

  • Pour ajouter un nouveau skin, créez un dossier avec le nom de votre skin, et placez toutes vous nouvelles icônes dedans.
  • Voici un exemple. J'ai ajouté un skin "Smiley" à ma barre, qui remplacera l'icône info.
  • Après avoir redémarré Panotour, pour charger le skin :


Notes:
Si vous voulez que le skin soit colorisable, les nouvelles icônes doivent être de le même couleur que les icônes "principales" de la barre, car les skins n'ont pas de fichier plug_info.xml pour décrire leur couleur.
Les icônes doivent avoir les mêmes noms que les icônes principales, pour pouvoir les remplacer.
Bien sûr, le bouton dont vous souhaitez utiliser le nouveau skin doit être activé pour s'afficher dans la visite.
Le skin magnifique "Smiley" dans mon exemple n'est pas inclus quand vous téléchargez la barre de contrôle utilisée dans ce didacticiel.










RETOUR : Documentation / Documentation Panotour