parseInt second param, mousemove demo bugfix

martindale · May 11, 2011 · 3e6e7ef · 3e6e7ef
1 parent af04cba
commit 3e6e7ef
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 11 deletions.
diff --git a/demo/realtime_heatmap/mousemove.html b/demo/realtime_heatmap/mousemove.html
@@ -4,6 +4,10 @@
 		<meta charset="utf-8" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 		<title>heatmap.js Realtime heatmap based on mousemovement</title>
+		<meta name="robots" content="index, follow" />
+		<meta name="description" content="Realtime heatmap based on mouse movement " />
+		<meta name="author" content="Patrick Wied" />
+		<meta name="keywords" content="heatmap, realtime, mouse movement, javascript, canvas, html5" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<style>
 			body, html {
@@ -49,18 +53,22 @@ <h2>Sidenotes</h2>
 				This is a demonstration of a realtime heatmap based on the user's mouse movement.<br /><br />
 				<strong>Note: if you want to see the dynamic repainting, stop your cursor on the heatmap for some time.</strong>
 			</div>
+			<div style="position:absolute;width:940px;top:550px;text-align:center;"><a href="http://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> by <a href="http://www.patrick-wied.at" target="_blank">Patrick Wied</a></div>
 		</div>
+
 		<script type="text/javascript" src="../../src/heatmap.js"></script>
 		<script type="text/javascript">
 
+		window.onload = function(){
+
 		var xx = h337.create({"element":document.getElementById("heatmapArea"), "radius":25, "visible":true});
 
-		(function(){
+			(function(){
 				var active = false,
 				lastCoords = [],
 				mouseMove = false,
+				mouseOver = false,
 				activate = function(){
-
 					active = true;
 				},
 				$ = function(id){
@@ -71,35 +79,40 @@ <h2>Sidenotes</h2>
 					xx.store.addDataPoint(lastCoords[0], lastCoords[1]);
 				},
 				antiIdle = function(){
-					if(!mouseMove && lastCoords && !timer){
-						timer = setInterval(simulateEv, 500);			
+					if(mouseOver && !mouseMove && lastCoords && !timer){
+						timer = setInterval(simulateEv, 1000);			
 					}
 				};
 
+
 				(function(fn){
 					setInterval(fn, 1000);
 				}(antiIdle));
 				var tmp = $("heatmapArea");
 
-				tmp.onmousout = function(){
+				tmp.onmouseout = function(){
+					mouseOver = false;
 					if(timer){
 						clearInterval(timer)
 						timer = null;
 					}
 				};
 
+
 				tmp.onmousemove = tmp.onclick = function(ev){
 					mouseMove = true;
+					mouseOver = true;
 					if(active){
 						if(timer){
 							clearInterval(timer);
 							timer = null;
 						}
+
 						var pos = h337.util.mousePosition(ev);
-						if(pos){
+
 							xx.store.addDataPoint(pos[0], pos[1]);
 							lastCoords = [pos[0], pos[1]];
-						}
+
 						active = false;
 					}
 					mouseMove = false;
@@ -123,6 +136,8 @@ <h2>Sidenotes</h2>
 					setInterval(fn, 50);
 				}(activate));
 			})();
+		};
 		</script>
+
 	</body>
 </html>
diff --git a/heatmap.js b/heatmap.js
@@ -94,7 +94,7 @@
 					if(two === undefined)
 						continue;
 					// if both indexes are defined, push the values into the array
-					exportData.push({x: parseInt(one), y: parseInt(two), count: data[one][two]});
+					exportData.push({x: parseInt(one, 10), y: parseInt(two, 10), count: data[one][two]});
 				}
 			}
 
@@ -164,7 +164,7 @@
 				this.set("visible", config.visible);
 				this.set("max", config.max || false);
 				this.set("gradient", config.gradient || { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1.0: "rgb(255,0,0)"});	// default is the common blue to red gradient
-				this.set("opacity", parseInt(255/(100/config.opacity)) || 180);
+				this.set("opacity", parseInt(255/(100/config.opacity), 10) || 180);
 				this.set("width", config.width || 0);
 				this.set("height", config.height || 0);
 		},
@@ -316,6 +316,8 @@
 			var w = this.get("width"),
 			h = this.get("height");
 			this.store.set("data",[]);
+			// @TODO: reset stores max to 1 
+			//this.store.max = 1;
 			this.get("ctx").clearRect(0,0,w,h);
 			this.get("actx").clearRect(0,0,w,h);
 		}
@@ -327,7 +329,16 @@
 			},
 			util: {
 				mousePosition: function(ev){
+					// this doesn't work right
+					// rather use 
+					/*
+						// this = element to observe
+						var x = ev.pageX - this.offsetLeft;
+						var y = ev.pageY - this.offsetTop;
+						
+					*/
 					var x, y;
+
 					if (ev.layerX) { // Firefox
 						x = ev.layerX;
 						y = ev.layerY;

diff --git a/src/heatmap.js b/src/heatmap.js
@@ -94,7 +94,7 @@
 					if(two === undefined)
 						continue;
 					// if both indexes are defined, push the values into the array
-					exportData.push({x: parseInt(one), y: parseInt(two), count: data[one][two]});
+					exportData.push({x: parseInt(one, 10), y: parseInt(two, 10), count: data[one][two]});
 				}
 			}
 
@@ -164,7 +164,7 @@
 				this.set("visible", config.visible);
 				this.set("max", config.max || false);
 				this.set("gradient", config.gradient || { 0.45: "rgb(0,0,255)", 0.55: "rgb(0,255,255)", 0.65: "rgb(0,255,0)", 0.95: "yellow", 1.0: "rgb(255,0,0)"});	// default is the common blue to red gradient
-				this.set("opacity", parseInt(255/(100/config.opacity)) || 180);
+				this.set("opacity", parseInt(255/(100/config.opacity), 10) || 180);
 				this.set("width", config.width || 0);
 				this.set("height", config.height || 0);
 		},
@@ -316,6 +316,8 @@
 			var w = this.get("width"),
 			h = this.get("height");
 			this.store.set("data",[]);
+			// @TODO: reset stores max to 1 
+			//this.store.max = 1;
 			this.get("ctx").clearRect(0,0,w,h);
 			this.get("actx").clearRect(0,0,w,h);
 		}
@@ -327,7 +329,16 @@
 			},
 			util: {
 				mousePosition: function(ev){
+					// this doesn't work right
+					// rather use 
+					/*
+						// this = element to observe
+						var x = ev.pageX - this.offsetLeft;
+						var y = ev.pageY - this.offsetTop;
+						
+					*/
 					var x, y;
+
 					if (ev.layerX) { // Firefox
 						x = ev.layerX;
 						y = ev.layerY;