✨ Visionneuse v4 : interface revisitée, code + évolutif

Un an après la version 3, la visionneuse de Panoramax évolue en profondeur avec sa version 4. Au programme : une refonte graphique, une meilleure lisibilité, et des petits détails qui font toute la différence à l’usage.

Elle est à tester dès à présent sur https://viewer.geovisio.fr/ et sera disponible sur les instances au cours de la semaine prochaine

Tour d’horizon des principales nouveautés côté interface utilisateur :backhand_index_pointing_down:

:new_button: Une nouvelle légende photo : claire, compacte et responsive

Le widget de légende d’une photo a été complètement repensé :

  • Il s’affiche désormais dans un encadré soigné, parfaitement lisible sur tous les écrans.
  • Il présente les informations principales de façon synthétique, avec des onglets pour accéder aux détails (métadonnées, contributeur, licence, instance d’origine…).

  • Il est aussi responsive : l’affichage s’adapte si vous êtes sur mobile, tablette ou grand écran.

:input_latin_letters: Une nouvelle police plus lisible : Atkinson Hyperlegible

Panoramax adopte la police Atkinson Hyperlegible, conçue pour améliorer la lecture, même pour les personnes avec des troubles de la vision.
Résultat : un texte plus clair, mieux espacé, agréable à lire même après plusieurs minutes d’exploration.

:compass: Une interface plus fluide et intuitive

Plusieurs petites évolutions rendent la navigation plus confortable :

  • Barre de progression animée au lancement de la visionneuse.

  • Meilleure gestion des filtres de date : si vous inversez par erreur début et fin, l’ordre est automatiquement corrigé.
  • Mémoire de position : si vous revenez sur la visionneuse, elle se remet au dernier endroit consulté, avec le dernier thème utilisé.
  • Résultats de recherche plus clairs pour les adresses.
  • Nouveau sélecteur de type de photo (Toutes / Classiques / 360°) plus visible.

:wrench: Et du côté des développeurs

La version 4 de la visionneuse Panoramax marque un tournant technique : tout repose désormais sur des Web Components. Cela implique quelques changements dans la manière d’intégrer, personnaliser et faire interagir les composants.

:brick: Des composants web natifs (basés sur Lit.js)

Fini les classes JS à instancier manuellement, on écrit directement du HTML avec des balises personnalisées comme <pnx-viewer> ou <pnx-photo-viewer>, avec des attributs pour les options. Exemple :

<pnx-viewer endpoint="https://api.panoramax.fr/api" />

:puzzle_piece: Une architecture plus modulaire

  • Le code est découpé en sous-composants (map, photo, ui.widgets, etc.)
  • Les événements sont émis depuis leurs composants respectifs
  • Il est toujours possible de les écouter via le composant parent, avec des préfixes (map:, psv:…)

:control_knobs: Intégration et personnalisation simplifiées

Les widgets peuvent être désactivés ou remplacés via des slots HTML. Par exemple, pour ajouter un bouton perso en haut à droite :

<pnx-viewer widgets="false">
  <button slot="top-right">Mon bouton</button>
</pnx-viewer>

Il existe désormais un nouveau composant <pnx-photo-viewer>, qui permet d’afficher uniquement une photo, sans carte.

:package: Autres changements clés

  • Les paramètres sont désormais passés en search (après le ?) et non plus en hash (après le #). Ceci permettra dans le futur de gérer un aperçu pour les liens de partage.
  • Migration vers PSV 5.12.1 et MapLibre GL 5.3.0
  • La doc développeur est désormais séparée en deux versions : stable (docs.panoramax.fr/web-viewer) et de développement (viewer.geovisio.fr/docs)

:up_arrow: Migrer depuis la version 3

Besoin de migrer un projet existant ? Un guide complet de migration est disponible pour passer de la v3 à la v4.


J’espère que cette nouvelle version vous plaira, et bien entendu nous sommes preneurs de vos retours et suggestions pour la suite. D’autres changements sont dans les tuyaux (notamment sur la sémantique :label: ) !

9 Likes

Merci Adrien pour tout ce travail.
Je continue de penser que la visualisation ne doit pas être seulement sur le où mais aussi le où dans la pellicule du collecteur. De ce point de vue j’ai du mal à naviguer dans des vignettes aussi petites.

3 Likes

Bonjour Jean-Louis, j’ai fait passer le mot à Jean, qui s’occupe de l’interface du site web, merci de ton retour :wink:

2 Likes

Bonjour Jean Louis et merci pour le retour.
Est ce que tu avais vu qu’en passant ta souri sur une vignette elle s’affichait en plus grand ?
Je peux agrandir la taille de l’image qui s’affiche lorsqu’on passe la souri par dessus si ça te convient.

Sinon il faudrait revoir la manière d’afficher la liste en faisant avec des “card”, plutôt qu’une liste en tableau, ce qui donnerait plus de place aux photos (un peu comme dans la page d’une séquence).

Hésite pas à me dire ce que tu en penses.

Merci et bonne journée :upside_down_face:

Bonjour Jean
Oui j’ai eu une grande satisfaction à voir ce type d’affichage qui dépanne beaucoup.

Pour que tu comprennes mon profil : je déambule beaucoup en photo-collecte flânerie selon les éclairages des monuments sur Avignon ou villes que je traverse. De cette manière je fonctionne à la manière d’un collectionneur de timbres: beaucoup de timbres remarquables et non des séries de séquences comme j’ai pu le faire il y a quelques années.
Je suis donc demandeur d’une possibilité de naviguer (mosaïque) avec un affichage à la Flickr, Picasa, Digikam… c’est à dire comme l’ordi le fait déjà dans la navigation d’images choisir la taille des vignettes jusqu’à celui de grosses vignettes dans le cas où les photos se ressemblent.

Quand je clique sur une photo vignette j’aimerais que celle-ci devienne grande, mais sans forcément avoir un immense plan qui s’affiche, ce qui m’intéresse c’est la photo. Actuellement quand je sélectionne une vignette voilà ce qui s’affiche :


C’est vrai que les vignettes sont vraiment petites, et j’ai l’impression qu’il y aurait des marges de manœuvre pour en augmenter la taille sans trop avoir à retoucher l’interface.

ça me serait bien utile

1 Like

Sur la version actuelle, les boutons de pagination pour naviguer dans la liste des séquences sont tout en bas, ce qui force à scroller vers le bas quand on veut passer plusieurs pages. Il serait intéressant de maintenir ces boutons visibles en permanence, et/ou de les afficher avec le menu du haut de la liste.

Aussi, il serait utile de pouvoir afficher des boutons avec des numéros de pages cliquables pour pouvoir aller directement quelques pages plus loin, plutôt que d’être limité à passer les pages 1 par 1 ou d’aller tout à la fin ou tout au début.

Aussi, pourquoi limiter à 25 séquences par page de résultats ? Je trouve qu’il serait utile d’en avoir plus car c’est plus fluide de scroller (même longtemps) que de charger des pages de 25 séquences (je commence à en avoir un paquet, car je prends des photos qui sont chacune leur propre séquence, ça augmente vite le nombre de lignes)
On pourrait aussi avoir un paramétrage du nombre de séquences affichées par page, et que les préférences de l’utilisateur soient mémorisées pour cette donnée ? (25 /50 / 100 / toutes)
Sauf s’il y a un risque de poser des problèmes de performance. En tout cas ça me serait très pratique pour naviguer dans le contenu

La nouvelle visionneuse est déployée depuis peu sur les instances IGN, OSM-FR et le méta-catalogue !

Bonjour,

La nouvelle visionneuse n’est plus utilisable sur téléphone car aux mauvaises dimensions (peut-être un probleme de barre d’adresse qui est comptée dans la taille de l’écran). Ainsi, une fois sur une photo on ne peut plus revenir à la carte…

Ps : j’utilise Firefox mobile (version 138)

Bonjour,

Je suis preneur d’une capture d’écran du problème, car je ne le reproduis pas sur Firefox mobile :thinking:

Je n’arrive pas à reproduire ce comportement aujourd’hui. J’ai éteins mon téléphone entre temps. Peut-être des feuilles Css dans le cache ou d’anciens paramètres de zoom ou autre qui étaient enregistrés par Firefox ?

Merci pour toutes ses nouveautés !

Prochainement, est-il prévu de voir toutes les instances disponibles sur la page d’accueil (not. MapComplete) ? Cela permettrait de mettre encore plus en avant l’une des fonctionnalités de Panoramax !

D’ailleurs serait-il possible d’avoir le logo et le titre du méta-catalogue en plus gros ?

On se pose une question à ce sujet car on a des instances qui permettent de contribuer directement, indirectement ou pas du tout.

Comment ne pas perdre les potentiels contributeurs si on les met toutes au même plan déjà que le concepts même d’instances est confus pour pas mal de monde ?

Ah oui je comprends, pas simple.
Mais comment pousser de nouveau contributeur à utiliser les autres instances déjà en place (celles permettant d’y contribuer directement) ?

Cela serait profitable à l’instance de l’asso OSM France qui commence à avoir plein de photos hors France :grinning_face_with_smiling_eyes:

L’interface est vraiment agréable merci beaucoup !
Par contre, lorsqu’on souhaite partager un lien, les filtres ne sont pas conservé :confused:

Est-ce que cela sera prochainement possible ?

Bonjour,

En effet pour le moment les filtres ne sont pas conservés dans l’url. C’est une évolution qu’on a dans notre TODO et qu’on implémentera sans doute à moyen terme.

1 Like

Bonjour jean Louis,

J’ai bien compris ton cas d’utilisation merci.

Dans un premier temps pour que ça soit relativement rapide à faire de notre côté on a augmenté la taille des thumbnails dans la liste des séquences pour que les photos soient plus visibles. On a aussi augmenté la taille de la photo qui s’affiche en plus grand au hover sur le thumbnail.

J’ai bien noté tes retours et lorsqu’on refondra la page liste des séquences et détail d’une séquence, on prendra soin de les rendre plus adaptées à ton cas d’utilisation.

1 Like

Bonjour,

Pour la pagination on va faire en sorte qu’elle reste fixe sur la liste des séquences. Pour info on vient de le faire sur la page de détail d’une séquence pour la liste des photos.

Pour les pages numérotées on a pas les briques techniques pour le faire pour le moment. On va sans doute revoir la page de liste de séquences à moyen terme et on se reposera la question de la pagination à ce moment là.

Et pour la limite à 25, on va la passer à 100 en mode quick win pour qu’il y ai plus de séquences affichées.

1 Like

Merci,
Voici ce qui s’affiche en sélectionnant une séquence: je clique sur une image et elle apparaît à gauche.
Je pense utile de mieux mettre en évidence la photo choisie (le trait de mise en évidence est timide).

1 Like