Mont

(05) Mont is an AR webapp that lets you discover the hills and mountain tops around you.

#glamhack2022 #openglam #ar #mobile

Demo

Swiss geodata (cartographic, topographic, toponymic), once Switzerland's most protected data (for reasons of military defence), have become freely available in the past years. At the same time webtech has greatly evolved. Today mobile webpages can access many of the hardware components built into modern smartphones, such as camera, gyroscope, and compass modules. This allows for coding Augmented Reality apps that will run in any web browser and on any smartphone.

MONT is a Javascript-driven web app that lets you discover the hills and mountain tops around you. Point to any hilltop within sight, tap on the red button and get the hill or mountain name, its distance and height above sea level.

MONT is a Augmented Reality web app coded in "vanilla" JS. It is a proof of concept in order to demonstrate that AR applications for mobile phones can be done just by using open technologies such as HTML 5 (CSS 3, Javascript ES 6).

Processing

After geolocating the app processes a digital height model of Switzerland and interpolates the current height above sea level. It then triangulates the mountain peak or hilltop in question (horizontally and vertically) and searches the mountain database in order to determine the precise peak the user is pointing to.

Tech

MONT is coded in Javascript only ("vanilla" JS, hence no external dependencies, no frameworks, no libraries, no third-party services of any kind). MONT is a so-called flat-file webapp, which means that the required data (digital height model, toponymy and georeferences) are stored in JS arrays (instead of a database) that are cached by the web browser, so that the app, once loaded, will also work in offline mode.

Data



Compared to programming native applications for specific platforms, using web technologies has two major advantages.
  1. Cross-platform compatibility: Functionality and design will work across all platforms, no matter what operating system (or device).
  2. No app installation: Developers do not need any app distribution service or app store. As soon as the web app is uploaded to a web server, it is accessible to any user. A link or a qr code is everything needed.


Yet, there are a couple of downsides to the MONT project.
  1. Compass heading (1): The HTML geolocation API according to the W3 web standard includes a heading property indicating the user's (i.e. the smartphone's) absolute orientation in degrees. Yet, despite of being part of the web standard this property has never been implemented. The heading property retrieved by the getCurrentPosition() method returns null.
  2. Compass heading (2): iOS and Android handle web browser access to orientation data differently. While iOS delivers absolute compass data (by means of the non-standard webkitcompassheading property), Android only delivers rotation data that set 0 (i.e. North) to the direction the smartphone was heading towards when the page was loaded.
  3. Sensor inaccuracy: Motion and compass sensors (magnetic compass module, motion sensors/gyroscope) built into modern smartphones are quite inaccurate. While there can be several mountain peaks within one single compass degree (especially given the MONT reach set to 20 kilometers), even a slight inaccuracy can lead to false results. This may change with future improvements to sensor technology.

Team:

  • Prof. Thomas Weibel, University of Applied Sciences of the Grisons (FHGR), Berne University of the Arts (HKB)
  • Dirshti Gopwani, University of Applied Sciences and Arts of Southern Switzerland (SUPSI)

Credits

Swiss Federal Office of Topography (swisstopo)

Social media

Returning home - huge thanks to the fantastic #Supsi and #Glamhack2022 team!

1 year ago ~ twb

Sketching

Edited (version 131)

1 year ago ~ twb

Edited (version 129)

1 year ago ~ twb

Final presentation done: Thx to the #Glamhack2022!

1 year ago ~ twb

Edited (version 125)

1 year ago ~ twb

Event finish

Group picture taken. :)

1 year ago ~ twb

Edited (version 119)

1 year ago ~ twb

Edited (version 117)

1 year ago ~ twb

Edited (version 115)

1 year ago ~ twb

Edited (version 113)

1 year ago ~ twb

Presentation ready: Let's go for it.

1 year ago ~ twb

Edited (version 109)

1 year ago ~ twb

Research

Tests done, tutorial video done, working on the presentation.

1 year ago ~ twb

Edited (version 105)

1 year ago ~ twb

Edited (version 103)

1 year ago ~ twb

Testing, make screen recordings

1 year ago ~ twb

Edited (version 99)

1 year ago ~ twb

Edited (version 97)

1 year ago ~ twb

Edited (version 95)

1 year ago ~ twb

Edited (version 93)

1 year ago ~ twb

Edited (version 91)

1 year ago ~ twb

Edited (version 89)

1 year ago ~ twb

Edited (version 87)

1 year ago ~ twb

Edited (version 85)

1 year ago ~ twb

Edited (version 83)

1 year ago ~ twb

Edited (version 81)

1 year ago ~ twb

Edited (version 79)

1 year ago ~ twb

Edited (version 77)

1 year ago ~ twb

Edited (version 75)

1 year ago ~ twb

Edited (version 73)

1 year ago ~ twb

Edited (version 71)

1 year ago ~ twb

Edited (version 69)

1 year ago ~ twb

Edited (version 67)

1 year ago ~ twb

Edited (version 65)

1 year ago ~ twb

Edited (version 63)

1 year ago ~ twb

Edited (version 61)

1 year ago ~ twb

Edited (version 59)

1 year ago ~ twb

Edited (version 57)

1 year ago ~ twb

Edited (version 55)

1 year ago ~ twb

Edited (version 53)

1 year ago ~ twb

Edited (version 51)

1 year ago ~ twb

Edited (version 49)

1 year ago ~ twb

User testing

1 year ago ~ twb

User testing, refining the algorithm, refining the graphic design

1 year ago ~ twb

Project

Edited (version 43)

1 year ago ~ twb

Edited (version 41)

1 year ago ~ twb

Edited (version 39)

1 year ago ~ twb

Edited (version 37)

1 year ago ~ twb

Edited (version 35)

1 year ago ~ twb

Edited (version 33)

1 year ago ~ twb

Start

 
Contributed 2 years ago by twb for GLAMhack 2022
All attendees, sponsors, partners, volunteers and staff at our hackathon are required to agree with the Hack Code of Conduct. Organisers will enforce this code throughout the event. We expect cooperation from all participants to ensure a safe environment for everybody.

Creative Commons LicenceThe contents of this website, unless otherwise stated, are licensed under a Creative Commons Attribution 4.0 International License.