Skip to content
Ed Crompton edited this page Jan 24, 2019 · 2 revisions

Ideas for further development

  • Set up some CI and automated testing. Try this: https://www.sitepoint.com/testing-javascript-jasmine-travis-karma/
  • It should be possible to run the application from github pages instead of Heroku. There should be a way of configuring the service worker so that the application will run from a subdirectory of the domain. The advantage of Heroku is that the workflow can be entirely docker based. However, the free Heroku account sleeps after 30 minutes.
  • Make the filtering and ordering of the listed peaks more intelligent, so that it lists the ones you are likely to be able to see from the specified latitude and longitude.
  • Create a graphic to show the distances and bearings of the peaks which can be used with a compass to orientate the mobile device. Carlos suggested d3 may be a good library for this https://github.com/d3/d3/wiki
  • Use the mobile device's inbuilt compass to align the graphic.
  • Present the names of the peaks on a camera overlay for an augmented reality experience.

Docker management

I've been experimenting with deploying to Heroku using docker. The docker-compose.yml file is still valid for running the application in development. This has an nginx container and a node container. The node container is only required for updating development dependencies and packaging everything up.

This talks about how to deploy an nginx container to heroku:

https://ntotten.com/2018/07/22/nginx-on-heroku/

Once the nginx container is on Drupal I think we can use it to server our js app.

The dir structure seems to require that a Dockerfile for the image we want to push to Heroku is in the root of the application directory. Other Dockerfiles for other docker containers can be elsewhere in the docker/ folder.

The example from the link seems to just use nginx to proxy the example.com domain. We actually want to serve our own content.

Current progress

Chrome on Android shows the browser toolbar and greys out the form controls when in aeroplane mode. Find out why.

Prettify the form controls.

Now using the library https://github.com/chrisveness/geodesy as a git submodule. Hopefully this increases the accuracy of the bearings. Test with OS coordinates. http://www.movable-type.co.uk/scripts/latlong.html

Need a marker in the centre of the graphic where the user is located.

Optimise the graphic for mobile: Remove margins and make width responsive.

Service workers appear to work to cache and retrieve assets offline. Consider extending to automatically fetch new versions of assets: https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/

Work out how to show few mountains, and which to choose for the list.

Libraries used

This libraries are included in the codebase: https://github.com/chrisveness/geodesy https://github.com/plotly/plotly.js jQuery

Clone this wiki locally