Nepal Loadshedding App for Google Chrome: Design considerations

Recently, I wrote a small google chrome extension to display loadshedding schedule.  This extension was a two night hack so the term “design considerations” would sound overstretched. But still, there were some considerations that was taken into account while building it up. I tried to focus on few things while designing the extension. I will describe them here.

—–

The extension can be found here at  https://chrome.google.com/webstore/detail/nepal-load-shedding-sched/bjfehdeonijdobiohamaplfbdcfkgfgi

The source code is at: https://github.com/sul4bh/Nepal-Load-Shedding-Schedule-for-Google-Chrome

—–

Minimize actions required for the user to view the schedule

So as soon as you click on the extension icon, the extension fetches XML stored in LocalStorage, converts it into required JSON and feed it to a Mustache template and render the data. While rendering, it also automatically switches to your loadshedding group. There is no option to set your group. Just click on the group tab and it is your default group. Next time you fire up the extension, it remembers your group and renders it. Also there is no option to update the loadshedding data. Every time the extension is fired, it asynchronously checks if a new data is available and fetches it, stores in the LocalStorage and trigger the re-render the process. Because this happens asynchronously, we can still be viewing the schedule and the update process would be running in the background. Also, the XML is only 4.1 KB (Google’s homepage logo is 6.84KB) so it is not a bandwidth costly process.

You can also select your location from the drop down at the top of the extension popup. Click on the location and the group tab automatically switches to the group associated with the location. This selection area is grayed out to avoid confusion that the  group tab is linked backward to the location selection.

So, we have only 2 items to click and every other housekeeping task is done my the extension automatically. Don’t make user set options and interact heavily with the system. Remember, “The best interface is no interface”.

jQuery snowfall plugin – recreating Google’s “Let it Snow” effect

Google rolled out its “Let it snow” easter egg for this winter. Trying to recreate the same snow flakes falling effect, I wrote a jQuery based plugin to simulate snowfall similar to Google’s.

The demo of the plugin is available here. Please refer to the source of the page to see how to initiate the plugin.

It was a small and fun project to work on work: Simple mathematics, simple optimization concerns and the urge to replicate Google’s creation

Plugin Info

Demo

http://www.ytconvert.com/sul4bh/jquery.snowfall/

http://www.ytconvert.com/sul4bh/snowfall/

Download

http://www.ytconvert.com/sul4bh/jquery.snowfall/jquery.snowfall.js

Want to incorporate this plugin in your site, change it to suit your need or want a new plugin developed or have some JavaScript task in hand? Contact me at sul4bh[at]gmail.com

CSS3 based version of this plugin available at

http://www.ytconvert.com/sul4bh/jquery.snowfall/jquery.snowfall.transition.js

Use it as:   $(selector).snowFallTrans();

Demo

http://www.ytconvert.com/sul4bh/snowfall/

How to use

1. Include the plugin source in your page.

2. Invoke the plugin as

$('body').snowFall({color:'#fff',interval:'10',total:'20'});


color: the color of the flakes

interval: controls the movement of the snowflakes. Small number means faster falling of flakes

total: no more than ‘total’ number of flakes will exist in the screen. Helps in reducing clutter.

Have fun this winter season.

Vimeo Downloader Google Chrome Extension

Google took down this extension from webstore. I am trying to get this issue resolved. Till then get the packaged extension from 

http://chakab.com/pub/vimeo_chrome.crx

For the instruction on how to install the extension, please refer to this video.

 

 

 

Want to develop a chrome plugin? Contact me at sul4bh[at]gmail.com

 

Get here: https://chrome.google.com/webstore/detail/jjieadomkepcfnndlnkmmcehlghbafmk/

 

My major browser has changed from Firefox to Google Chrome. Amongst many things I miss from Firefox is the addon(GM script) to download videos from Vimeo.

I searched the web for the replacement of this addon but found none. So I thought I should write one myself. Taking the above script as the starting point of  my script, I wrote an extension that can download video from vimeo.

Here is how the script works:

Please find the extension at:

https://chrome.google.com/webstore/detail/jjieadomkepcfnndlnkmmcehlghbafmk?hl=en&gl=001

Here is how it looks:

JQPrio – jQuery priority highlight plugin

This small jQuery plugin was written to solve a small problem in one of our project. Thought I should share this.

We had a table and the data for the table was fetched with AJAX calls. The server would return us the data in JSON and this data would be populated in the table. We had to highlight the content of the data as per the “goodness value”. That means, if the data in certain field was ‘ok’ then we had to highlight it light orange and if it was ‘excellent’ we had to highlight it dark orange.

jqprio

A rather simple way of doing this would be assigning a class for these cells that needs to be highlighted but because the data that was coming from the server was JSON and we could not attach such class in the JSON data, we had to follow another approach.

So we wrote this jQuery based plugin which would traverse through the table and highlight these data as required. It would only act on defined column number while highlighting the data. In above case the column number would be 2.

Also the highlight color can be changed while calling the plugin.

You can see the demo of this plugin here.

Cross Domain Communication Explained

While working on an application that uses a Web Service API to fetch content to fill the UI, we thought of sparing our server from having to request for various resources to build up the UI. We used an approach where we would query the Web Service API using AJAX and construct UI on the fly. While trying to do so, we were faced with an issue called Cross-site HTTP requests limitation. That is to say, we cannot initiate HTTP requests within any js code from our domain at http://abc.com to fetch any resource from another domain say http://xyz.com. Browsers inforce this policy of same-origin to prevent various knows security issues.

This is a very common issue and there already are ready-made solutions to make such cross domain requests. But we thought of giving some time on this issue and figure out how such thing as cross domain communication actually work.

Cross Domain Communication Solution

1. JSONP
2. HTTP Access Control

JSONP

JSONP stands for JSON Padding. JSONP uses the ability of <script> tag to fetch script source from any location. This meaning, we can fetch data (json) as a component of the fetched script and then use it in our application. Let us look at this approach solution step by step:

Scenario

abc.com -> our domain from where JSONP calls would be made,

xyz.com -> domain from where we need to fetch some useful data

http://xyz.com/api -> the URL that serves us that useful data

We have a page at domain abc.com as:

1. We have a function as foo(data) such that it does something useful to the “data”. Name this function as callback function and keep it in your mind.
2. We have a variable as ‘key’ that is dynamic and the data we wish to fetch depends on this variable. That basically means we want to fetch something like http://xyz.com/api?key=<key value>
3. Now we create a script tag like <script src=”http://http://xyz.com/api?key=list”&gt; and inject it dynamically into our page DOM using javascript. For example (with jQuery)

   var injectScript = document.createElement('script');
   injectScript.type = 'text/javascript';
   injectScript.src = 'http://xyz.com/api?key=list';
   $("head").append(injectScript);
   

4. <script> tag has the ability to pull any data from non-origin domain and hence we get the script at http://http://xyz.com/api?key=list fethced.
5. But what do we do with the script. It does nothing. Puts no useful data or does anything interesting. This is where callback function comes in. With the key parameter, we also supply a callback parameter as

   http://http://xyz.com/api?key=list&callback=foo

6. Now we fetch this url within script tag and we get a response as

   </pre>
   foo("useful JSON encode data");
   <pre>

We see that this is a valid function call as the function foo() has already been defined. Also we have written the function in such a way that it does something useful for us with the <data> it gets.

Note that the serving URL should be JSONP compatible and hence support for handling the callback() function. Also note that this needs to new change to the existing technologies on the client or server end. (Unlike HTTP Access Control method which requires few additions on HTTP protocol)

Refer to the jQuery function called  jQuery.getJSON() which provide easy JSONP capabilities.

HTTP Access Control

HTTP Access Control is a would be standard for cross domain communicatio and needs modifications on both the server side and client side to work. It is basically an extension over HTTP. Covering all of its feature would be fairly complicated so we will demostrate only how it works and also present a simple HTTP dialogue with access control features available.

HTTP access control

HTTP header dialogue between the client and server with http access control feature is shown below

Request Header

    GET /api HTTP/1.1
    Host: abc.com
    User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Language: en-us,en;q=0.5
    Accept-Encoding: gzip,deflate
    Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
    Connection: keep-alive
    Referer: http://abc.com
    Origin: http://foo.example

Request Header

    HTTP/1.1 200 OK
    Date: Mon, 01 Dec 2008 00:23:53 GMT
    Server: Apache/2.0.61
    Access-Control-Allow-Origin: *
    Keep-Alive: timeout=2, max=100
    Connection: Keep-Alive
    Transfer-Encoding: chunked
    Content-Type: application/xml

When a cross-domain request in initiated within the XMLHttpRequest object, the browser inserts the URL of the requesting domain in the Origin header and posts this header to the server. If the server allows cross domain communication it responds with a proper header  (Access-Control-Allow-Origin: * meaning allow cross domain access to any origin)  and upon receiving this header, the browser sends whatever data it receives from the server to the requesting  XMLHttpRequest object. If the server does not respond with proper header or cross domain access is not allowed for the Origin domain then no data is fetched from the server.

If you want to explore more about HTTP Access Control go to the page at <http://arunranga.com/examples/access-control/>, and Firebug the HTTP request headers.

How to shoot creative bokeh pictures

Bokeh is the Japanese word for “blur”. A bokeh in the picture denotes to its blur area. Here are few examples:

Here, the leaf focused on the foreground rendering the light sources (gap between the brances and leaves) blurred. Because the shot was taken with a small aperture lens ( f/2.8 ), we get a shallow Depth of Field (DoF) which means only the leaf will be in focus. Also notice the shape of the blur. (Somewhat octagon in shape)

The interesting thing about this shape is it can be changed as per our need. The blur shape of the photo is due to the octagon opening of the diaphragm of the lens. If we can override this opening with some shapes of our desire, we can get create the bokeh of that shape. Here is an example:

I shot this picture of Banepa lights by overriding the aperture of a lens with large diaphragm opening ( 50mm f/1.8 ). And how do we do this? We cannot open up the lens and replace the diaphragm with something that is heart shaped. Here is the idea:

1. Take an opaque paper and cut it in a circle such that it fits at the place where the lens cap goes.
2. At the center of the circle (make it as much aligned to the center as you can), cut out the shape with which you would like to override the diaphragm with.
3. Now insert the paper at the front of your lens; that is, at the place where the lens cap would go.
4. Fix the lens on your camera body, and start taking pictures such that distant light sources are not in focus; deliberately blur them.

Lens with the cap

Cap off

Lens with bokeh diaphragm

And yes bokeh can be used to shoot videos and get amazing results:

Light Works from Supernormals on Vimeo.

and its making-of:

Light Works – Behind The Scenes from Supernormals on Vimeo.

RGBness of an image

A looked upon this image and thought, “what a bluish image!”

And then it suddenly came to my mind. What can be a quantitative method of telling that this image is a blue image? This was the scheme I devised:

1. Get RGB value of every pixel in the image.
2. Replace the pixel with a true RED, GREEN or BLUE pixel depending on the weight of these color in the pixel.
   ie replace (120,50,20) with (255,0,0)
3. Now calculate the weight of each RED, GREEN and BLUE color of the newly formed image.
4. ( For RGB value with equal wight, the pixel is not replaced with true R or G or B color but with equal  percentage of the color with equal weight. )

I wrote a small Python script to do the analysis task for me.

The image above obviously has high percentage of Blue color in it. The image replaced with true REG, GREEN, and BLUE color would look like:

(JPEG compression artifacts caused some irregular shades of red, green and blue.)

And the percentage of Red, Green and Blue are as follows:

Redness:  14.2866575845 %

Greenness:  1.2399911032 %

Blueness: 84.4733513123 %

So, quantitavely we can claim that the image is a BLUE image.

[The Python code: imageRGBness]

#!/usr/bin/python
import Image

R_count = 0
G_count = 0
B_count = 0
total_count = 0

def checkColor(R,G,B):
    global R_count, G_count, B_count, total_count
    out = (0,0,0)
    R_add=0
    G_add=0
    B_add=0

    if R>=G:
        if R>=B:
            out = (R,0,0)
            R_add = 1
        else:
            out = (0,0,B)
            B_add = 1
    elif G>=B:
        out = (0,G,0)
        G_add = 1
    else:
        out = (0,0,B)
        B_add = 1

    if R==G and out == (R,0,0):
        out = (R,G,0)
        R_add = 0.5
        G_add = 0.5

    if R==B and out == (R,0,0):
        out = (R,0,B)
        R_add = 0.5
        B_add = 0.5

    if G==B and out == (0,G,0):
        out = (0,G,B)
        G_add = 0.5
        B_add = 0.5

    R_count = R_count + R_add
    G_count = G_count + G_add
    B_count = B_count + B_add
    return out

def compareRGB(pix,x,y):
    pix_temp = pix
    for i in range(0,y):
        for j in range(0,x):
            color = pix_temp[j,i]
            R = color[0]
            G = color[1]
            B = color[2]

            set = checkColor(R,G,B)

            pix[j,i] = set

    return pix


def openImage(filename):
    global R_count, G_count, B_count, total_count
    im = Image.open(filename)
    size_of_image = im.size
    x = size_of_image[0]
    y = size_of_image[1]

    pix = im.load()

    compareRGB(pix, x, y)

    im.save("test_out.jpg")
    total_count = x * y

    print "Redness: ", R_count/total_count*100
    print "Greenness: ", G_count/total_count*100
    print "Blueness", B_count/total_count*100


#start the script
openImage("test.jpg")

[image used : http://www.flickr.com/photos/sul4bh/5161722620/ ]