Skip to content
Browse files

Formatting cleanup

  • Loading branch information...
1 parent 287eb62 commit d70d74a94225e972932f3a3808fb583da653c404 @zaki zaki committed Sep 12, 2011
Showing with 85 additions and 89 deletions.
  1. +85 −89 app/index.html
View
174 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();
@@ -139,35 +138,32 @@
var joined = coord.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();
}
@@ -183,8 +179,7 @@
}
len = this.value.length;
};
-
-
+
var items = document.getElementsByTagName("li");
for(var i=0; i < items.length; i++){
(function(i){
@@ -213,23 +208,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>
+

0 comments on commit d70d74a

Please sign in to comment.
Something went wrong with that request. Please try again.