I stumbled across this great tool for creating User Interface Mockups. It is not an all purpose sketching tool like Illustrator or Google’s Layout. Rather, it does one thing really well – doing mockups of software and websites.

The unique thing about Balsamiq is that the building blocks for a mockup have the appearance of being hand-sketched – and this is intentional.

From their website:

Balsamiq Mockups intentionally uses hand-drawn UI elements, so that people don't get attached to “that pretty color gradient” or think that your mockup has actual code behind it and is “practically done”.
…wireframes created with Mockups are intentionally rough and low-fidelity. The idea is to encourage as much feedback as possible...no-one will think you'll be offended by their input, they'll know immediately that you just 'threw it together' quickly.

Brilliant!!

My first use of it was in designing the UI for a new feature I plan to add to my ETF Screener site. Here is a screenshot of what I have. It took just a few minutes:

The price tag on it is $79, which is a bit pricey sketching software, but with the collaboration features and the time savings (especially if you do mockups a lot) the price tag could be well worth it

The Problem

Recently, while working on my ETF Screener website I had the need to color code a list of values by their rank within a list. On ETFtable.com, for each sortable column on the table I also have a rank property on all values in the column. I originally did this because it speeds up client-side sorting (plain integer arrays sort a little faster than decimal arrays – especially when there are some nulls among the decimal array).

Well, I recently decided I wanted to color code each cell where a rank matters. This way when a user sorts by one column, he/she can also see a visual indicator of how other columns would place in a sort as well. This is really helpful when you have technical indicator columns that represent different timelines – you can quickly see if an ETF (or whatever you are comparing) is trending on short, intermediate, and longer-term timelines.

What I needed was a way to take a rank range – say 1 to 100 – and get a color representing a given value in that range.

The Solution

Firstly, I needed to determine what parameters would be needed. Obviously I need a minimum rank number and a maximum rank number. Then I needed to specify the range of colors. So my signature for the function that would build and hold the list of colors for each rank number would look like this:

RankToColorConverter = function(numberMin, numberMax, colorMin, colorMax)

Now, how can I determine what color will go with each rank number in the range given? The hard part (or atleast what I thought could be difficult) was determining what colors belong between the colorMin and colorMax colors. To do this right we really need to break the color up into its individual Red, Green, and Blue parts and get a numeric representation of each. Getting the numeric for each involves converting Hexadecimal value to integer.

It turns out that Javascript’s parseInt function does this already. And conveniently the number object’s toString function does as well. The function signatures are below:

parseInt(string[, radix])

number.toString( [radix] )

The optional radix param specifies the base (base 10, hexadecimal, etc.) to use. (Interestingly, while researching this I came across articles where developers actually wrote functions with long switch cases to convert to and from hexadecimal – horray for them.) So, to get the Red part of the minimum color and convert that to an integer I just need this:

var rMin = parseInt(this.colorMin.substr(0, 2), 16);

My full implementation code as well as an example of it’s usage for a rank of 1 to 100 where I want to go from Red to White and then to Green is below. My next release of my ETF Screener will make use of this. Ooooh, pretty colors…

The Code

   1: RankToColorConverter = function(numberMin, numberMax, colorMin, colorMax) {

   2:     this.numberMin = new Number(numberMin);

   3:     this.numberMax = new Number(numberMax);

   4:     this.colorMin = new String(colorMin).replace("#", "");

   5:     this.colorMax = new String(colorMax).replace("#", "");

   6:     this.colors = [];

   7:     this.build();

   8: };

   9: RankToColorConverter.prototype.build = function() {

  10:     var numberRange = this.numberMax - this.numberMin,

  11:         rMin = parseInt(this.colorMin.substr(0, 2), 16),

  12:         rMax = parseInt(this.colorMax.substr(0, 2), 16),

  13:         gMin = parseInt(this.colorMin.substr(2, 2), 16),

  14:         gMax = parseInt(this.colorMax.substr(2, 2), 16),

  15:         bMin = parseInt(this.colorMin.substr(4, 2), 16),

  16:         bMax = parseInt(this.colorMax.substr(4, 2), 16),

  17:         r, g, b, factor;

  18:     for (var i = this.numberMin; i <= this.numberMax; i++) {

  19:         factor = ((i - this.numberMin) / numberRange);

  20:         this.colors[i] = {

  21:             r: Math.round(((rMax - rMin) * factor) + rMin),

  22:             g: Math.round(((gMax - gMin) * factor) + gMin),

  23:             b: Math.round(((bMax - bMin) * factor) + bMin)

  24:         };

  25:     }

  26: };

  27: RankToColorConverter.prototype.getHexColor = function(rankNum) {

  28:     return "#" +

  29:                 this.colors[rankNum].r.toString(16) +

  30:                 this.colors[rankNum].g.toString(16) +

  31:                 this.colors[rankNum].b.toString(16);

  32: };

   1: ETFTable.ui.downRankToColorConverter = new ETFTable.ui.RankToColorConverter(1, 50, "#E76161", "#FFFFFF");

   2: ETFTable.ui.upRankToColorConverter = new ETFTable.ui.RankToColorConverter(51, 100, "#FFFFFF", "#61E761");

Enjoy!!

Update

I’ve got the site now using this:

A few months back I created a little Javascript library which is a starting point for doing technical analysis using Javascript. Actually it is technically straight Ecmascript. I had recently downloaded the Google Chrome browser and seen how fast Javascript can be and also noticed the trend toward a faster Javascript engine in other browsers. This prompted me to think that perhaps Technical Analysis work, which has usually been done on the server using C++, Java, C#, etc, can possibly be done in the browser.

Anyhow, I released the code at Google Code. The URL is: http://code.google.com/p/js-ta/

The latest release now contains what I feel are the most important lower level indicators that can serve as building blocks for more complex indicators, but are also very useful on their own:

• Exponential Moving Average
• Simple Moving Average
  
• Linear Regression
  
• Running Sum
• Rate of Change

The Timestamp datatype in SQL Server is perhaps the most misunderstood data type. The name implies that it is some kind of datetime that the database engine automatically 'stamps' into a column. In reality, it is the same as rowversion and is not translatable into a DateTime in .NET. It actually is usually translated into a byte[] or in Linq to SQL a System.Data.Linq.Binary type.

Recently, I had to implement a concurrency strategy on a project in which we are using NHibernate as our data persistence / ORM solution and using ASP.NET MVC at the Web layer. (Lets not get into a debate about the virtues of different concurrency strategies or whether is is even necessary at all - It was a requirement)

I needed to store the Version field (each table that needs concurrency checking has a timestamp column called Version) on edit forms so that when the record is sent back to the Controller, the object to be updated by NHibernate would be populated with that Version field as it was when I first got the record from NHibernate. Then when NHibernate tries to update that record, if the record's Version has changed since when I first got it, it throws a StaleObjectException and I report back to the user that they must refresh their screen and try again. This is called Version-based Optimistic Concurrency. Maybe you have another name for it.

My first stab at getting this round-trip of the Version field did not work so well. I didn't think it would, but I thought just maybe MVC's built in Hidden helper method would have some trick up its sleeve for dealing with a byte[]. It tried:

<%= Html.Hidden("Version") %>

Which renders as this HTML:

<input id="Version" name="Version" type="hidden" value="System.Byte[]" />

Well, that obviously won't magically bind back into a byte[]. So, I had to come up with something else. The answer was a couple of extension methods on MVC's HtmlHelper and on String. To get the byte[] into a plain string format I decided that I needed a format that split out each byte and ToString’d each. With a little inspiration from this dude I came up with a set of MVC HtmlHelper extension methods. I really like using the IEnumerable<T>.Aggregate method for this kind of stuff.

   1: public static partial class HtmlHelpers

   2: {

   3:     public static string VersionHiddenField(this HtmlHelper helper, string name, byte[] value)

   4:     {

   5:         string strValue = value.Aggregate(new StringBuilder(), (final, p) => 

   6:                             final.Append(p).Append("|"))

   7:                             .ToString()

   8:                             .TrimEnd('|');

   9:         return helper.Hidden(name, strValue);

  10:     }

  11:  

  12:     public static string VersionHiddenField(this HtmlHelper helper, string name, System.Data.Linq.Binary value)

  13:     {

  14:         return helper.VersionHiddenField(name, value.ToArray());

  15:     }

In my View page now the helper for the Version property looks like this:

<%= Html.VersionHiddenField("VersionAsString", Model.Version) %>

Notice I had to name the element “VersionAsString” – I didn’t want my controller to try to bind to the Version property. That would result in an error. So I needed a different way to get the VersionAsString back into my byte[] Version property (or Binary if you’re using LinqToSql). For this I created a set of String extension methods:

   1: public static byte[] SplitToByteArray(this string value)

   2: {

   3:     string[] arr = value.Split('|', ',');

   4:     int i = 0;

   5:     return arr.Aggregate(new byte[arr.Length], (final, p) =>

   6:                 {

   7:                     final[i] = Convert.ToByte(arr[i]);

   8:                     i++;

   9:                     return final;

  10:                 });

  11: }

  12:  

  13: public static System.Data.Linq.Binary SplitToBinary(this string value)

  14: {

  15:     return new System.Data.Linq.Binary(value.SplitToByteArray());

  16: }

Now, in my controller action method, I can get the value from the VersionAsString as a byte[] like this:

entity.Version = Request.Form["VersionAsString"].SplitToByteArray();

Once the entity gets set to the Version value from the form and I try to save it, NHibernate does the rest of the concurrency checking for me and spits out a StaleObjectException if the entity is now out-of-date.

Let me know if you know of a better way to do this.

Every day it seems I am dealing with a new problem and usually I come up with (what I think is) a good solution. That is what being a developer is essentially, right? Of course, if later on I need to share that solution with someone else or if I need to apply it to another project, I usually don't have that solution at hand anymore. As a consequence, I end up starting from scratch again.

After years of this I finally decided to set up a blog. My purpose is two-fold:

• To organize my own work so that I can easily get back to my solution to a problem and re-use it.
• To help others who may be dealing with the same or similar issue.
  
  

About Me:

I am a .NET developer/consultant in Indianapolis. My expertise is in web applications development and I'm currently diving into ASP.NET MVC, NHibernate, Javascript (and dynamic languages in general), and recently C# 4.0.

In addition to being a developer I also am very interested in technical analysis of financial markets. I am working on a website ( ETFtable.com - ETF Screener ) that will allow investors to sort and filter all ETFs by various technical indicators and even create their own technical indicators to use.

Please stay tuned or subscribe to the blog. I have a bunch of cool stuff to share that I've had pent up in my brain for quite some time.