WYSIWYG

http://kufli.blogspot.com
http://github.com/karthik20522

Monday, December 17, 2012

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

Labels: ,

Tuesday, December 11, 2012

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:

Labels: ,

Thursday, December 6, 2012

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):

Labels: , ,

Saturday, December 1, 2012

Beers in my belly - XII


Allagash interlude


Liefmans cuvee brut

Labels: