Introduction
In traditional sense, we can browse websites using
- Keyboards (Tab and Enter keys)
- Mouse (point and click)
- Touchscreen (point and touch)
The line-mode browser, launched in 1992, was the first readily accessible browser for what we now know as the world wide web. It was not, however, the world’s first web browser. The very first web browser was called WorldWideWeb and was created by Tim Berners-Lee in 1990.
Web browsers today are quite powerful. They can run on all sorts of devices and display all kinds of content from plain text to images and video—you can even play games in modern web browsers.
It wasn’t always this way. The line-mode browser could only display text. You couldn’t even use a mouse to click on links—you had to type in everything using a keyboard …even if you just
wanted to follow a link!
(Source: http://line-mode.cern.ch/)
In 1982, Microsoft developed the first PC-compatible mouse. However, the mouse remained relatively obscure until the 1984 appearance of the Macintosh 128K.
(Source: http://en.wikipedia.org/wiki/Mouse_(computing))
Nowadays, many machines are being released with touchscreens such as ATM, Ticketing Machine, and Laptops to name a few.
But there is a new player in the market called Leap Motion.
|
|
Leap motion is a sensor device that supports hand and finger motions as input. It is analogous to a mouse but requiring no physical hand contact or touching. Our team has developed an API for leap motion that can be used to navigate websites by hand gestures conveniently. Anyone who wants to navigate websites using Leap Motion device only needs to embed the API JS into the html header tags. It is the script that can automatically load our API (written by JavaScript and CSS) to the web page source code. Then they can surf the internet with leap motion as they would like. The advantages of our API are listed below:
- It is operating system independent. It can be used on Linux, Mac, or Windows.
- It is cross browser independent. It works on IE, Firefox, Chrome.
- It is easy to implement this API (Just need to embed into the header tags).
- No need for any additional programming and no programming knowledge required.
- No other special plugin needed.
- It is robust, scalable, and light-weight.
- To be released under Creative Commons licenses; free so that everyone can download/use/modify/distribute or research further.
(1) Why do we develop our API?
Human Computer Interaction is a heated topic of discussion nowadays. However, there are few achievements lately on how to make internet surfing easily and comfortably, especially with the use of new technology. In pursue of our objective, our group has been researching a method to navigate websites without the use of regular input methods, such as touchscreen, keyboard or mouse.
Our proposed form of interaction mainly utilizes hand gestures. This form of interaction is applicable in situations where the user’s hands should not touch input devices, such as while cooking or having sweaty hands. This is very useful for people with Obsessive–compulsive disorder (OCD).
 |
Repetitive hand washing is a common OCD symptom
“OCD handwash” by Lars Klintwall Malmqvist (Larsklintwallmalmqvist) – Own work. Licensed under Public Domain via Wikimedia Commons.
In 2014 Spring semester, our group proposed the concept of webpage navigation using leap motion. We planned to build websites that can be navigated using Leap Motion. We displayed our prototype using Yamana Lab’s homepages. It is the first clickable webpage from within JavaScript and HTML made for Leap Motion.
Our initial focus was to build websites such that we can use Leap Motion rather than mouse or touchscreen.
But an existing problem was that we have to develop and script JavaScript code every time, in every webpage manually to make it compatible with Leap Motion. It seemed like a very tedious task. If a website had 100 plus webpages, then our solution would not be very feasible. It would have cost a reduction in system performance, human resource, time and effort to make any website leap motion enabled. Plus if we were to develop our own website, then only we can use it.
In order to solve this problem, we focused our efforts, in the 2014 autumn semester, strictly on the optimization of the system. We planned not to build any website but to work on a way such that any existing website can be Leap Motion enabled without any coding required.
Thus, we have carried out an extensive research, review and organized several meetings to communicate our thoughts and ideas among team members as well as our senpais. Eventually, we were successful in achieving our target; that the best way to maximize the value of our proposed form of interaction is to develop an API that can be employed and deployed easily.
In our solution, we optimized our JS code several times, making it more concise, lite-weight and easy to implement. Our goal was to ensure the solution is not bulky, and too difficult to implement. To avoid too many gestures which could confuse the system on what the user is trying to do.
We have tested our solution on 3 different website and all of them has shown promising results.
- Yamana Lab Website http://www.yama.info.waseda.ac.jp/
- The University of the South Pacific Staff Club Website http://www.usp.ac.fj/index.php?id=staffclub
- Commercial Business Website http://www.absn.com.au/
(2) Demonstration
(3) How to advertise our system?
Our team has released this source code to the public under Creative Commons licenses. The source code has been published on github and is available to anyone who wants to further develop this. It is available on: http://waseda.github.io/Leap-Motion-JS-API-for-Website-Navigation/
Edit by: Pritesh Chandra , Wang Lan