Video Game Keyboard Diagrams, Hacker News

Description:

This PHP form generates a keyboard control diagram in a new window. You can select from among hotkeys and bindings for various video games and other software. If you do not have a JavaScript-enabled browser, then you may refer to the master table table instead, as it should be viewable in a JavaScript-less browser. If you are looking for Apple or non-English bindings, you may also have an easier time searching the master table , as there are so few of them.

Instructions:

Select a keyboard (key positions). Select a theme (visual formatting).
Select a game (key bindings).
Select a format (output media type).
1. Toggle the numeric keypad on / off.

Click on the “Create New Diagram” button. A new window with your selected diagram will appear.

View or print the page in the new window.

1. Items marked with a star (✦) are the “default” or most common options.

   The vast majority of the bindings are for the US (Key (ANSI) keyboard at this time. If you would like to see more bindings for the other keyboards, you are welcome to contribute! (More on that, below.)

   Licenses & Submissions:

   The source code for this project is licensed under the GNU LGPLv3 . The content is licensed under the

   CC BY-SA 3.0 . Visit the GitHub repository for the project’s source code. The change log contains the project’s update history and credits, as well as links to further reading. The “to do” list outlines some of the tasks I’ve planned for the future.

   To submit a new set of bindings, you can fill out this spreadsheet and by email me the contents by copying and pasting. Note that any content you submit falls under the CC BY-SA 3.0 license, as per the project as a whole. Your name will then appear at the bottom of each chart you contributed to.

   I have also developed a form-based submission page. You can use it by selecting the “Editor” option in Step 4, above. To update a game’s binding simply select it from the “Games” menu above. To start a brand new submission, select the “Blank Starter” item in the “Reference” category of the “Games” menu. ( Here is a direct link .) There are “Blank Starters” for every keyboard. All that being said, I personally still prefer using the spreadsheet for new submissions.

   MediaWiki, SVG & PDF:

   I have created templates for MediaWiki wikis that do basically the same thing as the charts available on this site. You can find templates as well as instructions on how to use them at StrategyWiki and Fandom . There is a test case located here . By selecting the “MediaWiki” format type in the menu above, you can generate the code you will need in order to populate this template with data. Note that on the destination wiki page, you may also want to wrap the charts in scrollable DIV elements, since the charts are typically wider than a browser window.

   I have also created SVG versions of the charts that you can select in the “Format” menu on the front page. I have not migrated over to using SVG for everything yet since it is less compatible with older browsers. Further, I have not yet decided how I want to implement the mouse and joystick controls charts, and this will affect my future choices. (In particular, I have not yet figured out how to create text containers in SVG that expand, wrap and scale automatically as the number of characters inside them increases.)

   PDF versions of the charts will hopefully be implemented at some point in the future. Right now the PDF option is still disabled in the menu. That being said, there are virtual printer drivers such as “Microsoft Print to PDF” or “Adobe Print to PDF” that will allow you to print any document to PDF, even from your Web browser.

   Printing Tips:

   When printing, the chart may not fit within a single letter- or legal-sized page, even when selecting “Landscape” mode instead of “Portrait” mode in your printer dialog settings. Luckily, your browser or printer may have a “shrink to fit” feature that you can take advantage of to automatically adjust the size of the printed page output. Unfortunately, Google Chrome is missing a “shrink to fit” feature by default, so I recommend investigating one of the workarounds discussed on Super User, here .

You may save a little more space by also hiding the numeric keypad. Be aware that many games have commands bound to these keys!

I recommend not enabling the printing of background colors and images in your printer settings, as this will consume a lot of ink. This setting is found in “Page Setup” (Mozilla Firefox and Internet Explorer) or within the print dialog itself (Google Chrome). The setting appears to not exist in Microsoft Edge.
1. If the colors or keyboard theme are not to your liking, select a different “Theme” from among the options at the top of this page, then try generating the chart again.
   1. Printing at (DPI (dots-per-inch) and 104% scaling should result in a printed page that closely approximates the size and dimensions of many real physical keyboards. Of course, not every keyboard is exactly the same, so YMMV.
      1. In MS Windows, some Web browers (Google Chrome for instance) use your desktop DPI scaling settings to adjust the size of on-screen HTML elements, resulting in a document that appears larger or smaller than normal. I am not exactly sure what effect this has on the printed page output, however. It may vary from browser to browser. I am not sure what happens in other operating systems either.
         Note, that the darker themes in general will waste a lot of ink. You might want to select a lighter theme when printing.
         Read More)