Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: add city mode in doc #58

Merged
merged 5 commits into from
Nov 8, 2024
Merged

docs: add city mode in doc #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f1507f
feat: add city mode in doc
JulesL2 Nov 6, 2024
91fc86d
revert upload
JulesL2 Nov 6, 2024
449a21c
fix spaces
JulesL2 Nov 6, 2024
01f2e13
f
JulesL2 Nov 6, 2024
7416179
add pythonpath for linux
JulesL2 Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 96 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@

# Description

Transform your cycling or hiking adventures into stunning, ready-to-print posters with this app! Designed specifically for mountain routes, it takes your GPX file and effortlessly generates a custom poster that beautifully showcases your journey. Built on the powerful [NiceGUI](https://nicegui.io/) framework, the app offers an intuitive web interface that makes the entire process seamless.
Transform your running, cycling or hiking adventures into stunning, ready-to-print posters with this app! Designed specifically for mountain routes, it takes your GPX file and effortlessly generates a custom poster that beautifully showcases your journey. Built on the powerful [NiceGUI](https://nicegui.io/) framework, the app offers an intuitive web interface that makes the entire process seamless.

Two modes are available : a city mode drawing the gpx data with the street maps in the background and a mountain mode drawing the gpx data on an elevation map. You can switch between both of them in the GUI.

# Demo

Expand All @@ -18,22 +19,62 @@ Here's a demo GIF to give you a glimpse of a user interacting with the webapp an
Make sure you have Python version 3.11 or higher installed.

Install the dependencies.

```
pip3 install -r .devcontainer/requirements
pip3 install -r .devcontainer/requirements.txt
```

In ubuntu, install the packages.
```
sudo xargs -a .devcontainer/packages.txt apt-get install -y
```

**Remark:** You can set the directory path in the PYTHONPATH environment variable so that the imports of other files from the repository are working properly.

* On Linux

You can add a line in the .bashrc file :
```
nano ~/.bashrc
```
And add this line at the bottom of the file where /path/to/add is pretty_gpx repository path.
```
export PYTHONPATH=$PYTHONPATH:/path/to/add
```
If you always run the code from the repository folder instead of /path/to/add you can use:
```
export PYTHONPATH=$PYTHONPATH:$PWD
```

* In a conda environment

In a conda environment enter (do not forget to edit the /path/to/add):

```
conda env config vars set PYTHONPATH=$PYTHONPATH:/path/to/add
```

After a restart of the environment :

```
conda deactivate
conda activate your_env_name
```

You can check that the environment variable has been successfully updated:

```
conda env config vars list
```

You should see the updated PYTHONPATH value.
JulesL2 marked this conversation as resolved.
Show resolved Hide resolved

### Option 2: Open in VS Code with Dev Containers

If you are using Visual Studio Code, you can take advantage of the Dev Containers feature:
* Install the Remote - Containers extension in VS Code.
* Open this project folder in VS Code.
* When prompted, select Reopen in Container.
- Install the Remote - Containers extension in VS Code.
- Open this project folder in VS Code.
- When prompted, select Reopen in Container.

This will open the project in a fully configured container environment based on the `.devcontainer` configuration, allowing you to work without manually setting up dependencies.

Expand All @@ -47,6 +88,13 @@ python3 pretty_gpx/main.py

# Features

This app features two modes:

- The city mode
- The mountain mode

## Mountain mode

This app is the perfect companion for cycling or hiking enthusiasts tackling routes with significant elevation gain.

### 🌄 Hillshading
Expand All @@ -61,7 +109,6 @@ Easily spot mountain passes and saddles along your track, with accurate elevatio

This feature utilizes [OpenStreetMap data](https://www.openstreetmap.org) via the [Overpass API](https://wiki.openstreetmap.org/wiki/Overpass_API) for precise and up-to-date information.


### 🏕️ Multi-Day Trip Support

Planning a multi-day adventure? Upload all your consecutive daily GPX tracks in one go — just ensure the filenames are in alphabetical order. The app will automatically identify and display known huts or campsites at each stop between the tracks.
Expand All @@ -74,20 +121,36 @@ Personalize your poster with options to update the track title, adjust sun orien

Once you’ve fine-tuned your poster, simply hit the Download button to save your customized map.


### 📝 Text annotations

Placing text annotations for mountain passes, huts, or other landmarks can be challenging, as they may overlap with each other or obscure the GPX track. To ensure precise placement and a clean layout, we rely on [textalloc](https://github.com/ckjellson/textalloc), a robust tool that automatically optimizes text to prevent overlap.


### ⛶ Poster Size

When you change the poster size, the corresponding latitude and longitude area also changes. This requires a fresh request for new elevation data, as the previous data no longer covers the updated area.
When you change the poster size, the corresponding latitude and longitude area also changes. This requires a fresh request for new elevation data, as the previous data no longer covers the updated area.

In addition to the elevation data, resizing the poster also impacts the available space around your track. This change in layout may affect the positioning of text annotations such as labels for mountain passes or huts.

Because resizing involves both requesting new elevation data and reoptimizing the text annotations, the process takes longer than simpler adjustments like changing the color theme.

## City mode

The city mode is perfect for activities done in an urban environment. It will draw roads, rivers and forest/land in the background and the GPX track above it.

This feature utilizes [OpenStreetMap data](https://www.openstreetmap.org) via the [Overpass API](https://wiki.openstreetmap.org/wiki/Overpass_API) to gather road, rivers, lakes and other area with water as well as forests and agricultural plots.

### 📝 Activity stats

The distance, elevation gain and time of the activity plotted is written on the poster by default. If you want to remove one of these fields, just enter a 0 or negative value.
If you want to override the time, you will need to enter the time **in seconds** that you want to have written on the poster.

### ⛶ Poster Size

You have the same options as the mountain mode for the paper sizes. It is possible to find the most suitable format for your activity.

### 📥 Easy Download

Once you’ve fine-tuned your poster, simply hit the Download button to save your customized map.

# Explore new color themes

Expand Down Expand Up @@ -117,26 +180,41 @@ python3 pretty_gpx/simplify_gpx.py --input <GPX_FILE>
To give you a better idea of what this app can create, here are some example posters generated from real GPX tracks (See the `examples` folder).


## Mountain mode


<table>
<tr>
<td><img src="doc/posters/marmotte.svg" style="max-width: 100%; height: auto;"/></td>
<td><img src="doc/posters/diagonale-des-fous.svg" style="max-width: 100%; height: auto;"/></td>
<td><img src="doc/posters/mountain/marmotte.svg" style="max-width: 100%; height: auto;"/></td>
<td><img src="doc/posters/mountain/diagonale-des-fous.svg" style="max-width: 100%; height: auto;"/></td>
</tr>
<tr>
<td><img src="doc/posters/hawaii.svg" style="max-width: 100%; height: auto;"/></td>
<td><img src="doc/posters/couillole.svg" style="max-width: 100%; height: auto;"/></td>
<td><img src="doc/posters/mountain/hawaii.svg" style="max-width: 100%; height: auto;"/></td>
<td><img src="doc/posters/mountain/couillole.svg" style="max-width: 100%; height: auto;"/></td>
</tr>
<tr>
<td><img src="doc/posters/peyresourde.svg" style="max-width: 100%; height: auto;"/></td>
<td><img src="doc/posters/vanoise_3days.svg" style="max-width: 100%; height: auto;"/></td>
<td><img src="doc/posters/mountain/peyresourde.svg" style="max-width: 100%; height: auto;"/></td>
<td><img src="doc/posters/mountain/vanoise_3days.svg" style="max-width: 100%; height: auto;"/></td>
</tr>
</table>

## City mode




<table>
<tr>
<td><img src="doc/posters/city/marathon_pour_tous.svg" style="max-width: 100%; height: auto;"/></td>
<td><img src="doc/posters/city/deauville.svg" style="max-width: 100%; height: auto;"/></td>
</tr>
<tr>
<td><img src="doc/posters/city/paris_versailles.svg" style="max-width: 100%; height: auto;"/></td>
<td><img src="doc/posters/city/route_des_4_chateaux.svg" style="max-width: 100%; height: auto;"/></td>
</tr>
<tr>
<td><img src="doc/posters/city/london_marathon.svg" style="max-width: 100%; height: auto;"/></td>
<td><img src="doc/posters/city/chicago_marathon.svg" style="max-width: 100%; height: auto;"/></td>
</tr>
</table>

# Contributing

Expand All @@ -154,6 +232,7 @@ When creating a Pull Request (PR), please prefix your PR title with one of the f
- **revert**: Revert a previous change

### Example PR Titles:

- `feat: Add wonderful new feature`
- `fix: Correct image aspect ratio issue`

Expand All @@ -162,5 +241,3 @@ Thank you for contributing!
# License

This project is licensed under the non-commercial [CC BY-NC-SA 4.0 License](LICENSE).


Loading
Loading