
Show HN: Realtime Keyboard Heatmap with heatmap.js - pa7
http://patrick-wied.at/projects/heatmap-keyboard?auto=0
======
rudle
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
that's an interesting idea, I think I'll add a dvorak view in my next session
:)

~~~
marchdown
ditto with colemak (<http://colemak.com>)

------
ideamonk
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
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.

------
pa7
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>

------
wazoox
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?

~~~
shabble
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.

------
gravitymonkey
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
thanks, I appreciate you like my spare time work :) productive weekend, yep
_g_

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

~~~
zefhous
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!

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

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

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

