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

Rappel de l'objectif de l'activité

Précédemment, vous avez réalisé des photos géolocalisées qui sont à présent dans votre porte-documents sur l'ENT. Le but de cette activité et de réaliser une carte numérique de ce type et de la partager sur un article de l'ENT :

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 !

Exemple de ballade avec photos géolocalisées

Manipulation 1 : récupération des photos

  • Sur l'ordinateur, créer un dossier photos_balade dans votre répertoire personnel sur le réseau,

  • Télécharger les différentes photos 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 à faire sur un ordinateur équipé du système d'exploitation Gnu/Linux - Ubuntu. Pour réaliser ces opérations avec Windows, on pourra utiliser le logiciel gratuit Photofiltre en remplacement de gThumb.

MéthodeManipulation 2 : réduire le poids des photos

Dans un but de limiter la consommation en stockage des data-centers et de la bande passante, il est important, quand on travaille sur le web, d'adapter les images aux écrans ; il est donc inutile de disposer de photos qui pourraient être imprimées pour faire un poster de 4 x 3 mètres.

Nous allons donc les retravailler pour avoir des photos aux dimensions adaptées et un poids raisonnable (plus d'informations à ce sujet dans le thème Photographie Numérique).

Pour ce qui suit, nous allons utiliser le logiciel Visionneur d'images gThumb.

  • Ouvrir ce logiciel que vous trouverez de le menu Applications -> Graphisme.

  • Ouvrir une de vos photos avec ce logiciel et faire apparaître dans le menu sa taille et ses dimensions. Notez-le sur un bout de papier :

Aperçu d'une photo avec le logiciel gThumb
  • Utiliser à présent le menu de modification (1) puis redimensionner (2) pour réduire la taille de la photo.

    En première approche, on pourra utiliser 20% de la dimension initiale de la photo ; ainsi, si une photo mesurait 4000 x 3000 pixels, elle mesurera à présent 800 x 600 pixels, ce qui est amplement suffisant pour notre besoin. On ajustera au besoin pour avoir la plus grande dimension comprise entre 800 et 1200 pixels.

    Comparer sa taille et ses nouvelles dimensions avec ce que vous avez noté précédemment. Montrer cela à votre enseignant.

Menu modification d'une photo dans gThumb
  • Selon ce que vous dit votre enseignant, procéder de même pour l'ensemble des photos.

ComplémentManipulation 3 : Récupérer les coordonnées GPS des photos avec Python

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 :

1
#!/usr/bin/env python
2
# -*- coding: utf-8 -*-
3
#
4
#  exif.py
5
#  
6
# based on https://gist.github.com/erans/983821
7
# A la racine, on doit trouver ce fichier Python et un dossier du nom
8
# 'photos_balade' qui contient toutes les photos
9
# Après exécution, on trouvera un fichier CSV à côté du fichier Python
10
11
import exifread
12
import os
13
14
## Variables qui peuvent être modifiées
15
16
dossier_photos = 'photos_balade'
17
fichier_csv = 'exifs.csv'
18
19
## Fonctions
20
def _get_if_exist(data, key):
21
    if key in data:
22
        return data[key]
23
24
    return None
25
26
def _convert_to_degress(value):
27
    """
28
    Helper function to convert the GPS coordinates stored in the EXIF to degress in float format
29
30
    :param value:
31
    :type value: exifread.utils.Ratio
32
    :rtype: float
33
    """
34
    d = float(value.values[0].num) / float(value.values[0].den)
35
    m = float(value.values[1].num) / float(value.values[1].den)
36
    s = float(value.values[2].num) / float(value.values[2].den)
37
38
    return d + (m / 60.0) + (s / 3600.0)
39
    
40
def get_exif_location(exif_data):
41
    """
42
    Returns the latitude and longitude, if available, from the provided exif_data (obtained through get_exif_data above)
43
    """
44
    lat = None
45
    lon = None
46
47
    gps_latitude = _get_if_exist(exif_data, 'GPS GPSLatitude')
48
    gps_latitude_ref = _get_if_exist(exif_data, 'GPS GPSLatitudeRef')
49
    gps_longitude = _get_if_exist(exif_data, 'GPS GPSLongitude')
50
    gps_longitude_ref = _get_if_exist(exif_data, 'GPS GPSLongitudeRef')
51
52
    if gps_latitude and gps_latitude_ref and gps_longitude and gps_longitude_ref:
53
        lat = _convert_to_degress(gps_latitude)
54
        if gps_latitude_ref.values[0] != 'N':
55
            lat = 0 - lat
56
57
        lon = _convert_to_degress(gps_longitude)
58
        if gps_longitude_ref.values[0] != 'E':
59
            lon = 0 - lon
60
61
    return lat, lon
62
63
def get_exif_data(image_file):
64
    with open(image_file, 'rb') as f:
65
        exif_tags = exifread.process_file(f)
66
    return exif_tags 
67
68
## Programme principal
69
70
fichier_sortie = open(fichier_csv,'w')
71
72
for fichier_photo in os.listdir(dossier_photos):
73
	lat, lon = get_exif_location(get_exif_data(dossier_photos+'/'+fichier_photo))
74
	print("Image : {}, Latitude : {} , Longitude : {}". format(fichier_photo, lat, lon))
75
	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. 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.

  • En utilisant le fichier ci-dessous, compléter la première partie en vert avec les données extraites du fichier exifs.csv.

AttentionCompétence PIX : trouver des informations géographiques dans une photo

À noter que les photos prises par des iPhones ne respectent pas certaines conventions, ainsi, on n'arrive pas à récupérer ces informations GPS.

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

  1. 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...

  2. 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

    Métadonnées GPS d'une photo dans gThumb

MéthodeManipulation 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[1] public. Nous allons utiliser un cloud administré par une association toulousaine Roflcopter : https://wtf.roflcopter.fr/pics/

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 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 !

Aperçu après envoi
  • Coller ces liens dans la colonne 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}}

  • Compléter enfin les 2 derniers colonnes vides : Nom et Description (Nom est ce que vous avez pris en photo, cela doit ressembler au nom du fichier ; Description est une petite phrase pour expliquer votre photo)

C'est important pour la suite du travail qui est presque terminé !

Remarque

Vous remarquerez également que ce cloud[1] met en avant la vie privée puisque par défaut, il vous supprimera les données EXIF[2] (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[3].

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 FramaCalc pour créer un tableau collaboratif en ligne : https://accueil.framacalc.org/fr/

  • Cliquer sur le gros bouton Créer un calc :

  • 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 l'adresse URL du tableau qui doit être du type : https://lite.framacalc.org/9lyx-xwa1axq6se

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 mes cartes 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://lite.framacalc.org/9lyx-xwa1axq6se.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 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 !

  • Cliquer sur Enregistrer et immédiatement, des épingles devraient apparaître...

  • Cliquer sur Désactiver l'édition.

FondamentalUne 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 uMapInformations[4]

Manipulation 7 : 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...