TP1 : Création d'une balade de photos géolocalisées [SNT à Diderot]

TP1 : Création d'une balade de photos géolocalisées

Simulation : Synopsis

Vous êtes le nouveau stagiaire de l'Office de Tourisme de votre territoire et vous avez une nouvelle mission à réaliser durant cette semaine : vous allez devoir présenter votre quartier, commune, village ou ville avec des photos qui font la fierté des habitants. Ces photos seront ensuite mises en ligne sur une carte OpenStreeetMap avec le logiciel uMap. Pour les découvrir, on cliquera sur une épingle comme le montre la photo ci-dessous, d'ailleurs, on pourra découvrir un exemple de rendu d'une balade à la toute fin de cette page.
La mission se déroule en 2 temps :
En extérieur : prendre les photos en ayant pris soin d'activer la géolocalisation sur les photos ;
Travail sur ordinateur : le déroulé est présenté sur cette page. L'objectif final est bien sûr de promouvoir votre travail en intégrant cette carte numérique sur le site web de l'Office de Tourisme. Dans notre cas, on pourra mettre cette carte sur notre ENT.

Exemple d'une balade de photos géolocalisées

Remarque :

Si vous avez été plusieurs à réaliser des photos, AUCUN PROBLÈME, réalisez les manipulations 1 à 4 chacun de votre côté ! La mise en commun sera réalisée à la manipulation 5 !

Manipulation 1 : récupération des photos

Sur l'ordinateur, créer un dossier photos_balade dans votre répertoire Documents/SNT/Theme_5 sur le réseau,
Vos photos sont sûrement sur le porte-documents de l'ENT, télécharger-les pour les avoir dans ce dossier,
Renommer les photos une par une (sans modifier l’extension du fichier .jpg, .png, .jpeg...) en donnant un nom explicite que l'on pourra retrouver dans la balade.

Attention :

Toutes les manipulations ci-dessous sont décrites pour un ordinateur équipé du système d'exploitation Gnu/Linux - Ubuntu. On pourra, bien entendu, réaliser ces opérations avec Windows, par exemple, en utilisant le logiciel gratuit Photofiltre en remplacement de gThumb.

Méthode : Manipulation 2 : Réduire le poids des photos

Pour réduire le poids en octets des photos, on utilisera la fiche méthode 'Réduire le poids des photos'.

Complément : Manipulation 3 : utiliser un programme Python pour collecter les données GPS des photos

Le but de cette manipulation est de récolter les coordonnées géographiques des photos qui sont stockées dans leurs méta-données, pour cela, on va utiliser une méthode rapide et efficace : un programme écrit en Python. Il suffit de suivre la procédure ci-dessous en lisant bien les premiers commentaires du programme !

Copier-coller, dans le logiciel Geany, le programme Python suivant :

Vous pouvez utiliser le bouton situé en haut à droit de la zone de texte pour copier le texte suivi de CTRL+C.

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
#  exif.py
#  
# based on https://gist.github.com/erans/983821
# A la racine, on doit trouver ce fichier Python et un dossier du nom
# 'photos_balade' qui contient toutes les photos
# Après exécution, on trouvera un fichier CSV à côté du fichier Python
import exifread
import os
## Variables qui peuvent être modifiées
dossier_photos = 'photos_balade'
fichier_csv = 'exifs.csv'
## Fonctions
def _get_if_exist(data, key):
    if key in data:
        return data[key]
    return None
def _convert_to_degress(value):
    """
    Helper function to convert the GPS coordinates stored in the EXIF to degress in float format
    :param value:
    :type value: exifread.utils.Ratio
    :rtype: float
    """
    d = float(value.values[0].num) / float(value.values[0].den)
    m = float(value.values[1].num) / float(value.values[1].den)
    s = float(value.values[2].num) / float(value.values[2].den)
    return d + (m / 60.0) + (s / 3600.0)
    
def get_exif_location(exif_data):
    """
    Returns the latitude and longitude, if available, from the provided exif_data (obtained through get_exif_data above)
    """
    lat = None
    lon = None
    gps_latitude = _get_if_exist(exif_data, 'GPS GPSLatitude')
    gps_latitude_ref = _get_if_exist(exif_data, 'GPS GPSLatitudeRef')
    gps_longitude = _get_if_exist(exif_data, 'GPS GPSLongitude')
    gps_longitude_ref = _get_if_exist(exif_data, 'GPS GPSLongitudeRef')
    if gps_latitude and gps_latitude_ref and gps_longitude and gps_longitude_ref:
        lat = _convert_to_degress(gps_latitude)
        if gps_latitude_ref.values[0] != 'N':
            lat = 0 - lat
        lon = _convert_to_degress(gps_longitude)
        if gps_longitude_ref.values[0] != 'E':
            lon = 0 - lon
    return lat, lon
def get_exif_data(image_file):
    with open(image_file, 'rb') as f:
        exif_tags = exifread.process_file(f)
    return exif_tags 
## Programme principal
fichier_sortie = open(fichier_csv,'w')
for fichier_photo in os.listdir(dossier_photos):
	lat, lon = get_exif_location(get_exif_data(dossier_photos+'/'+fichier_photo))
	print("Image : {}; Latitude : {} ; Longitude : {}". format(fichier_photo, lat, lon))
	fichier_sortie.write(str(fichier_photo)+';'+str(lat)+';'+ str(lon)+'\n')

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
#  exif.py
#  
# based on https://gist.github.com/erans/983821
# A la racine, on doit trouver ce fichier Python et un dossier du nom
# 'photos_balade' qui contient toutes les photos
# Après exécution, on trouvera un fichier CSV à côté du fichier Python

import exifread
import os

## Variables qui peuvent être modifiées

dossier_photos = 'photos_balade'
fichier_csv = 'exifs.csv'

## Fonctions
def _get_if_exist(data, key):
    if key in data:
        return data[key]

    return None

def _convert_to_degress(value):
    """
    Helper function to convert the GPS coordinates stored in the EXIF to degress in float format

    :param value:
    :type value: exifread.utils.Ratio
    :rtype: float
    """
    d = float(value.values[0].num) / float(value.values[0].den)
    m = float(value.values[1].num) / float(value.values[1].den)
    s = float(value.values[2].num) / float(value.values[2].den)

    return d + (m / 60.0) + (s / 3600.0)
    
def get_exif_location(exif_data):
    """
    Returns the latitude and longitude, if available, from the provided exif_data (obtained through get_exif_data above)
    """
    lat = None
    lon = None

    gps_latitude = _get_if_exist(exif_data, 'GPS GPSLatitude')
    gps_latitude_ref = _get_if_exist(exif_data, 'GPS GPSLatitudeRef')
    gps_longitude = _get_if_exist(exif_data, 'GPS GPSLongitude')
    gps_longitude_ref = _get_if_exist(exif_data, 'GPS GPSLongitudeRef')

    if gps_latitude and gps_latitude_ref and gps_longitude and gps_longitude_ref:
        lat = _convert_to_degress(gps_latitude)
        if gps_latitude_ref.values[0] != 'N':
            lat = 0 - lat

        lon = _convert_to_degress(gps_longitude)
        if gps_longitude_ref.values[0] != 'E':
            lon = 0 - lon

    return lat, lon

def get_exif_data(image_file):
    with open(image_file, 'rb') as f:
        exif_tags = exifread.process_file(f)
    return exif_tags 

## Programme principal

fichier_sortie = open(fichier_csv,'w')

for fichier_photo in os.listdir(dossier_photos):
	lat, lon = get_exif_location(get_exif_data(dossier_photos+'/'+fichier_photo))
	print("Image : {}; Latitude : {} ; Longitude : {}". format(fichier_photo, lat, lon))
	fichier_sortie.write(str(fichier_photo)+';'+str(lat)+';'+ str(lon)+'\n')

Enregistrer-le à côté de votre dossier photos_balade/ précédemment crée (c'est-à-dire dans le dossier Document/Theme_5). Nommer le ExifPhotos.py par exemple.
Exécuter le programme (avec Geany, il suffit de cliquer sur la touche fonction F5 du clavier) et constater le résultat. Normalement, un fichier CSV a été crée avec toutes les coordonnées GPS de vos prises de vues.
Ouvrir ce fichier CSV avec LibreOffice Calc (dans la fenêtre qui s'ouvre, bien prendre le point-virgule comme séparateur de données).
Télécharger et ouvrir le fichier ci-dessous.
Dans ce fichier :
- Coller les données du fichier exifs.csv dans les 3 premières colonnes (partie verte), sans supprimer les en-têtes (ligne 1),
- La case D2 doit être automatiquement complétée,
- Étirer la formule de la case D2 vers le bas pour compléter la colonne D rapidement en vous inspirant de l'animation ci-contre,
- Compléter rapidement la colonne E,
- Lors de la manipulation 5, nous compléterons la colonne F.

Étirer une formule vers le bas dans Calc | Informations^[1]

Tableau Preparation Photos Geoloc avec Python [ods]

Attention : Compétence PIX : trouver des informations géographiques (GPS) dans une photo

Pour trouver les coordonnées géographiques d'une photo, on peut utiliser 2 méthodes :

Utilisation d'un service en ligne, tel que https://www.pic2map.com/ mais attention aux photos envoyées car elles sont ré-exploitées par le service pour leur galerie...

Utilisation d'un logiciel, dépendant du système d'exploitation :

	gThumb	The Gimp (version 2.10 mini)	Photofiltre
Systèmes d'exploitation	Disponible sur Gnu/Linux	Disponible sur Windows©, MacOsX© et Gnu/Linux	Disponible uniquement sur Windows©
Accès	Accès via le bouton 🛈 (propriétés images)	Menu Image > Métadonnées > Afficher les métadonnées	Menus Fichier > Propriétés de l'image > EXIF
Aperçu

À noter que pour exploiter les coordonnées GPS de photos prises depuis un iPhone, il faut qu'elles soient prises avec le format le plus compatible et pas haute efficacité.

Méthode : Manipulation 4 : déposer vos photos sur un Cloud

Maintenant que les photos ont une taille acceptable, et pour que les photos soient accessibles à tout le monde, elles doivent être déposées sur un cloud^[2] public. Nous allons utiliser le cloud suivant : https://lutim.lagout.org/

Dans ce type de service, il n'y a pas d'exploitation des données personnelles, c'est donc un bon choix pour notre travail. Veillez tout de même à ce qu'il n'y ait pas de personnes reconnaissables sur vos photos !

Ces photos auront une durée de conservation, il est donc important de bien mettre 1 an afin que votre travail soit persistant sur l'ensemble de votre année de seconde.
Glisser l'ensemble de vos photos dans l'interface.
Les photos sont envoyées et cela peut être plus ou moins long selon la connexion...
À la fin, le logiciel vous propose de cliquer pour copier l'ensemble des liens de visualisation dans le presse-papier, c'est très pratique !

Coller ces liens dans la colonne F 'URL' du tableau précédent, en prenant soin de vérifier que l'URL concerne bien la bonne photo ; sinon, tout sera faux :(
Entourez ces liens avec une double accolade du type :
{{https://wtf.roflcopter.fr/pics/OZZlLLeg/dtMGKY9J.png}}
Pour insérer ces accolades, vous pouvez gagner du temps en utilisant la fonction Remplacer (menu Édition de LibreOffice Calc) : par exemple, remplacer https par {{https ; à vous de voir pour rajouter les accolades }}.

Le gros du travail est terminé !

Remarque :

Vous remarquerez également que ce cloud^[2] met en avant la vie privée puisque par défaut, il vous supprimera les données EXIF^[3] (et donc votre géolocalisation) de vos photos envoyées. Sachant que nous avons déjà récupéré les coordonnées GPS, nous pouvons laisser la case décochée.

De plus, toutes les photos sont chiffrées sur le serveur, cela veut donc dire que si nous perdons l'adresse (URL) de l'image, il est impossible de la récupérer. Plus d'infos sur le chiffrement^[4].

Manipulation 5 : Création d'un tableau collaboratif

Nous allons mettre en commun les différentes informations sur un tableau collaboratif commun.

Se rendre sur le site OuvaCalc pour créer un tableau collaboratif en ligne : https://calc.ouvaton.coop/
Cliquer sur le gros bouton Créer votre feuille :
Dans le tableau qui apparaît, collez toutes les informations du fichier csv précédent en conservant les en-têtes sur la première ligne ! Si vous avez travaillé à plusieurs, le 2ème élève pourra coller ses informations en dessous...
Notez (en le copiant et le collant dans un fichier) l'adresse URL du tableau qui doit être du type : https://calc.ouvaton.coop/dfh4k1iper

Manipulation 6 : création de la carte numérique avec uMap

Nous allons utiliser le logiciel libre uMap pour ce besoin. Ce logiciel hébergé par l'association française OpenStreetMap France.

Se rendre sur le site https://umap.openstreetmap.fr/ et s'authentifier avec le compte OpenStreetMap fourni par votre enseignant (il faudra donc bien choisir le fournisseur d'identité OpenStreetMap, reconnaissable à son logo).
Aller dans l'onglet Mon espace et sélectionner la carte de votre classe (ou créez la).

Il faut à présent envoyer nos données sur le logiciel. Pour cela, nous allons utiliser le format CSV que nous pouvons obtenir avec le tableau en ligne. Pour cela, il suffit d'ajouter à l'adresse URL l'extension .csv, pour l'exemple précédent, nous obtenons donc : https://calc.ouvaton.coop/dfh4k1iper.csv ; copier cette adresse dans le presse-papier.

Retourner sur uMap puis cliquer sur le crayon de modification :
Sélectionner le bouton Gérer les calques :
Ajouter un nouveau calque (permettra de mettre toutes les balades sur une carte) et lui donner un nom, genre Balade de...
Dans le champ Description, coller l'URL du tableau (genre https://calc.ouvaton.coop/dfh4k1iper) afin de le retrouver plus tard
Dans le menu Données Distantes, coller l'adresse URL où se trouvent nos données (l'URL du tableau donc), sans oublier l'extension .csv.
Choisir le format de données CSV puis activer le curseur Dynamique et le curseur Avec proxy !
Cliquer sur Enregistrer et immédiatement, des épingles devraient apparaître...
Cliquer sur Aperçu.

Fondamental : Une carte dynamique !

Si vous ajoutez à présent des lignes à votre tableau (avec de nouvelles coordonnées géographiques), automatiquement des épingles devraient apparaître ! C'est ce que l'on appelle une carte dynamique avec une mise à jour des données en temps quasi-réel !

Manipulation 7 : personnaliser les épingles pour afficher les photos

Pour personnaliser les épingles afin que les photos s'affichent, vous pouvez regarder cette courte vidéo qui vous donnera toutes les manipulations simples.

Personnalisation de notre carte uMap

Manipulation 8 : partager la carte sur l'ENT !

En fonction de votre temps restant, partager cette carte sur l'ENT du lycée. Dans le blog de l'espace SNT dans un premier temps...

Exemple : Exemple d'un rendu d'une balade de photos géolocalisées

Voir en plein écran

Balade vers le lycée Diderot

Notes

Cédric Frayssinet |
Cloud
Le cloud (ou cloud computing), en français l'informatique en nuage, consiste à utiliser des serveurs informatiques distants par l'intermédiaire d'un réseau, généralement Internet, pour stocker des données ou les exploiter.
Un cloud est simplement l'ordinateur d'une autre personne ou entreprise !
Métadonnée
Une métadonnée (mot composé du préfixe grec meta, indiquant l'auto-référence ; le mot signifie donc proprement « donnée de/à propos de donnée ») est une donnée servant à définir ou décrire une autre donnée quel que soit son support (papier ou électronique).
Un exemple type est d'associer à une donnée la date à laquelle elle a été produite ou enregistrée, ou à une photo les coordonnées GPS du lieu où elle a été prise.
L'Exchangeable image file format ou EXIF est une spécification de format de fichier pour les images utilisées par les appareils photographiques numériques. Cette spécification repose sur des formats existants tels que JPEG en y ajoutant des balises de métadonnées.
Chiffrement
Le chiffrement (ou cryptage) est un procédé de cryptographie grâce auquel on souhaite rendre la compréhension d'un document impossible à toute personne qui n'a pas la clé de (dé)chiffrement. Ce principe est généralement lié au principe d'accès conditionnel.
Cédric Frayssinet - Contributeurs OpenStreetMap |
Cédric Frayssinet |