13sides | BlogEngine.NET HeatMaps: Part II

BlogEngine.NET HeatMaps: Part II

2 Mar 2009 7:27 PM 13 Comments

So, in this final part I’ll explain the HeatMap Generator control. I recommend you read Part I if you haven’t yet. With this piece again I created a control that was placed on my MasterPage for my theme. I wrapped the control around an ‘if’ statement so it only rendered when I was logged in.

       
<%@ Register src="~/User controls/ThirteenSides/HeatMapGenerator.ascx" TagName="HeatMapGenerator" TagPrefix="ucHMG" %>

  

<% if (Page.User.Identity.IsAuthenticated)

   { %>

        <!-- Alt+W(Show) and Alt+Q (Hide) -->

        <ucHMG:HeatMapGenerator ID="ucHeatMapGenerator" runat="server" 

                ImageName="HeatMap.png"

                HideHeatMapKey="81" 

                ShowHeatMapKey="87" />

<% } %>

View Plain | Copy To Clipboard

This control exposes a few properties to allow the user (me) to show or hide the control panel. This control panel is just a couple of basic Html controls to filter the date(s), etc. I didn’t spend more than 5 minutes creating the look’n feel here. At this moment, I feel ashamed of the use of tables here but I digress, it was done very quickly.

HeatMapGenerator.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HeatMapGenerator.ascx.cs" Inherits="HeatMapGenerator" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>

  

<style type="text/css">

    .HeatMapOptions_hide {

        display: none;

        float: right;

        position: relative;

        top: 0px;

        width: 277px;

    }

    .HeatMapOptions_show {

        background-color: Silver;

        border-color: #42718B;

        border-style: solid;

        border-width: thin;

        color: #000000;

        float: right;

        font-family: Arial, Helvetica, sans-serif;

        font-size: 11px;

        margin: 0px 0px 0px 0px;

        position: relative;

        top: 0px;

        width: 277px;

        z-index: 1000;

    }

    .HeatMapImage_hide {

        display: none;

        left: 0px;

        position: absolute;

        top: 0px;

        z-index: 999;

    }

    .HeatMapImage_show {

        left: 0px;

        position: absolute;

        top: 0px;

        z-index: 999;

    }

    #HMO_Outer {

        background-color: White;

        height: 200px;

        width: 300px;

    }

    #HMO_Inner {

        background-color: White;

        height: 200px;

        left: 0px;

        position: relative;

        top: 0px;

        width: 277px;

    }

    .HMOCalendar .ajax__calendar_container {

        border: 1px solid #646464;

        background-color: lemonchiffon;

        color: red;

    }

    .HMOCalendar .ajax__calendar_other .ajax__calendar_day, .HMOCalendar .ajax__calendar_other .ajax__calendar_year {

        color: black;

    }

    .HMOCalendar .ajax__calendar_hover .ajax__calendar_day, .HMOCalendar .ajax__calendar_hover .ajax__calendar_month, .HMOCalendar .ajax__calendar_hover .ajax__calendar_year {

        color: black;

    }

    .HMOCalendar .ajax__calendar_active .ajax__calendar_day, .HMOCalendar .ajax__calendar_active .ajax__calendar_month, .HMOCalendar .ajax__calendar_active .ajax__calendar_year {

        color: black;

        font-weight: bold;

    }

</style>

  

<script type="text/javascript" language="javascript">

  

    ///////////////////////////////////////////////////

    // Internal Variables

    ///////////////////////////////////////////////////

    var IE = document.all ? true : false

    if (!IE) document.captureEvents(Event.MOUSEUP)

  

    document.onkeydown = checkKeycode

    ///////////////////////////////////////////////////

  

    ///////////////////////////////////////////////////

    // Check to show Options DIV and Generate/Show HeatMap IMAGE

    ///////////////////////////////////////////////////

    function checkKeycode(e)

    {

        var keycode;

        if (window.event)

            keycode = window.event.keyCode;

        else if (e)

            keycode = e.which;

        var e = e || window.event;

  

        if (keycode == HMG_SHOW_HeatMap_KEY && e.altKey)

        {

            // Show HeatMap Options DIV

            document.getElementById($get('<%= this.pnlHeatMapOptions.ClientID %>').id).className = 'HeatMapOptions_show';

        }

        else if (keycode == HMG_HIDE_HeatMap_KEY && e.altKey)

        {

            // Hide both HeatMap Options DIV and IMAGE 

            document.getElementById($get('<%= this.pnlHeatMapOptions.ClientID %>').id).className = 'HeatMapOptions_hide';

            document.getElementById($get('<%= this.pnlHeatMap.ClientID %>').id).style.display = 'none';

        }

        return true;

    }

    function HideHMO()

    {

        if (document.getElementById($get('<%= this.HMO_Outer.ClientID %>').id).style.display == "none")

            document.getElementById($get('<%= this.HMO_Outer.ClientID %>').id).style.display = "";

        else

            document.getElementById($get('<%= this.HMO_Outer.ClientID %>').id).style.display = "none"

    }

</script>

  

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

    <ContentTemplate>

        

        <asp:Panel ID="pnlHeatMapOptions" runat="server" CssClass="HeatMapOptions_hide">

            <a href="#" onclick="HideHMO()">HeatMap Options</a>

            <div id="HMO_Outer" runat="server" style="display: none;">

                <div id="HMO_Inner">

                    <table width="100%" cellpadding="0" cellspacing="0">

                        <tr>

                            <td rowspan="12">

                                &nbsp;&nbsp;&nbsp;

                            </td>

                        </tr>

                        <tr>

                            <td>

                                &nbsp;

                            </td>

                        </tr>

                        <tr>

                            <td>

                                <asp:CheckBox ID="chkAllDates" runat="server" Checked="true" Text="All Dates" />

                            </td>

                        </tr>

                        <tr>

                            <td>

                                &nbsp;

                            </td>

                        </tr>

                        <tr>

                            <td>

                                <asp:CheckBox ID="chkMonth" runat="server" Checked="false" Text="Current Month" />

                            </td>

                        </tr>

                        <tr>

                            <td>

                                &nbsp;

                            </td>

                        </tr>

                        <tr>

                            <td>

                                <asp:Label ID="lblDateFrom" runat="server" Text="From:" />

                                <asp:TextBox ID="txtDateFrom" runat="server" autocomplete="off" />

                                <ajaxtoolkit:calendarextender id="txtDateFromEX" runat="server" targetcontrolid="txtDateFrom"

                                    cssclass="HMOCalendar" format="MMMM d, yyyy" />

                            </td>

                        </tr>

                        <tr>

                            <td>

                                &nbsp;

                            </td>

                        </tr>

                        <tr>

                            <td>

                                <asp:Label ID="lblDateTo" runat="server" Text="To:" />

                                <asp:TextBox ID="txtDateTo" runat="server" />

                                <ajaxtoolkit:calendarextender id="txtDateToEx" runat="server" targetcontrolid="txtDateTo"

                                    cssclass="HMOCalendar" format="MMMM d, yyyy" />

                            </td>

                        </tr>

                        <tr>

                            <td style="text-align: right">

                                <asp:Button ID="Generate" runat="server" Text="Generate" OnClick="Generate_Click" />

                                &nbsp;&nbsp;

                            </td>

                        </tr>

                    </table>

                </div>

            </div>

        </asp:Panel>

        <ajaxtoolkit:dragpanelextender id="pnlHeatMapOptionsExt" runat="server" targetcontrolid="pnlHeatMapOptions"

            draghandleid="pnlHeatMapOptions" />

        <asp:Panel ID="pnlHeatMap" runat="server" CssClass="HeatMapImage_hide">

            <asp:Image ID="imgHeatMap" runat="server" />

        </asp:Panel>

        

    </ContentTemplate>

    <Triggers>

        <asp:PostBackTrigger ControlID="Generate" />

    </Triggers>

</asp:UpdatePanel>

View Plain | Copy To Clipboard

HeatMapGenerator.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.ComponentModel;

using BlogEngine.Core;

  

public partial class HeatMapGenerator : System.Web.UI.UserControl

{

    #region Properties

    [Category("HeatMap")]

    [Description("String - ACSII key code to hide HeatMap image.")]

    public string HideHeatMapKey { get; set; }

    [Category("HeatMap")]

    [Description("String - ACSII key code to show HeatMap image.")]

    public string ShowHeatMapKey { get; set; }

    [Category("HeatMap")]

    [Description("String - Name of HeatMap image, i.e. HeatMap.png")]

    public string ImageName { get; set; }

    #endregion

    

    protected void Page_Load(object sender, EventArgs e)

    {

        // HeatMap Config Options Script

        string ss = @"var HMG_SHOW_HeatMap_KEY = " + ShowHeatMapKey + ";" + System.Environment.NewLine;

        ss += @"var HMG_HIDE_HeatMap_KEY = " + HideHeatMapKey + ";" + System.Environment.NewLine;

        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "HeatMap_Generator_Config", ss, true);

    }

  

    protected void Generate_Click(object sende, EventArgs e)

    {

        DateTime dteFrom = DateTime.Parse("1/1/1900");

        DateTime dteTo = DateTime.Parse("1/1/1900");

  

        string pageName = System.IO.Path.GetFileName(HttpContext.Current.Request.RawUrl);

  

        int transparency = 25;

  

        if (chkAllDates.Checked)

            HeatMap.GenerateHeatMap(pageName, true, dteFrom, dteTo, transparency, ImageName);

        else if (chkMonth.Checked)

        {

            dteFrom = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);

            dteTo = dteFrom.AddMonths(1).AddSeconds(-1);

  

            HeatMap.GenerateHeatMap(pageName, false, dteFrom, dteTo, transparency, ImageName);

        }

        else

        {

            dteFrom = DateTime.Parse(txtDateFrom.Text);

            dteTo = DateTime.Parse(txtDateTo.Text);

  

            HeatMap.GenerateHeatMap(pageName, false, dteFrom, dteTo, transparency, ImageName);

        }

  

        // Show Generated HeatMap Image

        // Including the time (in ticks) in the response parameter will always

        // force the browser to display the latest image (i.e. no caching !!!)

  

        string query = HttpContext.Current.Request.QueryString["theme"];

        string theme = !string.IsNullOrEmpty(query) ? query : BlogSettings.Instance.Theme;

        string path = string.Concat(Utils.AbsoluteWebRoot, "themes/", theme, "/images/Heatmap/" + ImageName);

  

        this.imgHeatMap.ImageUrl = path + "?" + DateTime.Now.Ticks.ToString();

        this.pnlHeatMap.CssClass = "HeatMapImage_show";

        this.pnlHeatMapOptions.CssClass = "HeatMapOptions_show";

    }

}

View Plain | Copy To Clipboard

The purpose of the code-behind is simple. Just pass the user parameters to the HeatMap business class. I completely separated the Collector and Generator code due to the need to have the Generator located on a completely separate web server.

HeatMap Generator Business Logic

Now, I’m not much of a graphics artist nor a Mathematician. I left most of this to a good friend with the premise that I’d learn some of it. All I knew from researching other solutions was that I wanted regions of my screen coloured-coded based on the number of mouse clicks each area received. Red being the hottest zone, Blue the coldest. Some of the formulas in this code I don’t pretend to fully understand but their overall usage is straight-forward.

The basic steps of this class is to read in a List<HeatMapClick> objects from the HeatMap.xml file (Part I) and create a transparent PNG file on the file system. I used Linq-Xml for this as its just such a beautiful way to code. I refuse to remember the “old school” xml programming practices.

Have a look at the code, I tried to comment the basics of it at least.

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Drawing;

using System.IO;

using System.Linq;

using System.Web;

using System.Xml.Linq;

  

using BlogEngine.Core;

  

public class HeatMap

{

    #region Variables

    private const int RADIUS = 8;               // Radius of click blob in image

    private static int[][] _coordsArray;        // Contains the # of Clicks for each Coordinate pair

    private static int _maxClick = 0;           // Max # Clicks anywhwere

    private static int _width = 0;

    private static int _height = 0;

    private static List<HeatMapClick> _clicks;  // Actual data retrieved from XML data source

  

    private static string _pageName;

    private static bool _allDates = true;

    private static DateTime _from = DateTime.MinValue;

    private static DateTime _to = DateTime.MinValue;

    private static int _transparency;

    private static string _imageName;           // FileName of Generated HeatMap Image

    #endregion

  

    public static void GenerateHeatMap(string pageName, 

                                       bool allDates, 

                                       DateTime from, 

                                       DateTime to, 

                                       int transparency,

                                       string imageName)

    {

        _allDates = allDates;

        _from = from;

        _to = to;

        _transparency = transparency;

        _pageName = pageName;

        _imageName = imageName;

  

        Generate();

    }

  

    #region Internal

    private static int[] ColourSequence(long value)

    {

        // _transparency is a percentage value to establish the base colour

        // 100% = 235 for rgb

        // 0%   = completely transparent as shown in the alpha

  

  

        int baseColour = 235;

        int alpha = 0;

        int red = 1;

        int green = 2;

        int blue = 3;

  

        // the alpha is the transparency

        int[] argb = new int[4];

        argb[alpha] = (int)((Double)235 * (Double)((Double)_transparency / 100));

  

        if (value == 0)

        {

            argb[red] = baseColour;

            argb[green] = baseColour;

            argb[blue] = baseColour;

        }

        else if (0 < value && value < 255) // from white to blue (255 colours)

        {

            argb[red] = (int)(baseColour - value);

            argb[green] = (int)(baseColour - value);

  

            if (argb[red] < 0) argb[red] = 0;

            if (argb[green] < 0) argb[green] = 0;

  

            argb[blue] = (int)(235 + (double)((double)(value) * 20 / 255));

        }

        else if (255 <= value && value < 510) // from blue to cyan (255 colours)

        {

            argb[red] = 0;

            argb[green] = (int)(value - 255);

            argb[blue] = 255;

        }

        else if (510 <= value && value < 765) // from cyan to green (255 colours)

        {

            argb[red] = 0;

            argb[green] = 255;

            argb[blue] = 255 - (int)(value - 510);

        }

        else if (765 <= value && value < 1020) // from green to yellow (255 colours)

        {

            argb[red] = (int)(value - 765);

            argb[green] = 255;

            argb[blue] = 0;

        }

        else if (1020 <= value && value < 1275)  // from yellow to red (255 colours)

        {

            argb[red] = 255;

            argb[green] = 255 - (int)(value - 1020);

            argb[blue] = 0;

        }

        else if (value >= 1275) // return red

        {

            argb[red] = 255;

            argb[green] = 0;

            argb[blue] = 0;

        }

        return argb;

    }

    /// <summary>

    /// Creates the Actual HeatMap Image from the Processed _coordsArray

    /// </summary>

    /// <param name="pageName"></param>

    /// <returns></returns>

    private static byte[] CreateImage()

    {

        System.IO.MemoryStream ms = null;

        Bitmap b = new Bitmap(_width, _height);

        Graphics g = Graphics.FromImage(b);

        Pen p = null;

  

        try

        {

            for (int x = 0; x < _width; x++)

            {

                for (int y = 0; y < _height; y++)

                {

                    if (_coordsArray[x][y] >= 0)

                    {

                        p = new Pen(GetColor(_maxClick, _coordsArray[x][y], 5));

                        g.DrawLine(p, x, y, x + 1, y + 1);

                    }

                }

            }

  

            ms = new MemoryStream();

            b.Save(ms, System.Drawing.Imaging.ImageFormat.Png);

        }

        catch (Exception)

        {

            throw;

        }

        finally

        {

            ms.Dispose();

            b.Dispose();

            g.Dispose();

        }

        return ms.GetBuffer();

    }

    private static Double Distance(int x1, int y1, int x2, int y2)

    {

        return Math.Sqrt(Math.Pow(x1 - x2, 2) + Math.Pow(y1 - y2, 2));

    }

    /// <summary>

    /// Fetches all HeatMap Clicks based on user criteria

    /// </summary>

    /// <returns></returns>

    private static List<HeatMapClick> FetchHeatMapClicks()

    {

        string settings = ConfigurationManager.AppSettings["HeatMap_Settings"];

        string path = string.Concat(HttpContext.Current.Request.PhysicalApplicationPath,

                                    "App_Data/" + settings);

  

        XElement heatmapClicks = null;

        try

        {

            heatmapClicks = XElement.Load(path);

        }

        catch { }

  

        if ((heatmapClicks != null) && (heatmapClicks.Elements().Count() > 0))

        {

  

            if (_allDates)

            {

                var clicks = from c in heatmapClicks.Elements()

                             where c.Element("Page").Value == _pageName

                             select new HeatMapClick()

                             {

                                 Date = Convert.ToDateTime(c.Element("Date").Value),

                                 Page = c.Element("Page").Value,

                                 CoordX = Convert.ToInt32(c.Element("CoordX").Value),

                                 CoordY = Convert.ToInt32(c.Element("CoordY").Value)

                             };

                return clicks.ToList();

            }

            else

            {

                var clicks = from c in heatmapClicks.Elements()

                             where c.Element("Page").Value == _pageName

                                && Convert.ToDateTime(c.Element("Date").Value) >= _from

                                && Convert.ToDateTime(c.Element("Date").Value) <= _to

                             select new HeatMapClick()

                             {

                                 Date = Convert.ToDateTime(c.Element("Date").Value),

                                 Page = c.Element("Page").Value,

                                 CoordX = Convert.ToInt32(c.Element("CoordX").Value),

                                 CoordY = Convert.ToInt32(c.Element("CoordY").Value)

                             };

                return clicks.ToList();

            }

        }

        else

            return null;

    }

    /// <summary>

    /// Corrdinates the building of the HeatMap image.

    /// Saves the Image to the current Theme Images folder

    /// </summary>

    private static void Generate()

    {

        _clicks = FetchHeatMapClicks();

  

        if (_clicks == null || _clicks.Count == 0)

            return;

  

        int[] wh = GetWidthHeight();

        _width = wh[0] + RADIUS;

        _height = wh[1] + RADIUS;

  

        _coordsArray = new int[_width][];

        for (int i = 0; i < _width; i++)

        {

            _coordsArray[i] = new int[_height];

            for (int j = 0; j < _height; j++)

            {

                _coordsArray[i][j] = 0;

            }

        }

  

        GenerateClickBlobs();

        GetMaxClick();

  

        byte[] imgBytes = CreateImage();

  

        string query = HttpContext.Current.Request.QueryString["theme"];

        string theme = !string.IsNullOrEmpty(query) ? query : BlogSettings.Instance.Theme;

        string path = string.Concat(HttpContext.Current.Request.PhysicalApplicationPath, 

                                    "themes/", 

                                    theme, 

                                    "/images/Heatmap/", 

                                    _imageName);

  

        try

        {

            FileStream fs = File.Create(path);

            fs.Write(imgBytes, 0, imgBytes.Length);

            fs.Close();

        }

        catch (Exception)

        {

            throw;

        }

    }

    private static void GenerateClickBlobs()

    {

        try

        {

            foreach (HeatMapClick c in _clicks)

            {

                RootedIncrementOnPoint(c.CoordX, c.CoordY);

                // OR use

                //LinearSlideIncrementOnPoint(hc.CoordX, hc.CoordY);

            }

        }

        catch (Exception)

        {

            throw;

        }

    }

    private static Color GetColor(long upperBound, long value, int error)

    {

        int[] argb = new int[4];

        argb = ColourSequence(value * ((1275 * (100 + error) / 100) / upperBound));

        return Color.FromArgb(argb[0], argb[1], argb[2], argb[3]);

    }

    private static void GetMaxClick()

    {

        _maxClick = 0;

        for (int x = 0; x < _width; x++)

        {

            for (int y = 0; y < _height; y++)

            {

                if (_coordsArray[x][y] > _maxClick)

                    _maxClick = _coordsArray[x][y];

            }

        }

    }

    /// <summary>

    /// Determines the Width and Height of the Image to be processed

    /// by obtaining the largest X-coord and Y-coord values

    /// </summary>

    /// <returns></returns>

    private static int[] GetWidthHeight()

    {

        int[] wh = { 0, 0 };

  

        try

        {

            foreach (HeatMapClick c in _clicks)

            {

                if (c.CoordX > wh[0])

                    wh[0] = c.CoordX;

                if (c.CoordY > wh[1])

                    wh[1] = c.CoordY;

            }

        }

        catch (Exception)

        {

            throw;

        }

        return wh;

    }

    private static void LinearSlideIncrementOnPoint(int x, int y)

    {

        for (int i = x - RADIUS; i < x + RADIUS; i++)

        {

            for (int j = y - RADIUS; j < y + RADIUS; j++)

            {

                if (((i > 0) && (j > 0)) && ((i < _width) && (j < _height)))

                {

                    if (Distance(x, y, i, j) < RADIUS)

                    {

                        _coordsArray[i][j] += (int)(RADIUS - Distance(x, y, i, j));

                    }

                }

            }

        }

    }

    private static void RootedIncrementOnPoint(int x, int y)

    {

        for (int i = x - RADIUS; i < x + RADIUS; i++)

        {

            for (int j = y - RADIUS; j < y + RADIUS; j++)

            {

                if (((i >= 0) && (j >= 0)) && ((i < _width) && (j < _height)))

                {

                    if (Distance(x, y, i, j) < RADIUS)

                    {

                        _coordsArray[i][j] += (int)Math.Sqrt(RADIUS - Distance(x, y, i, j));

                    }

                }

            }

        }

    }

    #endregion

  

    private class HeatMapClick

    {

        public DateTime Date { get; set; }

        public string Page { get; set; }

        public int CoordX { get; set; }

        public int CoordY { get; set; }

    }

}

View Plain | Copy To Clipboard

Well that’s it for this post. I apologize for the shortness of describing the code but it could be a start to something beautiful. I’ve zipped up all the classes and controls for easier download. You can download that here [BlogEngine HeatMap.zip].

My next project is to create an application that accumulates a variety of “items” from my HTC Touch and automatically create and upload a blog entry. Stay tuned.

Currently rated 4.0 by 1 people

Currently 4/5 Stars.
1
2
3
4
5

Make Money Online said:

Thanks for the great reference post.

# 3/22/2009 2:07:03 PM

Kampanye Damai Pemilu Indonesia 2009 said:

Thanks for this post details step, wait for the new one,

# 3/24/2009 4:13:16 AM

Loan Modification said:

I am fairly new to blogging and really like the idea of the Busby Seo Contest, it was really fun.

# 3/31/2009 8:42:25 PM

I really like the work that has gone into making the post. I will be sure to tell my blog buddies about your content keep up the good work. Thanks

# 3/31/2009 8:42:44 PM

Stop Foreclosure said:

Thank you for the work you have put into this post, it helps clear up some questions I had. I will bookmark your blog because your posts are very informative. We appreciate your posts and look forward to coming back.

# 3/31/2009 8:43:02 PM