/share /subscribe ✓
on     Twitter | Facebook | Email
×

Get more things like
this right into your inbox.


New layouts for the Keyboard Heatmap

Estimated reading time: 2 minutes ( save for later )

I recently created a realtime keyboard heatmap as an example use case for heatmap.js, my web heatmap JS library. The Keyboard Heatmap shows the character distribution of texts (changing in realtime when a user types). I didn’t really care about good application structure since I created it in less than 2 hours and I also didn’t think that the Keyboard Heatmap would be recognized by anyone but apparently there are a lot of people who actually liked it. I got lots of emails for feature requests and I decided to open source the project on GitHub so everyone can implement his own special feature and hopefully contribute it. Have a look at the repository
I did the first step and added 2 new keyboard layouts to the project.

Here is a simple guide about how to add your own keyboard layout to the current application structure:

How to add your own keyboard layout

Since the code is hosted on GitHub, the first step is to download the existing code base from there.
If you have a GitHub account you should fork the repository and check out the master.

Create an image for your layout

The Keyboard Heatmap is using an image of the keyboard layout as background behind the heatmap.
In order to add your own layout you’ll need to create an 800x343px image of your keyboard layout and add it to the img-folder.

Add your layout’s coordinates

The app contains a file called “keyboard-layouts.js”, it contains the existing keyboard layouts and it’s key coordinates. The key coordinates are needed because heatmap.js needs to know about where to draw it’s datapoints. Now add the coordinates for your layout to the app.LAYOUTS object. Here is an example

app.LAYOUTS = {
   DVORAK: {
      "A": [130, 225],
       ...
   },
   YOURLAYOUT: {
       "A": [200, 200],
       ...
   }
}

Each key is an object property and has to be defined by a 2 fields array. First index represents the x-coordinate, second the y-coordinate.

Add it to the selection

At last you need to add another option to the select element with the id “layout” in index.html. The value attribute must match the layout name defined in the layouts file and the image name.
That’s it. Happy Coding – If you have any questions, just let me know by twitter or email.

Please don’t hesitate to open a pull request for your layouts, fixes or whatever you’d like to contribute – I’ll update the project website from time to time to get the contributions up.

Related Articles