Mont

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

#glamhack2022 #openglam #ar #mobile

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

Edited content version 131

05.11.2022 17:35 ~ twb

Edited content version 129

05.11.2022 17:34 ~ twb

Final presentation done: Thx to the #Glamhack2022!

05.11.2022 16:34 ~ twb

Edited content version 125

05.11.2022 16:33 ~ twb

Event finished

05.11.2022 16:30

Group picture taken. :)

05.11.2022 14:59 ~ twb

Edited content version 119

05.11.2022 14:54 ~ twb

Edited content version 117

05.11.2022 14:52 ~ twb

Edited content version 115

05.11.2022 14:51 ~ twb

Edited content version 113

05.11.2022 14:46 ~ twb

Presentation ready: Let's go for it.

05.11.2022 14:42 ~ twb

Get

05.11.2022 11:20

Edited content version 109

05.11.2022 11:20 ~ twb

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

05.11.2022 10:22 ~ twb

Edited content version 105

05.11.2022 10:21 ~ twb

Edited content version 103

05.11.2022 08:29 ~ twb

Testing, make screen recordings

05.11.2022 08:25 ~ twb

Edited content version 99

05.11.2022 08:25 ~ twb

Edited content version 97

05.11.2022 08:23 ~ twb

Edited content version 95

05.11.2022 07:44 ~ twb

Edited content version 93

05.11.2022 07:43 ~ twb

Edited content version 91

05.11.2022 07:42 ~ twb

Edited content version 89

05.11.2022 07:41 ~ twb

Edited content version 87

05.11.2022 07:40 ~ twb

Edited content version 85

05.11.2022 07:38 ~ twb

Edited content version 83

05.11.2022 07:37 ~ twb

Edited content version 81

05.11.2022 07:33 ~ twb

Edited content version 79

04.11.2022 21:52 ~ twb

Edited content version 77

04.11.2022 21:51 ~ twb

Edited content version 75

04.11.2022 21:50 ~ twb

Edited content version 73

04.11.2022 21:49 ~ twb

Edited content version 71

04.11.2022 21:48 ~ twb

Edited content version 69

04.11.2022 21:40 ~ twb

Edited content version 67

04.11.2022 21:38 ~ twb

Edited content version 65

04.11.2022 21:27 ~ twb

Edited content version 63

04.11.2022 21:18 ~ twb

Edited content version 61

04.11.2022 20:22 ~ twb

Edited content version 59

04.11.2022 20:20 ~ twb

Edited content version 57

04.11.2022 20:19 ~ twb

Edited content version 55

04.11.2022 20:19 ~ twb

Edited content version 53

04.11.2022 20:19 ~ twb

Edited content version 51

04.11.2022 20:17 ~ twb

Edited content version 49

04.11.2022 20:16 ~ twb

User testing

04.11.2022 20:15 ~ twb

Find

04.11.2022 20:14

User testing, refining the algorithm, refining the graphic design

04.11.2022 20:14 ~ twb

Ask

04.11.2022 19:53

Edited content version 43

04.11.2022 19:53 ~ twb

Edited content version 41

04.11.2022 19:49 ~ twb

Edited content version 39

04.11.2022 19:47 ~ twb

Edited content version 37

04.11.2022 19:47 ~ twb

Edited content version 35

04.11.2022 19:36 ~ twb

Edited content version 33

04.11.2022 14:35 ~ twb

Event started

04.11.2022 09:00

Edited content version 31

03.11.2022 13:44 ~ jonaslendenmann

Ask

17.10.2022 08:29

Edited content version 28

17.10.2022 08:29 ~ twb

Edited content version 26

17.10.2022 08:25 ~ twb

Edited content version 24

17.10.2022 08:18 ~ twb

Edited content version 22

17.10.2022 08:15 ~ twb

Edited content version 20

17.10.2022 08:15 ~ twb

Edited content version 18

17.10.2022 08:11 ~ twb

Edited content version 16

17.10.2022 08:10 ~ twb

Edited content version 14

17.10.2022 08:09 ~ twb

Edited content version 12

17.10.2022 08:08 ~ twb

Edited content version 10

17.10.2022 08:06 ~ twb

Edited content version 8

17.10.2022 08:06 ~ twb

Edited content version 6

17.10.2022 08:05 ~ twb

Edited content version 4

17.10.2022 08:03 ~ twb

Joined the team

17.10.2022 07:56 ~ twb

Challenge posted

17.10.2022 07:55 ~ twb

👥

twb
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.

GLAMhack 2022