Créer ses propres modèles de thème

De Autopano.

Sommaire


INTRODUCTION

Ce didacticiel présente comment (à partir d'une visite donnée) réaliser les différents modèles qui vont permettre de générer d'autres visites avec Panotour Pro, en conservant les mêmes propriétés et sans avoir à retravailler les fichiers XML après génération de la visite, ou encore sans avoir à modifier les ressources graphiques.

Ce didacticiel s'adresse aux utilisateurs souhaitant aller au-delà des modèles de comportement et des modèles graphiques proposés par Panotour Pro, et qui ne veulent pas avoir à éditer les fichiers XML après génération d'une visite par Panotour Pro.


PRÉREQUIS

Il est préférable d'avoir lu le didacticiel concernant la création d'un thème graphique avant de lire celui-ci.

Une connaissance minimale de la syntaxe de description de krpano est nécessaire pour bien saisir les différents points de ce didacticiel.


DESCRIPTION DE LA VISITE


La visite virtuelle qui va servir de base à ce didacticiel peut être visualisée ici.
Cette visite a été créée avec Panotour Pro, puis, les fichiers XML ont été modifiés pour y rajouter des éléments de personnalisation.


Cette visite contient plusieurs éléments qui sont sujets à "modélisation" :

  • Une barre de boutons avec un positionnement particulier.



  • Une barre de progression spécifique.




  • L'utilisation de plugins externes :
    • Le plugin DoubleClick (développé par Aldo Hoeben) servant à entrer/sortir du mode plein écran.
    • Le plugin Textfield (développé par Klaus Reinfeld) utilisé pour afficher les "infobulles" de la barre de boutons.


  • Des actions permettant de changer de curseurs et de mode de contrôle de la visite.


DESCRIPTION DES DOSSIERS DE MODELES

Au cours de ce didacticiel, nous allons être amenés à nous déplacer au sein du dossier des modèles de Panotour Pro.
Pour trouver ce dossier sur votre système, ouvrez Panotour Pro et sélectionnez le menu Edition/Ouvrir le dossier des modèles.

Image:Tutorial_ptp_theme_ptp_fr_menu.png


Une fenêtre système s'ouvre, montrant le contenu du répertoire Templates :

Image:Tutorial_ptp_template_templates_directory.png


dossier html

Ce répertoire contient les modèles de pages HTML proposés par Panotour Pro dans l'onglet Génération.
Si un modèle HTML a besoin de fichiers supplémentaires, ces fichiers doivent être placés dans un sous-dossier portant le même nom que le fichier HTML.
Le contenu de ce sous-dossier sera recopié tel quel dans le répertoire ou sera générée la visite.

Image:Tutorial_ptp_template_html_directory.png


dossier menu

Ce répertoire contient les fichiers de description des fonctionnalités affichées dans la visite.
Par défaut, il contient 30 fichiers décrivant les différentes barres de boutons proposées par Panotour Pro.

Image:Tutorial_ptp_template_menu_directory.png


dossier progress

Ce dossier contient les descriptions XML des barres de progression proposées dans Panotour Pro, dans le champ Barre de progression.

Image:Tutorial_ptp_template_progress_directory.png


dossier textstyle

Ce dossier contient les descriptions des effets appliqués aux textes que propose Panotour Pro, dans le champ Texte, option Effet.

Image:Tutorial_ptp_template_textstyle_directory.png


dossier themes

Ce dossier contient les fichiers XML décrivant les thèmes proposés par Panotour Pro.
Chaque fichier contient la description des ressources graphiques du thème.

Image:Tutorial_ptp_template_themes_directory.png


dossier transition

Ce dossier contient les descriptions de chacune des transitions proposées par Panotour Pro, pour les hotspots liés à un panorama.

Image:Tutorial_ptp_template_transition_directory.png


CREATION DU MODELE DE MENU

Ici, nous souhaitons créer un modèle de menu et un modèle de thème à partir d'une visite existante. Le plus simple est de commencer par créer le modèle de menu, basé sur le code de la visite.
Le code de description de la visite se trouve ici : index.xml


Voici la portion de code (qui se trouve entre les 2 commentaires KrPano code of my own buttons) ajoutée par Panotour Pro après la génération :

<plugin name="dblclick" url="dblclick.swf" alturl="dblclick.js" keep="true" ondblclick="switch(fullscreen)"/>
<events onenterfullscreen="changefullscreenmenu();" onexitfullscreen="changefullscreenmenu();"/>
<action name="changefullscreenmenu">
if (fullscreen, set(plugin[fullscreenmenu].onhover, setmenutext(rightmenutxt, Exit Fullscreen);); , set(plugin[fullscreenmenu].onhover, setmenutext(rightmenutxt, Enter Fullscreen);); );
</action>
<events onxmlcomplete="changerotationmenu();"/>
<action name="changerotationmenu">
if (autorotate.enabled, set(plugin[rotationmenu].onhover, setmenutext(rightmenutxt, Stop Rotation);); , set(plugin[rotationmenu].onhover, setmenutext(rightmenutxt, Start Rotation);); );
</action>
<style name="menutxtstyle" url="textfield.swf" devices="flash" selectable="false" keep="true" height="30" background="false" textglow="4" textglowcolor="0x000000" x="0" y="55"/>
<plugin name="leftmenutxt" style="menutxtstyle" align="leftbottom" edge="leftbottom" css="p{color:#ff6600; font-family:Arial; font-size:20; margin-left:5; margin-right:5; text-align:left; }"/>
<plugin name="rightmenutxt" style="menutxtstyle" align="rightbottom" edge="rightbottom" css="p{color:#ff6600; font-family:Arial; font-size:20; margin-left:5; margin-right:5; text-align:right; }"/>
<action name="setmenutext">set(plugin[%1].html, [p] %2 [/p]);</action>
<action name="resetmenutext">set(plugin[%1].html, '');</action>
<plugin name="menudata" keep="true" mousetype="moveto" playsounds="true"/>
<plugin name="banner" url="banner.png" align="bottom" width="100%" keep="true" handcursor="false" capture="false" enabled="false" zorder="0"/>
<style name="leftstyle" keep="true" url="buttons.png" align="leftbottom" y="0" onout="resetmenutext(leftmenutxt);" onhover="setmenutext(leftmenutxt , get(tip));" zorder="1"/>
<style name="rightstyle" keep="true" url="buttons.png" align="rightbottom" y="0" onout="resetmenutext(rightmenutxt);" onhover="setmenutext(rightmenutxt, get(tip));" zorder="1"/>
<plugin name="zoomin" style="leftstyle" crop=" 0|0|44|44" onovercrop=" 0|44|44|44" ondowncrop=" 0|88|44|44" x="5" onup="set(fov_moveforce,0);" ondown="set(fov_moveforce,-1);" tip="Zoom In"/>
<plugin name="zoomout" style="leftstyle" crop=" 42|0|44|44" onovercrop=" 42|44|44|44" ondowncrop=" 42|88|44|44" x="45" onup="set(fov_moveforce,0);" ondown="set(fov_moveforce,+1);" tip="Zoom Out"/>
<plugin name="moveleft" style="leftstyle" crop=" 84|0|44|44" onovercrop=" 84|44|44|44" ondowncrop=" 84|88|44|44" x="85" onup="set(hlookat_moveforce,0);" ondown="set(hlookat_moveforce,-1);" tip="Move Left"/>
<plugin name="moveright" style="leftstyle" crop="126|0|44|44" onovercrop="126|44|44|44" ondowncrop="126|88|44|44" x="125" onup="set(hlookat_moveforce,0);" ondown="set(hlookat_moveforce,+1);" tip="Move Right"/>
<plugin name="moveup" style="leftstyle" crop="168|0|44|44" onovercrop="168|44|44|44" ondowncrop="168|88|44|44" x="165" onup="set(vlookat_moveforce,0);" ondown="set(vlookat_moveforce,-1);" tip="Move Up"/>
<plugin name="movedown" style="leftstyle" crop="210|0|44|44" onovercrop="210|44|44|44" ondowncrop="210|88|44|44" x="205" onup="set(vlookat_moveforce,0);" ondown="set(vlookat_moveforce,+1);" tip="Move Down"/>
<plugin name="rotationmenu" style="rightstyle" crop="255|0|44|44" onovercrop="255|44|44|44" ondowncrop="255|88|44|44" x="165" onclick="playorstoprotation();" tip="Stop Rotation"/>
<plugin name="sound" style="rightstyle" crop="298|0|44|44" onovercrop="298|44|44|44" ondowncrop="298|88|44|44" x="125" onclick="playorstopsounds();" tip="Stop Sounds"/>
<plugin name="dragmode" style="rightstyle" crop="342|0|44|44" onovercrop="342|44|44|44" ondowncrop="342|88|44|44" x="85" onclick="changemousetype();" tip="Change Navigation Mode"/>
<plugin name="showhelp" style="rightstyle" crop="386|0|44|44" onovercrop="386|44|44|44" ondowncrop="386|88|44|44" x="45" onclick="displayHelp();" tip="Help"/>
<plugin name="fullscreenmenu" style="rightstyle" crop="429|0|44|44" onovercrop="429|44|44|44" ondowncrop="429|88|44|44" x="5" onclick="switch(fullscreen);" tip="Enter Fullscreen"/>
<action name="playorstoprotation">
switch(autorotate.enabled); changerotationmenu();
</action>
<action name="playorstopsounds">
switch(plugin[menudata].playsounds); 
if (plugin[menudata].playsounds, playsoundaction(); set(plugin[sound].onhover, setmenutext(rightmenutxt, Stop Sounds);); , stopsoundaction(); set(plugin[sound].onhover, setmenutext(rightmenutxt, Play Sounds);); );
</action>
<action name="changemousetype">
if (plugin[menudata].mousetype == moveto, set(plugin[menudata].mousetype, drag2d); , set(plugin[menudata].mousetype, moveto); ); 
setMouseType(get(plugin[menudata].mousetype));
</action>
<action name="setMouseType">
set(control.mousetype, %1); if (%1 == moveto, setarrowcursors();, sethandcursors(););
</action>
<!-- Change Cursors Appearance -->
<action name="setarrowcursors">
set(cursors.url, arrowcursors.png); 
set(cursors.type , 8way); 
set(cursors.move , 0|0|20|20); 
set(cursors.drag , 0|0|20|20); 
set(cursors.arrow_l , 20|0|20|20); 
set(cursors.arrow_lu, 40|0|20|20); 
set(cursors.arrow_u , 60|0|20|20); 
set(cursors.arrow_ru, 80|0|20|20); 
set(cursors.arrow_r , 100|0|20|20); 
set(cursors.arrow_rd, 120|0|20|20); 
set(cursors.arrow_d , 140|0|20|20); 
set(cursors.arrow_ld, 160|0|20|20);
</action>
<action name="sethandcursors">
set(cursors.url, handcursors.png); set(cursors.type, 2way); set(cursors.move, 0|0|32|32); set(cursors.drag, 32|0|32|32);
</action>
<events onnewpano="newPanoIsLoadedAction"/>
<action name="newPanoIsLoadedAction">setMouseType(get(plugin[menudata].mousetype));</action>
<plugin name="helpScreen" align="center" customColor="true" keep="true" onclick="closeHelp();" url="help.png" visible="false"/>
<action name="displayHelp">
set(plugin[helpScreen].visible,true); set(plugin[showhelp].onclick,closeHelp();)
</action>
<action name="closeHelp">
set(plugin[helpScreen].visible, false); set(plugin[showhelp].onclick, displayHelp();)
</action>


Création du fichier de description du nouveau menu

  • Ouvrez le dossier Templates/menu, et créez un nouveau fichier nommé tutorialthememenu.xml.
  • Editez ce fichier :
    • Un fichier de description de menu doit avoir comme balise principale "menu", et doit contenir un titre lui permettant d'être affiché dans Panotour Pro.
    • Commençons alors à remplir le fichier tutorialthememenu.xml par ceci :
<menu>
    <translation>
        <caption lang="fr" text="Zoom - Navigation - Rotation - Sound - Control - Help - FullScreen"/>
        <caption lang="en" text="Zoom - Navigation - Rotation - Sound - Control - Help - FullScreen"/>
    </translation>



</menu>


Remarque :

  • Il est possible d'ajouter autant de lignes caption que vous souhaitez de traductions du titre du thème.
  • Le champ lang doit avoir comme valeur la représentation de la langue utilisée (en, fr, ru, de, pt, es, etc...) dans le champ text.


Nous insérons ensuite la totalité du code ajouté dans la visite (décrit ci-dessus) avant la balise de fin du fichier.
Ce fichier, tel quel, pourrait déjà être utilisé dans PTP s'il était associé à un thème.
Cependant, cela nécessiterait de recopier à la main toutes les ressources du thème après la génération de la visite.
Nous allons voir comment spécifier les ressources à inclure dans la visite.


Précision des chemins des ressources

Chemins des images

Dans le code ci-dessus 5 images sont utilisées :

    <plugin name="banner" url="banner.png"  align="bottom" width="100%" keep="true" handcursor="false" capture="false" enabled="false" zorder="0"/>
    <style name="leftstyle"  keep="true" url="buttons.png" align="leftbottom"  y="0" onout="resetmenutext(leftmenutxt);"  onhover="setmenutext(leftmenutxt , get(tip));" zorder="1"/>
    <style name="rightstyle" keep="true" url="buttons.png" align="rightbottom" y="0" onout="resetmenutext(rightmenutxt);" onhover="setmenutext(rightmenutxt, get(tip));" zorder="1"/>
      set(cursors.url, arrowcursors.png);
      set(cursors.url, handcursors.png);
    <plugin name="helpScreen" align="center" customColor="true" keep="true" onclick="closeHelp();" url="help.png" visible="false"/>


Nous allons inclure ces images dans le thème que nous créerons plus loin dans ce didacticiel.
Ajoutons le tag $(STYLEDIR) devant chaque image dans le code, pour que Panotour Pro sache que ces images proviennent d'un thème et qu'il doit les recopier de ce thème vers la visite.
Ce tag sera remplacé à l'exécution de PTP par le chemin de l'image dans la visite.
Voici les modifications apportées :

  • banner.png
    <plugin name="banner" url="$(STYLEDIR)/banner.png"  align="bottom" width="100%" keep="true" handcursor="false" capture="false" enabled="false" zorder="0"/>
  • buttons.png
    <style name="leftstyle"  keep="true" url="$(STYLEDIR)/buttons.png" align="leftbottom"  y="0" onout="resetmenutext(leftmenutxt);"  onhover="setmenutext(leftmenutxt , get(tip));" zorder="1"/>
    <style name="rightstyle" keep="true" url="$(STYLEDIR)/buttons.png" align="rightbottom" y="0" onout="resetmenutext(rightmenutxt);" onhover="setmenutext(rightmenutxt, get(tip));" zorder="1"/>
  • arrowcursors.png
      set(cursors.url, $(STYLEDIR)/arrowcursors.png);
  • handcursors.png
      set(cursors.url, $(STYLEDIR)/handcursors.png);
  • help.png
    <plugin name="helpScreen" align="center" customColor="true" keep="true" onclick="closeHelp();" url="$(HELPSCREEN)" visible="false"/>

Cas particulier de l'écran d'aide help.png :
Ce fichier contient du texte que vous pourriez avoir envie d'internationaliser. Dans ce cas cette image, incluse dans votre thème, existera en plusieurs versions.
Pour que Panotour Pro sache quelle version aller chercher, cette image doit être décrite de manière particulière dans le thème et dans ce menu.
Il faut ici remplacer le nom du fichier par le tag $(HELPSCREEN).
C'est le thème et vous-même, au cours de l'utilisation de Panotour Pro, qui choisirez quelle image (parmi celles existantes) doit remplacer ce tag.


Chemins des plugins externes

Le code de la visite contient 2 plugins externes représentés par 3 fichiers :

  • DoubleClick: dblclick.swf et dblclick.js
    <plugin name="dblclick" url="dblclick.swf" alturl="dblclick.js" keep="true" ondblclick="switch(fullscreen)"/>
  • TextField : textfield.swf
    <style name="menutxtstyle"  url="textfield.swf" devices="flash" selectable="false" keep="true" height="30" background="false" textglow="4" textglowcolor="0x000000" x="0" y="55"/>


Il y a 2 manières d'inclure ces plugins dans une description de menu :

1. Soit vous incluez ces plugins dans le même thème que les images, dans ce cas le tag $(STYLEDIR) doit être utiliser comme pour les images.

  • DoubleClick
    <plugin name="dblclick" url="$(STYLEDIR)/dblclick.swf" alturl="$(STYLEDIR)/dblclick.js" keep="true" ondblclick="switch(fullscreen)"/>
  • TextField
    <style name="menutxtstyle"  url="$(STYLEDIR)/textfield.swf" devices="flash" selectable="false" keep="true" height="30" background="false" textglow="4" textglowcolor="0x000000" x="0" y="55"/>


2. Soit pour des raisons de maintenance (par exemple, si vous préférez conserver tous vos plugins externes dans un même dossier sur votre système et ne pas les inclure au thème).
Dans ce cas, préfixez le nom de chacun des plugins par le chemin local sur votre disque où trouver les fichiers. Ainsi si les plugins sont dans le répertoire d:/myTourPlugins/, les lignes précédentes deviennent :

  • DoubleClick
    <plugin name="dblclick" url="d:/myTourPlugins/dblclick.swf" alturl="d:/myTourPlugins/dblclick.js" keep="true" ondblclick="switch(fullscreen)"/>
  • TextField
    <style name="menutxtstyle"  url="d:/myTourPlugins/textfield.swf" devices="flash" selectable="false" keep="true" height="30" background="false" textglow="4" textglowcolor="0x000000" x="0" y="55"/>


Panotour Pro remplacera ce chemin local par le chemin du plugin dans la visite, après avoir recopié le plugin dans la visite.
Pour des raisons pratiques, nous avons inclus les plugins dans le thème décrit plus bas (première solution).


Barre de progression

Il y a deux moyens de déclarer une barre de progression dans les modèles de Panotour Pro :

  • Si votre barre de progression est suffisamment générique, vous pouvez avoir envie de l'utiliser quel que soit le modèle de menu sélectionné dans Panotour Pro. Dans ce cas, il vous faudra décrire un nouveau modèle de barre de progression dans le sous-répertoire progress.
  • La barre de progression qui nous intéresse est positionnée juste au-dessus de la barre de boutons et sa couleur est identique à celle des différents éléments de la visite. Elle fait donc partie intégrante du modèle que nous sommes en train de développer. La barre de progression utilisée dans la visite précédente est décrite dans chaque panorama par la ligne suivante :
    <progress showload="bar(midbottom, 100%, 2, 0, 55, shaded, 0x0a0a0a, 0xff6600, 0xff6600, 0x9f9f9f, 0, 0x9f9f9f, 0)" showreloads="true" showwait=""/>


Il suffit de recopier cette ligne dans le fichier modèle que nous sommes en train de créer pour qu'elle puisse être utilisée par Panotour Pro. Panotour Pro recopiera cette ligne dans chacun des fichiers décrivant un panorama.


Précision des couleurs choisies dans Panotour Pro

Jusqu'à présent, nous avons décrit un modèle de boutons, curseurs, plugins, etc... dont tous les éléments sont oranges.
Bien que la barre de bouton que nous avons décrite peut-être utilisée dans différentes visites, sa couleur n'est pas forcément la plus passe-partout.


Panotour Pro permet à l'utilisateur de paramétrer la couleur utilisée pour un thème et un menu (via un champ de saisie de couleur).
Cette couleur s'appliquera à toutes les ressources "coloriables" du thème. Nous verrons plus loin comment décrire ces images dans un thème.


Dans le cas qui nous intéresse, nous devons colorier des éléments qui ne font pas partie du thème graphique : les textes d'info-bulles au dessus des boutons et la barre de progression.
Pour ce faire, nous remplaçons la couleur orange (0xff6600) du modèle, par le tag $(THEME_COLOR_RRGGBB).

  • La barre de progression est alors décrite comme suit :
	<progress showwait="" showload="bar(midbottom, 100%, 2, 0, 55, shaded, 0x0a0a0a, 0x$(THEME_COLOR_RRGGBB), 0x$(THEME_COLOR_RRGGBB), 0x9f9f9f, 0, 0x9f9f9f, 0)" showreloads="true"/>
  • Et les info-bulles comme ceci :
    <plugin name="leftmenutxt"  url="$(STYLEDIR)/textfield.swf" devices="flash" align="leftbottom"  x="0" y="55" edge="leftbottom"  selectable="false" keep="true" height="30" background="false" css="p{color:#$(THEME_COLOR_RRGGBB); font-family:Arial; font-size:20; margin-left:5; margin-right:5; text-align:left; }" textglow="4" textglowcolor="0x000000" />
    <plugin name="rightmenutxt" url="$(STYLEDIR)/textfield.swf" devices="flash" align="rightbottom" x="0" y="55" edge="rightbottom" selectable="false" keep="true" height="30" background="false" css="p{color:#$(THEME_COLOR_RRGGBB); font-family:Arial; font-size:20; margin-left:5; margin-right:5; text-align:right; }" textglow="4" textglowcolor="0x000000" />


CREATION DU MODELE DE THEME

Le didacticiel Utiliser son propre thème graphique explique comment créer son propre thème graphique utilisant un modèle de barres de boutons existant.
Ici, le thème que nous avons à créer est beaucoup plus simple car il contient très peu de ressources graphiques et n'est compatible qu'avec le modèle de menu que nous venons de créer.


Dans le sous répertoire themes, nous allons créer le fichier tutorialtheme.xml qui contiendra la description du thème.
Dans le sous-répertoire themes/graphics, nous créons le répertoire TutorialTheme qui va contenir les ressources graphiques du thème.
Nous copions ensuite l'intégralité des ressources graphiques utilisées par le thème dans le répertoire des ressources :

Image:Tutorial ptp template resources directory.png


Dans le fichier de description du thème, nous n'avons que très peu de choses à renseigner :

  • Les informations générales (nom du thème, répertoire des ressources, couleur par défaut) :
	<PTTheme name="TutorialTheme" directory="./graphics/TutorialTheme" customColor="true" defaultcolor="#ff6600">
		<translation>
			<caption lang="fr" text="Tutorial Theme" tip="Tutorial Theme"/>
			<caption lang="en" text="Tutorial Theme" tip="Tutorial Theme"/>
		</translation>


  • Le modèle de menu compatible avec ce thème (fichier XML du modèle, image de prévisualisation à utiliser dans Panotour Pro, éléments "coloriables" et l'écran d'aide) :

Remarque : Nous ne voulons pas colorier toutes les ressources du thème, nous devons donc préciser la liste des éléments coloriables.
Les éléments coloriables du menu sont les noms des "plugins", des "styles" et des "actions" contenant une "url" d'une ressource coloriable.

	<menus>
		<menu file="tutorialthememenu.xml" preview="buttons.png" colorize="leftstyle;rightstyle;setarrowcursors;helpScreen">
			<helpscreens>
				<helpscreen file="help_en.png" caption="Help" lang="en"/>
			</helpscreens>
		</menu>
	</menus>


  • Les hotspots que ce thème contient (nous en avons 2, une icône simple, et une séquence animée) :
	<hotspottypes>
		<hotspottype default="map" nbfile="1" file="map_spot_tuto.png" colorizeable="true">
			<translation>
				<caption lang="fr" text="Tutorial map spot"/>
				<caption lang="en" text="Tutorial map spot"/>
			</translation>
		</hotspottype>
		<hotspottype default="pano" nbfile="1" file="hotspots/hotspot_tuto.png" nbframes="10" colorizeable="true" framewidth="32" frameheight="32">
			<translation>
				<caption lang="fr" text="Tutorial Animated Sequence"/>
				<caption lang="en" text="Tutorial Animated Sequence"/>
			</translation>
		</hotspottype>
	</hotspottypes>


CONCLUSION

Les modèles que nous venons de créer peuvent désormais être utilisés dans Panotour Pro pour générer des visites comme celle-ci, ne nécessitant aucun travail après leur génération.


Pour pouvoir ré-utiliser ces modèles :

  • Télécharger une archive zip contenant ces modèles ici : KolorTutorialTemplates.zip.
  • Ouvrez Panotour Pro.
  • Sélectionnez le menu "Edition/Ouvrir le dossier des modèles".
  • Copiez l'archive dans ce dossier.
  • Dézippez l'archive.
  • Relancez Panotour Pro.








Support technique / Documentation Panotour Pro

Outils personnels