4 ms·

Show HN: Realtime Keyboard Heatmap with heatmap.js

96 points by pa7 15y ago

dlsspy 15y ago
Looks neat. I could potentially make use of such a javascript library.
pa7 15y ago
if anyone is interested in the library (heatmap.js), here's the link http://www.patrick-wied.at/static/heatmapjs/ http://www.patrick-wied.at/static/heatmapjs/
- zefhous 15y 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 https://gist.github.com/1195948 Thanks!
  - pa7 15y ago
    thank you, I'll add it in my next session :-) (haven't heard from dvorak yet but it seems really interesting)
rudle 15y 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.
- pa7 15y ago
  that's an interesting idea, I think I'll add a dvorak view in my next session :)
  - marchdown 15y ago
    ditto with colemak (http://colemak.com http://colemak.com)
gravitymonkey 15y 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?
- pa7 15y ago
  thanks, I appreciate you like my spare time work :) productive weekend, yep g
wazoox 15y 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 15y ago
  Works for me in Firefox (Firefox 5.0, Ubuntu).
- pa7 15y ago
  apparently adblock+ blocks js files called "heatmap"
- shabble 15y 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/ http://www.ymacs.org/ source, there's a reference to http://unixpapa.com/js/key.html http://unixpapa.com/js/key.html which gives access to a whole bunch of extra keycodes.
ideamonk 15y 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 15y 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 15y ago
Wow. I use apple wireless keyboard. For a moment there I was really impressed :)
pa7 15y 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 https://github.com/pa7/Keyboard-Heatmap

96 points by pa7 15y ago

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

pa7 15y ago

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

zefhous 15y 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 https://gist.github.com/1195948 Thanks!
- pa7 15y ago
  thank you, I'll add it in my next session :-) (haven't heard from dvorak yet but it seems really interesting)

rudle 15y 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.

pa7 15y ago
that's an interesting idea, I think I'll add a dvorak view in my next session :)
- marchdown 15y ago
  ditto with colemak (http://colemak.com http://colemak.com)

gravitymonkey 15y 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?

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

wazoox 15y 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 15y ago
Works for me in Firefox (Firefox 5.0, Ubuntu).
pa7 15y ago
apparently adblock+ blocks js files called "heatmap"
shabble 15y 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/ http://www.ymacs.org/ source, there's a reference to http://unixpapa.com/js/key.html http://unixpapa.com/js/key.html which gives access to a whole bunch of extra keycodes.

ideamonk 15y 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 15y 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 15y ago

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

pa7 15y 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 https://github.com/pa7/Keyboard-Heatmap