Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

[FEATURE] Adds shift key tracking for symbols #1

Merged
merged 2 commits into from

2 participants

@zaki

Hi,

Thanks for sharing the code on github.

I added a new feature to track SHIFT key-presses for symbols like # or @ in all three current keyboard layouts. I also took the liberty to clean up the formatting in index.html, if you don't like that part, you can just cherry-pick zaki/Keyboard-Heatmap-1@ecabeff.

The way it works is pretty general, so adding new modifier keys is just adding another pair of x,y coordinates in keyboard-layouts.js.

Zaki

@pa7
Owner

Looks fine, thank you for your contribution

@pa7 pa7 merged commit f3c4c3d into pa7:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 12, 2011
  1. @zaki

    Formatting cleanup

    zaki authored
  2. @zaki
This page is out of date. Refresh to see the latest.
Showing with 162 additions and 159 deletions.
  1. +97 −95 app/index.html
  2. +65 −64 app/keyboard-layouts.js
View
192 app/index.html
@@ -2,13 +2,13 @@
<html lang="en">
<head>
<meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Keyboard Heatmap | Realtime heatmap visualization of text character distribution</title>
<meta name="robots" content="index, follow" />
- <meta name="description" content="This is a demonstration of a keyboard heatmap visualizing character distribution of texts while you're typing" />
- <meta name="author" content="Patrick Wied" />
- <meta name="keywords" content="heatmap, text heatmap, character distribution, heatmap.js" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="This is a demonstration of a keyboard heatmap visualizing character distribution of texts while you're typing" />
+ <meta name="author" content="Patrick Wied" />
+ <meta name="keywords" content="heatmap, text heatmap, character distribution, heatmap.js" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="http://www.patrick-wied.at/projects/heatmap-keyboard/" />
<link rel="shortcut icon" type="image/png" href="../../img/favicon.png" />
<link rel="stylesheet" href="style.css" />
@@ -17,50 +17,54 @@
<div id="wrapper">
<div id="header">
<h1>Visualizing character distribution of texts on a keyboard while you're typing...</h1>
- <div style="position:absolute;right:10px;top:75px;z-index:10000;"><script type="text/javascript">
- /* <![CDATA[ */
- (function() {
- var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
- s.type = 'text/javascript';
- s.async = true;
- s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
- t.parentNode.insertBefore(s, t);
- })();
- /* ]]> */
- </script><a class="FlattrButton" style="display:none;" href="http://www.patrick-wied.at/static/heatmapjs/"></a>&nbsp;<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="patrickwied">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
-<g:plusone size="tall"></g:plusone></div>
-
+ <div style="position:absolute;right:10px;top:75px;z-index:10000;">
+ <script type="text/javascript">
+ /* <![CDATA[ */
+ (function() {
+ var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+ s.type = 'text/javascript';
+ s.async = true;
+ s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+ t.parentNode.insertBefore(s, t);
+ })();
+ /* ]]> */
+ </script>
+ <a class="FlattrButton" style="display:none;" href="http://www.patrick-wied.at/static/heatmapjs/"></a>&nbsp;
+ <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="patrickwied">Tweet</a>
+ <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+ <g:plusone size="tall"></g:plusone>
</div>
- <div id="customize">
- <h2>Customize it</h2>
- <div id="customizearea">
- <label>Select your fingertip size</label>
- <select id="fingertip">
- <option>Small</option>
- <option selected>Normal</option>
- <option>Huuuge</option>
- </select><br />
- <label>Select a heatmap gradient</label>
- <select id="gradient">
- <option selected>Standard</option>
- <option>Nightly</option>
- <option>Fanzy</option>
- </select><br />
- <label>Select a keyboard layout</label>
- <select id="layout">
- <option value="QWERTY" selected>QWERTY Layout</option>
- <option value="DVORAK">DVORAK Layout</option>
- <option value="COLEMAK">COLEMAK Layout</option>
- </select>
- <div id="apply" class="button">
- Apply customizations
- </div>
+ </div>
+ <div id="customize">
+ <h2>Customize it</h2>
+ <div id="customizearea">
+ <label>Select your fingertip size</label>
+ <select id="fingertip">
+ <option>Small</option>
+ <option selected>Normal</option>
+ <option>Huuuge</option>
+ </select><br />
+ <label>Select a heatmap gradient</label>
+ <select id="gradient">
+ <option selected>Standard</option>
+ <option>Nightly</option>
+ <option>Fanzy</option>
+ </select><br />
+ <label>Select a keyboard layout</label>
+ <select id="layout">
+ <option value="QWERTY" selected>QWERTY Layout</option>
+ <option value="DVORAK">DVORAK Layout</option>
+ <option value="COLEMAK">COLEMAK Layout</option>
+ </select>
+ <div id="apply" class="button">
+ Apply customizations
</div>
</div>
- <div id="inputarea">
- <h2>Please type something in the textbox or load a sample text :-)</h2>
- <textarea id="typefield">heatmap.js keyboard - please type something</textarea>
- <div id="presample">Load a text sample
+ </div>
+ <div id="inputarea">
+ <h2>Please type something in the textbox or load a sample text :-)</h2>
+ <textarea id="typefield">heatmap.js keyboard - please type something</textarea>
+ <div id="presample">Load a text sample
<ul>
<li>Sample Text 1</li>
<li>Sample Text 2</li>
@@ -70,11 +74,11 @@
</div>
</div>
<div id="keyboard">
-
+
</div>
<div id="footer">
This is a spare time project I made with heatmap.js, a JavaScript Framework for generating Web heatmaps.<br />
- Apple Inc. owns the rights on that keyboard image.
+ Apple Inc. owns the rights on that keyboard image.
If you have any questions, feel free to contact me. <a href="http://www.patrick-wied.at" title="Patrick Wied" target="_blank">www.patrick-wied.at</a>
</div>
</div>
@@ -89,34 +93,29 @@
<script src="keyboard-layouts.js"></script>
<script type="text/javascript">
(function(){
-
+
app.init = function initialize(){
var cfg = arguments[0] || {};
var config = {};
-
+
config.element = "keyboard";
config.radius = cfg.radius || 50;
config.visible = true;
config.opacity = 40;
if(cfg.gradient)
config.gradient = cfg.gradient;
-
+
app.coordinates = app.LAYOUTS[cfg.layout || "QWERTY"];
if(cfg.layout)
- $("keyboard").style.backgroundImage = "url(img/"+cfg.layout+".png)";
+ $("keyboard").style.backgroundImage = "url(img/"+cfg.layout+".png)";
-
var heatmap = h337.create(config);
app.heatmap = heatmap;
};
app.init();
-
-
+
var typeField = document.getElementById("typefield");
-
-
-
var repaint = function(){
// generate data object
var data = [],
@@ -125,9 +124,9 @@
text = typeField.value,
tlen = text.length,
coordinates = app.coordinates;
-
+
for(var i=0; i < tlen; i++){
-
+
var key = text.charAt(i);
if(/^[A-Za-z]$/.test(key)){
key = key.toUpperCase();
@@ -136,46 +135,49 @@
var coord;
coord = coordinates[key];
if(coord){
- var joined = coord.join(";");
- if(!temp[joined])
- temp[joined] = 0;
-
- temp[joined] += 1;
+ for(var s = 0; s < coord.length; s += 2) {
+ var joined = coord.slice(s, s+2).join(";");
+ if(!temp[joined])
+ temp[joined] = 0;
+
+ temp[joined] += 1;
+ }
}
}
}
for(var k in temp){
-
var xy = k.split(";");
var val = temp[k];
-
+
data.push({x: xy[0], y: xy[1], count: val});
-
+
if(val > max)
max = val;
-
}
-
+
app.heatmap.store.setDataSet({max: max, data: data});
}
-
+
var len = typeField.value.length;
typeField.onkeypress = function(e){
// ignore cursor IE hack
if(e.charCode == 0 && [37, 38, 39, 40].indexOf(e.keyCode) > -1)
return;
-
+
var key = String.fromCharCode(e.charCode || e.keyCode);
-
+
if(/^[A-Za-z]$/.test(key)){
key = key.toUpperCase();
}
if(app.config.exclude && app.EXCLUDES.indexOf(key) == -1){
var coord = app.coordinates[key]
- coord && app.heatmap.store.addDataPoint.apply(app.heatmap.store,coord);
+ if (coord) {
+ for (var s = 0; s < coord.length; s+=2) {
+ app.heatmap.store.addDataPoint.apply(app.heatmap.store,coord.slice(s, s+2));
+ }
+ }
}
-
};
typeField.onkeyup = function(e){
if(Math.abs(len-this.value.length) > 1 || e.keyCode == 8){
@@ -183,8 +185,7 @@
}
len = this.value.length;
};
-
-
+
var items = document.getElementsByTagName("li");
for(var i=0; i < items.length; i++){
(function(i){
@@ -213,23 +214,24 @@
}
repaint();
})();
-
</script>
-
- <!-- IGNORE -->
- <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
- <!-- Piwik -->
- <script type="text/javascript">
- var pkBaseURL = (("https:" == document.location.protocol) ? "https://www.patrick-wied.at/helper/piwik/" : "http://www.patrick-wied.at/helper/piwik/");
- document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
- </script><script type="text/javascript">
- try {
- var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
- piwikTracker.trackPageView();
- piwikTracker.enableLinkTracking();
- } catch( err ) {}
- </script><noscript><p><img src="http://www.patrick-wied.at/helper/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
- <!-- End Piwik Tag -->
- <!-- /IGNORE -->
+
+ <!-- IGNORE -->
+ <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
+ <!-- Piwik -->
+ <script type="text/javascript">
+ var pkBaseURL = (("https:" == document.location.protocol) ? "https://www.patrick-wied.at/helper/piwik/" : "http://www.patrick-wied.at/helper/piwik/");
+ document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
+ </script>
+ <script type="text/javascript">
+ try {
+ var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
+ piwikTracker.trackPageView();
+ piwikTracker.enableLinkTracking();
+ } catch( err ) {}
+ </script><noscript><p><img src="http://www.patrick-wied.at/helper/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
+ <!-- End Piwik Tag -->
+ <!-- /IGNORE -->
</body>
-</html>
+</html>
+
View
129 app/keyboard-layouts.js
@@ -1,30 +1,30 @@
app.LAYOUTS = {
QWERTY: {
- "~": [35, 120],
+ "~": [35, 120, 70, 275],
"`": [35, 120],
"1": [90, 120],
- "!": [90, 120],
+ "!": [90, 120, 70, 275],
"2": [144, 120],
- "@": [144, 120],
+ "@": [144, 120, 70, 275],
"3": [198, 120],
- "#": [198, 120],
+ "#": [198, 120, 70, 275],
"4": [253, 120],
- "$": [253, 120],
+ "$": [253, 120, 70, 275],
"5": [307, 120],
- "%": [307, 120],
+ "%": [307, 120, 70, 275],
"6": [361, 120],
- "^": [361, 120],
+ "^": [361, 120, 70, 275],
"7": [415, 120],
- "&": [415, 120],
+ "&": [415, 120, 70, 275],
"8": [469, 120],
- "*": [469, 120],
+ "*": [469, 120, 70, 275],
"9": [524, 120],
- "(": [524, 120],
+ "(": [524, 120, 70, 275],
"0": [579, 120],
- ")": [579, 120],
+ ")": [579, 120, 70, 275],
"-": [630, 120],
- "_": [630, 120],
- "+": [685, 120],
+ "_": [630, 120, 70, 275],
+ "+": [685, 120, 70, 275],
"=": [685, 120],
"Q": [115, 174],
"W": [169, 174],
@@ -37,11 +37,11 @@ app.LAYOUTS = {
"O": [548, 174],
"P": [602, 174],
"[": [656, 174],
- "{": [656, 174],
+ "{": [656, 174, 70, 275],
"]": [710, 174],
- "}": [710, 174],
+ "}": [710, 174, 70, 275],
"\\":[764, 174],
- "|": [764, 174],
+ "|": [764, 174, 70, 275],
"A": [130, 225],
"S": [184, 225],
"D": [238, 225],
@@ -52,9 +52,9 @@ app.LAYOUTS = {
"K": [508, 225],
"L": [562, 225],
";": [616, 225],
- ":": [616, 225],
+ ":": [616, 225, 70, 275],
"'": [670, 225],
- "\"": [670, 225],
+ "\"": [670, 225, 70, 275],
"Z": [158, 275],
"X": [212, 275],
"C": [266, 275],
@@ -63,46 +63,46 @@ app.LAYOUTS = {
"N": [428, 275],
"M": [482, 275],
",": [536, 275],
- "<": [536, 275],
+ "<": [536, 275, 70, 275],
".": [590, 275],
- ">": [590, 275],
+ ">": [590, 275, 70, 275],
"/": [644, 275],
- "?": [644, 275],
+ "?": [644, 275, 70, 275],
" ": [500, 300]
},
DVORAK: {
- "~": [35, 120],
+ "~": [35, 120, 70, 275],
"`": [35, 120],
"1": [90, 120],
- "!": [90, 120],
+ "!": [90, 120, 70, 275],
"2": [144, 120],
- "@": [144, 120],
+ "@": [144, 120, 70, 275],
"3": [198, 120],
- "#": [198, 120],
+ "#": [198, 120, 70, 275],
"4": [253, 120],
- "$": [253, 120],
+ "$": [253, 120, 70, 275],
"5": [307, 120],
- "%": [307, 120],
+ "%": [307, 120, 70, 275],
"6": [361, 120],
- "^": [361, 120],
+ "^": [361, 120, 70, 275],
"7": [415, 120],
- "&": [415, 120],
+ "&": [415, 120, 70, 275],
"8": [469, 120],
- "*": [469, 120],
+ "*": [469, 120, 70, 275],
"9": [524, 120],
- "(": [524, 120],
+ "(": [524, 120, 70, 275],
"0": [579, 120],
- ")": [579, 120],
+ ")": [579, 120, 70, 275],
"[": [630, 120],
- "{": [630, 120],
+ "{": [630, 120, 70, 275],
"]": [685, 120],
- "}": [685, 120],
+ "}": [685, 120, 70, 275],
"'": [115, 174],
- "\"": [115, 174],
+ "\"": [115, 174, 70, 275],
",": [169, 174],
- "<": [169, 174],
+ "<": [169, 174, 70, 275],
".": [224, 174],
- ">": [224, 174],
+ ">": [224, 174, 70, 275],
"P": [278, 174],
"Y": [332, 174],
"F": [386, 174],
@@ -111,11 +111,11 @@ app.LAYOUTS = {
"R": [548, 174],
"L": [602, 174],
"/": [656, 174],
- "?": [656, 174],
+ "?": [656, 174, 70, 275],
"=": [710, 174],
- "+": [710, 174],
+ "+": [710, 174, 70, 275],
"\\":[764, 174],
- "|": [764, 174],
+ "|": [764, 174, 70, 275],
"A": [130, 225],
"O": [184, 225],
"E": [238, 225],
@@ -127,8 +127,8 @@ app.LAYOUTS = {
"N": [562, 225],
"S": [616, 225],
"-": [670, 225],
- "_": [670, 225],
- ":": [158, 275],
+ "_": [670, 225, 70, 275],
+ ":": [158, 275, 70, 275],
";": [158, 275],
"Q": [212, 275],
"J": [266, 275],
@@ -142,31 +142,31 @@ app.LAYOUTS = {
" ": [500, 300]
},
COLEMAK: {
- "~": [35, 120],
+ "~": [35, 120, 70, 275],
"`": [35, 120],
"1": [90, 120],
- "!": [90, 120],
+ "!": [90, 120, 70, 275],
"2": [144, 120],
- "@": [144, 120],
+ "@": [144, 120, 70, 275],
"3": [198, 120],
- "#": [198, 120],
+ "#": [198, 120, 70, 275],
"4": [253, 120],
- "$": [253, 120],
+ "$": [253, 120, 70, 275],
"5": [307, 120],
- "%": [307, 120],
+ "%": [307, 120, 70, 275],
"6": [361, 120],
- "^": [361, 120],
+ "^": [361, 120, 70, 275],
"7": [415, 120],
- "&": [415, 120],
+ "&": [415, 120, 70, 275],
"8": [469, 120],
- "*": [469, 120],
+ "*": [469, 120, 70, 275],
"9": [524, 120],
- "(": [524, 120],
+ "(": [524, 120, 70, 275],
"0": [579, 120],
- ")": [579, 120],
+ ")": [579, 120, 70, 275],
"-": [630, 120],
- "_": [630, 120],
- "+": [685, 120],
+ "_": [630, 120, 70, 275],
+ "+": [685, 120, 70, 275],
"=": [685, 120],
"Q": [115, 174],
"W": [169, 174],
@@ -177,14 +177,14 @@ app.LAYOUTS = {
"L": [440, 174],
"U": [494, 174],
"Y": [548, 174],
- ":": [602, 174],
+ ":": [602, 174, 70, 275],
";": [602, 174],
"[": [656, 174],
- "{": [656, 174],
+ "{": [656, 174, 70, 275],
"]": [710, 174],
- "}": [710, 174],
+ "}": [710, 174, 70, 275],
"\\":[764, 174],
- "|": [764, 174],
+ "|": [764, 174, 70, 275],
"A": [130, 225],
"R": [184, 225],
"S": [238, 225],
@@ -196,7 +196,7 @@ app.LAYOUTS = {
"I": [562, 225],
"O": [616, 225],
"'": [670, 225],
- "\"": [670, 225],
+ "\"": [670, 225, 70, 275],
"Z": [158, 275],
"X": [212, 275],
"C": [266, 275],
@@ -205,11 +205,11 @@ app.LAYOUTS = {
"K": [428, 275],
"M": [482, 275],
".": [536, 275],
- ">": [536, 275],
+ ">": [536, 275, 70, 275],
",": [590, 275],
- "<": [590, 275],
+ "<": [590, 275, 70, 275],
"/": [644, 275],
- "?": [644, 275],
+ "?": [644, 275, 70, 275],
" ": [500, 300]
}
},
@@ -219,4 +219,5 @@ app.SAMPLE_TEXT = [
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"A heat map is a graphical representation of data where the values taken by a variable in a two-dimensional table are represented as colors. Fractal maps and tree maps both often use a similar system of color-coding to represent the values taken by a variable in a hierarchy. The term is also used to mean its thematic application as a choropleth map.",
"Heat maps originated in 2D displays of the values in a data matrix. Larger values were represented by small dark gray or black squares (pixels) and smaller values by lighter squares. Sneath (1957) displayed the results of a cluster analysis by permuting the rows and the columns of a matrix to place similar values near each other according to the clustering. Jacques Bertin used a similar representation to display data that conformed to a Guttman scale. The idea for joining cluster trees to the rows and columns of the data matrix originated with Robert Ling in 1973. Ling used overstruck printer characters to represent different shades of gray, one character-width per pixel."
-];
+];
+
Something went wrong with that request. Please try again.