La version 1.2.8 de panoVisu est disponible ici, elle comprend un éditeur de visite virtuelle, écrit en java pour des raisons de compatibilité (PC,Mac ou Linux), et un visualiseur de visite virtuelle en HTML5 (utilisable sur tablette/PC et tout appareil ayant un navigateur compatible HTML5). Le site sera mis à jour très prochainement.
panoVisu est libre et gratuit, il est en licence MIT. Le code source est disponible sur GitHub :
Si vous rencontrez des soucis (bug ou autre) ou que vous souhaitez voir une fonctionnalité se développer, j'ai mis en place un système de tickets : http://panovisu.fr/hesk par lequel vous pourrez me faire vos demandes.
Pour celles et ceux qui souhaiteraient participer au développement de l'application les sources sont disponibles sur GitHub
Pour ceux qui ont testé la version 1.2.6 à Esse la version 1.2.8 vient corriger quelques petits bugs détectés lors de l'atelier.
Je dédie ce logiciel à François avec qui j'avais une une grande discussion à ce sujet lors de la rencontre panophoto d'Audierne en mai 2014.
Installation
Pour fonctionner le logiciel nécessite l'installation de Java dans une version supérieure à la 8u20 disponible ici. Veillez à bien choisir une version 64bits si vous êtes sur un système d'exploitation 64bits (Windows x64, Mac OS X x64 ou Linux x64)
Le logiciel étant écrit en Java, il n'y a pas d'nstallation de panoVisu en temps que tel, il vous suffit de décompresser l'archive dans le répertoire de votre choix et de double-cliquer sur le fichier editeurPanoVisu.jar
Éditeur panoVisu
Il comprend un éditeur d'interface visuel :
et un éditeur de plan :
Il permet les choses suivantes :
- Choix graphique des hotspots
- Choix du point de vue d'entrée du panoramique
- Choix de la position du Nord du panoramique (utile si utilisation de la boussole)
soit en utilisant le visualiseur de panoramique dans la barre d'outils à droite de la vue principale.
- personnalisation générale de l'interface.
- personnalisation du titre
- personnalisation de la barre de navigation
Soit une barre personnalisée :
- ajout d'une boussole
- ajout des vignettes des panoramiques
- ajout des réseaux sociaux
- ajout d'un bouton de masquage des éléments
- internationalisation du projet (Partiellement fini) j'aurais certainement besoin de traducteurs (Espagnol - Italien - Portugais - Allemand, etc ..).
- Multi-résolution (mais pas encore multi-tuiles)
- Hotspots Panoramiques / Images /HTML
- Plan (plusieurs possibles sur une visite) + radar
- Carte (OSM/Google/Bing) + radar
- ajout d' images de fond (esthétiques ou lien vers une URL)
- Personnalisation des écran d'accueil/Aide
Il dispose également d'outils permettant d'effectuer les transformation cube<-->Equi et de créer des barres personalisées :
pour créer une barre personnalisée il vous suffit d'une image jpg ou png et d'ajouter des zones actives à l'aide de l'éditeur intégré :
Une démonstration valant mieux qu'un long discours voici une visite crée avec cet éditeur :
De plus j'ai rajouté un certain nombre d'actionneurs externes permettant de commander la visite de puis la page Web en javascript :
Code : Tout sélectionner
$(function () {
var visiteStGermain = ajoutePano({
langue: "fr_FR",
panoramique: "pano",
minFOV: 35,
maxFOV: 120,
fenX: "80%",
fenY: "100%",
xml: "xml/DSC05098_DxO Panorama_cube_sphere.xml"
});
var arreteVisite = false;
function visite() {
visiteStGermain.setPoint(100, 0);
visiteStGermain.setFOV(60);
requestTimeout(function () {
if (arreteVisite)
return;
visiteStGermain.allerAuPoint(150, 10, 2);
requestTimeout(function () {
if (arreteVisite)
return;
visiteStGermain.allerFOV(80, 10);
visiteStGermain.allerAuPoint(330, -10, 20);
requestTimeout(function () {
if (arreteVisite)
return;
visiteStGermain.allerFOV(40, 1.8);
requestTimeout(function () {
if (arreteVisite)
return;
if (visiteStGermain.getXML() === "xml/DSC05098_DxO Panorama_cube_sphere.xml")
{
visiteStGermain.setPano("xml/DSC05102_DxO Panorama_cube_sphere.xml");
}
else
{
visiteStGermain.setPano("xml/DSC05098_DxO Panorama_cube_sphere.xml");
}
visite();
}, 2000);
}, 21000);
}, 5000);
}, 2000);
}
$(window).resize(function () {
$("article").height($(window).height() - 10);
$("#pano").height($(window).height() - 10);
});
$("article").height($(window).height() - 10);
$("#pano").height($(window).height() - 10);
$(".reseauSocial-twitter").on("click", function () {
window.open(
"https://twitter.com/share?url=" + document.location.href
);
return false;
});
$(".reseauSocial-fb").on("click", function () {
window.open(
"http://www.facebook.com/share.php?u=" + document.location.href
);
return false;
});
$(".reseauSocial-google").on("click", function () {
window.open(
"https://plus.google.com/share?url=" + document.location.href + "&hl=fr"
);
return false;
});
$(".reseauSocial-email").attr("href", "mailto:?body=" + document.location.href + "&hl=fr");
$(document).on("click", "#haut", function () {
visiteStGermain.setLatitude(visiteStGermain.getLatitude() + 0.25);
});
//Actionneurs
$(document).on("click", "#bas", function () {
visiteStGermain.setLatitude(visiteStGermain.getLatitude() - 0.25);
});
$(document).on("click", "#gauche", function () {
visiteStGermain.setLongitude(visiteStGermain.getLongitude() - 0.25);
});
$(document).on("click", "#droite", function () {
visiteStGermain.setLongitude(visiteStGermain.getLongitude() + 0.25);
});
$(document).on("click", "#pano1", function () {
visiteStGermain.setPano("xml/DSC05098_DxO Panorama_cube_sphere.xml");
});
$(document).on("click", "#pano2", function () {
visiteStGermain.setPano("xml/DSC05102_DxO Panorama_cube_sphere.xml");
});
$(document).on("click", "#chateau, #chat1", function () {
if (visiteStGermain.getXML() === "xml/DSC05098_DxO Panorama_cube_sphere.xml")
{
visiteStGermain.allerAuPoint(-20, 20, 3);
visiteStGermain.allerFOV(90, 3);
}
else {
visiteStGermain.allerAuPoint(-60, 15, 3);
visiteStGermain.allerFOV(90, 3);
}
});
$(document).on("click", "#vienne, #vienne1", function () {
if (visiteStGermain.getXML() === "xml/DSC05098_DxO Panorama_cube_sphere.xml")
{
visiteStGermain.allerAuPoint(130, -10, 15);
visiteStGermain.allerFOV(30, 3);
} else {
visiteStGermain.allerAuPoint(30, -5, 15);
visiteStGermain.allerFOV(30, 3);
}
});
$(document).on("click", "#chapelle, #chapelle1", function () {
if (visiteStGermain.getXML() === "xml/DSC05098_DxO Panorama_cube_sphere.xml")
{
visiteStGermain.allerAuPoint(165, 5, 15);
visiteStGermain.allerFOV(40, 3);
} else {
visiteStGermain.allerAuPoint(200, 5, 15);
visiteStGermain.allerFOV(60, 3);
}
});
$(document).on("click", "#visite", function () {
arreteVisite = false;
visite();
});
$(document).on("click", "#stopVisite", function () {
visiteStGermain.stopMouvement();
arreteVisite = true;
});
});
Amicalement