Utiliser son propre thème graphique

De Autopano.

Sommaire


INTRODUCTION

Ce didacticiel s'adresse aux utilisateurs de Panotour Pro qui souhaiteraient utiliser leurs propres icônes en lieu et place de celles proposées par les 4 thèmes livrés avec Panotour Pro.
Il explique comment créer un thème graphique intégrable dans Panotour Pro.


PRÉ-REQUIS

  • Vous devez maîtriser les outils de création/modification d'icônes graphique (Illustrator, Photoshop...etc...).
  • Vous aurez à modifier des fichiers XML.

Même si aucune compétence en syntaxe XML n'est requise, vous ne devez pas "avoir peur" d'éditer un tel fichier.


GLOSSAIRE

Au cours de ce didacticiel, nous utiliserons fréquemment la notion de "menus" en référence aux "Barres de contrôle" proposées par Panotour Pro.


CRÉATION D’UN THÈME GRAPHIQUE

Nous vous conseillons de ne pas modifier les thèmes existant, mais plutôt de créer vos propres thèmes en partant d'une copie d'un de ces thèmes pour les raisons suivantes :

  • Au démarrage de Panotour Pro, celui-ci va aller écraser tous les modèles dont les droits d'accès sont en lecture seule.
  • Pour garantir une parfaite cohérence entre la version de Panotour Pro et les modèles que nous fournissons.


Copie d'un thème existant

Accès à la documentation des modèles


Via le menu Edition/Ouvrir le dossier des modèles/..., ouvrez le répertoire de description des thèmes graphiques : themes/

Image:Tutorial_ptp_theme_ptp_fr_menu.png


Par défaut, ce dossier contient 4 fichiers XML (2D.xml, 3DGlow.xml, basic.xml et sketch.xml), et un sous-répertoire graphics.
Chaque fichier XML contient la description du thème qui lui est associé. Panotour Pro charge ces fichiers pour proposer les menus, les paramètres par défaut ainsi que les hotspots des thèmes.

Image:Tutorial_ptp_theme_directory_content.png


  • Copiez le fichier 2D.xml et renommez-le en newTheme.xml.
  • Editez avec un éditeur de texte le fichier newTheme.xml, ce fichier commence par les lignes suivantes :


Image:Tutorial_ptp_theme_xml_file_content_01.png


  • Les 11 premières lignes (en bleu) sont des commentaires expliquant les paramètres des lignes utiles présentes en dessous. Vous pouvez les supprimer ou les conserver dans le nouveau fichier.
  • Pour que la copie du thème soit visible dans Panotour Pro, vous devez nommer ce thème d'un autre nom que 2D.
  • Changez donc les valeurs des champs name, text et tip :
    • Actuellement, Panotour Pro ne tient pas compte des valeurs des champs tip.
    • Le champ name est utilisé pour différencier ce thème des autres.
    • Le champ text sert à afficher le thème dans l'interface du logiciel, dans la liste des Thèmes.
  • Si vous souhaitez traduire le nom de votre nouveau thème dans une autre langue que le français ou l'anglais, vous pouvez rajouter une ligne caption.


Voici les premières lignes du fichier après ces changements :


Image:Tutorial_ptp_theme_xml_file_content_02.png


Si vous relancer Panotour Pro à ce stade, vous verrez ce "nouveau" thème apparaître dans la liste des Thème de l'onglet Propriétés du Projet/Apparence.
Cependant, celui-ci utilise encore les ressources graphiques du thème 2D, puisque pour l'instant, nous n'avons pas encore modifié le champ directory du fichier XML de description.
Ce champ indique le chemin où Panotour Pro trouvera les ressources graphiques du thème (dans le cas du thème 2D ces ressources sont dans le sous répertoire graphics/2DPURE).


  • Ouvrez le dossier graphics et dupliquez le répertoire 2DPURE, renommez ensuite cette copie en NewTheme.
  • Pour prendre en compte ce nouveau répertoire de ressources, éditez de nouveau le fichier newTheme.xml et remplacez le chemin dans le champ directory.


Le fichier newTheme.xml débute donc maintenant ainsi :


Image:Tutorial_ptp_theme_xml_file_content_03.png


Cette fois-ci, si vous relancez Panotour Pro, ce nouveau thème utilisera ses propres ressources graphiques (pour l'instant identiques à celles du thème 2D).


Modification des ressources graphiques

Le thème est maintenant en état de fonctionnement dans Panotour Pro, vous pouvez alors remplacer les éléments graphiques du thème que nous avons dupliqué par les vôtres.
Ouvrez le dossier graphics/NewTheme. Ce répertoire contient 14 représentations de boutons au format png, des écrans d'aide, et 2 sous-répertoires hotspots et menuPreviews :


Image:Tutorial_ptp_theme_graphics_new_directory_content.png


Modification des boutons

Les boutons du thème 2D que nos avons copiés sont des fichiers contenant 2 représentations, 2 états différents du bouton : l'état "normal" et l'état "au survol" du bouton.
Vos boutons doivent être positionnés comme le sont les boutons du thème 2D pour pouvoir être utilisés par les modèles de menu fournis par Panotour Pro :

  • L'un au-dessus de l'autre, centrés sur le même axe vertical.
  • Chaque bouton doit tenir dans un carré. Le fichier résultant sera donc un rectangle de ratio 1:2.


Remarque :

  • Les icônes du thème 2D font 65 pixels de large par 130 pixels de haut. Cette taille de 65 pixels est reconnue par défaut par Panotour Pro.
  • Si vous souhaitez créer ou utiliser des icônes d'une largeur différente, vous devrez modifier le fichier newTheme.xml pour y rajouter le paramêtre iconwidth.


Ainsi si vous utiliser des icônes de 32 pixels de large, la ligne de description générale du thème dans le fichier newTheme.xml devient :


Image:Tutorial_ptp_theme_xml_file_content_04.png


Sachez cependant que la taille finale des boutons dans la visite sera de 40 pixels. C'est la taille de visualisation qui est définie dans chacun des modèles de menu fournis avec Panotour Pro.
Il est donc conseillé de ne pas créer des boutons trop petits, au risque de dégrader leur qualité.


Remplacez les 14 boutons copiés par vos propres boutons, en prenant soin de conserver le même nom de fichier.
Le nom des fichiers représentant les boutons ne doit pas être modifié car ils sont référencés sous ce nom dans les modèles de menu.


Vous aurez surement remarqué en utilisant Panotour Pro que les thèmes que nous fournissons sont "coloriables".
Cette modification de teinte est totalement indépendante de la couleur d'origine des boutons, la couleur originale est conservée dans les fichiers source.


  • Si vous souhaitez que votre thème soit "coloriable" :

Vos icônes ne doivent contenir au moins une seule teinte autre que du noir et blanc (le noir et le blanc seront conservés tels quels et la teinte sera remplacée par la couleur choisie dans Panotour Pro).
La couleur que vous souhaitez appliquer par défaut doit être définie dans le champ defaultcolor, dans la ligne de description générale de votre thème.


Si vous souhaitez par exemple que la couleur par défaut soit le rouge, cette ligne devient :


Image:Tutorial_ptp_theme_xml_file_content_05.png


  • Si vous ne souhaitez pas que votre thème puisse être "colorié" :

Changez la valeur de la propriété customColor = "false" et supprimez le champ defaultcolor


Image:Tutorial_ptp_theme_xml_file_content_06.png


  • Vous pouvez aussi avoir envie de colorier certains boutons et de ne pas appliquer cette colorisation à d'autres :

Dans ce cas, la valeur de customColor doit être "true", et nous verrons comment spécifier les boutons à colorier dans la section concernant les menus utilisables avec votre thème.


Désormais, vous avez un thème avec vos propres boutons utilisables dans Panotour Pro. Bien que pour l'instant, Panotour Pro n'affiche pas correctement l'aperçu des boutons dans le logiciel, les boutons dans la visite générée sont les bons.


Modification des prévisualisations de menus

Pour que Panotour Pro affiche correctement une prévisualisation des différents menus proposés pour votre thème, vous devez créer ces prévisualisations.


Ouvrez le dossier menuPreviews qui se trouve dans le répertoire où sont les boutons que vous venez de modifier.
Ce répertoire menuPreviews contient les 30 fichiers de prévisualisations correspondant aux 30 menus proposés par Panotour Pro.


Image:Tutorial_ptp_theme_graphics_new_previews_directory_content.png


Si vous souhaitez avoir une prévisualisation correcte pour chacun des 30 menus, vous devrez modifier les 30 images présentes dans ce répertoire.
Cela dit, vous n'êtes pas tenu de procéder à cette étape pour le bon fonctionnement de votre thème lors de la visualisation de la visite, c'est uniquement un confort de travail DANS Panotour Pro.
Vous n'êtes pas non plus tenu de respecter une quelconque syntaxe de nommage des fichiers de prévisualisation car le lien entre ces fichiers et le menu correspondant est fait dans de fichier de description du thème. Nous verrons comment un peu plus loin. Cependant vu le nombre de fichier, nous vous conseillons de garder les mêmes noms que les fichiers que nous fournissons.


Modification des images d'aide

Les images d'aide utilisées dans les visites sont définies dans le même répertoire que les boutons.
Panotour Pro propose 3 images d'aide localisées, c'est à dire dans une langue donnée : Une en français, une en anglais et la dernière en allemand.
L'image d'aide est unique, elle ne s'adapte pas au menu sélectionné dans Panotour Pro.
Vous pouvez créez autant d'images d'aide que vous le souhaitez, nous verrons plus loin comment les associer à un menu.


Modification des spots

Les spots se trouvent dans le dossier hotspots.
Bien que le thème 2D ne propose dans Panotour Pro "que" 9 spots, le répertoire que nous avons copié contient 41 fichiers.
Ceci est dû au fait que, pour le thème 2D, les hotspots séquences sont créés à partir de plusieurs fichiers. Chaque fichier représente un état du spot au cours de la séquence


Image:Tutorial_ptp_theme_graphics_new_spots_directory_content.png


Remarque : Pour le thème Basic, nous avons pris l'option de décrire les spots séquentiels via un seul fichier. Dans ce cas, le fichiers représente verticalement les différents états du spot.


Nous verrons plus loin comment décrire ces 2 types de séquences dans le fichier de description du thème newTheme.xml.


  • Les hotspots que vous créerez peuvent êtres des fichiers image ou des fichiers flash.
  • Les GIF animés ne fonctionnent pas dans les visites en Flash. Bien qu'ils fonctionnent sur les visites sous iPad, nous les déconseillons car le rendu graphique est moins bon que pour une séquence d'images.


Vous n'êtes pas tenu de respecter une quelconque syntaxe de nommage des fichiers représentant les spots, excepté si vous décrivez un spot séquentiel sur plusieurs fichiers.
Dans ce cas, les fichiers représentant la séquence doivent être numérotés de 1 à n, où n représente le nombre de fichiers à utiliser pour une séquence complète.


Description des nouvelles ressources graphiques

Comme vous l'avez vu précédemment, il n'a pas été nécessaire de "décrire" les boutons dans le fichier de description newTheme.xml pour pouvoir être utilisés dans une visite.
Ce n'est pas le cas de toutes les ressources graphiques.
Cette section explique comment décrire les différentes ressources du thème dans le fichier newTheme.xml.


Menus utilisables avec ce thème

Le fichier newTheme.xml contient la liste des 30 menus avec lequel ce nouveau thème est compatible.
Si vous n'utilisez que certains menus parmis les 30 proposés par Panotour Pro, vous pouvez retirer les autres de la description du thème. Ainsi ces menus n'apparaitrons plus dans la liste des modèles de menu dans Panotour Pro.


Les menus compatibles avec le thème sont décrits de 2 manières différentes, qu'ils contiennent ou non le bouton permettant d'afficher l'écran d'aide.
Voici un exemple de description d'un menu sans le bouton d'aide. Elle tient sur une seule ligne :


Image:Tutorial_ptp_theme_xml_file_content_07.png


  • L'attribut file indique le fichier de description du menu avec lequel ce thème est compatible.
  • L'attribut preview indique le chemin de l'image de de prévisualisation du menu. Si vous avez renommé les fichiers de prévisualisations, vous devez changer la valeur de cet attribut.
  • L'attribut colorize indique la liste des "boutons" coloriables dans ce menu.
    • Si tous les boutons contenus dans votre thème sont coloriables, laissez "all" comme valeur pour cet attribut.
    • Si seulement certains boutons sont coloriables, alors ce champ doit lister les noms des plugins tels que définis dans le fichier décrit par l'attribut file, séparés par des points-virgules ";".


Par exemple, si seulement les boutons de navigation sont coloriables dans le menu précédent, la ligne de description du menu compatible devient :


Image:Tutorial_ptp_theme_xml_file_content_08.png


Voici maintenant un exemple de description d'un menu contenant un bouton d'aide :


Image:Tutorial_ptp_theme_xml_file_content_09.png


La seule différence avec le cas précédent est que la description du menu contient la liste des images d'aide utilisables pour ce menu.


  • L'attribut file indique le nom du fichier image qui va être utilisée comme écran d'aide. C'est ce nom de fichier qui va être affiché dans la liste "Ecran d'aide" de l'option "Barres de contrôle" dans Panotour Pro.
  • L'attribut caption n'est actuellement pas utilisé par Panotour Pro, mais devrait être le nom de l'écran d'aide tel qu'affiché dans Panotour Pro.
  • L'attribut lang indique la langue dans laquelle est écrit cet écran d'aide. L'écran d'aide qui sera sélectionné par défaut dans Panotour Pro est celui dont la langue est identique à celle de Panotour Pro, si bien sûr il existe.


Descriptions des hotspots

Le fichier newTheme.xml contient 9 descriptions de hotspots.


Ceci est la description d'un hotspot simple, juste un fichier image :


Image:Tutorial_ptp_theme_xml_file_content_10.png


  • L'attribut nbfile indique que ce spot est décrit sur 1 seul fichier
  • L'attribut file indique le chemin vers le fichier du spot
  • Les lignes caption donnent les différents nom du spot en fonction de la langue utilisée dans Panotour Pro
  • L'attribut colorizeable indique si le spot est coloriable ou non. Mettre cet attribut à false dans le cas d'un spot flash.


Pour indiquer que ce spot est le spot à proposer par défaut dans Panotour Pro sur un panorama, il faut lui ajouter l'attribut "default" et lui donner la valeur "pano".

Image:Tutorial_ptp_theme_xml_file_content_11.png


Pour indiquer que ce spot est le spot à proposer par défaut dans Panotour Pro sur un plan ou sur une carte PanotourMaps, il faut lui ajouter l'attribut "default" et lui donner la valeur "map".

Image:Tutorial_ptp_theme_xml_file_content_12.png


Un spot séquentiel dont chaque état est dans un fichier distinct est décrit de la manière suivante :

Image:Tutorial_ptp_theme_xml_file_content_13.png


  • L'attribut nbfile indique que ce spot séquentiel est décrit par 10 fichiers.
  • La valeur de l'attribut file indique toujours le chemin des fichiers du spot, mais de manière générique. Le chiffre contenu dans le nom du fichier et indiquant la place de cet état du spot dans la séquence est remplacé par %d.
  • L'attribut refreshPeriod indique le temps entre chaque changement d'état du spot.


Un spot séquentiel dont tous les états sont définis dans un seul fichier est décrit de la manière suivante :

Image:Tutorial_ptp_theme_xml_file_content_14.png


  • L'attribut nbframes indique le nombre d'états du spot représentés dans le fichiers.
  • L'attribut framewidth indique la largeur de l'icône représentant un état du spot.
  • L'attribut frameheight indique la hauteur de l'icône représentant un état du spot.


CONCLUSION

Si vous avez suivi toutes ces étapes, vous êtes maintenant à même de créer vos propres thèmes graphiques reposant sur les barres de contrôles proposées par Panotour Pro.
Nous verrons dans un autre didacticiel comment créer vos propres modèles de menus et d'interactions, pour obtenir ce genre de visites en sortie de Panotour Pro.








Support technique / Documentation Panotour Pro

Outils personnels