Gamepad Support in Gyroscope July 16, 2021

View all articles from Gyroscope Development Blog

The recent release of the Steam Deck made us take a closer look at Gyroscope's support for game controllers. Although Steam Deck has its own high precision mouse pad and on-screen keyboard so that a browser would work the same way as in a touch-screen tablet, the integration of a gamepad can make a Gyroscope app run more fluidly, and more fun!

Previously, we made sure that Gyroscope runs, and runs well on an Amazon Kindle Paper White. So far, Gyroscope is likely the only web app that has made a Paper White "web-worthy".

Similarly, navigating a CRM or ERP on a handheld gaming device should not just be theoretical. In fact, the gamepad API that is now supported by most modern browsers has been sitting around for a while. We think it's time that we put game controllers to production use.

Gyroscope 18.2's gamepad support is prototyped on an Xbox controller. The mapping of buttons is standard across most controllers.

Gamepad controls can be enabled for each user:

Once enabled, a game controller icon will be displayed in the status bar, at the bottom of the screen, regardless of whether a controller is connected.

Press any button on the controller will connect it to the Gyroscope app. The gamepad icon turns dark:

The classic Gyroscope layout has three panels: a list of entry-point icons, a side-panel view to the left, and tabbed detail view to the right:

The left and right bumpers move a highlighted cursor among the top icons.

The D-Pad, also known as the "Hat", controls the list items on the left with the up and down gesture:

Move left and right on the D-Pad will traverse through the tab items:

In addition, the Left Stick Button scrolls the left view:

And the right view scrolls with the Right Stick Button:

The A button selects the item that's highlighted by the Gamepad Cursor - an orange box that disappears shortly after inactivity. When the cursor is on a tab, the A button opens the tab, while the B button closes the tab:

Within the active tab, the Left Trigger and Right Trigger can be used to navigate through links, checkboxes and buttons.

Below is a quick video of an Xbox controller in action:

As a bonus convenience, the start (menu) button opens the current user's account settings.

Lookup View

When the lookup view slides out from the left, the Left Stick Button controls the lookup instead of the left view. Use the B button to dismiss the lookup list.

Migration Guide

The following files need to be patched if migrating from 18.1:

  • gyroscope.css - indicator
  • toolbar_hd.css - hd indicator
  • tabs.js - showtab - reset widx
  • viewport.js - showview - reset vidx
  • - showlookup - enable lookupview
  • - hidelookup - disable lookupview
  • + gamepad.js
  • index.php
  • toolbar.gif
  • toolbar_hd.gif
  • accounts.js
  • users.js
  • * db change: add users.usegamepad
  • * barcode onblur

Gamepad Variations

Game controllers don't always have the same buttons. The same controller may also be interpreted differently by the OS and hardware. The current implementation handles two representations of an Xbox controller:

17 buttons and 4 axes (17/4)

11 buttons and 8 axes (11/8)

Both the diagnostic screen in Windows and the Chromebook treat the controller as 11/8, although the browsers on Windows read the gamepad as 17/4.

The most noticeable difference is the interpretation of the Left Trigger, Right Trigger and the Hat/D-Pad. In 11/8, they are seen as buttons; in 17/4 they are axes.

The gamepad script gamepad.js in Gyroscope maps out the buttons and axes as logical controls. New variants can be easily supported by extending the internal button map (bmap) and axes map (amap).

Debugging Tip: in the web console, enter the following lines to peak inside the gamepad buttons and axes. The first line prevents the deactivation of the gamepad in Gyroscope:




The current mappings (17/4, 11/8) of the Xbox controller is listed below as reference:

Our Services

Targeted Crawlers

Crawlers for content extraction, restoration and competitive intelligence gathering.

Learn More

Gyroscope™ ERP Solutions

Fully integrated enterprise solutions for rapid and steady growth.

Learn More


Self-updating websites with product catalog and payment processing.

Learn More