Rutes GPS Joanillo

De wikijoan
Salta a la navegació Salta a la cerca

Introducció

Aquesta és l'aplicació web que des de fa anys està funcionant a:

I ha anat evolucionant.

Versions

v1 fins a v5

Rutesgps v5.png

Aquestes són les diferents versions que s'han anat succeïnt fins el maig de 2021. Funciona amb la llibreria leaflet, i funciona amb classic scripts (en comptes de export/import modules). I sense bootstrap. També utilitza PHP per tal de parsejar els fitxers GPX i obtenir la informació dels fitxers.

A partir de la versió v4 tinc la carpeta nodejs/ per generar estadístiques i per generar cronoescalades. A partir d'aquesta versió utilitzo el tag <metadata><desc>...</desc></metadata> per posar la informació de les rutes.

En la última versió v5 s'han sobreposat el perfil de les etapes (amb la llibreria 3d.js). Aquesta versió és la que ha estat pública fins el juny de 2021.

v6

No és una versió de l'aplicació. Senzillament és la plantilla basada en bootstrap per tal de sentar les bases de la nova aplicació.

A part del nou disseny (accordion_v4.html), començo a treballar en tota la part de front-end.

Utilitzo el script generar_array_rutes.py per tal de parsejar les rutes gpx i generar els scripts js_btt/llista_modalitats.js i js_btt/llista_rutes.js. I també tinc el script js_btt/main.js que ho fa funcionar tot.

Ja tinc la navegació bàsica del menú lateral esquerra: puc veure les diferents zones (Bagà, Sant Feliu,...) i desplegar les rutes dins de cada zona. També tinc el check box de senderisme i btt. Tot automatitzat a partir de la informació que hi ha en les rutes GPX.

I ja és Openlayers (mapa bàsic d'exemple). Però encara no funciona per mòduls.

v7

Rutesgps v7a.png

A partir de la versió v7 el desenvolupament es fa amb:

  • dins de la carpeta rutesgpsapp
  • npm start
  • javascript modules export/import
  • llibreria openlayers
  • github

Comentaris i problemes que he tingut:

$ npm run build

> rutesgpsapp@1.0.0 build
> parcel build --public-url . index.html

/home/joan/rutesgps/rutesgpsapp/index.html: tree.render is not a function

Hi, jjy. I faced same problem. For not blocked here, I found a way.

parcel build --no-minify index.html

Per tant, en el package.json posem:

    "build": "parcel build --no-minify --public-url . index.html"

que fa que els diferents scripts no quedin minimitzats. I a part d'això, se soluciona el problema.

Una altra cosa és que en el fitxer package.json crec que no importa què posem a:

  "main": "index.html",

(abans tenia index.js o main.js). El que importa és el que s'executa quan faig en npm start:

"start": "parcel index.html",

I a dins del index.html tinc la inclusió del main.js:

<script src="./js_btt/main.js"></script>

A partir del main.js ara ja tot funciona per mòduls.

En la v7 només vull que el que em funcionava en el v6 amb l'anterior paradigma, ara em funcioni bé amb el nou paradigma de export/import, però de moment només vull pintar un mapa base senzill. Pintar tots els mapes de les meves rutes ho deixo per la versió.

Bootstrap

He intentat utilitzar bootstrap com a mòdul, però de moment no m'ha funcionat:

npm install bootstrap
* a main, js: import * as bootstrap from 'bootstrap';
*a index.html, eliminar les referències de bootstrap

v7: index_v7.html a index_v13.html

Ja jem publicat la nova versió v7, que es correspon a tots aquests canvis incrementals. Només falta la part de cerca.

Protocol per afegir noves rutes

Sabadell-marquet de les roques.png

El primer que fem és convertir els fitxers .fit de l'excursió a .gpx:

$ cd /home/joan/MTB/prov
$ ls
$ gpsbabel -i garmin_fit -f 201206105701.fit -o gpx -F 201206105701.gpx

Obrim aquestes rutes amb el prune. Netejo les rutes, ajunto les rutes si una excursió m'ha quedat amb dos fitxers, etc. Si la ruta té varis LAPs els ajunto amb un de sol (un sol trackseg).

$ cd /home/joan/Baixades/
$ java -jar gpsprune_20.4.jar
  • Faig el delete range dels punts en què he estat aturat.
  • Elimino els punts en què m'he equivocat en la ruta.
  • Ja puc posar els waypoints.
  • Renombro el fitxer gpx amb el que serà el seu nom definitiu (format: utilitzar guions i guions de subratllat, minúscules, i no utilitzar caràcters especials ni accents). Poso el name de la ruta i el nom del fitxer.

Ara ja puc obrir manualment el gpx amb un editor de text per tal d'eliminar els LAPs i trackseg.

Elimino speed. Amb el Sublime Text:

substituïm
.{8}<speed>.*</speed>\n.{6}</trkpt>
      </trkpt> (6 espais en blanc, o els convenients)

Elimino ele, primer en els waypoints, i després en els punts del track. Amb el Sublime Text:

subsituïm
		<ele>.*</ele>\n		<time>
per
		<time>

substituïm
        <ele>.*</ele>\n        <time>
per
        <time>

Anem a posar ara les elevacions. Ho podem fer de dues maneres:

a) amb el gpsprune: Online > Get altitudes from SMRT Funciona bé, però ens dóna l'altitud sense decimals, i això té implicacions a l'hora de calcular el desnivell que he fet a la ruta.

Ja podem generar les estadístiques:

$ cd ~/rutesgps/rutesgpsapp/nodejs
$ node xml_stats_v3.js /home/joan/MTB/prov/sabadell-marquet_de_les_roques.gpx 
track: /home/joan/MTB/prov/sabadell-marquet_de_les_roques.gpx
2021-12-16
49.0 Km (distància total)
03:20:08 (temps en moviment)
03:54:08 (temps total)
1571 m (desnivell acumulat)
1107 m (desnivell acumulat amb smooth)
162m -> 617m (altitud min and max)

hem escrit el fitxer /home/joan/MTB/prov/sabadell-marquet_de_les_roques.json

b)

Convert to GPX
> Add DEM elevation data
> best available source
> Convert
> Download 20211217062617-33102-data.gpx

En aquest cas, et dóna les altituds amb una resolució de 3 decimals, la qual cosa tampoc té massa sentit.

$ node xml_stats_v3.js /home/joan/MTB/prov/20211217062617-33102-data.gpx 
track: /home/joan/MTB/prov/20211217062617-33102-data.gpx
2021-12-16
52.0 Km (distància total)
04:00:04 (temps en moviment)
04:00:04 (temps total)
1472 m (desnivell acumulat)
1108 m (desnivell acumulat amb smooth)
157m -> 615m (altitud min and max)

hem escrit el fitxer /home/joan/MTB/prov/20211217062617-33102-data.json

Veiem que el nivell acumulat dóna bastant diferent, però allò important és que el nivell acumulat amb smooth dóna el mateix, que és lo important. Aquesta ruta, que l'he fet a partir d'una ruta del wikiloc, en l'original del wikiloc (https://ca.wikiloc.com/rutes-btt/sabadell-marquet-de-la-roca-sant-llorenc-3382958) dóna un desnivell de 1180m (72m de diferència respecte la meva manera de calcular, que significa que ells també apliquen un altre smooth).(nota, la ruta no és ben bé la mateixa, jo he començat des de Can Déu, no són tan comparables les dues rutes, a part de què l'he fet en sentit invers).

Editem el fitxer, i canviem el metadata (name i desc); i en l'inici del trk també poso el name);

<gpx ... >
<metadata>
  <name>Sabadell-Marquet de les Roques</name>
  <desc>BTT*Altres*sabadell-marquet_de_les_roques.gpx*2021-12-16*49.0 Km*03:20:08*03:54:08*1571 m*1107 m*162m*617m*</desc>
</metadata>
...
<trk>
	<name>Sabadell-Marquet de les Roques</name>
	...

En aquests moments tenim els fitxers: (ja no es necessita convertir els fitxers .gpx a .xml)

  • sabadell-marquet_de_les_roques.gpx
  • sabadell-marquet_de_les_roques.json

I copiem aquests dos fitxers a:

$ cp /home/joan/MTB/prov/sabadell-marquet_de_les_roques.* /home/joan/rutesgps/rutesgpsapp/rutesgps

A partir d'ara ja treballarem en la ruta /home/joan/rutesgps/rutesgpsapp/. Ja puc esborrar el contingut de la carpeta ~/MTB/prov, ja no la necessito per a res.

En aquests moments també puc executar, si és el cas, el script cronoescalada.js (TBD).

Ara executem minimize_gpx.js:

$ cd ~/rutesgps/rutesgpsapp/nodejs
$ node minimize_gpx.js ../rutesgps/sabadell-marquet_de_les_roques.gpx

Es genera el fitxer sabadell-marquet_de_les_roques_min.gpx, però aquest fitxer no va aquí, sinó que l'he de moure:

$ mv ../rutesgps/sabadell-marquet_de_les_roques_min.gpx /home/joan/projectes/OSM/rutes/rutesgps/sabadell-marquet_de_les_roques_min.gpx

Dins de la carpeta ~/rutesgps/rutesgpsapp/rutesgps no cal que hi hagi cap fitxer minimitzat (aquests fitxers es fan servir per la segona aplicació, la que pinta totes les rutes sobre un sol mapa).

Abans d'enviar els meus fitxers al servidor, vull provar veure en les dues aplicacions locals les meves noves rutes.

Copio els fitxers generats en les carpetes dist/ de les meves dues aplicacions:

$ cd ~/rutesgps/rutesgpsapp
$ cp rutesgps/sabadell-marquet_de_les_roques.* ./dist/rutesgps
$ cp /home/joan/projectes/OSM/rutes/rutesgps/sabadell-marquet_de_les_roques_min.gpx /home/joan/projectes/OSM/rutes/dist/rutesgps/sabadell-marquet_de_les_roques_min.gpx

S'ha de regenerar el fitxer js_btt/llista_rutes.js, i això ho fem així:

$ cd ~/rutesgps/rutesgpsapp
$ python3 generar_array_rutes.py

i comprovem que les noves rutes estan a ./js_btt/llista_rutes.js.

cd ~/rutesgps/rutesgpsapp
npm run build
npm start

De la segona aplicació de rutes, també hem d'actualitzar el fitxer de rutes:

$ cd ~/projectes/OSM/rutes
$ python3 generar_array_rutes_simple.py
$ cat rutesgps.js | grep sabadell

I ara ja podem compilar l'aplicació:

cd ~/projectes/OSM/rutes
npm run build
npm start

I ara que ja funcionen les dues aplicacions, hem d'actualitzar el servidor:

ssh ubuntu@vps-f5d83567.vps.ovh.net -f 'sudo chmod -R 777 /var/www/rutesgps/v7'
cd ~/rutesgps/rutesgpsapp/dist
scp * ubuntu@vps-f5d83567.vps.ovh.net:/var/www/rutesgps/v7

I copiem ara només les rutes noves:

cd ~/rutesgps/rutesgpsapp/dist/rutesgps
scp sabadell* ubuntu@vps-f5d83567.vps.ovh.net:/var/www/rutesgps/v7/rutesgps
ssh ubuntu@vps-f5d83567.vps.ovh.net -f 'sudo chmod -R 755 /var/www/rutesgps/v7'

I ara li toca el torn a la segona aplicació:

ssh ubuntu@vps-f5d83567.vps.ovh.net -f 'sudo chmod -R 777 /var/www/rutesgps/v7'
cd ~/projectes/OSM/rutes/dist
scp * ubuntu@vps-f5d83567.vps.ovh.net:/var/www/rutesgps/v7/rutes

I copiem ara només les rutes noves:

cd ~/projectes/OSM/rutes/dist/rutesgps
scp sabadell* ubuntu@vps-f5d83567.vps.ovh.net:/var/www/rutesgps/v7/rutes/rutesgps
ssh ubuntu@vps-f5d83567.vps.ovh.net -f 'sudo chmod -R 755 /var/www/rutesgps/v7'

creat per Joan Quintana Compte, maig 2021, desembre 2021