Tuesday, August 2, 2011

Posted by SAMAJ SHEKHAR

0

HTML5 <canvas> Part1 : Introduction


Hello all, this is my first blog post here on TOC and I'm excited to present this article on HTML5 <canvas> element. As you might know HTML5 has been around here for a fair amount of time now and since all major browsers support its semantics with very minor differences, many developers are now picking it as their preferred choice for web development. Specially after the release of IE9 with support for HTML5 and hardware-accelerated text, video and graphics speed up performance that makes websites perform like programs installed on your computer, or in the words of Dean Hachamovitch a “native experience”. And with announcement of IE10 Platform Preview 1 available for download, at MIX11, it is the first step in delivering the next wave of progress in native HTML5 support. So let’s get started and explore the most powerful element of HTML5 the <canvas> element.

Introduction

HTML5 specifications defines the <canvas> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. By default a <canvas> element has no content and no border of its own. You can define a simple <canvas> element with this minimal HTML.
<canvas id="mycanvas" width="300" height="225"></canvas>
Here height and width specify the size of canvas and id is specified to get access to it in your JavaScript code. And anything you put between tags will be treated as fallback content if <canvas> element is not supported by the browser.
Apart from these attributes it also support two functions specific to this element, getContext and toDataURL

getContext()

This function is the gateway to all things you can draw on <canvas>. Every canvas has a drawing context, which is where all the fun stuff happens. Once you’ve found a <canvas> element in the DOM (by using document.getElementById() or any other method you like), you call its getContext() method. Currently only "2d" context is supported, according to WHATWG Wiki CanvasContexts page there is also a "webgl" context but it’s not yet supported by many browsers, though it might be supported in future revision of specifications. So to get context you will pass a string "2d" as argument which will return a new CanvasRenderingContext2D Object, whose methods can be used to draw on <canvas>.

getDataURL()

This method, when called with no arguments, return a data: URL (rfc2397) containing a representation of the anything thing on <canvas> as a PNG image file. You can also pass a string representation of any valid MIME Type to this function to get data in that format, like "image/png", "image/jpeg".

Canvas Drawing Model

Imagine you’re drawing a picture in ink. You don’t want to just dive in and start drawing with ink, because you might make a mistake. Instead, you sketch the lines and curves with a pencil, and once you’re happy with it, you trace over your sketch in ink.
Each canvas has a path. Defining the path is like drawing with a pencil. You can draw whatever you like, but it won’t be part of the finished product until you pick up the quill and trace over your path in ink.
In canvas almost all drawing method you call will add a path (except fillRect() and fillText() methods which paints a filled shape instantly), and will not draw until you call stroke(), fill() or clip() method. fill() method fills the path with current fillStyle(), stroke() method draws the path with current strokeStyle()s and clip() method creates a clipping region for the path.

Example

Now let's explore how to use <canvas> element, and start drawing on canvas with its methods. For this example we will draw some simple shapes by using some of the methods of Context object, (for all methods please see Methods and Properties).

Define a <canvas>

You define a <canvas> with following simple markup.
<canvas id="mycanvas" width="300" height="100" style="border:1px solid black"></canvas>

Above is the simple <canvas>, i have given it a border so you can see it.

Get the Context

Next we'll get the drawing context by following lines of JavaScript.
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

Lets Draw on <canvas> !!!

We'll draw a square, a circle and some text on the <canvas>, for this we'll use following methods: (for all methods please see Methods and Properties)
  • fillRect( x, y, fWidth, fHeight):Paints a rectangle onto a CanvasRenderingContext2D object by using the current fill style.
  • beginPath():Resets the current path.
  • arc( x, y, radius, startAngle, endAngle, bAnticlockwise):Adds points to a path that represents an arc. (Angles are in radians).
  • fill():Fills sub-paths by using the current fill style.
  • fillText( text, x, y [, maxWidth]):Renders filled text to the canvas by using the current fill style and font. (maxWidth is optional it specifies the maximum possible text width. If the value is less than the width property, the text is scaled to fit.)
  • fillStyle:It is a property which sets the style that will be used to fill the shapes. it can be a CanvasGradient, a CSS color, or a CanvasPattern.
By using above methods we can write following JavaScript code to draw on <canvas>.
var acDegToRad = function(deg){ return deg * -(Math.PI/180)}
context.fillStyle = "rgb(0,160,250)"; 
context.fillRect(10,10,50,50);  
context.beginPath(); 
context.arc(200,35,25, acDegToRad(0), acDegToRad(360)); /
context.fill();
context.fillText("Hi, I’m Samaj Shekhar", 100,80); 
Let me explain it line by line, in second line we set the fillStyle property with an rgb() string for blue color. Then we draw a filled rectangle at (10,10) (x,y) cordinates with 50px width and height, thereby making it a square. In fourth line we start a Path to create a circle, then in next line we define the circle with the arc() function, passing it the coordinates of (200,35)(x,y) for center of circle, a radius of 25px, then a starting angle of 0deg and ending angle of 360deg, thereby completing a full path of circle. Since this function takes angles in "Radians" and by default draws angle in clockwise direction, I have defined a small function on first line, acDegToRad() which converts passed value in degrees to radians then negates the result to make degrees anticlockwise (as we were taught to do in schools :). Then in sixth line we call the fill() method to actually paint and fill the path, which is a circle in this case. The last line simply draws the string at (100,80)(x,y) coordinates. By default the "font" of 2d context is 10px sans-serif. You can set any CSS font by passing it as string to context.font property
And here are the shapes that get drawn,

Below is another canvas with a fairly complex graphic for logo of PORTAL2, one of my favourite games :). In my next post we'll dive deeper in other functions of <canvas> and I'll give a walkthrough of how to draw this nice PORTAL2 logo.

Methods and properties

As of now CanvasRenderingContext2D Object contains only 49 methods and properties. MSDN has a nice list of them. Below is the short description of each :< /p>
PropertyDescription
canvasGets a back reference to the canvas object that the current context derives from.
fillStyleGets or sets the current style that is used to fill shapes.
fontGets or sets the current font for the context.
globalAlphaGets or sets the current alpha or transparency value that is applied to global composite rendering operations.
globalCompositeOperationGets or sets a value that indicates how source images are drawn onto a destination image.
lineCapGets or sets the current line cap style.
lineJoinGets or sets the type of corner that is created when two lines meet.
lineWidthGets or sets the current line width, in pixels.
miterLimitGets or sets the maximum allowed ratio between half of the lineWidth value and the miter length.
shadowBlurGets or sets the current level of blur that is applied to shadows.
shadowColorGets or sets the color to use for shadows.
shadowOffsetXGets or sets the horizontal distance of a shadow from a shape.
shadowOffsetYGets or sets the vertical distance of a shadow from a shape.
strokeStyleGets or sets the current style that is used for strokes of shapes.
textAlignGets or sets the current anchor point or alignment settings for text in the current context.
textBaselineGets or sets the current settings for the font baseline alignment.
MethodDescription
arcAdds points to a path that represents an arc.
arcToDraws an arc of a fixed radius between two tangents that are defined by the current point in a path and two additional points.
beginPathResets the current path.
bezierCurveToAdds a point to the current sub-path by using the specified control points that represent a cubic Bézier curve.
clearRectClears the pixels on a CanvasRenderingContext2D object within a given rectangle.
clipSpecifies a new clipping region.
closePathCloses the current subpath and starts a new subpath that has a start point that is equal to the end of the closed subpath.
createImageDataReturns a CanvasImageData object that has dimensions in CSS pixels.
createLinearGradientCreates an object that represents a linear gradient to use in a canvas context.
createPatternReturns a CanvasPattern object that repeats the specified element in the specified direction.
createRadialGradientReturns an object that represents a radial or circular gradient to use in a canvas context.
drawImageDraws a specified image onto a canvas.
fillFills subpaths by using the current fill style.
fillRectPaints a rectangle onto a CanvasRenderingContext2D object by using the current fill style.
fillTextRenders filled text to the canvas by using the current fill style and font.
getImageDataReturns an ICanvasImageData object that represents the pixel data for the specified rectangle on a canvas.
isPointInPathDetermines if the specified point is in the current path.
lineToAdds a new point to a subpath and connects that point to the last point in the subpath by using a straight line.
measureTextReturns a CanvasTextMetrics object that contains the width of the specified text.
moveToCreates a new subpath by using the specified point.
putImageDataPaints the data from a specified CanvasImageData object onto a canvas.
quadraticCurveToAdds a point to the current subpath by using the specified control points that represent a quadratic Bézier curve.
rectCreates a new closed rectangular subpath.
restoreReturns previously saved CanvasRenderingContext2D path state and attributes.
rotateRotates the current context coordinates (that is, a transformation matrix).
saveSaves the state of the current context.
scaleScales the current context by the specified horizontal (x) and vertical (y) factors.
setTransformResets the current transformation matrix of the current context back to its default and then multiplies it by the specified matrix.
strokeRenders the strokes of the current subpath by using the current stroke styles.
strokeRectCreates an outline of the specified rectangle on a canvas by using the current stroke, line width, and join styles.
strokeTextRenders the specified text at the specified position by using the current font and strokeStyle property.
transformModifies the transformation matrix of the current context.
translateSpecifies values to move the origin point in a canvas.
READ MORE - HTML5 <canvas> Part1 : Introduction

Friday, July 22, 2011

Posted by SAMAJ SHEKHAR

0

Introduction to HTML5 <Canvas>: Part 2 (Example)


This post is the sequel to my previous post of Introduction to HTML5 <Canvas>: Part 1 and shows a walkthrough example of using canvas for some static 2D drawing (for Introduction to animation wait for my next post). This is the second post to my “HTML5 <Canvas>” series.
In previous post we saw how <Canvas>'s context gives us an API with set of methods and properties to draw on its surface, now in this post we will use some of those methods to draw a logo of one of my favorite game PORTAL2.
Sorry, but your Browser Dosen't Support HTML5 <canvas>
Above is the actual completed art drawn on canvas, and below we will see how we draw that art piece by piece. And Let me tell you this article is just for introducing you to the use of various methods provided by canvas and may not show the best and efficient way of drawing on it. So keeping that in mind, let’s get started.

First things first

As you may know by now that before any drawing we need to have a handle on <Canvas> element to do manipulations, and that handle is the context object of the <Canvas>. The context of the <Canvas> element provides us all that API of methods to do drawing and manipulation on <Canvas>. To get the context we use "getContext()” method and pass in the string “2d” as parameter * . Also since we feel more natural using “degrees” for specifying angles but all functions of canvas context take clockwise “radians” as parameter, we’ll use following function to convert degree into anticlockwise* radians. Also note that it is recommended to use "save()” and “restore()” methods of context to save the current state of the context on the stack before any manipulation & transformation and restore it back to its previous state respectively.
*(for details check my previous post or w3c draft)
//context of the canvas
var ctx = document.getElementById("portalcanvas").getContext("2d"); 
//function to convert radians to degrees
var acDegToRad = function(deg){
		return deg* (-(Math.PI / 180.0));    
}

Drawing the “2”

We’ll start by drawing the number “2” on the <Canvas>. It consists of 3 pieces the base rectangle, a slant rectangle and an arc.
  • 2’s Base: The base rectangle is the easiest of all to draw, just set the “ fillStyle” property of the context to light gray color and use “fillRect( x, y, width, height)” method to draw the rectangle.
    ctx.save();
    ctx.fillStyle = "rgb(110,110,110)";
    ctx.fillRect(20,200,120,35);
    ctx.restore();
    
    If we want we could also draw above rectangle as a small horizontal line with line-width equal to the height of the above rectangle. But that would involve more steps like creating a path and then drawing the line along the path, which is more complicated for this primitive shape.
  • 2’s Slant: The slant rectangle is just a simple rectangle but elevated to an angle of 35 Degrees. So to create a slant rectangle first we will translate the origin of the coordinate space (i.e., the transformation matrix) to the top edge of 2’s base rectangle using “translate( newX, newY)” and then rotate the coordinate space by 35 degrees in anti-clockwise direction, taking new origin as the pivot/center, by using the “rotate(radians)” method and then simply draw the rectangle using fillRect( x, y, width, height).
    ctx.save();
    ctx.fillStyle = "rgb(110,110,110)";
    ctx.translate(20,200);
    ctx.rotate(acDegToRad(35));
    ctx.fillRect(0,0,100,35);
    ctx.restore();
    
    Also note that how we have used save() before any manipulation and then used restore() after drawing, this makes sure that the translation and rotation of coordinate space does not affect rest of drawings we are about do later on. This way context state of the canvas always remains in previous state, in this case, the Initial state. Remember save() and restore() doesn’t save/restore the contents on the canvas, it just save/restore the state of properties/attributes like “fillStyle”, “strokeStyle”, “lineWidth”, etc and coordinate space on the <Canvas>drawing context.
  • 2’s Arc: The top arc of number “2” cannot be drawn by rectangle methods but can be simply drawn like a line arc whose line-width is equal to the height of previous rectangles. For creating any line shape we first start a path by calling “beginPath()” method, then call any shape method like “rect()”, “arc()”, “lineTo()”, etc to add them to path and then optionally call “closePath()” method to complete the path and start new one. For this step we will start a new path and add an arc to the path by using “arc(x,y,radius, startAngle, endAngle)” method. So far we have only created the path, to actually draw the arc on canvas we will call “stroke()” method. But since stroke will draw with default color, so before calling “stroke()“ we will set “strokeStyle” property of context to light gray.
    ctx.save();
    ctx.lineWidth = 35;
    ctx.beginPath();
    ctx.arc(77,135,40,acDegToRad(-40),acDegToRad(180),true); 
    ctx.strokeStyle = "rgb(110,110,110)";
    ctx.stroke();
    ctx.restore();
    

Drawing the “blue guy”

The next thing to be drawn is that blue guy coming out of the wall. This art consists of a wall, blue guy’s head, his tummy and then this hand & legs.
  • Wall: The wall is the just a simple slim and tall blue rectangle.
    ctx.save();	
    ctx.fillStyle = "rgb(0,160,212)";
    ctx.fillRect(162,20,8,300);		
    ctx.restore();
    
  • Head: The blue guy’s head is also a simple circle, but since we not have a direct method like “fillCircle()”, we’ll need to use a similar trick as we did for “2’s” arc. We will start a new path, add a full 360 degree arc and fill it with color. For filling we will use “fill()” method accompanied by “fillStyle” property set to light blue color, to fill the path with blue color thereby creating a filled circle.
    ctx.save();
    ctx.fillStyle = "rgba(256,256,256,0.75)";
    ctx.fillRect(0,0,300,350);
    ctx.fillStyle = "rgb(0,160,212)";
    ctx.beginPath();
    ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360));
    ctx.fill();		
    ctx.restore();
    
    A thing to note here is that when you create a path you have two options, either to call “stroke()” method to draw that path using current “strokeStyle”, as we did earlier and will do for hand and legs, or to call “fill()”method to fill the path with current “fillStyle”, as we did just now for head and will do for tummy. We also have an option of calling “clip()” method (discussed later).
  • Tummy: The tummy of the blue guy is also drawn by creating a triangle path and filling the triangle with blue color. To create the triangle path we first start a new path, move the initial drawing point from origin or any last position (lets it be O) to a point on the wall below the head using “moveTo(x, y)” method which moves the drawing point from current draw point to a new point (let it be A) without adding the line between O & A to the path, then use “lineTo( x, y)” method which moves the drawing point to a new point (let it be B) and also adds the line between A & B to the path. Similarly add the third point (let it be C) to complete the three points of the triangle. This will also add the line between B & C to the path. Now optionally you can use “lineTo( x, y)” method to go back to point A and add line between C & A to the path and thus closing the path but by default the “fill()” will automatically assume a line between opening and closing points and will fill the enclosed area.
    ctx.save();
    ctx.fillStyle = "rgb(0,160,212)";
    ctx.beginPath();
    ctx.moveTo(170,90);  //point A
    ctx.lineTo(230,140); //point B
    ctx.lineTo(170,210); //point C
    ctx.fill(); //fill area between ABC
    ctx.restore();
    
  • Hand: For hand we will simply create two lines as we did above. A to B for shoulder to elbow and B to C for forearm. But by default the line is 1px wide first we will set “lineWidth” property of context to 25px, then since line’s ends and joints (at B) are rectangular by default, we will set both “lineCap” property, for line ends and “lineJoin” property to “round”. And since we want lines to be drawn instead of filling the space between, we will call “stroke()” method of context.
    ctx.save();	
    ctx.lineWidth = 25;
    ctx.lineCap = "round";
    ctx.lineJoin = "round"; 
    ctx.strokeStyle = "rgb(0,160,212)";
    ctx.beginPath();
    ctx.moveTo(222,150);  //point A
    ctx.lineTo(230,190);  //point B
    ctx.lineTo(270,220);  //point C
    ctx.stroke();
    ctx.restore();
    
  • Leg: The leg can be drawn exactly as we drew the hand so code will be much same as above except for the coordinates.
    ctx.save();
    ctx.lineWidth = 25;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.strokeStyle = "rgb(0,160,212)";
    ctx.moveTo(160,210);  //point A
    ctx.lineTo(195,260);  //point B
    ctx.lineTo(160,290);  //point C
    ctx.stroke();		
    ctx.restore();
    
    But there is a problem with above code, the result leg doesn’t look like what we want. Part of the leg is hidden in the wall, so we need to clip the extra piece of leg from the drawing.
  • Clip Leg: With above code we didn’t got what we wanted but fret not, “clip()” method comes to rescue. Clip is similar to fill method but instead of filling the area enclosed by the path with some color, it creates an enclosed invisible boundary (outline of triangle is drawn in figure only to highlight the clip area) where any drawing on it clipped if it does not lie in the clipping region and only the drawing lying in the clipping region is shown. So to clip legs protruding through the wall, we’ll first create a clipping region by creating a triangular path with one of its side coinciding with the wall and then draw the leg same as we drew the hand.
    ctx.save();
    //code for drawing clipping region
    ctx.beginPath();
    ctx.moveTo(170,200);  //point A
    ctx.lineTo(250,260);  //point B
    ctx.lineTo(170,320);  //point C
    ctx.lineTo(170,200);  //back to point A to close the path
    ctx.clip();           //set the above path for clipping region
    //code for drawing leg
    ctx.lineWidth = 25;
    ctx.lineCap = "round";
    ctx.strokeStyle = "rgb(0,160,212)";
    ctx.lineJoin = "round";
    ctx.beginPath();
    ctx.moveTo(160,210);
    ctx.lineTo(195,260);
    ctx.lineTo(160,290);
    ctx.stroke();		
    ctx.restore();
    
And that’s all we need to do to create the that Portal 2 Logo, Below is an animated canvas showing all the pieces we used to draw it (in fact every image in this article is actually drawn on the <Canvas> elements) accompanied by complete combined code I used to draw it. So I hope that you liked this article and stay tuned for my next post where I will discuss 2D animation on <Canvas>.

(Actual Source Code)


(function(){
    var ctx = document.getElementById("portalcanvas").getContext("2d");
	//function to convert deg to radian
    var acDegToRad = function(deg){
			return deg* (-(Math.PI / 180.0));    
		}

	//save the initial state of the context
	ctx.save();		
	//set fill color to gray
	ctx.fillStyle = "rgb(110,110,110)";
	//save the current state with fillcolor
	ctx.save();

	//draw 2's base rectangle
	ctx.fillRect(20,200,120,35);
	//bring origin to 2's base
	ctx.translate(20,200);
	//rotate the canvas 35 deg anti-clockwise
	ctx.rotate(acDegToRad(35));
	//draw 2's slant rectangle
	ctx.fillRect(0,0,100,35);
	//restore the canvas to reset transforms
	ctx.restore();
	//set stroke color width and draw the 2's top semi circle
	ctx.strokeStyle = "rgb(110,110,110)";
	ctx.lineWidth = 35;
	ctx.beginPath();
	ctx.arc(77,135,40,acDegToRad(-40),acDegToRad(180),true);
	ctx.stroke();

	//reset canvas transforms
	ctx.restore();

	//change color to blue
	ctx.fillStyle = "rgb(0,160,212)";
	//save current state of canvas
	ctx.save();
	//draw long dividing rectangle 
	ctx.fillRect(162,20,8,300);
	//draw player head circle
	ctx.beginPath();
	ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360));
	ctx.fill();

	//start new path for tummy :)
	ctx.beginPath();
	ctx.moveTo(170,90);
	ctx.lineTo(230,140);
	ctx.lineTo(170,210);
	ctx.fill();

	//start new path for hand
	//set lineCap and lineJoin to "round", blue color 
	//for stroke, and width of 25px
	ctx.lineWidth = 25;
	ctx.lineCap = "round";
	ctx.strokeStyle = "rgb(0,160,212)";
	ctx.lineJoin = "round";
	ctx.beginPath();
	ctx.moveTo(222,150);
	ctx.lineTo(230,190);
	ctx.lineTo(270,220);
	ctx.stroke();

	ctx.beginPath();
	ctx.moveTo(170, 200);
	ctx.lineTo(250, 260);
	ctx.lineTo(170,320);
	ctx.clip();	

	//begin new path for drawing leg
	ctx.beginPath();
	ctx.moveTo(160,210);
	ctx.lineTo(195,260);
	ctx.lineTo(160,290);
	ctx.stroke();
	
	//restore the context back to its initial state
	ctx.restore();
})()
READ MORE - Introduction to HTML5 <Canvas>: Part 2 (Example)

Sunday, March 27, 2011

Posted by SAMAJ SHEKHAR

0

How to: Create a Twitter widget in your blog


So this my next attempt, after Google Code Prettify which i explained in previous post, to add custom features to my blog. In this post I'll explain how I made that Twitter Feed box you see in widgets column.

It uses little bit of HTML, CSS3 Styling and and jQuery to do the magic. I 'll give you a walk-through of how "I made it". I actually started this small app when someone at StackOverflow asked how to embed Tweet' text's special words like @usernames, #Hashtags and Url's in an anchor (<a>) tag, i wrote some small JS code to take raw tweet string Linkify it and return HTML. Later i moved on create a tweet box for my own Blog. in this walk-through to create a Tweet Feed Box for @samajshekhar (which is me of-course), so code and HTML are hard-coded with values related to my account but you can change it very well.
(The HTML and jQuery script is downloadable from my repository at Bitbucket, you can check it out and fork it to add custom features and styling).

Before starting i assume you have a little bit of knowledge of basic HTML, CSS (actually CSS3 for curves and gradients), jQuery library and some understanding of Twitter's API (its easy to understand and simple), I am using Public timeline API to get tweet in JSON format without authentication so we have a Rate-Limit of 150 requests per hour. So keeping these things in mind lets start!

The HTML

The HTML for the Tweeter Feed Box is simple collection of div(<div>) tags which make up skeleton to contain tweets. It contain hard coded username @samajshekhar (which is my username at Twitter).

<div>
    <div id="SPTFB">
        <div id="SPTFBHeader">  
         <a href="http://www.twitter.com/samajshekhar" target="_blank" style="text-decoration:none;color:#333;">
             <img alt="@samajshekhar" src="http://a2.twimg.com/a/1299109335/phoenix/img/twitter_logo_right.png" style="border:none;"/>
             <span>@samajshekhar</span>
         </a>
        </div>
        <div id="SPTFBBody">
             <span id="SPTFBLoading" style="display:block;font-size:10px;" class="SPTFBLoading">loading tweets...</span>
        </div>
        <div id="SPTFBFooter">   
            <table cellspacing="0px" cellpadding="0px">
                <tr>
                    <td>Developed By <a style="color:Black;" rel="author" href="http://shekhar-pro.blogspot.com">Samaj Shekhar</a><br/>License: Creative Commons</td>
                    <td><a style="color:White;" id="ShekharProCCLicenseLogo" rel="license" href="http://creativecommons.org/license/by/2.5/">cc</a></td>
                </tr>
            </table>      
        </div>
    </div>
</div>

Where:
SPTFB: is the main <div> which contains all the elements of this Twitter Feed Box (actually SPTFB is the acronym for Shekhar Pro Twitter Feed Box).
SPTFBHeader: is the <div> which act as title bar and contains the Twitter @username with a twitter image.
SPTFBBody: is the <div> in which all tweets are shown.
SPTFBLoading: is a <span> element which just shows a loading... text while we dynamically insert Tweets.
SPTFBFooter: is the Footer <div> contains my attribution and a link to Creative Commons page.

The Tweet text's <div> which will be added later will have a CSS class of ".SPTFBFeed"

The CSS

The CSS is what makes this app look like it should. Match the styling with the element id and class in the above shown HTML.

<style type="text/css">
    #SPTFB /*Acronym for ShekharProTwitterFeedBox*/
    {
        width:230px;
        height:450px;            
        padding:0px;            
    }
    #SPTFBHeader
    {
        height:40px; 
        padding:3px 0px 0px 10px;
        margin:0px;
    }
    #SPTFBBody
    {
        height:360px;
        margin:2px;
    }
    #SPTFBFooter
    {
        height:30px;
    }
    #SPTFB
    { 
        -moz-border-radius:20px 1px 1px 1px;
        -webkit-border-radius:20px 1px 1px 1px;
        border-radius:20px 1px 1px 1px;
        border:2px solid #9C9C9C; 
        background-color:#9C9C9C; 
    }
    #SPTFB a
    {
        text-decoration:underline;
        color:#666;            
    }
    #SPTFBHeader
    {            
        -moz-border-radius:18px 0px 0px 0px;
        -webkit-border-radius:18x 0px 0px 0px;
        border-radius:18px 0px 0px 0px; 
        border:1px hidden azure;
        font-family:Verdana;
        font-size:16px;
        overflow:hidden;
    }
    #SPTFBHeader , #ShekharProCCLicenseLogo
    {    
        background-color:#9C9C9C;
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.3, rgb(156,156,156)),
            color-stop(0.88, rgb(219,219,219))
        );
        background-image: -moz-linear-gradient(
            center bottom,
            rgb(156,156,156) 30%,
            rgb(219,219,219) 88%
        );
        overflow:hidden;
    }
    #SPTFBBody
    {
        -moz-border-radius:4px 4px 4px 4px;
        -webkit-border-radius:4px 4px 4px 4px;
        border-radius:4px 4px 4px 4px; 
        border:1px solid #888888;
        background-color:#efefef;
        overflow-y:auto;
        overflow-x:hidden;            
    }
    #SPTFBFooter
    {
        font-family:arial;
        font-size:11px;
        color:White;
        text-decoration:none;
        padding:5px 0px 0px 20px;
    }
    #ShekharProCCLicenseLogo
    {
        -moz-border-radius:50%;
        -webkit-border-radius:50%;
        border-radius:50%; 
        border:1px solid #666666;
        height:26px;width:26px;
        font-family:Verdana;
        font-size:18px;
        font-weight:bold;
        text-align:center;
        color:White;
        text-decoration:none !important;
        display:block;
        margin:0px 0px 0px 20px;padding:0px;
    }
    .SPTFBFeed , .SPTFBLoading
    {
        background-color:#d0d0d0;
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.25, rgb(179,179,179)),
            color-stop(0.75, rgb(224,224,224))
        );
        background-image: -moz-linear-gradient(
            center bottom,
            rgb(179,179,179) 25%,
            rgb(224,224,224) 75%
        );
        border:1px solid #888888;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px; 
        margin:3px;
        padding:3px;
        font-family:arial;
        font-size:13px;
        font-weight:normal;
        color:black;            
    }
</style>

There's nothing complicated about above CSS its simply contains styles related to margins, size, etc just go through and you will know what it does. It also has default colors with gradients so that it appears with matching color where gradients are where its not supported like in IE. If you don't know how to make gradients then there is a nice CSS3 Gradient Generator which you can use.

The Code !

The last and most important one is the code which does the actual work of filling the box with tweets. Now i know some JavaScript ninjas may frown at my code but this is what "I made" and you are free to improve it, however if you see anything obvious then add a comment and I will correct it. It small JavaScript that uses jQuery, so remember to include the jQuery in your document before using following code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

The code can be divided in two parts, one is simple one which linkifies the tweet text, i.e surrounds the url's, #hashtags and @usernames in an anchor (<a>) tag and other is the code which actually brings in the tweets from Twitter

Code for Linkifier
var userNameRegEx = /@(\w*)\b/;
var hashTagRegEx = /#(\w*)\b/;
var urlLinkRegEx = /(^|[(\s]|&lt;)((?:(?:https?|ftp):\/\/|mailto:).+?)((?:[:?]|\.+)?(?:\s|$)|&gt;|[)])/;
function myTwitterLinkify(rawText) {
    var stringArray = rawText.split(' ');
    var stringStack = [];
    $.each(stringArray, function () {
        if (userNameRegEx.test(this)) {
            var userlink = '<a href="http://twitter.com/' + userNameRegEx.exec(this)[0].toString().replace('@', '') + '">' + this.toString() + '</a>';
            stringStack.push(userlink);
        }
        if (hashTagRegEx.test(this)) {
            var userlink = '<a href="http://twitter.com/search?q=' + escape(hashTagRegEx.exec(this)[0].toString()) + '">' + this.toString() + '</a>';
            stringStack.push(userlink);
        }
        if (urlLinkRegEx.test(this)) {
            var userlink = '<a href="' + urlLinkRegEx.exec(this)[0].toString() + '">' + this.toString() + '</a>';
            stringStack.push(userlink);
        }
        if (!userNameRegEx.test(this) && !hashTagRegEx.test(this) && !urlLinkRegEx.test(this)) {
            stringStack.push(this);
        }
    });
    return stringStack.join(' ');
}

Working of above code can be explained in following simple steps:

  1. Define Regular expression strings for each of @usernames, #hashtags and url.
  2. Take the string and split it for ' ' (space)into an array of words
  3. Take each word at a time and match it with all regular expression strings
  4. If a match is found then surround the word with anchor (<a>) tag and set its href="" attribute with respective url's and push the resultent string the stack, if not then simply insert that word in the stack.
    (usually its http://twitter.com/username for @username, http://twitter.com/search?q=hashtag for #hashtag and for urls just use the url itself.)
  5. Finally join the stack values with a ' ' (space) and return the complete string.
Code to fill tweets
var username = 'samajshekhar';  /* @username of the user at twitter*/
var format = 'json';            /* format in which to recive response, can be on of json, xml, rss, atom*/
var count = '6';                /* number of tweets to load*/
var include_retweets = 't';  /* wheather to include retweeets by user in timeline, can be true, t or 1*/
    /*the API uri at which we will make the call to get tweets*/
var theapiurl = 'http://api.twitter.com/1/statuses/user_timeline.' + format + '?callback=?';
var fillReqSucceded = false; /**/
var sptfbFillTimer = 'undefined'; /**/

/*
Function to fill tweets in the tweet box
*/
function fillTweets() {
    /*show loading... span*/
    $('#SPTFBLoading').fadeIn('slow');
    $.getJSON(theapiurl,
        {
            /*query string parameters to be passed to the api url*/
            screen_name: username,          /* @username of the user at twitter*/
            count: count,                   /* number of tweets to load*/
            trim_user: 't',                 /* whether to include extra information related to user profile,can be true, t or 1*/
            include_rts: include_retweets   /* whether to include retweets by user in timeline, can be true, t or 1*/

        },
        function (data) {
            /*remove all previous tweets already in the box*/
         $('.SPTFBFeed').remove();
         /*read each tweet linkify  its text and append it to #SPTFBBody <div> */
         $.each(data, function () {
                 var elem = $('<div/>');
                 elem.addClass('SPTFBFeed').html(myTwitterLinkify(this.text));                                                        
                 $('#SPTFBBody').append(elem);
         });
         /**
          *if we reached this far then we surely succeed in getting
          * tweets and filling it in the box, so just remove the loading... span
          */
         fillReqSucceded = true;
         $('#SPTFBLoading').fadeOut('slow');
        });
    /**
     *if this is NOT the first time we are flling tweets and we didn't succeed then 
     *show error in span schedule next fill after 20 seconds and exit this function
     */    
    if (sptfbFillTimer != 'undefined' && fillReqSucceded === false) {
        $('#SPTFBLoading').html('Problem in loading Tweets :(<br/><br/>Please wait while we try again...').css({ 'color': 'red' }); 
        sptfbFillTimer = setTimeout('fillTweets()', 20000); 
        return; 
    }
    /*if we reached this far then all is well and lets schedule the next fill to occur after 30 seconds*/    
    sptfbFillTimer = setTimeout('fillTweets()', 30000);
    /*just reset the style of loading... span as previous failure may have changed it*/
    $($('#SPTFBLoading').html('loading tweets...')).css({ 'color': 'black' });
}

This 'fillTweets()' method is the one which you are going to call when you are ready to load Tweets like at '$(document).ready();'. Now the for the working of above code comments are well enough , also as you can see we have defined some variables to store configuration related to the API uri on which we will make GET request to receive the JSON for tweet (we can also request XML for tweets, but we will need to change the code for that). Also note that we have included a 'callback=?' parameter to make the JSON response a JSONP.

And that's all you need to do. Below is the snapshots f how it looked in Firefox3,4 and IE9


READ MORE - How to: Create a Twitter widget in your blog

Saturday, March 5, 2011

Posted by SAMAJ SHEKHAR

2

Google Code Prettify


For a long while code snippets on my blog were inconsistently formatted as i always kept experimenting with CSS for code and every post came out with its own formatting, sometimes i used tools on web to format my code and give me the HTML, so it looked very awful. Recently i found out "Google Code Prettify", its a java-script code which contains those lexers to recognize the code and format it appropriately accompanied by a CSS which you can of-course customize it to suit your needs. Its easy to use and supports almost all languages, from java to Haskel and all C family languages. Though there is a readme at Google code website here are the steps to add it to your blog or website.

Setup

  • Download a distribution
  • Include the script and style-sheets in your document (you will need to make sure the css and js file are on your server, and adjust the paths in the script and link tag)
  • <link href="prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="prettify.js"></script>
  • Add onload="prettyPrint()" to your document's body tag.
  • Modify the stylesheet to get the coloring you prefer
  • Usage

    Put code snippets in <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> and it will automatically be pretty printed. The original
    class Voila {
    public:
      // Voila
      static const string VOILA = "Voila";
    
      // will not interfere with embedded tags.
    }
    Prettier (I have applied custom CSS on my blog so it will be different then what you'll get)
    class Voila {
    public:
      // Voila
      static const string VOILA = "Voila";
    
      // will not interfere with embedded tags.
    }
    So as it says you will need to download it on your own server and then link it in your script tag, but for your (and my own) convenience i have hosted it at Bitbucket DVCS Source Code hosting site. On the download page you will find the minified versions of the prettify.js(19kb) and prettify.css(1kb)

    So your tags become:

    <link href="http://cdn.bitbucket.org/shekharpro/google_code_prettify/downloads/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="http://cdn.bitbucket.org/shekharpro/google_code_prettify/downloads/prettify.js"></script>
    READ MORE - Google Code Prettify

    Saturday, January 1, 2011

    Posted by SAMAJ SHEKHAR

    0

    Serializing and Deserializing Data from Json to .Net Objects. ( Example Facebook Feeds)


    A very very Happy New Year to you all. I thought why not start this year with a nice blog post, so here i am with a post on how to Deserialize data from Json to a .Net Object and back again.Many libraries exist for this Job most notabely the Json.Net and Dynamic Rest library by Nikhil Kothari

    But developer community has always asked why microsoft didn't have it in the Frame work. Well now they have one. It comes in frame work now with an added dll of "System.Web.Extentions.dll". That provides us the Class JavascriptSerializer which you can use by including a using statement as follows.

    using System.Web.Script.Serialization;
    

    Before going into the code, let us first understand what is JSON, and what is its significance in the modern world of web applications.

    What is JSON?

    JSON is another format of expressing data, just like XML. But, JSON is very simpler than XML, and tiny than XML. So, it is becoming popular in the web world to choose the JSON notation over XML since JSON notation are usually shorter, and less data to be transmitted if at all they were to be.

    A Simple Example

    So lets understand this process with an example, since i am currently working on a project which uses facebook to query data, i think this will be helpful to the facebook developer community also. So first you need to define a class that matches the JSON object you are receiving. like a class if a Data in Json looks like below.

    {
    "obj1":"data",
    "obj2":"10004",
    "obj3":{
          "subobj1":"data",
          "subobj2":"data"
          }
    "obj4":"data"
    }
    

    Then the corresponding class for that in .Net will be

    public class MyObj1
    {
        public string     obj1 { get; set; }
        public int        obj2 { get; set; }
        public MyObj2     obj3 { get; set; }
        public string     obj4 { get; set; }
    }
    
    public class MyObj2
    {
        public string subobj1 { get; set; }
        public string subobj2 { get; set; }
    }
    

    Notice The obj3 in Json is a completely different class as it contains sub fields so a different class fo that in .Net. Also Remember JavascriptSerializer uses reflections to match field or property "names" with that in "Json" so be careful.

    Now to deserialize above Json data to the .Net classes juat include the following line.

    JavaScriptSerializer sr = new JavaScriptSerializer();
    string jsondata = /*your json string here*/;
    //Now with this line the Json string will be converted in MyObj1 object type
    MyObj1 converted = sr.Deserialize<MyObj1>(jsondata);
    
    Facebook Example (Deserializing Facebook Feeds)

    Now the data returned by facebook's Graph API is also in Json and below is an sample data returned by

    http://graph.facebook.com/samajshekhar/feed?limit=1

    {
       "data": [
          {
             "id": "100000570310973_182862925076050",
             "from": {
                "name": "Samaj Shekhar",
                "id": "100000570310973"
             },
             "message": "#Wow A decade has passed .. #Happy New year to every one....May this new  year be the most luckiest for you and every one.",
             "icon": "http://photos-d.ak.fbcdn.net/photos-ak-snc1/v27562/23/2231777543/app_2_2231777543_9553.gif",
             "actions": [
                {
                   "name": "@samajshekhar on Twitter",
                   "link": "http://twitter.com/samajshekhar?utm_source=fb&utm_medium=fb&utm_campaign=samajshekhar&utm_content=20985773201301504"
                }
             ],
             "type": "status",
             "application": {
                "name": "Twitter",
                "id": "2231777543"
             },
             "created_time": "2010-12-31T23:32:54+0000",
             "updated_time": "2010-12-31T23:32:54+0000"
          }
       ],
       "paging": {
          "previous": "http://graph.facebook.com/samajshekhar/feed?limit=1&since=2010-12-31T23%3A32%3A54%2B0000",
          "next": "http://graph.facebook.com/samajshekhar/feed?limit=1&until=2010-12-31T23%3A32%3A53%2B0000"
       }
    }
    

    Don't get confused its just little more data of different types including arrays. ( To get data from facebook you can use System.Net.HttpWebRequest and System.Net.HttpWebResponse class). So Now the equivalent .Net classes will be as follows.

    Note:

    I have included only the classes needed for the above feed for a complete class that accommodate all fields returned in feed with and without access token can be found here at

    http://thesharepage.codeplex.com/SourceControl/changeset/view/5405#100657

    public class FacebookFeedsWithoutToken
    {
     public FacebookFeedWithoutToken[] data { get; set; }
     public ReturnedDataPaging paging { get; set; }
    }
    
    public class FacebookFeedWithoutToken
    {
     public string id { get; set; }
     public NameIdPair from { get; set; }
     public string message { get; set; }
     public Uri icon { get; set; }
     public NameLinkPair[] actions { get; set; }
     public string type { get; set; }
     public NameIdPair application { get; set; }
     public DateTime created_time { get; set; }
     public DateTime updated_time { get; set; }
    }
    
    public class NameIdPair
    {
     public string name { get; set; }
     public string id { get; set; }
    }
    
    public class NameLinkPair
    {
     public string name { get; set; }
     public Uri link { get; set; }
    }
    

    Now the classes are ready we just need to convert from json string to .Net object types. add the following line similar to above.

    JavaScriptSerializer sr = new JavaScriptSerializer();
    string jsondata = /*your json string here*/;
    FacebookFeedsWithoutToken converted = sr.Deserialize<FacebookFeedsWithoutToken>(jsondata);
    

    Thats all you have to do.

    And once again Happy new year.

    READ MORE - Serializing and Deserializing Data from Json to .Net Objects. ( Example Facebook Feeds)