click_heat_map 0.0.1.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 299222f7ba9826c87c1ab8c5edbe6417c208aacd
+  data.tar.gz: 515081c207b6daef14cea1d32da8c431678c6453
+SHA512:
+  metadata.gz: 6cbd820c94476d85f2fce15174c648f998cfe7e7942418707672fed03847273634de79eba3dc3bae1bce7f85a602783fb68a3ccb106760595bfd1f5fea671e12
+  data.tar.gz: a0faf42c2226bb19ea1c792071d39437dc71dbaa44e17426203ef9892a0a82958185908168f0882890e685de192bf6f1e9dc5bd34bc5ebe4707c886d5bd27940

data/lib/click_heat_map.rb

@@ -0,0 +1,81 @@
+require 'yaml'
+require 'sinatra/activerecord'
+require 'models/click'
+
+module ClickMap
+  class Admin < Sinatra::Base
+    env = ENV["RACK_ENV"]
+    env = 'development' if env.nil?
+    set :clickmap_auth, YAML::load(File.open('config/clickmap.yml'))[env]
+
+    use Rack::Auth::Basic do |username, password|
+      begin
+        user, pass = settings.clickmap_auth["user"], settings.clickmap_auth["password"]
+      rescue NameError
+        user, pass = 'admin', 'clickmap'
+      end
+
+      username == user && password == pass
+    end
+
+    helpers do
+      def admin?
+        true
+      end
+    end
+
+    get '/clicks' do
+      content_type :json
+      data = []
+      clicks = Click.select("*, count(id) as count")
+        .where(page: params[:page])
+
+      date_from = DateTime.new(1970, 1, 1)
+      date_to = DateTime.now
+
+      unless params[:min_w].blank?
+        clicks = clicks.where("screen_width >= ?", params[:min_w])
+      end
+      unless params["max_w"].blank?
+        clicks = clicks.where("screen_width <= ?", params[:max_w])
+      end
+      unless params[:min_h].blank?
+        clicks = clicks.where("screen_height >= ?", params[:min_h].to_i)
+      end
+      unless params[:max_h].blank?
+        clicks = clicks.where("screen_height <= ?", params[:max_h].to_i)
+      end
+      unless params[:from].blank?
+        date_from = DateTime.strptime(params[:from], "%Y-%m-%d")
+      end
+      unless params[:to].blank?
+        date_to = DateTime.strptime(params[:to], "%Y-%m-%d")
+      end
+
+      clicks = clicks.where(time: date_from..date_to).group("x, y").group("id")
+      clicks.each do |c|
+        data << {x: c.x, y: c.y, count: c.count, screen_width: c.screen_width}
+      end
+
+      return data.to_json
+    end
+
+    get '/clear' do
+      Click.destroy_all
+    end
+  end
+
+  class Public < Sinatra::Base
+    post '/click/:x/:y/:width/:height' do
+      c = Click.new(
+        page: params[:page],
+        x: params[:x],
+        y: params[:y],
+        screen_width: params[:width],
+        screen_height: params[:height],
+        time: DateTime.now
+      )
+      c.save
+    end
+  end
+end

data/lib/models/click.rb

@@ -0,0 +1,3 @@
+class Click < ActiveRecord::Base
+
+end

data/lib/public/css/clickmap.css

@@ -0,0 +1,19 @@
+#clickmap_heatmap_area {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%; }
+
+#clickmap_admin {
+  padding: 5px;
+  background: #cccccc; }
+  #clickmap_admin label {
+    text-align: right; }
+  #clickmap_admin input {
+    margin-right: 5px;
+    margin-bottom: 5px; }
+  #clickmap_admin input.size {
+    width: 50px; }
+  #clickmap_admin input.date {
+    width: 100px; }

data/lib/public/js/clickmap.js

@@ -0,0 +1,20 @@
+window.ClickMap = (function() {
+  function ClickMap(container) {
+    var path;
+    this.container = container;
+    path = window.location.pathname;
+    $(this.container).click(function(e) {
+      var containerX, containerY, height, mouseX, mouseY, width;
+      containerX = $(this).offset().left;
+      containerY = $(this).offset().top;
+      width = window.innerWidth;
+      height = window.innerHeight;
+      mouseX = e.pageX - containerX;
+      mouseY = e.pageY - containerY;
+      return $.post("/clickmap/click/" + mouseX + "/" + mouseY + "/" + width + "/" + height + "?page=" + path);
+    });
+  }
+
+  return ClickMap;
+
+})();

data/lib/public/js/clickmap_admin.js

@@ -0,0 +1,107 @@
+window.ClickMapAdmin = (function() {
+  var base;
+
+  base = ClickMapAdmin;
+
+  function ClickMapAdmin(container) {
+    this.container = container;
+    this.path = window.location.pathname;
+    this.createAdminPanel();
+    this.createHeatmapArea();
+    this.loadHeatmapData();
+  }
+
+  ClickMapAdmin.prototype.loadHeatmapData = function() {
+    var container, containerX, containerY, dateFrom, dateTo, maxHeight, maxWidth, minHeight, minWidth, url;
+    container = $(this.container);
+    containerX = container.offset().left;
+    containerY = container.offset().top;
+    minWidth = $("#clickmap_min_width").val();
+    maxWidth = $("#clickmap_max_width").val();
+    minHeight = $("#clickmap_min_height").val();
+    maxHeight = $("#clickmap_max_height").val();
+    dateFrom = $("#clickmap_date_from").val();
+    dateTo = $("#clickmap_date_to").val();
+    url = "/clickmap/admin/clicks?page=" + (encodeURI(this.path)) + "&min_w=" + minWidth + "&max_w=" + maxWidth + "&min_h=" + minHeight + "&max_h=" + maxHeight + "&from=" + dateFrom + "&to=" + dateTo;
+    return $.getJSON(url, (function(_this) {
+      return function(data) {
+        var d, max, _i, _len;
+        max = Math.max.apply(Math, data.map(function(o) {
+          return o.count;
+        }));
+        for (_i = 0, _len = data.length; _i < _len; _i++) {
+          d = data[_i];
+          d.x += containerX;
+          d.y += containerY;
+        }
+        _this.heatmap.store.setDataSet({
+          max: max,
+          data: data
+        });
+        _this.heatmapArea.show();
+        return _this.heatmap.toggleDisplay();
+      };
+    })(this));
+  };
+
+  ClickMapAdmin.prototype.createHeatmapArea = function() {
+    var heatmapEl;
+    this.heatmapArea = $("<div/>").attr('id', 'clickmap_heatmap_area');
+    $("body").prepend(this.heatmapArea);
+    heatmapEl = document.getElementById("clickmap_heatmap_area");
+    this.heatmap = h337.create({
+      element: heatmapEl,
+      radius: 10,
+      visible: false
+    });
+    this.heatmapArea.hide();
+    return this.heatmapArea.click((function(_this) {
+      return function() {
+        if (_this.heatmap.get("visible")) {
+          _this.heatmapArea.hide();
+          return _this.heatmap.toggleDisplay();
+        }
+      };
+    })(this));
+  };
+
+  ClickMapAdmin.prototype.createAdminPanel = function() {
+    var form, panel;
+    panel = $("<div/>").attr('id', "clickmap_admin");
+    form = "<form id='clickmap_form'>";
+    form += "<label for='clickmap_min_width'>Min width: </label>";
+    form += "<input class='size' id='clickmap_min_width'>";
+    form += "<label for='clickmap_max_width'>Max width: </label>";
+    form += "<input class='size' id='clickmap_max_width'>";
+    form += "<label for='clickmap_min_height'>Min height: </label>";
+    form += "<input class='size' id='clickmap_min_height'>";
+    form += "<label for='clickmap_max_height'>Max height: </label>";
+    form += "<input class='size' id='clickmap_max_height'><br>";
+    form += "<label for='clickmap_date_from'>Date from: </label>";
+    form += "<input class='date' id='clickmap_date_from' placeholder='yyyy-mm-dd'>";
+    form += "<label for='clickmap_date_to'>Date to: </label>";
+    form += "<input class='date' id='clickmap_date_to' placeholder='yyyy-mm-dd'>";
+    form += "<input type='submit' value='reload'>";
+    form += "<a href='#' id='clickmap_enable'>Enable clickmap</a>";
+    form += "</form>";
+    panel.html(form);
+    $("body").prepend(panel);
+    $("#clickmap_form").on('submit', (function(_this) {
+      return function(e) {
+        e.preventDefault();
+        return _this.loadHeatmapData();
+      };
+    })(this));
+    $("#clickmap_enable").click((function(_this) {
+      return function(e) {
+        e.preventDefault();
+        _this.heatmapArea.show();
+        return _this.heatmap.toggleDisplay();
+      };
+    })(this));
+    return true;
+  };
+
+  return ClickMapAdmin;
+
+})();

data/lib/public/js/heatmap.js

@@ -0,0 +1,653 @@
+/*
+ * heatmap.js 1.0 -    JavaScript Heatmap Library
+ *
+ * Copyright (c) 2011, Patrick Wied (http://www.patrick-wied.at)
+ * Dual-licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and the Beerware (http://en.wikipedia.org/wiki/Beerware) license.
+ */
+
+(function(w){
+    // the heatmapFactory creates heatmap instances
+    var heatmapFactory = (function(){
+
+    // store object constructor
+    // a heatmap contains a store
+    // the store has to know about the heatmap in order to trigger heatmap updates when datapoints get added
+    var store = function store(hmap){
+
+        var _ = {
+            // data is a two dimensional array
+            // a datapoint gets saved as data[point-x-value][point-y-value]
+            // the value at [point-x-value][point-y-value] is the occurrence of the datapoint
+            data: [],
+            // tight coupling of the heatmap object
+            heatmap: hmap
+        };
+        // the max occurrence - the heatmaps radial gradient alpha transition is based on it
+        this.max = 1;
+
+        this.get = function(key){
+            return _[key];
+        };
+        this.set = function(key, value){
+            _[key] = value;
+        };
+    }
+
+    store.prototype = {
+        // function for adding datapoints to the store
+        // datapoints are usually defined by x and y but could also contain a third parameter which represents the occurrence
+        addDataPoint: function(x, y){
+            if(x < 0 || y < 0)
+                return;
+
+            var me = this,
+                heatmap = me.get("heatmap"),
+                data = me.get("data");
+
+            if(!data[x])
+                data[x] = [];
+
+            if(!data[x][y])
+                data[x][y] = 0;
+
+            // if count parameter is set increment by count otherwise by 1
+            data[x][y]+=(arguments.length<3)?1:arguments[2];
+            
+            me.set("data", data);
+            // do we have a new maximum?
+            if(me.max < data[x][y]){
+                // max changed, we need to redraw all existing(lower) datapoints
+                heatmap.get("actx").clearRect(0,0,heatmap.get("width"),heatmap.get("height"));
+                me.setDataSet({ max: data[x][y], data: data }, true);
+                return;
+            }
+            heatmap.drawAlpha(x, y, data[x][y], true);
+        },
+        setDataSet: function(obj, internal){
+            var me = this,
+                heatmap = me.get("heatmap"),
+                data = [],
+                d = obj.data,
+                dlen = d.length;
+            // clear the heatmap before the data set gets drawn
+            heatmap.clear();
+            this.max = obj.max;
+            // if a legend is set, update it
+            heatmap.get("legend") && heatmap.get("legend").update(obj.max);
+            
+            if(internal != null && internal){
+                for(var one in d){
+                    // jump over undefined indexes
+                    if(one === undefined)
+                        continue;
+                    for(var two in d[one]){
+                        if(two === undefined)
+                            continue;
+                        // if both indexes are defined, push the values into the array
+                        heatmap.drawAlpha(one, two, d[one][two], false);   
+                    }
+                }
+            }else{
+                while(dlen--){
+                    var point = d[dlen];
+                    heatmap.drawAlpha(point.x, point.y, point.count, false);
+                    if(!data[point.x])
+                        data[point.x] = [];
+
+                    if(!data[point.x][point.y])
+                        data[point.x][point.y] = 0;
+
+                    data[point.x][point.y] = point.count;
+                }
+            }
+            heatmap.colorize();
+            this.set("data", d);
+        },
+        exportDataSet: function(){
+            var me = this,
+                data = me.get("data"),
+                exportData = [];
+
+            for(var one in data){
+                // jump over undefined indexes
+                if(one === undefined)
+                    continue;
+                for(var two in data[one]){
+                    if(two === undefined)
+                        continue;
+                    // if both indexes are defined, push the values into the array
+                    exportData.push({x: parseInt(one, 10), y: parseInt(two, 10), count: data[one][two]});
+                }
+            }
+
+            return { max: me.max, data: exportData };
+        },
+        generateRandomDataSet: function(points){
+            var heatmap = this.get("heatmap"),
+            w = heatmap.get("width"),
+            h = heatmap.get("height");
+            var randomset = {},
+            max = Math.floor(Math.random()*1000+1);
+            randomset.max = max;
+            var data = [];
+            while(points--){
+                data.push({x: Math.floor(Math.random()*w+1), y: Math.floor(Math.random()*h+1), count: Math.floor(Math.random()*max+1)});
+            }
+            randomset.data = data;
+            this.setDataSet(randomset);
+        }
+    };
+
+    var legend = function legend(config){
+        this.config = config;
+
+        var _ = {
+            element: null,
+            labelsEl: null,
+            gradientCfg: null,
+            ctx: null
+        };
+        this.get = function(key){
+            return _[key];
+        };
+        this.set = function(key, value){
+            _[key] = value;
+        };
+        this.init();
+    };
+    legend.prototype = {
+        init: function(){
+            var me = this,
+                config = me.config,
+                title = config.title || "Legend",
+                position = config.position,
+                offset = config.offset || 10,
+                gconfig = config.gradient,
+                labelsEl = document.createElement("ul"),
+                labelsHtml = "",
+                grad, element, gradient, positionCss = "";
+ 
+            me.processGradientObject();
+            
+            // Positioning
+
+            // top or bottom
+            if(position.indexOf('t') > -1){
+                positionCss += 'top:'+offset+'px;';
+            }else{
+                positionCss += 'bottom:'+offset+'px;';
+            }
+
+            // left or right
+            if(position.indexOf('l') > -1){
+                positionCss += 'left:'+offset+'px;';
+            }else{
+                positionCss += 'right:'+offset+'px;';
+            }
+
+            element = document.createElement("div");
+            element.style.cssText = "border-radius:5px;position:absolute;"+positionCss+"font-family:Helvetica; width:256px;z-index:10000000000; background:rgba(255,255,255,1);padding:10px;border:1px solid black;margin:0;";
+            element.innerHTML = "<h3 style='padding:0;margin:0;text-align:center;font-size:16px;'>"+title+"</h3>";
+            // create gradient in canvas
+            labelsEl.style.cssText = "position:relative;font-size:12px;display:block;list-style:none;list-style-type:none;margin:0;height:15px;";
+            
+
+            // create gradient element
+            gradient = document.createElement("div");
+            gradient.style.cssText = ["position:relative;display:block;width:256px;height:15px;border-bottom:1px solid black; background-image:url(",me.createGradientImage(),");"].join("");
+
+            element.appendChild(labelsEl);
+            element.appendChild(gradient);
+            
+            me.set("element", element);
+            me.set("labelsEl", labelsEl);
+
+            me.update(1);
+        },
+        processGradientObject: function(){
+            // create array and sort it
+            var me = this,
+                gradientConfig = this.config.gradient,
+                gradientArr = [];
+
+            for(var key in gradientConfig){
+                if(gradientConfig.hasOwnProperty(key)){
+                    gradientArr.push({ stop: key, value: gradientConfig[key] });
+                }
+            }
+            gradientArr.sort(function(a, b){
+                return (a.stop - b.stop);
+            });
+            gradientArr.unshift({ stop: 0, value: 'rgba(0,0,0,0)' });
+
+            me.set("gradientArr", gradientArr);
+        },
+        createGradientImage: function(){
+            var me = this,
+                gradArr = me.get("gradientArr"),
+                length = gradArr.length,
+                canvas = document.createElement("canvas"),
+                ctx = canvas.getContext("2d"),
+                grad;
+            // the gradient in the legend including the ticks will be 256x15px
+            canvas.width = "256";
+            canvas.height = "15";
+
+            grad = ctx.createLinearGradient(0,5,256,10);
+
+            for(var i = 0; i < length; i++){
+                grad.addColorStop(1/(length-1) * i, gradArr[i].value);
+            }
+
+            ctx.fillStyle = grad;
+            ctx.fillRect(0,5,256,10);
+            ctx.strokeStyle = "black";
+            ctx.beginPath();
+ 
+            for(var i = 0; i < length; i++){
+                ctx.moveTo(((1/(length-1)*i*256) >> 0)+.5, 0);
+                ctx.lineTo(((1/(length-1)*i*256) >> 0)+.5, (i==0)?15:5);
+            }
+            ctx.moveTo(255.5, 0);
+            ctx.lineTo(255.5, 15);
+            ctx.moveTo(255.5, 4.5);
+            ctx.lineTo(0, 4.5);
+            
+            ctx.stroke();
+
+            // we re-use the context for measuring the legends label widths
+            me.set("ctx", ctx);
+
+            return canvas.toDataURL();
+        },
+        getElement: function(){
+            return this.get("element");
+        },
+        update: function(max){
+            var me = this,
+                gradient = me.get("gradientArr"),
+                ctx = me.get("ctx"),
+                labels = me.get("labelsEl"),
+                labelText, labelsHtml = "", offset;
+
+            for(var i = 0; i < gradient.length; i++){
+
+                labelText = max*gradient[i].stop >> 0;
+                offset = (ctx.measureText(labelText).width/2) >> 0;
+
+                if(i == 0){
+                    offset = 0;
+                }
+                if(i == gradient.length-1){
+                    offset *= 2;
+                }
+                labelsHtml += '<li style="position:absolute;left:'+(((((1/(gradient.length-1)*i*256) || 0)) >> 0)-offset+.5)+'px">'+labelText+'</li>';
+            }       
+            labels.innerHTML = labelsHtml;
+        }
+    };
+
+    // heatmap object constructor
+    var heatmap = function heatmap(config){
+        // private variables
+        var _ = {
+            radius : 40,
+            element : {},
+            canvas : {},
+            acanvas: {},
+            ctx : {},
+            actx : {},
+            legend: null,
+            visible : true,
+            width : 0,
+            height : 0,
+            max : false,
+            gradient : false,
+            opacity: 180,
+            premultiplyAlpha: false,
+            bounds: {
+                l: 1000,
+                r: 0,
+                t: 1000,
+                b: 0
+            },
+            debug: false
+        };
+        // heatmap store containing the datapoints and information about the maximum
+        // accessible via instance.store
+        this.store = new store(this);
+
+        this.get = function(key){
+            return _[key];
+        };
+        this.set = function(key, value){
+            _[key] = value;
+        };
+        // configure the heatmap when an instance gets created
+        this.configure(config);
+        // and initialize it
+        this.init();
+    };
+
+    // public functions
+    heatmap.prototype = {
+        configure: function(config){
+                var me = this,
+                    rout, rin;
+
+                me.set("radius", config["radius"] || 40);
+                me.set("element", (config.element instanceof Object)?config.element:document.getElementById(config.element));
+                me.set("visible", (config.visible != null)?config.visible:true);
+                me.set("max", config.max || false);
+                me.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
+                me.set("opacity", parseInt(255/(100/config.opacity), 10) || 180);
+                me.set("width", config.width || 0);
+                me.set("height", config.height || 0);
+                me.set("debug", config.debug);
+
+                if(config.legend){
+                    var legendCfg = config.legend;
+                    legendCfg.gradient = me.get("gradient");
+                    me.set("legend", new legend(legendCfg));
+                }
+                
+        },
+        resize: function () {
+                var me = this,
+                    element = me.get("element"),
+                    canvas = me.get("canvas"),
+                    acanvas = me.get("acanvas");
+                canvas.width = acanvas.width = me.get("width") || element.style.width.replace(/px/, "") || me.getWidth(element);
+                this.set("width", canvas.width);
+                canvas.height = acanvas.height = me.get("height") || element.style.height.replace(/px/, "") || me.getHeight(element);
+                this.set("height", canvas.height);
+        },
+
+        init: function(){
+                var me = this,
+                    canvas = document.createElement("canvas"),
+                    acanvas = document.createElement("canvas"),
+                    ctx = canvas.getContext("2d"),
+                    actx = acanvas.getContext("2d"),
+                    element = me.get("element");
+
+                
+                me.initColorPalette();
+
+                me.set("canvas", canvas);
+                me.set("ctx", ctx);
+                me.set("acanvas", acanvas);
+                me.set("actx", actx);
+
+                me.resize();
+                canvas.style.cssText = acanvas.style.cssText = "position:absolute;top:0;left:0;z-index:10000000;";
+                
+                if(!me.get("visible"))
+                    canvas.style.display = "none";
+
+                element.appendChild(canvas);
+                if(me.get("legend")){
+                    element.appendChild(me.get("legend").getElement());
+                }
+                
+                // debugging purposes only
+                if(me.get("debug"))
+                    document.body.appendChild(acanvas);
+                
+                actx.shadowOffsetX = 15000; 
+                actx.shadowOffsetY = 15000; 
+                actx.shadowBlur = 15; 
+        },
+        initColorPalette: function(){
+
+            var me = this,
+                canvas = document.createElement("canvas"),
+                gradient = me.get("gradient"),
+                ctx, grad, testData;
+
+            canvas.width = "1";
+            canvas.height = "256";
+            ctx = canvas.getContext("2d");
+            grad = ctx.createLinearGradient(0,0,1,256);
+
+            // Test how the browser renders alpha by setting a partially transparent pixel
+            // and reading the result.  A good browser will return a value reasonably close
+            // to what was set.  Some browsers (e.g. on Android) will return a ridiculously wrong value.
+            testData = ctx.getImageData(0,0,1,1);
+            testData.data[0] = testData.data[3] = 64; // 25% red & alpha
+            testData.data[1] = testData.data[2] = 0; // 0% blue & green
+            ctx.putImageData(testData, 0, 0);
+            testData = ctx.getImageData(0,0,1,1);
+            me.set("premultiplyAlpha", (testData.data[0] < 60 || testData.data[0] > 70));
+            
+            for(var x in gradient){
+                grad.addColorStop(x, gradient[x]);
+            }
+
+            ctx.fillStyle = grad;
+            ctx.fillRect(0,0,1,256);
+
+            me.set("gradient", ctx.getImageData(0,0,1,256).data);
+        },
+        getWidth: function(element){
+            var width = element.offsetWidth;
+            if(element.style.paddingLeft){
+                width+=element.style.paddingLeft;
+            }
+            if(element.style.paddingRight){
+                width+=element.style.paddingRight;
+            }
+
+            return width;
+        },
+        getHeight: function(element){
+            var height = element.offsetHeight;
+            if(element.style.paddingTop){
+                height+=element.style.paddingTop;
+            }
+            if(element.style.paddingBottom){
+                height+=element.style.paddingBottom;
+            }
+
+            return height;
+        },
+        colorize: function(x, y){
+                // get the private variables
+                var me = this,
+                    width = me.get("width"),
+                    radius = me.get("radius"),
+                    height = me.get("height"),
+                    actx = me.get("actx"),
+                    ctx = me.get("ctx"),
+                    x2 = radius * 3,
+                    premultiplyAlpha = me.get("premultiplyAlpha"),
+                    palette = me.get("gradient"),
+                    opacity = me.get("opacity"),
+                    bounds = me.get("bounds"),
+                    left, top, bottom, right, 
+                    image, imageData, length, alpha, offset, finalAlpha;
+                
+                if(x != null && y != null){
+                    if(x+x2>width){
+                        x=width-x2;
+                    }
+                    if(x<0){
+                        x=0;
+                    }
+                    if(y<0){
+                        y=0;
+                    }
+                    if(y+x2>height){
+                        y=height-x2;
+                    }
+                    left = x;
+                    top = y;
+                    right = x + x2;
+                    bottom = y + x2;
+
+                }else{
+                    if(bounds['l'] < 0){
+                        left = 0;
+                    }else{
+                        left = bounds['l'];
+                    }
+                    if(bounds['r'] > width){
+                        right = width;
+                    }else{
+                        right = bounds['r'];
+                    }
+                    if(bounds['t'] < 0){
+                        top = 0;
+                    }else{
+                        top = bounds['t'];
+                    }
+                    if(bounds['b'] > height){
+                        bottom = height;
+                    }else{
+                        bottom = bounds['b'];
+                    }    
+                }
+
+                image = actx.getImageData(left, top, right-left, bottom-top);
+                imageData = image.data;
+                length = imageData.length;
+                // loop thru the area
+                for(var i=3; i < length; i+=4){
+
+                    // [0] -> r, [1] -> g, [2] -> b, [3] -> alpha
+                    alpha = imageData[i],
+                    offset = alpha*4;
+
+                    if(!offset)
+                        continue;
+
+                    // we ve started with i=3
+                    // set the new r, g and b values
+                    finalAlpha = (alpha < opacity)?alpha:opacity;
+                    imageData[i-3]=palette[offset];
+                    imageData[i-2]=palette[offset+1];
+                    imageData[i-1]=palette[offset+2];
+                    
+                    if (premultiplyAlpha) {
+                    	// To fix browsers that premultiply incorrectly, we'll pass in a value scaled
+                    	// appropriately so when the multiplication happens the correct value will result.
+                    	imageData[i-3] /= 255/finalAlpha;
+                    	imageData[i-2] /= 255/finalAlpha;
+                    	imageData[i-1] /= 255/finalAlpha;
+                    }
+                    
+                    // we want the heatmap to have a gradient from transparent to the colors
+                    // as long as alpha is lower than the defined opacity (maximum), we'll use the alpha value
+                    imageData[i] = finalAlpha;
+                }
+                // the rgb data manipulation didn't affect the ImageData object(defined on the top)
+                // after the manipulation process we have to set the manipulated data to the ImageData object
+                image.data = imageData;
+                ctx.putImageData(image, left, top);
+        },
+        drawAlpha: function(x, y, count, colorize){
+                // storing the variables because they will be often used
+                var me = this,
+                    radius = me.get("radius"),
+                    ctx = me.get("actx"),
+                    max = me.get("max"),
+                    bounds = me.get("bounds"),
+                    xb = x - (1.5 * radius) >> 0, yb = y - (1.5 * radius) >> 0,
+                    xc = x + (1.5 * radius) >> 0, yc = y + (1.5 * radius) >> 0;
+
+                ctx.shadowColor = ('rgba(0,0,0,'+((count)?(count/me.store.max):'0.1')+')');
+
+                ctx.shadowOffsetX = 15000; 
+                ctx.shadowOffsetY = 15000; 
+                ctx.shadowBlur = 15; 
+
+                ctx.beginPath();
+                ctx.arc(x - 15000, y - 15000, radius, 0, Math.PI * 2, true);
+                ctx.closePath();
+                ctx.fill();
+                if(colorize){
+                    // finally colorize the area
+                    me.colorize(xb,yb);
+                }else{
+                    // or update the boundaries for the area that then should be colorized
+                    if(xb < bounds["l"]){
+                        bounds["l"] = xb;
+                    }
+                    if(yb < bounds["t"]){
+                        bounds["t"] = yb;
+                    }
+                    if(xc > bounds['r']){
+                        bounds['r'] = xc;
+                    }
+                    if(yc > bounds['b']){
+                        bounds['b'] = yc;
+                    }
+                }
+        },
+        toggleDisplay: function(){
+                var me = this,
+                    visible = me.get("visible"),
+                canvas = me.get("canvas");
+
+                if(!visible)
+                    canvas.style.display = "block";
+                else
+                    canvas.style.display = "none";
+
+                me.set("visible", !visible);
+        },
+        // dataURL export
+        getImageData: function(){
+                return this.get("canvas").toDataURL();
+        },
+        clear: function(){
+            var me = this,
+                w = me.get("width"),
+                h = me.get("height");
+
+            me.store.set("data",[]);
+            // @TODO: reset stores max to 1
+            //me.store.max = 1;
+            me.get("ctx").clearRect(0,0,w,h);
+            me.get("actx").clearRect(0,0,w,h);
+        },
+        cleanup: function(){
+            var me = this;
+            me.get("element").removeChild(me.get("canvas"));
+        }
+    };
+
+    return {
+            create: function(config){
+                return new heatmap(config);
+            }, 
+            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;
+                    } else if (ev.offsetX) { // Opera
+                        x = ev.offsetX;
+                        y = ev.offsetY;
+                    }
+                    if(typeof(x)=='undefined')
+                        return;
+
+                    return [x,y];
+                }
+            }
+        };
+    })();
+    w.h337 = w.heatmapFactory = heatmapFactory;
+})(window);

metadata

@@ -0,0 +1,63 @@
+--- !ruby/object:Gem::Specification
+name: click_heat_map
+version: !ruby/object:Gem::Version
+  version: 0.0.1.2
+platform: ruby
+authors:
+- Adam Tomecek
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-08-23 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sinatra-activerecord
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Determine where your users click with simple click heat maps.
+email: adam.tomecek@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/click_heat_map.rb
+- lib/models/click.rb
+- lib/public/js/heatmap.js
+- lib/public/js/clickmap.js
+- lib/public/js/clickmap_admin.js
+- lib/public/css/clickmap.css
+homepage: https://github.com/adamtomecek/clickmap
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.0.14
+signing_key: 
+specification_version: 4
+summary: Click measuring and heatmap generating.
+test_files: []