Le temps aura été long depuis la dernière mise à jour de Photo Sphere Viewer. Il faut dire que j’ai été pas mal occupé et ça ne m’a pas particulièrement aidé. Mais la nouvelle version est bel et bien là : Photo Sphere Viewer 2.0 est d’ores et déjà disponible sur GitHub. Ceux qui ont suivi auront noté pas mal de changements, et ils auront bien raison.

Photo Sphere Viewer 2.0

Le code est maintenant séparé en plusieurs fichiers, trois pour être exact. Fort heureusement, cette séparation n’est utile qu’à ceux qui fouillent dans le code et qui pourront s’y retrouver plus facilement : si vous souhaitez utiliser Photo Sphere Viewer, rien ne change et vous n’avez ainsi qu’à inclure le fichier photo-sphere-viewer.js, accompagné de three.min.js.

Ces gros changements dans le code se traduisent par quelques belles petites nouveautés dans Photo Sphere Viewer, dont deux principales. La première, c’est la compatibilité avec les panoramas non Photo Sphere : désormais, si vous êtes photographe et utilisez votre propre appareil et non pas un smartphone Android, vous pouvez vous aussi profiter de Photo Sphere Viewer pour inclure vos panoramas, si vous utilisez la projection équirectangulaire.

Pour cela, vous n’avez rien à faire de plus que s’il s’agissait d’un panorama Photo Sphere : vous indiquez simplement le chemin vers votre panorama et la librairie détectera automatiquement qu’il ne s’agit pas d’un panorama provenant d’Android.

La nouvelle fonctionnalité qui profitera à tout le monde, c’est la barre de navigation. Par défaut, elle n’est pas activée et nécessitera que vous passiez le paramètre navbar à true pour l’afficher.

Une fois que ce sera fait, vous la verrez en bas de votre panorama. Actuellement, elle dispose de trois boutons.

Le premier est pour l’animation qui pourra être activée ou désactivée à loisir par l’utilisateur. Pratique pour lui éviter le tournis, ce bouton est bien sûr compatible avec le lancement automatique de l’animation qui lui est toujours disponible.

Le dernier bouton permet d’activer ou de désactiver le mode plein écran qui fonctionne grâce à la magie du HTML5 : n’importe quel utilisateur disposant d’un navigateur digne de ce nom pourra l’utiliser sans problème.

Le deuxième bouton est en réalité un regroupement de trois autres boutons permettant de zoomer et dézoomer. Scroller sur le panorama permet toujours de zoomer et dézoomer, et le curseur réagit en fonction, tout est automatique. Le curseur peut lui-même être bougé. C’est magique.

Cette barre de navigation peut entièrement être personnalisée par la taille et les couleurs utilisées : la liste des propriétés disponibles est sur GitHub.

Pour les besoins de cette barre de navigation, j’ai créé une sorte d’API pour Photo Sphere Viewer qui permet de zoomer/dézoomer, activer/désactiver le plein écran et activer/désactiver l’animation de rotation automatique. Vous pouvez vous-même utiliser ces fonctions si vous en avez besoin. Notez que des « actions » sont également là, des sortes d’événements provoqués dans certains cas. Quand j’aurai un peu plus de temps, je ferai une doc plus complète.

Enfin, un nouveau paramètre, encore : autoload. Par défaut, il vaut true, mais si vous le mettez à false, le panorama ne sera pas chargé automatiquement. Pour le charger, il faudra que vous utilisiez la méthode load() de votre objet PhotoSphereViewer.

Sinon, pour finir, un petit bug corrigé, qui concernait le redimensionnement : les images n’étaient pas générées automatiquement au redimensionnement, maintenant c’est réglé et c’est vraiment proprement responsive.

C’est tout pour Photo Sphere Viewer 2.0. Comme toujours, n’hésitez pas si vous avez de nouvelles idées (pour ma part j’en ai encore en stock !). Sinon, bien sûr, ces nouveautés arriveront bientôt dans WP Photo Sphere, dans les jours qui viennent si tout va bien.

Panorama d’illustration : Robert Snache