CycloTomo, suite

🇬🇧 English version below

Je poursuis le développement de l’appli en profitant d’un mois d’essai gratuit de GitHub Copilot, ce qui facilite et accélère considérablement le travail de codage.

Voici à quoi ressemble l’infrastructure actuelle :

Un fichier python est installé sur mon serveur Raspberry Pi, qui est lui-même synchronisé à un dossier Google Drive avec Rclone. Quand l’appli sera prête, les cyclistes pourront déposer un fichier gpx sur ce blog. Ce fichier ira directement sur Google Drive, sera synchronisé avec le dossier du serveur, le programme python détectera ce nouveau fichier gpx et produira un fichier html contenant tout le code Javascript nécessaire pour en faire une appli de navigation pour cycliste. Ce fichier sera ajouté à la liste des fichiers gpx disponibles sur le blog.

Exemple :

Le cycliste vient sur le blog et dépose un fichier gpx (disons, MonVoyageAuTibetJour1.gpx). Le programme lui répond que son fichier html (MonVoyageAuTibetJour1.html) sera prêt dans quelques minutes à l’adresse xxx (une page de ce blog) et disponible pendant deux ou trois jours (à déterminer).

Comme le fichier html sera ouvert depuis un lien sécurisé (l’adresse https du blog), le navigateur du téléphone acceptera de l’ouvrir. (Ce qui ne fonctionne pas si le cycliste télécharge le fichier sur son téléphone avant de l’ouvrir, pour des raisons de sécurité incontournables des téléphones.)

Pour des raisons de compatibilité de l’interface, il faudra ouvrir l’appli sur le navigateur Chrome, de préférence, sous Android comme sous iPhone. Firefox, Safari et Cie pourront l’ouvrir, mais il risque d’y avoir des incohérences et une diminution de l’efficience de l’appli.

Pour l’instant, l’interface ressemble à ceci.

Il reste encore du travail à faire et des incohérences à corriger, mais les principales fonctions sont là.

  • En haut, un tableau de bord indique la vitesse actuelle, la distance parcourue et la distance restante, une flèche de navigation qui indique à l’avance les virages à prendre, et, finalement, le nom du prochain point gpx (si le cycliste a mis des points d’intérêt dans son fichier gpx) et la distance à laquelle il se trouve.

  • À gauche, de haut en bas : la charge restante de la batterie, les instructions, le bouton d’activation/désactivation de la navigation sonore (1 bip pour un virage à gauche, 2 bips pour un virage à droite), le graphique de la pente (tracé complet, puis segment actuel de 2 km), le bouton d’activation/désactivation de l’enregistrement du parcours actuel au format gpx), le bouton de microphone pour prendre une note vocale, le bouton d’appareil photo pour prendre des photos sans quitter l’appli, le bouton de mode clair/sombre, et, si le cycliste est au Japon, le bouton de sélection de la carte du GSI (国土地理院) ou CyclOSM (ailleurs dans le monde, ce bouton ne s’affiche pas).

  • En bas, de gauche à droite : Le bouton de zoom (tracé complet, zoom 16 et zoom 18), le bouton Plein écran, le bouton de verrouillage de l’écran, le bouton de points d’intérêt à proximité du point central de la carte (indiqué par la croix rouge), et finalement le bouton d’affichage de la position actuelle du cycliste sur la carte.

Vous pouvez tester l’interface sur ce nouveau trajet de test dans Tokyo :

Test : Tokyo

Pour être sûr d’utiliser la version la plus récente de cette démo, il faut vider le cache du navigateur et, dans certains cas, aller dans le menu d’instruction (?) et cliquer sur Tout réinitialiser.

À suivre…

🇫🇷 Version française en haut

I am continuing the development of the app, taking advantage of a free one-month trial of GitHub Copilot, which significantly simplifies and accelerates the coding process.

Here is what the current infrastructure looks like:

A Python script is installed on my Raspberry Pi server, which is synchronized to a Google Drive folder with Rclone. Once the app is ready, cyclists will be able to upload a GPX file to this blog. This file will go directly to Google Drive, sync with the server folder, and the Python program will detect the new GPX file to generate an HTML file. This HTML file contains all the necessary JavaScript code to become a cycling navigation app. Finally, the file will be added to the list of available GPX files on the blog.

Example:

A cyclist visits the blog and uploads a GPX file (e.g., MyTiberTripDay1.gpx). The program notifies them that their HTML file (MyTiberTripDay1.html) will be ready in a few minutes at a specific address (a page on this blog) and will remain available for two or three days (to be determined).

Since the HTML file is opened from a secure link (the blog’s HTTPS address), the mobile browser will allow it to run. (This doesn’t work if the cyclist downloads the file to their phone before opening it, due to unavoidable mobile security restrictions.)

For interface compatibility reasons, it is recommended to open the app in Chrome, preferably on both Android and iPhone. While Firefox, Safari, and others can open it, there may be inconsistencies and reduced efficiency.

For now, the interface looks like this:

There is still work to be done and some bugs to iron out, but the main features are operational:

  • At the top: A dashboard displays current speed, distance traveled, and distance remaining; a navigation arrow that indicates upcoming turns; and finally, the name of the next GPX waypoint (if the cyclist included POIs in their file) and the distance to it.

  • On the left (top to bottom): Battery level, instructions, audio navigation toggle (1 beep for a left turn, 2 beeps for a right turn), elevation profile (full route followed by the current 2 km segment), toggle for recording the current track in GPX format, microphone button for voice notes, camera button to take photos without leaving the app, light/dark mode toggle, and, if the cyclist is in Japan, a button to select GSI maps (国土地理院) or CyclOSM (this button is hidden elsewhere in the world).

  • At the bottom (left to right): Zoom button (full route, zoom 16, or zoom 18), Fullscreen button, Screen Lock button, “POIs nearby” button (centered on the red cross on the map), and finally, the button to display the cyclist’s current position.

You can test the interface on this new test route in Tokyo:

Test: Tokyo

To ensure you are using the most recent version of this demo, please clear your browser cache and, in some cases, go to the instruction menu (?) and click “Reset All”.

To be continued…