Challenge Project

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!

05.11.2022 17:36 ~ twb

Sketching

Edited (version 131)

05.11.2022 17:35 ~ twb

Edited (version 129)

05.11.2022 17:34 ~ twb

Final presentation done: Thx to the #Glamhack2022!

05.11.2022 16:34 ~ twb

Edited (version 125)

05.11.2022 16:33 ~ twb

Event finished

Group picture taken. :)

05.11.2022 14:59 ~ twb

Edited (version 119)

05.11.2022 14:54 ~ twb

Edited (version 117)

05.11.2022 14:52 ~ twb

Edited (version 115)

05.11.2022 14:51 ~ twb

Edited (version 113)

05.11.2022 14:46 ~ twb

Presentation ready: Let's go for it.

05.11.2022 14:42 ~ twb

Edited (version 109)

05.11.2022 11:20 ~ twb

Research

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

05.11.2022 10:22 ~ twb

Edited (version 105)

05.11.2022 10:21 ~ twb

Edited (version 103)

05.11.2022 08:29 ~ twb

Testing, make screen recordings

05.11.2022 08:25 ~ twb

Edited (version 99)

05.11.2022 08:25 ~ twb

Edited (version 97)

05.11.2022 08:23 ~ twb

Edited (version 95)

05.11.2022 07:44 ~ twb

Edited (version 93)

05.11.2022 07:43 ~ twb

Edited (version 91)

05.11.2022 07:42 ~ twb

Edited (version 89)

05.11.2022 07:41 ~ twb

Edited (version 87)

05.11.2022 07:40 ~ twb

Edited (version 85)

05.11.2022 07:38 ~ twb

Edited (version 83)

05.11.2022 07:37 ~ twb

Edited (version 81)

05.11.2022 07:33 ~ twb

Edited (version 79)

04.11.2022 21:52 ~ twb

Edited (version 77)

04.11.2022 21:51 ~ twb

Edited (version 75)

04.11.2022 21:50 ~ twb

Edited (version 73)

04.11.2022 21:49 ~ twb

Edited (version 71)

04.11.2022 21:48 ~ twb

Edited (version 69)

04.11.2022 21:40 ~ twb

Edited (version 67)

04.11.2022 21:38 ~ twb

Edited (version 65)

04.11.2022 21:27 ~ twb

Edited (version 63)

04.11.2022 21:18 ~ twb

Edited (version 61)

04.11.2022 20:22 ~ twb

Edited (version 59)

04.11.2022 20:20 ~ twb

Edited (version 57)

04.11.2022 20:19 ~ twb

Edited (version 55)

04.11.2022 20:19 ~ twb

Edited (version 53)

04.11.2022 20:19 ~ twb

Edited (version 51)

04.11.2022 20:17 ~ twb

Edited (version 49)

04.11.2022 20:16 ~ twb

User testing

04.11.2022 20:15 ~ twb

User testing, refining the algorithm, refining the graphic design

04.11.2022 20:14 ~ twb

Project

Edited (version 43)

04.11.2022 19:53 ~ twb

Edited (version 41)

04.11.2022 19:49 ~ twb

Edited (version 39)

04.11.2022 19:47 ~ twb

Edited (version 37)

04.11.2022 19:47 ~ twb

Edited (version 35)

04.11.2022 19:36 ~ twb

Edited (version 33)

04.11.2022 14:35 ~ twb

Challenge

Event started

 
Contributed 1 year 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.