Teacup UI - Fun, simple to use jQuery plugin

Download the code at https://github.com/karthik20522/TeacupUI

A simple representation of percentage data as a layer of ingredients in a tea cup. Yes, a tea cup!! Why? Well just for fun I built it. For whom? Possibly for some one who has a coffee or a tea site and want to present their mix in a teacup ui or possibly for a online info-graphics. Usage is limited by imagination only!

Anyways, how to get this setup and working. Just follow these steps:

- Add the css
- Add the js file and include jQuery
- Add your data Note that your values should add up to 100 to fill up the teacup. Your value can be larger but it would look funny and if your value is lesser than 100 that's OK as the plugin would fill the rest up with emptiness. Also note that each of the href's are clickable within the teacup.

- Bind the plugin

What else:

- How about custom colors - How about multiple teacups on same page

Download the code and example at https://github.com/karthik20522/TeacupUI

jQTagCloud - Simple Tag Cloud in jQuery

A simple tag cloud plugin that I built in JQuery (1.5kb in size uncompressed). https://github.com/karthik20522/jqTagCloud

An example usage:
maxSize: Maximum font size to use
minSize: Minimum font size to use

Multiple tag clouds can be used on same page. Checkout the example file for demo:




Screenshot usage of this plugin:

Dominant Background color extraction in Images

Following is a continuation to my github project at https://github.com/karthik20522/DominantBackgroundColor

The problem of background color extraction hit me when I was trying to dynamically set background color based on dominant color of the image which usually is background color. Part of my solution was to average out the colors and perform a histogram equalization to extract a dominant color.

Since there are 255 x 255 x 255 possible combinations of colors it would more useful to reduce the result to more limited color space. For example if you want to provide filtering or sorting functionality of images with particular color it would be more user friendly to provide a limited/controlled set of color options instead of displaying 100's or 1000's of colors for the user to pick! In this project I used monochrome values of rainbow colors as my closest matching color subset for matching purposes.

Following is some examples of how the code performed:

Result	Result	Result	Result

There are two main functions in the code that can be utilized:

1. To Extract the most dominant color in the image:
2. Convert the dominantHTMLColor to a smaller subset result
Examples of the above Subset/Closest match code:

Actual	Actual	Actual	Actual
Subset	Subset	Subset	Subset

For the most part the results are very close to the original dominant color. The whole idea was to match the resulting dominant color to one of the following rainbow colors:

But what if you want the code to return a list of top 5 colors. Well, you can modify the code as per your requirement by making this simple change to the linq query (which is currently set to pick the top color):

Beers in my belly - XII

Allagash interlude
	Liefmans cuvee brut

Code Snippets - Nov 2012 Edition

Proxy service for downloading and serving image: (.NET 4.0) Async Http Post (.NET 4.0) Group and Count in LINQ

HttpWebRequest - 500 Internal Server Error - Faulty JSON

So while making a web request from a C# application and if you end up hitting a 500 Internal Server error its usually because of the following or atleast this is what most google would talk about:

As a note, Internal Server Error is on the server side, The server crapped out on something
Most common issues that's not related to your actual code:

• Maybe Invalid authentication or invalid credentials
• Maybe invalid contenttype being passed
• Maybe wrong request method (GET instead of POST or vice-versa)
• Maybe invalid content length being posted
• Or even maybe because of some proxy issue

But I came across something very strange recently while doing a Http POST from a c# WebPI application to a REST based WCF service. So it seems like the Newtonsoft JSON.NET that come's along with WebAPI (NuGet) is serializing the DateTime object to JSON a bit differently. The old JSON.NET library converted DateTime value into Ticks while the new JSON.NET library is coverting it to a string. Following is an example of old and new JSON.NET library:

New JSON.NET Library: Old JSON.NET Library: So it seems that WCF is unable to deserialize the new DateTime format and fails during deserialization of input as the DateTime types are different. One solution to this problem is to serialize the object to JSON using the JavascriptSerializer (System.Web.Script.Serialization namespace). Example code:

ClipTheTrip.com - How I Built This

Clipthetrip.com is a fun, free crowd sourced destination guides. From a data modeling perspective it has a pretty simple object interaction. There is Location object, there is CLIP object, there is photo object and a user object. MongoDB was used as a data store so objects were quite denormalized instead of a referential model.

Some of the technologies and API used for building the site is as follows:

• MongoDB
• .NET MVC3.0
• .NET 4.0 web optimization library for Js and CSS minimizing and combining
• jQuery Plugins
  • Wookmark
  • jQuery Lightbox
  • qTips
  • GMap3 for google maps
  • jQuery Fullscreen for homepage background
  • Imagesloaded
  • Autosuggest for location suggestion
  • Plupload for uploading images
  • Tablesorter
  • CookieControl from the pesky Europe cookie law
  • jQuery Reject
• External API's
  • Weather information using Accuweather
  • Currency using Webservicex service
  • Business search using Bing
• Image processing using SimpleDotImage library
• Generating offline PDF's using wkhtmltopdf
• HtmlAgilityPack for screen scrapping
• Amazon SES for email

As part of this article I am sharing code snippets of how I extracted information from external API's and other smaller code snippets. Since most part of the site is just CRUD operations, I feel it would be a waste to explain the code structure or architecture (considering architecture is quite simple!)

Currency data from Webservicex.net
Example page: http://www.clipthetrip.com/city/london
Business information from Bing
Weather information from Accuweather
Example page: http://www.clipthetrip.com/city/london
Image Resizing using SimpleDotImage
Javascript and CSS bundling using Web.Optimization

{Re}Search timeline - How I Built This

Demo site coming soon..

Another proof of concept and another interesting way of viewing images. Checkout my previous yearinimages.com post. The idea behind Yearinimages was to provide a very eye candy way of representing the best images of 2011. But unfortunately mosaic layout provides no sense of navigation. {Re}search project was my attempt to avoid this pitfall of navigation while still holding the visual way of presenting data with images.



The idea behind this POC is to provide the user a timeline based navigation of events. For example, when you search Japanese Earthquake or Oscar awards which when viewed as a timeline of events, would provide more visual perspective than just displaying a grid of images.

So how did I build this? Well, I used Gettyimages connect API to extract event and image information and Timeline plugin by verite for building the timeline. Addition to above api's and plugins there were quite a few hacks that was required to make this happen. Following is how I did it:

Extracting the event information:
Thou gettyimages connect API provides the search by personality , keyword and search phrases unfortunately it only provides limited refinement options on events. Basically it's not possible to get a list of events similar to the one the gettyimages website provides like following screenshot:



I do believe that the refinement can be customized per customer basis with connect API but I am not sure. Anyways, for extracting the list of events for a particular search I screen scrapped from gettyimages.com website. Following is code snippet of screen scraping using WATIN ui automation framework:



Now that we have list of event ids screen scrapped we can use gettyimages connect to get event details for displaying on UI. Following is code snippet to call connect API using my connect API library (its nothing but a helper library to call the connect API rest service)



Setting up timeline ui:
Now that we have list of events we need to convert it to the format the timeline plugin expects. Timeline plugin takes json as its data source. I used json2csharp.com site to convert the sample json format that timeline github page provided to c# data model that can be used code behind. I used json.net to convert the timeline c# object to json string. Code snippet for converting event list to timeline object.



Note that the hard-coded html in timeline.text property is to provide a autosuggest capability for user. The code above is just for demo purpose's to show that timeline plugin is capable of taking in Html as part of it's json data. Html rendering of the above code:



At my 1st iteration, I hooked up the events to default timeline functionality. But what I would like is to allow users to click on an event and display all images associated to that event. Since this is a custom functionality some hacks to timeline code had to be done. Like the following:
- Associating eventID to the event timeline div so when timeline is clicked the code can determine which eventID it's referencing too
- Adding a Ajax loading gif to every event
- Upon sliding to an event, do Ajax call to server to get images associated to that event
- Display the images when Ajax call is completed
- Show image information when clicked

Framework, plugins, API used:
- jQuery 1.7.1
- jQuery light box
- wookmark jQuery plugin
- Timeline by Verite.Co
- .net framework 4.0/mvc3
- Newtonsoft json.net
- WATIN ui framework
- json2csharp.com for converting the template json to c# object
- gettyimages connect API

New Jersey Path Alerts - Uh-Oh

My first reaction was as follows.. WWWWWWTTTTTTFFFFFFFF..... I couldn't believe what I was seeing. I knew it was ASP.NET website but site running on .NET 2.0 and written in VB.NET :-/ WTF.. On top of that a dead lock exception, that's plain insult to injury! And no exception handling for unhandled exceptions and no custom error page/message instead of showing in all glory the yellow screen of death with .net stack trace!! Niceeee.. Well atleast no inner details is in the stack trace like db name and so forth.. phew.

Beers in my belly - XI

	Oskar blues ten fidy
Sofie Belgium Ale

Unhandled GZip Encoding

What happens when you have GZip turned on and there is an unhandled exception is thrown, look no further.. a completely cryptic garbage page is returned



So whats the problem, well when an unhandled exception is thrown ASP.NET/MVC removes the GZip header or any other custom header that was set and returns a non-zipped content while your IIS decides to send to browser that the content is GZipped when it's not really. So your browser is receiving a non-zipped content with GZIP content type, thus the garbage content.

To fix this in the global.ascx add the following to the Application_PreSendRequestHeaders function:

Visual Studio 2012 - Annoying Single Click Preview

Not sure about rest of the visual studio user's but the new 2012 version by default has the single click/preview option enabled! Annoying as hell :-/ Anyways, to disable it

TOOLS -> OPTIONS -> ENVIRONMENT -> TABS AND WINDOWS -> UNCHECK PREVIEW TAB

Beer in my belly - X

	Imperial stout
	Old foghorn Ale
	XX - Bitter

Handling Unhandled Exception Asp.NET MVC

Well, having unhandled exception is bad in the first place but displaying user a default IIS broken exception page or the yellow broken code page is even worse. Not a good user experience. But as all code/software there is always bugs and all ways a edge case that breaks unexpectedly. These unhandled expections can be handled in controller level in Asp.NET MVC. Following is a code snipped of handling errors and routing the user to a more user friendly error page.



In the above code, once the error is handled it's redirected to an Error Page. A user friendly error page such as this from clipthetrip.com

Beer in my belly - IX

Acbc dizzy	Harviestoun bitter
Marooned on hog
	liefmans goudenband