# Weblog Of RajuDasa

## C# convert Roman Numbers to Decimal Numbers

Hi,

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.

## Corner Peel for webpage

Hi,
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).

References:
http://forums.asp.net/t/1811361.aspx/1?HTML+CSS

http://files.myopera.com/RAJUDASA/web/Corner_Peel.html

## Aquarium Animation using HTML5

Hi, 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 post - Aquarium Simulation (which works only in IE browser).
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

Features:
• 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.

References:
https://developer.mozilla.org/en/Canvas_tutorial/Using_images
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

http://files.myopera.com/RAJUDASA/Aqua/Canvas_shape.html

## 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/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!)

Automatic Background-Changer

## Tip: Image(binary) to Base64 conversion for DataURI using VisualStudio

Below are the steps needed for this conversion:
Open VisualStudio, add new resource file(resx) item, add existing images (from filesystem) to this file by clicking, AddResource -> Add Existing File. Select image on window(resx) - go to properties tab, change property: Persistence to 'Embedded in .resx' and save the file.
Now open this file (resx) with Notpad or any text editor (easy way is renaming file to .xml) and copy the base64 encoding for respective image and use it as DataURI for the <img> tags. Create a HTML file with <img> tags filled with DataURI, save this html file and open it directly from filesystem (IE8 not works, so try hosting this page on web server-IIS).
Ex:
<img src=" AAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1 I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAA AAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D">
Note:
Ex: encode data>
• careful ie8 limits the image size to 32kb. try to use appropriate sizes for ie8.
• ie9 now accepts upto 4gb of dataURI.

## Creating Mirror-shadow for Text and Image

Hi,

Here I am going to share some HTML5/CSS3 coding, to achieve creating Text shadow/mirroring (full reflection) using 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 atlast with 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 have used 3 DIV containers.
>and then applyed the styles like, Matrix Origin-changing and then Rotating the text and Skewed it to some degrees.
>and atlast applying the color(grey), all using the CSS.

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

Now its time to achieve with Image, reflection/mirror using CSS3:
>Follow the same steps described above
>instead of text, we use image in one of the DIV
>and 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

One point to mention, you can see in code, the repetition of code (CSS) 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!

## Dynamically Create & Change background-Image

Hi,
I will show you how to Dynamicaly create and change the background-image in a webpage using canvas and javascript. It works in modern browsers (supporting Canvas & toDataURI() objects), not in IE8.
Security problem in FF, if opened from filesystem.

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

Background-Changer

## Resolving Client-side Asp.Net Control ID

Hi,

I just wrote a javascript code which tries to resolve Asp.Net Control ID at clientside(browser).

Although we have many javascript libraries on internet which does solves these kind of problems (like jquery, prototype etc.), but their size is of concern and they provides features we may not use them at all, which may become performance effect at clientside.
So, if you are after which just resolves Asp.Net Control ID, then download my javascript file and have a try.

Tested in modern browsers like IE8, FF3.6, Opera11, chrome8.

If any issue arises with older browsers, correct the code for ur purpose.

Usage: Functions to call

getObject(param1,param2,param3);

param1-> string, id of the AspNetControl/Html element.(optional if param2 used).

param2-> string, TagName (optional).

param3-> boolean, False->return single Object; True-> return Array of matching objects.
(optional,default->false).

GetInputType(param1,param2);

Dependent function on above function. use if TagName='INPUT'

param1->Array, array of DOM Elements (required).

param2->string, TYPE attribute of the INPUT tag.

Returns->Array-of-objects if param3 in above function is true, else returns undefined.

Examples:

-------------[example-1]

var obj=new rootObj();

var myObj = obj.getObject('AspnetControlID'); //get single object

if(myObj!=undefined)
{

//remove alert() above and call ur function
//or write ur code here.
}

-------------[example-2]

var obj=new rootObj();

//Get all INPUT tags having relative IDs
var myObj = obj.getObject('InputCtrlID','INPUT',true);

myObj = obj.GetInputType(myObj,'TEXT'); // of TYPE=text only

if(myObj!=undefined)
{

for(var i=0;i<myObj.length;i++)
{
}

}

-------------[example-3]

var myObj = obj.getObject('','input',true); //Get all INPUT tags

//myObj = obj.GetInputType(myObj,'text'); // of TYPE=text

if(myObj!=undefined)
{
//for(var i=0;i<myObj.length;i++) { ur code here }
//or do ur work here.
}

Download the zip file which contains javascript code file and minified code file.

Hi,

Below are the sample code files which supports my Blog posts.

Check my work at Dev Derby Competition, Converting Color Video to Gray-scale (B&W) using HTML5.
Download code for small web-project using Asp.Net (CRUD operations using: Linq2Sql, WebService(asmx), ObjectDataSource, GridView).
Download the zip file containing source code for, PetStore (using Knockout and IndexedDB)
Check my work at Dev Derby Competition for Dec 2012 - offline: eDiary- 2013

## Sample example on Web Database API

Hi,

Here iam going to briefly explain (with sample) on web database API.

Web Database API or Client-side Database is one of the HTML 5 feature.
Modern Browsers are providing client-side database, as of now, opera 10.6 and chrome 4+ (may be safari too) are supporting this feature. IE9, FF4 may support this feature in their final release.

Most web browsers are likely to implement this embedded database feature using "sqlite". check this site for proper usage or supported SQL statements: www.sqlite.org

In this sample example, iam creating a table called "MyTable" with 3 columns: id, first name, last name.
The UI provides, CreateTable, DropTable, AddRecords, ShowTable buttons and status text and result in Table.
Below is the screenshot from Opera.

For support in older browsers, you need to install GoogleGears plugin.
(most of the features of GoogleGears are now included in HTML5).

Points to note:
• If you are dealing with data, always write your logic (javascript code) in the callback functions, since it works in async manner.

• Don't open multiple instances of database connections, it's allowed, but it's better to create one and make it globally accessable.

You can find the same post here.

References:sites:

December 2013
M T W T F S S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31