Présentation de l'outil numérique FDP

Objectif du développement

Le présent développement a pour but de fournir une application web mobile destinée aux ingénieurs opérant sur le terrain pour

• Gérer des relevés de mesure environnementale (ici de polluants de l’air comme NO₂, C₆H₆, PM₁₀...) ;
• Capturer et normaliser deux photos sur chaque point de mesure ;
• Récupérer automatiquement l'adresse, les coordonnées GPS ainsi qu’une vue satellite du point de mesure via Google Static Maps ;
• Exporter l’ensemble des données saisies dans un fichier Excel structuré, prêt pour exploitation directe dans le rapport d'étude et archivage dans le dossier de l'affaire.

L’application doit être responsive (utilisation principale sur mobile), autonome (utilisation hors-ligne), et intuitive afin de limiter les erreurs de saisie, le temps de remplissage et fluidifier les campagnes terrain. Elle doit également répondre aux exigences de réalisation des fiches de points du guide méthodologique issue de la note technique du Cerema du 22 février 2019.

Architecture générale de l'outil

L'application a été développée en HTML5 / CSS / JavaScript pur, sans framework lourd, pour maximiser la légèreté, la rapidité et la compatibilité avec des navigateurs mobiles. Elle est entièrement "utilisateur-side", sans serveur ni base de données.

1) Interface utilisateur (UI) en HTML5 + CSS

• Structure en <header>, <main>, <footer> pour séparer les zones d’action.
• Formulaire dynamique de saisie :
  • Liste déroulante de points de mesure (P1 à P40) ;
  • Choix de typologie (Trafic, Fond urbain, etc.) ;
  • Saisie de mesures et métadonnées (date/heure, capteurs) ;
  • Boutons pour double prise de photo ;
  • Bouton de géolocalisation (adresse, longitude, latitude)
• Le style est fait en CSS customisé avec des variables :root pour faciliter la maintenance.

2) Gestion des données – JavaScript

• Principales structures :
  • points : un objet clé-valeur (ex: P12 → { typology, photos, coords, etc. })
  • images : un tableau temporaire pour stocker les images formatées.
  • lastSatB64 : contient la capture satellite (en base64).

3) Fonctionnalités techniques détaillées

Sélection et saisie :

• Initialisation automatique des points (P1 à P40) dans la liste.
• Date/heure préremplie avec l’heure locale au chargement de la page.
• Validation des champs obligatoires avant enregistrement (avec affichage des erreurs).

Géolocalisation + Vue satellite

• Utilise l’API Web Geolocation pour obtenir la position en temps réel.
• Envoie un appel fetch() à Nominatim (OpenStreetMap) pour obtenir l’adresse humaine.
• Envoie une requête à Google Static Maps avec un marqueur rouge sur les coordonnées.
• Capture et découpe l’image satellite, puis encode en base64 PNG.

Prise de photos et traitement

• Utilisation d’un <input type="file" capture> pour forcer la prise de photo sur mobile.
• Traitement par blueimp-load-image pour corriger l’orientation EXIF.
• Rognage centré au format portrait 7x5,25 cm (4:3) puis redimensionnement.
• Encodage en PNG sans perte et conversion en ArrayBuffer pour export XLSX.

Sauvegarde temporaire

• Chaque point est stocké dans un objet JavaScript.
• Le bouton "Enregistrer" réinitialise l’interface après validation et stockage local.

Export Excel (ExcelJS)

• Utilisation de ExcelJS pour :
• Générer une feuille avec colonnes texte (point, coordonnées, valeurs, typologie, etc.) ;
• Ajouter trois colonnes à largeur fixe de 5,5 cm pour les images ;
• Intégrer les photos et la vue satellite via addImage() ;
• Formater les hauteurs de lignes pour afficher correctement les visuels ;
• Proposer le téléchargement via FileSaver.js.

Réinitialisation

• À la fin de l’export, les données locales sont purgées et l’interface est rechargée.

4) Approche R&D et justification CIR

Ce projet répond aux critères du CIR par les éléments suivants :

• Recherche de solution technique originale pour embarquer, corriger, rogner et encoder des photos en ligne, sans serveur ;
• Expérimentation autour de la gestion d’images et du formatage dynamique dans ExcelJS, en particulier pour l’intégration d’images dimensionnées ;
• Résolution d’un problème d’export mobile-first, avec contraintes de mise en page bureautique (cm exacts dans Excel) ;
• Interopérabilité de données géographiques entre APIs hétérogènes (Google, OSM, navigateur) ;

Aucun composant externe ne proposait cette combinaison précise à date. Le développement a donc nécessité des essais techniques, des ajustements d’algorithmes de rognage et de conversion, ainsi qu’une intégration manuelle des coordonnées dans l’interface XLSX, en dehors des simples bibliothèques de capture.

5) Perspectives d’évolution

• Ajout de signature électronique ou validation QR code terrain.
• Synchronisation avec un back-office ou API REST pour archivage.
• Mode multi-utilisateur avec cache local par session.