Returning home - huge thanks to the fantastic #Supsi and #Glamhack2022 team!
Mont
(05) Mont is an AR webapp that lets you discover the hills and mountain tops around you.
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
- Digital height model of Switzerland (200m grid)
- Swiss geographical Names (georeferenced)
Compared to programming native applications for specific platforms, using web technologies has two major advantages.
- Cross-platform compatibility: Functionality and design will work across all platforms, no matter what operating system (or device).
- 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.
- 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. Theheading
property retrieved by thegetCurrentPosition()
method returnsnull
. - 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. - 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
Team 5 is developing an AR webapp called "Mont" that lets you discover the hills and mountain tops around you ⛰🏔 > https://t.co/bJPH1ZR8Sx (iPhone only) #GLAMhack2022 @supsi_ch @thomasweibel pic.twitter.com/FKLtntEqnb
— Opendata.ch (@OpendataCH@mastodon.social) (@OpendataCH) November 5, 2022
Sketching
Final presentation done: Thx to the #Glamhack2022!
Event finish
Group picture taken. :)
Presentation ready: Let's go for it.
Research
Tests done, tutorial video done, working on the presentation.
Testing, make screen recordings
User testing
User testing, refining the algorithm, refining the graphic design