Aller à : navigation, rechercher

Panotour - Avancé - Modèles HTML

Icon attention.pngIcon attention.png WIP Icon attention.pngIcon attention.png

INTRODUCTION

Sur cette page, nous apprendrons comment utiliser les différents modèles HTML que fourni Panotour Pro, et comment améliorer l'expérience utilisateur grâce au design web.
Cette notion avancée requiert des connaissances en HTML, CSS et JS.

Les avantages d'un modèle HTML :

  • Interactivité améliorée : Déclenchez des actions à l'extérieur du conteneur HTML de la visite virtuelle.
  • Meilleure expérience utilisateur
  • Personnalisation et créativité illimitée de la page web finale contenant la visite.
  • Une interaction plus responsive pour les petits écrans.


Comment ajouter un Modèle HTML

Les fichiers de modèle HTML sont à placer dans le dossier de l'utilisateur Panotour Pro.
Pour trouver ce dossier, lancez Panotour Pro et allez dans Edition > Ouvrir le dossier de l'utilisateur.


Panotour Documentation-interface8.jpg


Vous pouvez ajouter autant de modèles HTML dans ce dossier que vous le désirez.
En ouvrant un explorateur de fichiers, le chemin de fichier ressemblera à :

C:\Users\username\Documents\Kolor\PanotourPro 2\html

Ce dossier est vide par défaut. Une fois que vous aurez ajouté des modèles HTML, ceux-ci apparaîtront en plus des deux fournis par défaut, dans le menu déroulant pour les modèles HTML dans l'onglet Génération de Panotour Pro.

Ptp2 HTML Templates Drop Down Menu.png


Comment créer un modèle HTML pour Panotour

Actuellement, le moyen conseillé pour créer vos propres modèles est de vous baser sur les deux modèles existant dans Panotour. Pour les retrouver, lancez Panotour Pro et allez dans Edition > Ouvrir le dossier des modèles. Le chemin de fichier ressemblera à :

C:\Program Files\Kolor\Panotour Pro 2.1\Resources\html

Ptp2 HTML Templates Default HTML Files in Explorer.png


EXEMPLES DE MODÈLES HTML PERSONNALISÉS

Téléchargement

Voici quelques exemples de modèles HTML personnalisés. Cliquez sur les liens en gras pour les télécharger :

  • Html_Custom_Templates.zip contient 3 modèles génériques HTML démontrant la flexibilité du moteur Panotour, et 3 modèles HTML responsives basés sur Twitter Bootstrap :
    • Générique :
    • Basé Bootstrap :
  • Bootstrap External Commands with Colors.zip contient un plugin qui permet à vos modèles HTML d'intéragir plus avec les données de votre projet (dans ces exemples, les couleurs de votre projet), et 3 modèles HTML responsives:



Modèles Génériques

Generic Hierarchical Tree

Fichier:Ptp2 HTML Templates generic hierarchical tree.jpg
Hierarchical Tree: An example of custom HTML template for Panotour Pro

  • A two columns template with a small left column on the left containing the groups and the panoramas links.
  • A main column displaying the virtual tour.
  • This template is a basic customization but demonstrates the flexibility of the Panotour Pro template engine.

Launch example tour


Generic Thumbnails Left

Fichier:Ptp2 HTML Templates generic thumbs left.jpg
Thumbnails Left: An example of custom HTML template for Panotour Pro

  • A two columns template with a small left column on the left containing the thumbnails and the panoramas titles that link to the virtual tour.
  • A main column displaying the virtual tour.
  • This template is a basic customization but demonstrates the flexibility of the Panotour Pro template engine.

Launch example tour


Generic Thumbnails Under

Fichier:Ptp2 HTML Templates generic thumbs under.jpg
Thumbnails Under: An example of custom HTML template for Panotour Pro

  • A single column template with a bottom row containing the thumbnails that link to the panoramas in the virtual tour.
  • A main column displaying the virtual tour.
  • This template is a basic customization but demonstrates the flexibility of the Panotour Pro template engine.

Launch example tour


Modèles basés sur Twitter Bootstrap

Bootstrap Top Navbar - Responsive Template

Fichier:Ptp2 HTML Templates bootstrap top navbar.jpg
Bootstrap Top Navbar: An example of custom HTML template for Panotour Pro

  • A responsive design based on Bootstrap
  • A simple full page design with a responsive top navigation bar that link to the panoramas in the virtual tour.

Launch the example tour (Resize your browser to see the responsive behavior working)


Bootstrap Thumbs Left - Responsive

Fichier:Ptp2 HTML Templates bootstrap thumbs left.jpg
Bootstrap Thumbnails Left: An example of custom HTML template for Panotour Pro

  • A responsive design based on Bootstrap
  • A page design with a responsive left column containing the thumbnails that link to the panoramas in the virtual tour.
  • Resize your browser to see the responsive design working: Left column disappear on small devices to be replaced by a top navigation bar.

Launch the example tour (Resize your browser to see the responsive behavior working)


Bootstrap Thumbs Under - Responsive

Fichier:Ptp2 HTML Templates bootstrap thumbs under.jpg
Bootstrap Thumbnails Under: An example of custom HTML template for Panotour Pro

  • A responsive design based on Bootstrap
  • A page design with a responsive bottom row containing the thumbnails that link to the panoramas in the virtual tour.
  • Resize your browser to see the responsive design working: Bottom row will disappear on small devices to be replaced by a top navigation bar.

Launch the example tour (Resize your browser to see the responsive behavior working)



Modèles basés sur Twitter Bootstrap utilisant les Couleurs du Projet

Here is a small collection of responsive templates based on the project colors (Project Properties > Display > Colors).


Installation

Fichier:Ptp2 HTML Templates Bootstrap External Commands Plugin.png
The Bootstrap External Commands Plugin in the plugins library / HTML Templates section

The following templates require an additional plugin called "Bootstrap_External_Commands" to work properly, which is included into the download .zip.
Remember to always include the Bootstrap_External_Commands plugin into each project exported with these templates. Otherwise your tour will not work properly.


Bootstrap Full Page with Project Colors

Fichier:Ptp2 HTML Templates bootstrap full page.jpg
Example with light grey foreground and dark blue background

  • A responsive design based on Bootstrap
  • This responsive template is based on the project colors.
  • The tour is displayed in a full page mode with the control bar above.
  • Responsive top navigation bar.
  • Depending to the foreground and background colors of your project, results may be completely different.
  • The control bar is customized by the template.
  • You can toggle the thumbnails bar on and off.
  • Drag the thumbnails bar with your mouse.
  • The info button displays a modal box with the current panorama title, description, breadcrumb and group description.
  • Controls: Previous Next panoramas, Start Stop autorotation, Zoom in and out, Show Title and Description, Show Help, Toggle Thumbnails, Toggle Fullscreen
  • Resize your browser to see the responsive design working.


Launch the example tour (Resize your browser to see the responsive behavior working)


Fichier:Ptp2 HTML Templates bootstrap full page2.jpg
Example with dark blue foreground and light grey background


Launch the example tour (Resize your browser to see the responsive behavior working)



Bootstrap Light on Dark with Project Colors


  • A responsive design based on Bootstrap
  • This responsive template is based on the project colors.
  • Intended to be used with a clear foreground color and a dark background color.
  • The tour is displayed in a container in the left of the page with thumbnails bar and control bar under the tour.
  • The control bar is customized by the template.
  • You can toggle the thumbnails bar.
  • Drag the thumbnails bar with your mouse.
  • Title of the current panorama is displayed on the right.
  • Breadcrumb on the right with Current Project / Current Group / Current Panorama.
  • Tabs with Panorama Description / Group Description / Project Description
  • Controls: Previous Next panoramas, Start Stop autorotation, Zoom in and out, Show Title and Description, Show Help, Toggle Thumbnails, Toggle Fullscreen
  • Resize your browser to see the responsive design working.


Bootstrap Light on Dark Template intended to be used with a light foreground color and a dark background color

Launch the tour (Resize your browser to see the responsive behavior working)



Bootstrap Dark on Light with Project Colors


  • A responsive design based on Bootstrap
  • This responsive template is based on the project colors.
  • Intended to be used with a dark foreground color and a clear background color.
  • The tour is displayed in a container in the left of the page with thumbnails bar and control bar under the tour.
  • The control bar is customized by the template.
  • You can toggle the thumbnails bar.
  • Drag the thumbnails bar with your mouse.
  • Title of the current panorama is displayed on the right.
  • Breadcrumb on the right with Current Project / Current Group / Current Panorama.
  • Tabs with Panorama Description / Group Description / Project Description
  • Controls: Previous Next panoramas, Start Stop autorotation, Zoom in and out, Show Title and Description, Show Help, Toggle Thumbnails, Toggle Fullscreen
  • Resize your browser to see the responsive design working.


Bootstrap Dark on Light Template intended to be used with a dark foreground color and a light background color

Launch the tour (Resize your browser to see the responsive behavior working)














Support technique / Documentation Panotour