samedi 6 décembre 2025

Ma boîte à outils IA/PWA

 Boite à outils Cartographique

 

ARLbis : Créateur de fichiers MBtiles et SQliteDB

ARL : Visualiseur d'un ensemble de circuits de randonnée

editARL : Editeur de l'application ARL

ARLmarche : obsolète par rapport à ARLbis

arl_rando : Randonner sur le terrain

affichemb : obsolète

Allez-y : Se rendre à un point de coordonnées connues

editpoih : Editeur de visite à partir de POI

lirtuiles :  afficher des cartes MBTiles en offline avec position GPS.

marando : Randonner sur le terrain ( mauvais positionnement)

marche : Randonner sur le terrain

matrace4 : Randonner sur le terrain

mesrandos : Générateur de proposition de randonnées pour le club

mestiles : Générateur de fichiers MBtiles

modifpoi : Modificateur de l'ordre de POI à partir d'un fichier zip

montrek : Générateur de fichier pour OSMand à partir IGN et OSM

ordonnepoi :Gestionnaire de POI fonctionnant hors-ligne.Tri par longitude / latitudeSauvegarde ZIP avec structure data/ intacteExport KML UTF-8 compatible Google Earth

traceC : Crée un fichier HTML à partir d'une trace GPX ou KML (préalable  à editARL)

tracecarte : un peu comme traceC mais avec ChatGPT

treking : Randonner sur le terrai avec PMtiles

visupoicd : Visualiseur de visite d'après POI

visurolleville : simple visualiseur de photos aériennes en France


Boite à outils générale


QRcodeGenerateur : Générateur de QR codes

cadran : Fabriquer son cadran analemmatique

cadran_solaire : Autre fabrique de cadran solaire

convertisseur_md : Convertisseur de Excel en Markdown

icongene : générateur d'icone avec uniquement du texte

je_parle : générateur vocal à partir de texte (TTS)

mesips : connaître ses IP privée et publique

optimiseur : Optimiser les images pour un site web

panoCP : Créateur de panorama (marche mal)

panorama : assembleur de clichés drone (marche mal)

pilotecam : Gérer sa caméra smartphone depuis son PC

tagaudio : Ajout d'audio au waypoints

tagmoi : ajoute un tag GPS sur la photo

trouvecoord : Affiche les coordonnées GPS d'une photo et affiche sur carte

lundi 24 novembre 2025

QGIS : Visualisation 3D

 Pour visualiser vos données dans QGIS en 3D, vous devez utiliser la Vue de carte 3D (3D Map View), qui nécessite que vos données aient une information d'élévation (Z) ou que vous chargiez un Modèle Numérique de Terrain (MNT).

Voici les étapes pour activer et configurer la visualisation 3D :


1. Activer la Vue 3D

  1. Allez dans le menu principal Vue.

  2. Sélectionnez Nouvelle vue de carte 3D (ou New 3D Map View).

Une nouvelle fenêtre (la fenêtre 3D) s'ouvre, affichant initialement une version plate de votre carte.


2. Configurer la Scène 3D

Pour que la 3D fonctionne, vous devez définir une source d'élévation.

  1. Dans la nouvelle fenêtre 3D, cliquez sur l'icône Configurer (qui ressemble à un engrenage ⚙️) située dans la barre d'outils de la fenêtre 3D.

  2. Dans la boîte de dialogue Configuration de la scène 3D :

    • Type de terrain :

      • Choisissez Altitude plate si vous voulez juste extruder des polygones sans relief de fond.

      • Choisissez Couche de MNT (ou DEM Layer) si vous avez chargé un MNT (raster avec des valeurs d'élévation) pour créer un relief réaliste.

    • Couche de MNT (si sélectionnée) : Sélectionnez la couche raster de votre Modèle Numérique de Terrain.

    • Échelle verticale : Augmentez cette valeur (ex: 2.0 ou 3.0) pour exagérer le relief et mieux visualiser les différences d'altitude.

  3. Cliquez sur OK.


3. Configurer l'Altitude des Couches Vectorielles

Pour que vos entités vectorielles (points, lignes, polygones) apparaissent en 3D, vous devez définir leur altitude.

  1. Faites un clic droit sur la couche vectorielle concernée dans le panneau des couches.

  2. Sélectionnez Propriétés....

  3. Allez dans l'onglet Rendu 3D.

  4. Cochez la case Activer le rendu 3D.

  5. Définition de l'Altitude :

    • Type d'altitude : Choisissez Altitude absolue (si la donnée Z est dans la table d'attributs) ou Altitude relative au MNT.

    • Champ d'altitude : Si vous utilisez l'altitude absolue, spécifiez le champ d'attribut qui contient la valeur Z.

  6. Extrusion (pour les polygones) : Si c'est un polygone (bâtiment), cochez Extruder et spécifiez la hauteur d'extrusion (soit une valeur fixe, soit un champ d'attribut).

Après avoir appliqué ces propriétés, vous devriez pouvoir naviguer dans votre scène 3D.


Navigation 🧭

  • Rotation : Maintenez le clic droit de la souris enfoncé et déplacez-la.

  • Zoom : Utilisez la molette de la souris.

  • Déplacement (Pan) : Maintenez le clic central (molette) ou Maj + Clic gauche et déplacez la souris.

Fond de carte : De QGIS vers .mbtiles et .sqlitedb

 Pour exporter le fond de carte (raster) visible dans QGIS vers un fichier unique au format SQLite/MBTiles/GeoPackage (utilisé par de nombreuses applications de randonnée comme OruxMaps, Locus Map, etc.), vous devez utiliser un outil de création de tuiles.

Le format MBTiles est souvent préféré pour les fonds de carte car il est optimisé pour les tuiles de carte et est basé sur le format SQLite, ce qui le rend compatible avec le .sqlitedb de nombreuses applications.

1. Utiliser un plugin QGIS : QMetaTiles (Recommandé)

C'est l'outil le plus simple pour créer des fichiers MBTiles/SQLite à partir de votre fond de carte.

A. Installation du plugin

  1. Allez dans le menu Extensions > Installer/Gérer les extensions....

  2. Recherchez et installez le plugin QMetaTiles (ou QTiles pour une alternative).

B. Création du fichier de tuiles (MBTiles)

  1. Lancez le plugin : Allez dans Extensions > QMetaTiles > QMetaTiles.

  2. Couche d'entrée (Input Layer) : Sélectionnez le fond de carte que vous voulez exporter (par exemple, Google Satellite, OpenStreetMap, ou votre couche WMS/XYZ).

  3. Chemin de sortie (Output File) : Choisissez l'emplacement et nommez votre fichier (ex: fond_randonnee.mbtiles).

  4. Définir l'Emprise (Secteur) :

    • Dans la section Extent (ou Emprise), choisissez Calculate from Map Canvas (Calculer à partir du canevas de la carte).

    • Dessinez le rectangle exact de la zone que vous souhaitez exporter sur votre carte QGIS.

  5. Définir les Niveaux de Zoom (Zoom Levels) :

    • Définissez la plage de zoom : Minimum Zoom (ex: 10 ou 12, pour une vue large) et Maximum Zoom (ex: 17 ou 18, pour le détail sur le terrain).

  6. Lancer la création : Cliquez sur Run ou Démarrer.

Le plugin va alors télécharger et compiler toutes les tuiles de cette zone, à tous les niveaux de zoom spécifiés, dans un seul fichier .mbtiles (qui est compatible SQLite).

2. Exploitation sur Smartphone

Une fois le fichier .mbtiles créé, vous le transférez sur votre smartphone et vous l'importez dans votre application de randonnée.

Application de RandonnéeProcédure générale
OruxMapsCopiez le fichier .mbtiles ou .sqlite dans le dossier oruxmaps/mapfiles. L'application le détectera automatiquement au prochain lancement ou après rafraîchissement.
Locus MapCopiez le fichier dans le dossier Locus/maps (ou Locus/mapsOnline pour certains formats).

dimanche 23 novembre 2025

Cartes off-line de randonnée

Problème :  La plupart des applications de randonnée sur smartphone nécessitent un abonnement pour pouvoir accéder à des fonds cartographiques en-ligne (on-line) ou hors-ligne (oof-line).
Quand on part en randonnée, les cartes en-ligne sont parfois innaccessibles à cause d'une absence d'internet.

Objectif : Une application de randonnée avec des cartes off-line.

Réalisation : 3 applications seront nécessaires sur son smartphone :
1) Un explorateur de fichiers (CX Explorer ou File Explorer de Google)
2) Un générateur de fichiers cartographiques (ARLbis), ici présenté.
3) Une application de randonnée qui accepte les fichiers carto générés par ARLbis
    Exemples Guru Maps, Locus Maps, Orux Maps

1) Créer un dossier pour les cartes

Avec l'explorateur de fichier, on crée un dossier de cartes dans un espace accessible par l'explorateur. Cela peut être dans Documents ou Téléchargements.
Par exemple : Documents > Cartes_horsligne
Cela permet de ranger ces cartes proprement et de pouvoir les supprimer si elles ne servent plus.

2) Télécharger l'application ARLbis

https://bernardhoyez.github.io/PWA/ARLbis

Installer l'application :

 "Trois petits points" en haut à droite.
Installer sur la page d'accueil > Installer

L'icone de l'application apparait sur l'écran

On peut fermer la page, l'application peut être relancée en cliquant sur l'icone

3) Télécharger l'application de randonnée sur le Play Store

Ces applications ont à peu près les mêmes fonctions de base. Comme elles existent et sont téléchargeables gtratuitement, on ne va pas réinventer la roue.
Passer l'introduction et les pubs, ne pas s'enregistrer.

4) Utiliser l'application ARLbis

Cette application permet de télécharger sur son smartphone des cartes en préparation d'une randonnée. Pour utiliser cette application, il faut une connexion internet.
Lancer l'application.

a) choisir les cartes Open Street Maps OSM ou IGN Plan V2 (menu déroulant)
OSM avantage : Les cartes OSM proposent le monde entier
IGN avantage : Les cartes IGN sont pour la France avec plus de détail que OSM

b) Définir le centre de la carte
- soit par pointage sur la carte affichée,
- soit en entrant les coordonnées
- soit en utilisant sa position actuelle.

c) Définir le rayon d'action de la carte en kilomètres avec le curseur de défilement

Ne pas exagérer le rayon. Généralement 4 ou 5 kilomètres suffisent. Sinon, beaucoup d'espace mémoire de stockage

d) Choisir les niveaux de zoom (normalement entre 12 et 16)

e) Activer ou non le choix du dossier de sauvegarde de la carte

- si pas de choix, la carte est sauvegardée dans le dossier "Téléchargements"
- si choix du dossier, le spécifier 

(on aura au préalable créé le dossier soit dans Téléchargements, soit dans Documents
avec un explorateur de fichiers, par exemple Documents/cartes horsligne).

f) Cliquer sur Générer le fichier de tuiles 
Attendre la fin de la barre de défilement (0 à 100%). Un message indique si les tuiles ont bien été téléchargées.

 5) Utiliser l'appli de randonnée sur le terrain

Ne nécessite pas d'être connecté à internet
Si vous ne le croyez pas, passez en mode Avion.
Avec l'explorateur de fichier, rechercher le fichier de cartes

Sélectionner la carte. > Ouvrir avec > Guru Maps ou Locus Maps ou Orux
Préférer Guru et sqlitedb.

L'application  s'ouvre.

Cliquer sur l'icone "Cartes empilées" et choisir la carte
Clique sur la boussole
Cliquer sur Aller sur la carte

La carte s'affiche avec sa position.
On pourra alors suivre et enregistrer sa trace, connaître la distance parcourue, son temps de parcours etc..

Récupérer une trace avec Guru : Icone "Mes collections"(TV) > Sélectionner la trace > Icone Nuage > Exporter (en gpx ou kml)

Sinon : Utiliser MOBAC > Exporter en MBtiles Sqlite (format d'Atlas) 6 possible d'utiliser Mocus Maps    _- Mettre le fichoier  .mbtiles  dans ce dossier :

$$/Android/data/menion.android.locus/files/Locus/$$
ou
$$/Android/media/menion.android.locus/Maps/$$

pour OSMand 
/storage/emulated/0/Android/data/net.osmand/files/...

samedi 22 novembre 2025

Relief en niveaux de gris avec QGIS

Avec QGIS 

Deux couches sont superposées :

Couche IGN Plan v2
Couche WMTS IGNF Lidar MNT Shadow (filtrer sur shadow et MNT)

Cliquer sur la couche inférieure (Shadow) > Propriétés > Symbologie
Contraste 43 - luminosité -20

Cliquer sur la couche supérieure (Plan IGN)
Sélectionner cette couche > Propriétés
Transparence 50%

Fichier > Exporter la carte au format image

Avec Photoshop

Régler l'histogramme de l'image

mercredi 19 novembre 2025

Des MBtiles avec la PWA mestiles

 https://bernardhoyez.github.io/PWA/mestiles/

Cette PWA permet de construire des fichiers MBtiles à partir de :
- OpenStreetMaps
- IGN Plan v2

On peut utiliser ces fichiers dans Orux Maps

Un fichier MBTiles (MapBox Tiles) est un format de fichier standardisé qui permet de stocker des données cartographiques en mosaïque (appelées tiles ou tuiles) dans une base de données SQLite unique.

En termes simples, au lieu d'avoir un répertoire complexe avec des milliers de fichiers images séparés pour chaque tuile de carte et chaque niveau de zoom, toutes ces tuiles sont regroupées efficacement dans un seul fichier portable avec l'extension .mbtiles.


🗺️ Caractéristiques et Structure

  • Base de données SQLite : Le format MBTiles repose sur la technologie de base de données SQLite, ce qui le rend portable et facile à utiliser sur différentes plateformes.

  • Contenu : Il stocke les tuiles cartographiques, qui peuvent être de type :

    • Raster (images comme PNG, JPEG, WEBP) : pour les fonds de carte (imagerie satellite, cartes scannées).

    • Vectoriel (format PBF, par exemple) : pour les données vectorielles (routes, limites, points d'intérêt) qui peuvent être stylisées dynamiquement.

  • Schéma Standardisé : Le fichier contient généralement deux tables principales :

    • metadata : Contient des informations essentielles sur le jeu de tuiles (nom, type, version, niveaux de zoom minimum/maximum, etc.).

    • tiles : Contient les tuiles elles-mêmes, avec des colonnes pour le niveau de zoom (zoom_level), la colonne (tile_column), la ligne (tile_row) et les données binaires de la tuile (tile_data).

mercredi 12 novembre 2025

Effacer les données d'un site Chrome

 

Effacer les données du site spécifique

  1. Ouvrez Chrome (ou le navigateur utilisé).

  2. Allez dans les Paramètres du navigateur (les trois points verticaux en haut à droite).

  3. Sélectionnez Paramètres des sites (Site settings).

  4. Sélectionnez Stockage des données (Storage).

  5. Recherchez l'URL de votre PWA dans la liste.  Par exemple mon site Github

  6. Appuyez sur le nom du site, puis sur Effacer et réinitialiser (Clear & Reset).

Chrome Windows
  1. Ouvrez le menu « Outils » en haut à droite.
  2. Choisissez « Historique »
  3. Cliquez sur « Historique »
  4. Cliquez sur « Effacer les données de navigation »
  5. Dans l'onglet « Général », cochez « Historique de navigation » et « Cookies et autres données de site »
  6. Cliquez sur « Effacer les données »

mardi 28 octobre 2025

Travail sur images satellite Google avec QGIS

1) Il faut une extension dans QGIS

Pour obtenir les images satellite de Google.
Dans le menu, sélectionner "Extensions"
Extension Quick Map Services. La télécharger.

2) Télécharger l'image satellite

Dans le menu, sélectionner "internet" , puis Google
Zoomer sur la vue satellitaire

3) Tracer des lignes

Réglages : Vue > Panneaux > Style de couche
Ajouter une couche shapefile : icone "Nouvelle couche shapefile"
Basculer en mode édition (icone crayon)
Ajouter une identité linéaire (bouton)

Dans le panneau "Style de couche" : ajuster la couleur et l'épaisseur de la ligne (exemple 2 mm)

La souris prend la forme d'un cercle.
Dessiner point à point.
A la fin, cliquer à droite : le trait coloré apparaît

4) Exporter en KML

Sélectionner la couche shapefile.
Clic à droite > Exporter > Sauvegarder les entités sous > Format KML dans dossier sélectionné.

5) Vérification dans Google Earth

Ouvrir le fichier kml dans Google Earth


samedi 11 octobre 2025

Des MB Tiles avec QGis

 Dans QGis :

Couche > Ajouter une couche > Ajouter une couche WMS/WMTS

Explorateur (icone dossier) > WMS/WMTS > Serveur IGN > Ortho 20 cm

La carte de France apparaît en tout petit (lent à apparaître) > Zoomer

Traitement > Boite à outils > Outils Raster > Générer des tuiles XYZ (MBTiles)

Si la boîte à outils n’est pas ouverte, vous la trouverez dans le menu principal de QGIS,  onglet traitement > cliquez sur « Boîte à outils » (ou utiliser le raccourci clavier : Ctrl + Alt + T).

 Boite de dialogue avec options :

  • Emprise > Dessiner sur le canevas de carte
  • Dessiner avec la souris
  • Zoom minimum : 10 par exemple
  • Zoom maximum : 18 par exemple
  • DPI : 300 par exemple
  • Format de tuiles : JPG
  • Qualité : 95%
  • Sortie : choisir un nom et un dossier.
Une barre d'éxécution apparaît de 0 à 100%

Voir également ce tuto.


mercredi 8 octobre 2025

Ma boîte à outils POI

 Les POI (Points Of Interest) ou Points d'intérêt sont les petits "cailloux blancs" qu'on laisse sur un trajet pour se souvenir, bien après, de certains lieux marquants.

Ce trajet peut être une excursion touristique ou géologique, une randonnée pédestre, la visite d'un musée.

Une visite est un ensemble structuré de POIs.

Un POI comporte ou peut comporter différents objets :

  • un ID ou identificateur
  • un titre (obligatoire)
  • une géolocalisation GPS (obligatoire)
  • un commentaire textuel (facultatif)
  • une image ou une photo (facultatif)
  • un commentaire audio (facultatif)
  • une vidéo (facultative).
Puisqu'il est obligatoirement géolocalisé, chaque POI d'une visite peut être représenté par un marqueur sur un fond de carte. Par exemple, une épingle sur un fond de carte Open Street Map.

Il y a deux aspects dans une visite :
  • sa construction
  • sa visualisation

Construire une visite consiste à décrire une succession de POIs, en fournissant pour chaque POI le maximum des objets qu'on vient de nommer. On peut par exemple choisir une photo ou une vidéo captée avec son smartphone,ou encore enregistrer un commentaire vocal descriptif du POI.

Visualiser une visite consiste à suivre des POIs sur une carte. Cette carte, de manière élémentaire, peut être une carte OSM (OpenStreet Map) sur laquelle les POIs sont représentés par des marqueurs. Un clic sur ces marqueurs entraîne l'ouverture de popups (petites fenêtres flottantes) montant les données attachées au POI.
La visualisation des POIs peut se faire dans deux situations :
    - en chambre, avec un ordinateur, c'est une visite virtuelle,
    - sur le terrain, avec un smartphone géolocalisé, c'est une visite guidée.

Entre la construction et la visualisation se fait un passage de données, par le truchement d'un fichier.
Ce fichier est en fait une archive (un zip) qui comporte les données brutes  (dossier "data") et la structure qui lie les données (fichier visit.json).

La traduction informatique de cette visite guidée va être réalisée par l'écriture de plusieurs applications qui ont en commun le fait d'être des PWA (Progressive Web Applications). Rappelons en quelques phrases l'intérêt du choix des PWA.
    - Code unique : Une PWA utilise une seule base de code (HTML, CSS, JavaScript) pour toutes les plateformes (web, mobile, desktop).
    - Pas de store d'applications obligatoire : L'utilisateur peut installer la PWA directement depuis le navigateur, sans passer par l'App Store ou Google Play, simplifiant le processus d'adoption.
    - Légèreté : Les PWA sont souvent beaucoup plus légères que les applications natives.
    - Vitesse et performance : Les PWA sont conçues pour être rapides et réactives.
    - Fonctionnement hors ligne (ou avec connexion limitée) : Grâce aux Service Workers, elles peuvent mettre en cache du contenu et fonctionner même sans connexion Internet ou avec une connexion instable.
    - Partage facilité : Elles peuvent être lancées et partagées via un simple lien URL.

Pour bâtir les applications, les robots générateurs de code sont essentiels (ChatGPT, Claude, Gemini, Grok, Github Copilot, Perplexity ...). Leur rôle a été déterminant.

La construction de la visite à partir des POIs est basée sur 3 applications accessibles sur le dépôt Github :
    - editpoih : construction des POI
    - modifpoi : correction et déplacement des POIs
    - ordonnepoi : tri les POI selon la latitude ou la longitude

La visualisation de la visite est réalisée par :
    - visupoicd : visite virtuelle ou visite guidée

Une fois que l'application est lancée dans le navigateur (Chrome, Firefox, Safari ...), il est possible de l'installer. Selon le navigateur et le type de plateforme, le processus d'installation est différent. Il peut s'agir d'une icône particulière à côté de la barre d'URL ou d'une option accessible par l'icône "trois points" ou hamburger. L'application apparaît avec son icône sur la page d'accueil et dans la liste des applications installées.

Comment utiliser editpoih
1) Donner un nom à la visite renfermant les POIs.
Remarquer tout de suite qu'il est possible de reprendre une visite déjà commencée et pour laquelle on ajoute des POIs supplémentaire. Cette visite préliminaire est un fichier .zip.
2) Donner un titre au POI sur lequel on va travailler.
3) Deux champs d'entrée qui permettent de fixer la latitude et la longitude du POI. Ces champs peuvent être remplis de 3 manières :
    - automatiquement par importation d'une photogéolocalisée (métadonnées EXIF)
    - par positionnement manuel d'un marqueur sur la carte OSM
    - par remplissage manuel (format degrés décimaux, avec point décimal).
La géolocalisation est obligatoire de quelque manière que ce soit.
4) Remplissage d'un commentaire textuel.
5) Importation d'un fichier audio MP3.
6) Importation d'une vidéo MP4
7) Quand toutes les données sont introduites, on clique sur le bouton "Ajouter ce POI".
Ce POI apparaît alors dans la liste des POIs validés, dans la colonne de droite.
8) On recommence avec l'introduction d'un nouveau POI, autant de fois qu'il y a de POIs prévus.
9) Quand  tous les POIs sont validés, on sauvegarde la visite sous la forme d'un fichier Zip.

Les POIs apparaissent dans la liste dans l'ordre dans lequel ils ont été introduits.
Par glisser/déposer, on peut modifier cet ordre.
On peut également éditer de nouveau un POI de la liste ou le supprimer.

Comment utiliser modifpoi
Il est fréquent qu'une photo ait été mal géolocalisée par le GPS inetrne du smartphone. Le marqueur du POI se trouve positionné sur la carte au maivais endroit.
A l'aide de la carte, on déplace le marqueut fautif au bon enfroit. On sauvegarde le fichier modifié.

Comment utiliser ordonnepoi
Les POIs sont souvent entrés dans un ordre indifférent à leur ordonnancement géographique.
Si la visite est linéaire, il est possible de réorganiser les POIs selon la latitude ou selon la longitude.
Comme les marqueurs sont numérotés, il est alors plus facile de suivre la progression sur le terrain.

Comment utiliser visupoicd

Alors que la construction des POIs se prépare essentiellement sur Desktop (ordinateur), la visualisation des POIs est intrinséquement plus adaptée aux situations de mobilité externe et donc au smartphone. Visupoicd peut fonctionner sur PC ou sur Mac, mais on reste dans la virtualité.
On insistera donc sur les propriétés de l'application installée sur un smartphone (Android ou iOS).

A l'ouverture de l'application, il n'est demandé que de charger un fichier .zip.
Ce fichier .zip qui peut atteindre des dizaines ou des centaines de mégaoctets aura été précédemment sauvegardé dans un dossier facilement accessible. Sa taille interdit généralement d'être transmis par mél. On utilisera à cet effet des plateformes de transfert de fichiers lourds ou un Drive dans le cloud.
Si la visite comporte de nombreux POIs et des fichiers média lourds, alors l'importation peut demander un certain temps.

Une carte s'affiche présentant une suite numérotée de marqueurs de POIs. Normalement, tous les POIs sont représentés et correspondent à une certaine échelle. Il est possible de zoomer pour grossir et mieux distinguer individuellement les POIs..
Un clic sur un marqueur de POI enttraîne l'ouverture d'une popup (petite fenêtre attachée au point).
Si vous déplacez la carte (glisser), vous constatez que votre position géographique actuelle est figurée par un gros marqueur rouge pulsant. En zoomant dessus, vous verrez les détails de topographie ou d'architecture apparaître.
Dans la popup sont figurés :
    - le titre du POI,
    - sa latitude et sa longitude
    - un commentaire (facultatif)
    - une photo (facultative)
    - un lecteur audio (facultatif)
    - un lecteur vidéo (facultatif)
    - une distance en mètres vous séparant du POI
    - un azimut en degrés par rapport au Nord vers le POI sélectionné.
La distance et l'azimut sont mis à jour à mesure que vous vous déplacez. On peut ainsi se rapprocher progressivement du POI en tenant compte de l'évolution de la distance.

Si une photo est présente dans la popup, un simple clic sur cette photo ouvre une "lightbox" zoomable.
Ceci permet d'observer des détails précis à l'intérieur de la photo. Une croix de fermeture permet de faire disparaître la lightbox.
__________________________________

Pour aider à l'optimisation des photos apparaissant dans les POIs, une petite application PWA a été créée :

    - optimiseur
________________________________________

Pour vérifier si une photo est correctement géolocalisée dans ses données EXIF


mardi 2 septembre 2025

Porter sa WPA sur GitHub

Le problème : Développement vs. Production

Lorsque vous travaillez sur votre ordinateur, vous utilisez probablement un serveur de développement (comme celui de Vite ou Create React App). Ce serveur fait beaucoup de travail en arrière-plan : il compile votre code TypeScript/JSX (.tsx) en JavaScript standard que les navigateurs peuvent comprendre, et il le fait à la volée à chaque fois que vous modifiez un fichier.

Cependant, GitHub Pages est un service d'hébergement de fichiers statiques. Il ne fait aucune compilation. Il se contente de servir les fichiers que vous lui donnez, tels quels.

Votre fichier index.html contient cette ligne :
<script type="module" src="/index.tsx"></script>

Un navigateur web ne peut pas exécuter un fichier .tsx directement. Il va donc échouer à charger le script, et par conséquent, votre application React ne démarrera jamais, laissant visible uniquement la couleur de fond de votre page (un gris très sombre, bg-gray-900, qui apparaît comme un écran noir).

La solution : Le "Build"

Pour que votre application fonctionne sur GitHub Pages, vous devez la "compiler" ou la "builder" pour la production avant de la déployer. Cette étape de "build" va :

  1. Convertir tous vos fichiers .tsx et .ts en fichiers JavaScript optimisés.

  2. Regrouper votre code et ses dépendances en quelques fichiers pour améliorer les performances.

  3. Créer un dossier (généralement nommé dist ou build) contenant une version de production de votre site.

Voici les étapes à suivre :

  1. Lancer la commande de build : Dans le terminal, à la racine de votre projet, exécutez la commande suivante (selon le gestionnaire de paquets que vous utilisez) :

    • npm run build

    • ou yarn build

  2. Déployer le bon dossier : Après l'exécution de la commande, un nouveau dossier dist (ou build) apparaîtra dans votre projet. C'est le contenu de ce dossier que vous devez configurer pour être déployé sur GitHub Pages, et non la totalité de votre projet avec les fichiers sources.

  3. (Important) Configurer le chemin de base : Si votre dépôt GitHub est nommé mon-projet, votre site sera accessible à https://votre-nom.github.io/mon-projet/. Vous devez indiquer cela à votre outil de build. Si vous utilisez Vite, par exemple, vous devez modifier votre fichier vite.config.ts pour y ajouter la ligne base:

    JavaScript
    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [react()],
      base: '/mon-projet/' // Remplacez 'mon-projet' par le nom de votre dépôt GitHub
    })

    Après cette modification, relancez la commande npm run build.

En résumé, le processus correct est : développer localement -> builder le projet -> déployer le dossier . En suivant ces étapes, votre application s'affichera correctement sur GitHub Pages.

lundi 25 août 2025

Un agenda Google géré par une feuille de calcul Google Sheets

Cette méthode utilise un script pour lire les données de votre Google Sheets, effacer les événements existants dans un Google Calendar, puis créer de nouveaux événements à partir des données de la feuille. Le script peut être exécuté manuellement pour mettre à jour l'agenda.

Logique du Script

  1. Accéder aux données : Le script se connectera à votre feuille Google Sheets et lira les données de chaque ligne.

  2. Effacer l'agenda : Il effacera tous les événements existants dans l'agenda cible pour éviter les doublons ou la présence d'événements obsolètes.

  3. Itérer et créer les événements : Il parcourra ensuite chaque ligne de votre feuille, créant un nouvel événement dans un Google Calendar spécifié pour chaque ligne.

  4. Définir les détails de l'événement : Le script utilisera les données de vos colonnes pour définir le titre de l'événement, la date, l'heure de début (en ajoutant 3 heures pour l'heure de fin) et la description.

  5. Formater la description : Il lira les en-têtes et les données correspondantes des autres colonnes (lieu, animateur, etc.) et les formatera clairement dans la description de l'événement.

Étapes pour l'implémentation

  1. Créez un Google Calendar dédié : Il est recommandé de créer un nouvel agenda spécialement pour ces événements. Cela évite que le script ne modifie accidentellement votre agenda personnel.

  2. Ouvrez l'éditeur de script : Dans votre Google Sheets, allez dans Extensions > Apps Script. Cela ouvrira un nouvel onglet avec l'éditeur de script.

  3. Collez le code : Copiez le code ci-dessous et collez-le dans l'éditeur. Vous devrez remplacer les identifiants YOUR_SPREADSHEET_ID et YOUR_CALENDAR_ID par les vôtres.

  4. Configurez le script :

    • YOUR_SPREADSHEET_ID : Remplacez par l'ID de votre feuille Google Sheets. Vous le trouvez dans l'URL de votre feuille (c'est la longue chaîne de lettres et de chiffres entre /d/ et /edit).

    • YOUR_CALENDAR_ID : Remplacez par l'ID de votre nouvel agenda. Pour le trouver, allez dans les paramètres de votre Google Calendar, sélectionnez l'agenda que vous avez créé, et cherchez l'ID de l'agenda sous Intégrer l'agenda.

  5. Sauvegardez le script : Cliquez sur l'icône de la disquette pour sauvegarder le projet.

  6. Exécutez le script : Cliquez sur le bouton Exécuter (▶️). La première fois que vous l'exécutez, vous devrez donner au script les autorisations nécessaires pour accéder à votre Google Sheets et Google Calendar.

  7. Intégrez l'agenda : Allez sur votre site Google Sites. Insérez un nouvel élément et sélectionnez Intégrer > Agenda. Sélectionnez l'agenda que vous venez de mettre à jour.

3 modifications à faire du script suivant YOUR_CALENDAR_ID et YOUR_SPREADSHEET_ID'
____________________________________________________________



// Fonction pour effacer tous les événements d'un agenda spécifique
function clearCalendar() {
  const calendarId = 'YOUR_CALENDAR_ID'; // Remplacez par votre ID de calendrier
  const calendar = CalendarApp.getCalendarById(calendarId);
  if (!calendar) {
    Logger.log('Erreur : l\'ID de calendrier est invalide. Veuillez vérifier l\'ID.');
    return;
  }
  const events = calendar.getEvents(new Date('1970-01-01'), new Date('2100-01-01'));
  
  Logger.log('Suppression de ' + events.length + ' événements...');
  for (let i = 0; i < events.length; i++) {
    events[i].deleteEvent();
  }
}

// Fonction pour créer de nouveaux événements à partir de la feuille Google Sheets
function createEventsFromSheet() {
  const spreadsheetId = 'YOUR_SPREADSHEET_ID'; // Remplacez par votre ID de feuille de calcul
  const calendarId = 'YOUR_CALENDAR_ID'; // Remplacez par votre ID de calendrier
  const sheet = SpreadsheetApp.openById(spreadsheetId).getActiveSheet();
  
  // Efface d'abord l'agenda pour éviter les doublons et les événements obsolètes
  clearCalendar();
  
  const dataRange = sheet.getDataRange();
  const values = dataRange.getValues();
  const headers = values[0];
  
  // Saute la première ligne qui contient les en-têtes
  for (let i = 1; i < values.length; i++) {
    const row = values[i];
    
    const eventTitle = row[0];
    const dateStr = row[1]; // Les dates sont lues comme du texte
    const startTimeStr = row[2]; // Les heures sont lues comme du texte
    
    // Vérifie si la ligne contient un titre, une date et une heure de début
    if (eventTitle && dateStr && startTimeStr) {
      
      const [day, month, year] = dateStr.split('/').map(Number);
      const [hour, minute] = startTimeStr.split(':').map(Number);
      
      const startDate = new Date(year, month - 1, day, hour, minute);
      // L'événement dure 3 heures
      const endDate = new Date(startDate.getTime() + 3 * 60 * 60 * 1000); 
      
      // Crée la chaîne de description détaillée à partir des autres colonnes
      let description = '';
      for (let j = 3; j < headers.length; j++) {
        if (headers[j] && row[j]) {
          description += `${headers[j]} : ${row[j]}\n`;
        }
      }
      
      // Crée l'événement dans l'agenda
      try {
        CalendarApp.getCalendarById(calendarId).createEvent(eventTitle, startDate, endDate, {
          description: description
        });
      } catch (e) {
        Logger.log('Impossible de créer l\'événement : ' + eventTitle + ' Erreur : ' + e.message);
      }
    } else {
      // Si la ligne n'a pas de titre, de date ou d'heure de début, la sauter
      Logger.log('Ligne ignorée : ' + row);
    }
  }
}

lundi 18 août 2025

Créer une application avec Android Studio et I.A.

Ouvrir Android Studio 
Créer un nouveau projet. 
Choisir "Empty Activity"
Sous la racine "Android"
Sous-dossiers : App et Gradle Scripts

Donner un nom au projet
    Le nom du package est donné
    Le dossier dans lequel est sauvegardé le projet (AndroidStudioProjects à la racine de l'utilisateur
    SDK minimum API 24
    Language : Kotlin (recommandé par Google)

mercredi 13 août 2025

Créer un site sur Github

 Pour créer un site avec GitHub, utiliser **GitHub Pages**. Voici les étapes principales :

Documentation Github Pages

1. **Crée un dépôt GitHub**  

   - Va sur [github.com](https://github.com) et connecte-toi.

   - Clique sur "New" pour créer un nouveau repository.

   - Donne-lui un nom, par exemple `nomdemonsite.github.io` (pour un site personnel) ou un autre nom pour un site de projet.


2. **Ajoute tes fichiers de site**  

   - Ajoute un fichier `index.html` (page principale).

   - Tu peux aussi ajouter des fichiers CSS, images, etc.


3. **Active GitHub Pages**  

   - Va dans les "Settings" du dépôt.

   - Cherche la section "Pages".

   - Choisis la branche à publier (par exemple `main` ou `gh-pages`), puis le dossier (généralement `/root` pour la racine).

   - Clique sur "Save".


4. **Attends la publication**  

   - GitHub va générer ton site.  

   - Tu verras l’URL de ton site, du type :  

     `https://nomdemonsite.github.io/`  

     ou  

     `https://nomdemonsite.github.io/nom-du-depot/`


5. **Modifie ton site**  

   - Tu peux éditer tes fichiers et les pousser à nouveau sur GitHub, ton site sera mis à jour automatiquement.


**Pour aller plus loin:  

- Tu peux utiliser des générateurs de site statique comme Jekyll, Hugo, ou simplement écrire ton HTML/CSS.

_____________________________________________

  1. Dans le coin supérieur droit de n’importe quelle page, sélectionnez sur , puis cliquez sur Nouveau référentiel.

    Capture d’écran d’un menu déroulant GitHub montrant les options permettant de créer des éléments. L’élément de menu « Nouveau référentiel » est souligné en orange foncé.

  2. Entrez username.github.io comme nom du dépôt Remplacez username par votre nom d’utilisateur GitHub. Par exemple, si votre nom d’utilisateur est octocat, le nom du dépôt doit être octocat.github.io.

    Capture d’écran des paramètres GitHub Pages dans un dépôt. Le champ nom du dépôt contient le texte « octocat.github.io » et est délimité en orange foncé.

  3. Choisissez une visibilité de dépôt. Pour plus d’informations, consultez « À propos des dépôts ».

  4. Sélectionnez Initialize this repository with a README (Initialiser ce dépôt à l’aide d’un fichier LISEZMOI).

  5. Cliquez sur Créer le dépôt.

  6. Sous le nom de votre dépôt, cliquez sur  Paramètres. Si vous ne voyez pas l’onglet « Paramètres », sélectionnez le menu déroulant  , puis cliquez sur Paramètres.

    Capture d’écran d’un en-tête de dépôt montrant les onglets. L’onglet « Paramètres » est mis en évidence avec un encadré orange foncé.

  7. Dans la section « Code et automatisation » de la barre latérale, cliquez sur  Pages.

  8. Sous « Génération et déploiement », sous « Source », sélectionnez Déployer à partir d’une branche.

  9. Sous « Génération et déploiement », sous « Branche », utilisez le menu déroulant Branche et sélectionnez une source de publication.

    Capture d’écran des paramètres Pages dans un dépôt GitHub. Un menu permettant de sélectionner une branche pour une source de publication, intitulé « Aucun », est indiqué en orange foncé.

  10. Ouvrez éventuellement le fichier README.md de votre dépôt. Le fichier README.md est l’endroit où vous allez écrire le contenu de votre site. Vous pouvez modifier le fichier ou conserver le contenu par défaut pour l’instant.

  11. Accédez à username.github.io pour voir votre nouveau site web. Notez qu'il peut s'écouler jusqu'à 10 minutes avant que les modifications apportées à votre site ne soient publiées après avoir été transférées sur GitHub.

  12. https://votre-nom.github.io/nom-du-depot/