Friday, November 7, 2014

Accessing Class Properties by Indexer

Below sample code in C# explains how we can access any class properties by indexer also by modifying that class as below to make it support that functionality.

public class Sample
    Dictionary<string,dynamic> dic;
    int _id;
    public int Id{
        get{ return _id; }
        set{ _id=value; dic["Id"]=value; }
    string _name;
    public string Name{
        get{ return _name; }
        set{ _name=value; dic["Name"]=value; }
    bool _adult;
    public bool IsAdult{
        get{ return _adult; }
        set{ _adult=value; dic["IsAdult"]=value; }
    public Sample(){
        dic = new Dictionary<string,dynamic>();
        //Add properties with their default value
        foreach(var item in this.GetType().GetProperties()){
            try{ dic.Add(item.Name,item.GetValue(this)); }catch{ /*ignore Indexer property*/ }
    public dynamic this[string propName]{
                return dic[propName];
            else return null;  
            var prop = this.GetType().GetProperty(propName);
            if(prop != null)
                prop.SetValue(this, value);

And below is the code for updating and accessing the properties by Indexer.

//Accessing Object Properties by Indexer
    Sample obj = new Sample();
    obj.Id = 1;
    obj["Id"] = 3;
    obj["Name"] = "Alice";
    obj["IsAdult"] = true;

If you have any suggestions or comments, share it in Comments section.

Download above code as Linqpad code file:

Friday, February 7, 2014

Corner Peel for webpage


    Here i will show you, how to create a Corner Peel also called Dog Ear for a webpage. Check the Demo or copy the source using link provided below.

The main features are:
  •  The Corner Peel technique is extended to have image generated dynamically using Canvas, javascript. If you wanted to you change its color & size as per your requirement or, if you want to use static image file instead, you can easily customize the javascript (and CSS) code. 
  • Animation is added while corner peel in idle, it moves up and down (using JQuery). If you dont require animation, you can disable it by customizing the jquery code.
  • This sample webpage is a standalone webpage, no external files are referenced except jquery. This webpage contains, HTML, javascript, jquery, CSS.

The background for the corner peel should be a difference image (for next page) upon click, it will redirect to the next page. I have not used any image instead applied static content (Next Page =>), you can customize it to have an image via CSS (background image).
 I haven't write the whole code for this sample, i copied the required snippets from some site, customized it to have dynamic image and Animation.

Tested with: FireFox13, IE9, Opera11. (Should work in all Canvas supporting browsers).


Demo (and save locally) link:   Check the demo here!

C# convert Roman Numbers to Decimal Numbers


    Just want to share a C# code which converts Roman Numbers to Decimal Numbers. Use only valid Roman Numbers while testing (all caps and accepted sequence) and use .Net 3.5 and above.
public int RomanToNumeric(string romanNum)
        int[] ints = romanNum.ToCharArray().Select(x => { return x=='I' ? 1 : x=='V' ? 5 : x=='X' ? 10 : x=='L' ? 50 : x=='C' ? 100 : x=='D' ? 500 : x=='M' ? 1000 : 0; }).ToArray();
        int calc = 0;
        for(int i=0;i<ints.Length;i++)
            int mult = (i+1 < ints.Length && ints[i+1] > ints[i]) ? -1 : 1;
            calc += mult*ints[i];
        return calc;

code process:
  • convert string to char array. 
  • convert each char (roman number) to its equivalent decimal number and stores them in array. 
  • Iterating over array, check whether low number is left side next to high number if yes, remove that low number from high number else add both numbers. 
  • Assumes only one low number comes left side and max 3 low numbers right side at a time of high number. (Ex: IV & VIII) 

 Try invoking the above method with these sample Roman Numbers:
"MMXIII" -> 2013; DCCCXLI -> 841; MCMLXVII -> 1967; XIX -> 19

 Comment if you have any suggestions or alternative code.

Aquarium Animation using HTML5


    I did a simple Animation using Html5 Canvas. It emulates an Aquarium with a single fish. This post is the enhancement/continuation to my previous work - Aquarium Simulation (which works only in IE browser without canvas, you can find it for download).

Both gradient-background and fish images are generated on the fly using canvas. Fish is generated once and based on the direction its moving, is reused and rotated, Whereas background will be re-generated (with canvas refresh) each time the fish moves.
When the fish reaches any side of end, it will have 3 directions (to choose) to move, decision will be taken by random. Based on the direction chosen, fish image will be rotated and animation continues. Animation starts automatically (after page load) and a Stop button is provided to stop it anytime!

Above is the screenshot of Aquarium

  • Animation using HTML5/Canvas.
  • No image files used (dynamically resources generated like: fish, background).
  • Single standalone Html page.

Tested with latest browsers: FireFox, Chrome, Opera, IE9.


Demo & Download link:

Thursday, February 6, 2014

Creating Mirror-shadow for Text and Image


    Here I am going to share some coding to achieve special effects - creating Text shadow/mirroring (full reflection) - using (HTML5) Canvas and CSS3.

 Now I Start first explaining with Canvas (& javascript):
  •  Write the Text (Raju Dasa) on Canvas with some styling & color. 
  •  Then again I write the same Text on Canvas but, now with changing matrix-transformation (axis-change). 
  •  And at last I applied some styling, coloring and rotating the Text. 

Below is the screenshot for Canvas-Text-Shadow from Firefox

Now its time to achieve the same effect using CSS3:
  • To achieve shadow/mirror with CSS, I used 3 DIV containers.
  • And then applied the styles like, Matrix Origin-changing, rotating the text and skewed it to some degrees.
  • And at last applying the color (grey), all using the CSS.

Below is the screenshot for CSS-Text-Shadow from Firefox

Now its time to achieve reflection/mirror using CSS3 on Image:
  • Follow the same steps described above, instead of text, we use image in one of the DIV. 
  • Add same image as background to another DIV with required fixed-height. 
  • Add the opacity and position (like SPRITE) to the background-image. 

 Below is the screenshot for CSS-Image-Shadow from Firefox

Point of note: in code, you will see the repetition of CSS rules for each specific browsers!
Tested with Opera 11, FF 3.6, Chrome.

 Its easy to achieve mirror-shadow with CSS than with Canvas.
Hope you like this post!

   download the Zip file here!

Automatic Background creation with Linear Gradient colors


    In continuation of my previous post on background generation using javascript, this post aims at refining and advancing in automatic Background changing.

    I accomplished this using Canvas from javascript (browser side) and no server-side coding or images used or needed. but your browser should be modern, supporting HTML5 (Canvas).
   What the javascript code does is, it automatically generates the random starting-color and ending-color required for the linear-gradient to work.

 below are the screenshots in action with gradient background in firefox.

I have tested it in Firefox 6 & Opera 11.

There is an alternative using CSS to apply gradient-colors as background, but it seems only supported in Firefox. If you know or found any alternative, suggestion share here in comments.

 You can even save color (allowing for end-user), just add StartColor and EndColor (for gradient) into a Cookie, and read from this cookie whenever user opens again (not implemented in code)!
You can even save this background-image (from firefox), and i found its <2KB in size.

 If you want to test or extend it, try it on Opera (supports, run from filesystem and flicker free!)

 For code download or sample demo,
check this link: Automatic Background-Changer

Dynamically Create & Change background-Image

   Here I will show you how to dynamically create and change the background-image in a webpage using canvas and javascript. It works only in modern browsers (supporting Canvas & toDataURI() objects), but not in IE8. You may face security issue in Firefox, if opened from filesystem.

 Below is the screen-shot of background-image, after clicking the button:

For code download or sample demo,
check this link: Background-Changer