Skip to content

Google Summer of Code 2020 | Using a Game Controller as a Navigation Aid | Inclusive Design Institute

License

Notifications You must be signed in to change notification settings

dmahajan980/gamepad-navigator

 
 

Repository files navigation

Gamepad Navigator

Gamepads are popular devices, and a lot of work has been done to extend its usefulness to a wide variety of people. Some of the game controllers, such as the Xbox Adaptive controller, the Logitech G Adaptive Gaming Kit, and the one-handed controllers, strive to include a broader range of people in traditional PC and console gaming.

The Gamepad Navigator is a Chrome extension that allows the users to navigate Chromium-based browsers using a game controller and an alternative to a keyboard or mouse for browser navigation. The various buttons and analog sticks on the gamepad will serve as inputs for the different types of navigation features or actions of the browser. These inputs are read from the gamepads using the HTML5 Gamepad API and processed via Infusion. The navigation features or operations can be reconfigured from the application to redefine what each d-pad, thumbstick, button, and trigger does.

Installation

The Gamepad Navigator Chrome Extension is available for free on the Chrome Web Store.

Chrome Web Store

The extension can also be installed on other Chromium-based browsers using the source code (see below).

  1. Clone or download the repository.

  2. Install grunt-cli globally:

    npm install -g grunt-cli
  3. Install all the dependencies:

    npm install
  4. Build the unpacked chrome extension files:

    grunt

    This will generate a dist directory at the root of the project which contains the unpacked chrome extension files.

  5. Navigate to the address chrome://extensions/ in your Chromium-based browser and check the Developer mode in the top right.

  6. Click on the Load unpacked button on the top left of the same window and navigate into the dist directory to open it. This will load the extension into your Chromium-based browser.

NOTE: The new tabs opened using the gamepad navigator will use Google as the homepage and override the default new tab page. However, it can be configured to open any other website instead of Google.

Supported Actions

The Gamepad Navigator currently supports the following actions for buttons and triggers:

Action Description Invoker Documentation
Click Click on the focused element. click
Focus on the previous element Change the focus from the currently focused element to the previous tabbable element. reverseTab
Focus on the next element Change the focus from the currently focused element to the previous tabbable element. forwardTab
Scroll left Scroll the web page left. scrollLeft
Scroll right Scroll the web page right. scrollRight
Scroll up Scroll the web page up. scrollUp
Scroll down Scroll the web page down. scrollDown
Zoom-in on the active web page Zoom in on the current tab in the active browser window. zoomIn
Zoom-out on the active web page Zoom out on the current tab in the active browser window. zoomOut
Open a new tab Open a new tab in the current browser window. openNewTab
Close current browser tab Close the current tab in the active browser window. closeCurrentTab
Switch to the previous browser tab Switch from the current tab to the previous tab in the active browser window. goToPreviousTab
Switch to the next browser tab Switch from the current tab to the next tab in the active browser window. goToNextTab
Open a new browser window Opens a new window. openNewWindow
Close current browser window Close the currently active browser window. closeCurrentWindow
Switch to the previous browser window Switch from the currently active browser window to the previous browser window. goToPreviousWindow
Switch to the next browser window Switch from the currently active browser window to the next browser window. goToNextWindow
Back (history) Navigate to the previous page in history. previousPageInHistory
Next (history) Navigate to the next page in history. nextPageInHistory
Maximize the current browser window Maximize the current browser window. maximizeWindow
Restore the size of current browser window Restore the size of the currently active browser window. restoreWindowSize
Reopen the last closed tab or window Reopen the last closed browser tab or window. reopenTabOrWindow

In case of thumbsticks, the following actions are supported:

Action Description Invoker Documentation
Scroll horizontally Scroll the web page left and right. scrollHorizontally
Scroll vertically Scroll the web page up and down. scrollVertically
History navigation Navigate to the previous and the next page in history. thumbstickHistoryNavigation
Focus on the previous/next element Change the focus from the currently focused element to the previous or next tabbable element. thumbstickTabbing
Zoom in or out on the active web page Zoom in or out on the current tab in the active browser window. thumbstickZoom
Maximize/restore the size of current browser window Change the size of the current browser window, i.e. maximize or restore. thumbstickWindowSize

Default Controls

Image Source: W3C Gamepad API Documentation

Although the gamepad inputs are reconfigurable, the extension provides a default configuration for each gamepad input. The default action for each gamepad input is as follows.
(Please refer to the above diagram for gamepad inputs)

Gamepad Input Default Action Speed Factor Invert Action / Open a new tab or window in background
Button 0 Click - -
Button 1 None - -
Button 2 History back button - -
Button 3 History next button - -
Button 4: Left Bumper Focus on the previous element 2.5 -
Button 5: Right Bumper Focus on the next element 2.5 -
Button 6: Left Trigger Scroll left 1 -
Button 7: Right Trigger Scroll right 1 -
Button 8 Close current browser tab - -
Button 9 Open a new tab - false
Button 10: Left Thumbstick Button Close current browser window - -
Button 11: Right Thumbstick Button Open a new window - false
Button 12: D-Pad Up Button Switch to the previous browser window - -
Button 13: D-Pad Down Button Switch to the next browser window - -
Button 14: D-Pad Left Button Switch to the previous browser tab - -
Button 15: D-Pad Right Button Switch to the next browser tab - -
Left Thumbstick Horizontal Direction Scroll horizontally 1 false
Left Thumbstick Vertical Direction Scroll vertically 1 false
Right Thumbstick Horizontal Direction History navigation - false
Right Thumbstick Vertical Direction Focus on the previous/next element 2.5 false

The configuration panel can be opened by clicking on the Gamepad Navigator pop-up icon. You can also use the keyboard shortcut Alt + Shift + G to open the configuration panel.

Demo

You can check out the recorded demo to see how the navigator works.

Gamepad Navigator Demo

Contributing

See CONTRIBUTING for detailed information.

Publishing

For the steps to publish the extension to the Chrome Web Store, please refer to the PUBLISHING doc.

About

Google Summer of Code 2020 | Using a Game Controller as a Navigation Aid | Inclusive Design Institute

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 88.1%
  • HTML 10.0%
  • CSS 1.9%