Permalink
Browse files

update to only have firefox use svg filters for blurring right now, w…

…hile other browsers do it the hard way. eventually that won't be necessary.
  • Loading branch information...
1 parent e910f17 commit 5ec22500a3e9facc10cbd168a74f298136264691 mpd committed Jul 28, 2010
Showing with 25 additions and 5 deletions.
  1. +15 −4 heatmap.html
  2. +10 −1 heatmap.js
View
@@ -1,11 +1,16 @@
<!doctype html>
<html>
- <head><title>heatmap</title></head>
-
+ <head>
+ <title>heatmap</title>
+ <style>
+ .blurred { filter: url("#fuzzy"); }
+ </style>
+ </head>
+
<body>
<div style="position: relative; display: inline-block;">
<img id="trackme" src="img.jpg" />
- <canvas id="overlay" style="opacity: 0.5; position: absolute; top: 0; left: 0; display: none;">This requires canvas support, which your browser does not have.</canvas>
+ <canvas id="overlay" style="position: absolute; top: 0; left: 0; display: none;">This requires canvas support, which your browser does not have.</canvas>
</div>
<div style="display: inline-block;">
<textarea id="data-output" cols=40 rows=20>Data Dumps Here</textarea>
@@ -24,7 +29,13 @@
</div>
<a href="http://github.com/xxx/heatmap">README</a>
</div>
-
+
+ <svg>
+ <defs>
+ <filter id="fuzzy"><feGaussianBlur stdDeviation="1.0" ></feGaussianBlur></filter>
+ </defs>
+ </svg>
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="heatmap.js"></script>
</body>
View
@@ -213,10 +213,19 @@ $(function () {
};
$('.render-button').click(function (e) {
+ var smoothing = this.id === 'do-render' && !$.browser.mozilla;
$('button').attr('disabled', true);
$('#trackme').addClass('disabled');
renderStartTime = new Date().getTime();
- worker.postMessage(JSON.stringify({heat: heat, width: canvasWidth, height: canvasHeight, smoothing: this.id === 'do-render'}));
+
+ // svg filters only seem to be working for FF at the moment.
+ if (this.id === 'do-render') {
+ $('#overlay').addClass('blurred');
+ } else {
+ $('#overlay').removeClass('blurred');
+ }
+
+ worker.postMessage(JSON.stringify({heat: heat, width: canvasWidth, height: canvasHeight, smoothing: smoothing}));
});
$('#clear-data').click(function (e) {

0 comments on commit 5ec2250

Please sign in to comment.