Show HN: Realtime Keyboard Heatmap with heatmap.js | Hacker News Reader

Show HN: Realtime Keyboard Heatmap with heatmap.js

patrick-wied.at

96 pointspa717 comments

It's rather strange to see a QWERTY layout when using dvorak. That said, if you showed a dvorak layout to a QWERTY user, you'd have a powerful demonstration of how much less finger travel there is and it convince them to switch.

that's an interesting idea, I think I'll add a dvorak view in my next session :)

ditto with colemak (http://colemak.com)

If one could monitor number of ctrl+f or cmd+f hits, it could probably indicate how difficult was it to locate content on the page.

I think it would be very useful to track auxiliary keys such as delete, shift etc too. Personally, I tend to use delete a lot as I am a lousy touch typist, and this would help me visualize how bad the problem actually is.

I just added the DVORAK layout to the keyboard heatmap and also open sourced it on GitHub, where everybody can contribute his layout preferences: https://github.com/pa7/Keyboard-Heatmap

Does it work only in Chrome, or something? Noting happens for me in Firefox.

Edit: got blocked by AdBlock+.

Remark: it ignores characters/keys that aren't present on US keyboards. No é è à ñ ö π ς φ ... would it be possible to catch Alt/Shift keys, for instance?

Works for me in Firefox (Firefox 5.0, Ubuntu).

apparently adblock+ blocks js files called "heatmap"

Shifted keys, or at least upper-case letters should be easily handled. The problem I suspect is deciding which shift key has been used (or whether caps lock is enabled).

As far as other modifiers, I think a lot of those aren't available to the keypress handler (Specifically, things like cmd-* on a Mac are usually handled by the windowmanager or as app menu shortcuts). I think I have seen html5/js demos that capture more than the usual set of keystrokes though (emacs & vim js demos spring to mind), so it might be possible to do so.

As far as special characters, that'd require you to detect the user keyboard layout in order to know where the appropriate key lives (with added effort for dead-key style modification)

Edit: poking around in the http://www.ymacs.org/ source, there's a reference to http://unixpapa.com/js/key.html which gives access to a whole bunch of extra keycodes.

I love your work on this - a good heatmap library is super helpful, and this is a very clever way to demonstrate it. And that QR code demo you posted earlier is pretty sweet, too...good weekend, huh?

thanks, I appreciate you like my spare time work :) productive weekend, yep g

if anyone is interested in the library (heatmap.js), here's the link http://www.patrick-wied.at/static/heatmapjs/

This is pretty cool, I'd love to see it work with Dvorak!

I don't know if this is something you want to do, but if you'd like to add Dvorak I mapped the coordinates for it here: https://gist.github.com/1195948

Thanks!

thank you, I'll add it in my next session :-) (haven't heard from dvorak yet but it seems really interesting)

Wow. I use apple wireless keyboard. For a moment there I was really impressed :)

Looks neat. I could potentially make use of such a javascript library.

Reply on news.ycombinator.com