Show HN: Realtime Keyboard Heatmap with heatmap.js

http://patrick-wied.at/projects/heatmap-keyboard?auto=0

by pa7 • 15 years ago

96 17 15 years ago

patrick-wied.at

dlsspy• 15 years ago

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

pa76• 15 years ago

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

zefhous• 15 years ago

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!

pa76• 15 years ago

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

rudle• 15 years ago

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.

pa76• 15 years ago

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

marchdown• 15 years ago

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

gravitymonkey• 15 years ago

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?

pa76• 15 years ago

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

wazoox• 15 years ago

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?

warp• 15 years ago

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

pa76• 15 years ago

apparently adblock+ blocks js files called "heatmap"

shabble• 15 years ago

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.

ideamonk• 15 years ago

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.

badusername• 15 years ago

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.

tmeasday• 15 years ago

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

pa76• 15 years ago

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

Show HN: Realtime Keyboard Heatmap with heatmap.js

Related Stories