Own My Code - AngularJS, JS, JQuery, C,C++,C Graphics,Mini Project,Computer Programming

Things you may not know about Javascript Objects

2017-01-06T04:20:00.001+05:30

Object Properties:

An Object is a non primitive data with collection of properties(key, value). Each property(key) of an Object has following configurable properties,

value - value of the property. Default: undefined
enumerable - if true, the property can be accessed using a for..in loop and Object.keys. Default: false
writable - if true, the property value can be modified. Default: false
get - defines a getter function. Default: undefined
set - defines a setter function. Default: undefined
configurable - if true, all the properties can be modified and deleted. Default: false

With Object.defineProperty and Object.defineProperties we can set the above configurable properties for an Object property(key).

With Object.getOwnPropertyDescriptor and Object.getOwnPropertyDescriptors we can get the above configurable properties associated with an Object property(key).

example:

var x = { a:1, b:2 };

Object.getOwnPropertyDescriptor(x, 'a'); 
// {value: 1, writable: true, enumerable: true, configurable: true}

Object.freeze()

This method prevents an Object from,

New Properties being added
Modify existing properties
Delete existing properties
Configuring the object properties

But still the inner object properties can be modified. To deep freeze the whole object, we have to recursively freeze the non primitive values (Object).

So the property description for each property in an object will be,

writable: false
enumerable: true
configurable: false

example:

var x = {
a:1, 
b:2, 
c:{
d:3
}
};

var y = Object.freeze(x);
    
    Object.getOwnPropertyDescriptor(x, 'a'); //{value: 1, writable: false, enumerable: true, configurable: false}

x===y; //true

x.a; //1
x.a = 5; //silently fails. In strict mode - throws a TypeError
x.a; //1
x.m = 5; //silently fails. In strict mode - throws a TypeError
x.m; //undefined

x.c.d; //3
x.c.d = 5; //since it is not a primitive value, still it allows to modify internal properties of 'c'
x.c.d; //5

Object.defineProperty(x, 'n', { value: 10 }); //throws a TypeError
Object.defineProperty(x, 'a', { value: 20 }); //throws a TypeError

Object.isFrozen(x); //true
Object.isExtensible(x); //false

Object.seal()

This method prevents an Object from,

New Properties being added
Delete existing properties
Configuring the object properties

It allows the value of an existing properties to be modified.

So the property description for each property in an object will be,

writable: true
enumerable: true
configurable: false

example:

var x = {
a:1, 
b:2, 
c:{
d:3
}
};

var y = Object.seal(x);

Object.getOwnPropertyDescriptor(x, 'a'); //{value: 1, writable: true, enumerable: true, configurable: false}

x===y; //true

x.a; //1
x.a = 5; //since it is writable. the value can be changed
x.a; //5

x.m = 5; //silently fails. In strict mode - throws a TypeError
x.m; //undefined

Object.defineProperty(x, 'n', { value: 10 }); //throws a TypeError
Object.defineProperty(x, 'a', { value: 20 }); //allows to modify value

x.a; //20

Object.isSealed(x); //true
Object.isExtensible(x); //false

AngularJs Interpolate Filter

2016-05-25T00:03:00.002+05:30

This might be a simple angular filter, but more helpful to reduce ugly code in your controller.

Angular provides '$interpolate' service to evaluate angular expressions.

Consider you have some constant template with some expression expecting a dynamic value - lets say userName.

Example:

//example.js
angular.module('app.example',[])
.constant('TEMPLATE',{
   WELCOME_MSG: 'Hi {{userName}} Welcome to our Portal'
})
.controller('sampleCtrl', function($scope, TEMPLATE, $interpolate){
   
   $scope.data = {
      userName:'Ajai'
   };

   $scope.MSG = $interpolate(TEMPLATE.WELCOME_MSG)($scope.data);
   
});


<!--example.html-->
<div ng-app="app.example" ng-controller="sampleCtrl">
<h1>{{MSG}}</h1>
</div>

Instead you can simplify the above one with custom interpolate filter. Below example wont make much difference, but consider if you have some 100 template constants - it is not a good idea to evaluate each template expression in controller. Instead we can achieve the same in template expression with simple filter.

angular.module('angular.filter.interpolate')
        .filter('interpolate', function ($interpolate) {
            return function (input, data) {
                return input?$interpolate(input)(data):'';
            };
        });

Example:

//example.js
angular.module('app.example',['angular.filter.interpolate'])
.constant('TEMPLATE',{
   WELCOME_MSG: 'Hi {{userName}} Welcome to our Portal'
})
.controller('sampleCtrl', function($scope, TEMPLATE, $interpolate){
   
   $scope.TEMPLATE = TEMPLATE;

   $scope.data = {
      userName:'Ajai'
   };
   
});

<!--example.html-->
<div ng-app="app.example" ng-controller="sampleCtrl">
    <!--Referring the model-->
    <h1>
      {{TEMPLATE.WELCOME_MSG | interpolate:data}}
    </h1>
    <!--With hardcoded value-->
    <h1>
      {{TEMPLATE.WELCOME_MSG | interpolate:{userName:'Ajai'} }}
    </h1>
</div>

Mutator methods in Javascript

2015-03-18T12:05:00.003+05:30

A Mutator method is used to control changes to a variable, which is formerly known as getter and setter methods. Several server side languages supports Mutator methods. Lets see how to achieve the same in JavaScript. There are some restrictions to achieve it in obsolete browsers. Lets see the different ways to implement mutator methods in JavaScript,

Method 1: Exposing our own getter and setter methods

function User(){
 this._name = '';
 this.getName = function(){
  return 'Hey ' + this._name;
 }
 this.setName = function(name){
  this._name = name
 }
}

var u1 = new User();
u1.setName('Ajai')
console.log(u1.getName()) //Hey Ajai

Method 2: Using ES5 Syntax (supported in all ES5 ready browsers)

//with Prototype
function User(){
 this._name = '';
}

User.prototype = {
 get name(){
  return 'Hey ' + this._name;
 },
 set name(name){
  this._name = name;
 }
}

var u1 = new User();
u1.name = "Ajai"
console.log(u1.name) //Hey Ajai

//without Prototype
var User ={
 _name: '',
 get name(){
  return 'Hey ' + this._name;
 },
 set name(name){
  this._name = name;
 }
}

User.name = "Ajai"
console.log(User.name) //Hey Ajai

var u1 = Object.create(User);
u1.name = "Ajai";
console.log(u1.name) //Hey Ajai

Method 3: Using Object.defineProperty & Object.defineProperties
Object.defineProperty is supported from IE8+ browsers. Sadly Object.defineProperty in IE8 only accepts DOM Object.

//with Object.defineProperty
var User = {
 _name: ''
}
Object.defineProperty(User, 'name', {
  get: function() {
    return 'Hey ' + this._name;
  },
  set: function(name){
 this._name = name;
  }
});

User.name = 'Ajai';
console.log(User.name); //Hey Ajai

//or

var u1 = Object.create(User);
u1.name = "Ajai";
console.log(u1.name);

Object.defineProperties is only supported in IE9+ browsers

var User = {
 _name: '',
 _age: 0
}
Object.defineProperties(User, {
  name: {
   get: function() {
  return 'Hey ' + this._name;
   },
   set: function(name){
  this._name = name;
   }
  },
  age: {
   get: function() {
  return 'Im ' + this._age;
   },
   set: function(age){
  this._age = age;
   }
  }
});

User.name = 'Ajai';
User.age = '27';
console.log(User.name); //Hey Ajai
console.log(User.age); // Im 27

In IE8 you can create a fake DOM Element to achieve the same,

var User = document.createElement('anytag');
document.body.appendChild(User);
User._name = "";
Object.defineProperty(User, 'name', {
  get: function() {
    return 'Hey ' + this._name;
  },
  set: function(name){
 this._name = name;
  }
});

User.name = 'Ajai';
console.log(User.name); //Hey Ajai

Non standard way :

This is deprecated from web standard. Please avoid this syntax in real-time applications.

var User = {
 _name: ''
};

User.__defineGetter__('name', function(){
 return 'Hey ' + this._name;
});
User.__defineSetter__('name', function(name){
 this._name = name;
});

User.name = 'Ajai';
console.log(User.name); //Hey Ajai

Things you may not know about CSS

2014-06-22T16:14:00.001+05:30

Grammatical error like style using CSS:

.grammar{ 
   -moz-text-decoration-color: green;
   -moz-text-decoration-line: underline;
   -moz-text-decoration-style: wavy;
   text-decoration-color: green;
   text-decoration-line: underline;
   text-decoration-style: wavy;
}

Output:

CSS 'empty-cells' Property

table{
   empty-cells:hide;
}

CSS @supports

Usually we do CSS feature-test using JavaScript. Now it can be done in CSS with a new property '@supports'. So for Firefox 22+ , Chrome 28+, Opera 12.1+ supports this feature. So we can look forward to using it soon!

Example:

/* basic usage */
@supports(prop:value) {
    /* more styles */
}

/* real usage */
@supports (display: flex) {
    div { 
      display: flex;
    }
}

/* testing prefixes too */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      float: none;
    }
}

CSS Filter Effects:

For an Image, we usually apply filters using Canvas. But CSS supports this filter operation via 'filter' property. Note that this property is significantly different from and incompatible with Microsoft's older "filter" property. So for only webkit browsers support this feature (Chrome 18+, Safari 7+, Opera 15+)

Supported filter properties:

blur
grayscale
drop-shadow
sepia
brightness
contrast
hue-rotate
invert
saturate
opacity

Click here for demo

Example:

.blurFilter{
-webkit-filter: blur(2px);
} 
 .imageFilter{
     -webkit-filter: blur(5px) brightness(3.9) contrast(3.5) drop-shadow(72px 72px 20px black) grayscale(0.5) hue-rotate(120deg) invert(0.2) opacity(0.1) saturate(1.9) sepia(0.2);
}

CSS 'pointer-events':

This property is magical. Yes you can really disable a element using the power of CSS. You don't need JavaScript anymore to do the stuff.

'pointer-events' CSS property actually disables the mouse events on an element.

Example:

/*CSS:*/
.disabled{
     pointer-events:none;
}

<!--HTML:-->
<a href="http://www.google.com" class="disabled">Google</a>

<p onclick="alert(1)" class="disabled">Pop an alert</p>

The above example wont fire any mouse events on the element.

CSS Counters:

CSS3 introduces the numbering of HTML elements using CSS Counters. For example, if we need to mention the chapter count with respect to h2 tag - usually we do some JavaScript stuffs to achieve it. But CSS counters done an awesome job to achieve the same.

Initializing the CSS Counter:

Syntax:

counter-reset: none|identity [number]

Example:

section{
   counter-reset: chapter;
}

In the above example, 'chapter' is a user defined identity that is used for the increment and display purpose. By default the identity is reset to '0'. 'none' will disable the counter

Incrementing the CSS Counter:

Syntax:

counter-increment: none|identity [number]

Example:

section > h1{
   counter-increment: chapter;
}

counter-increment increments the counter identity by '1' by default. The increment value can be specified next to the identity. Be aware that you must use '>' in your selector if you have nested lists so that your list numbering doesn't get incremented at the wrong points.
'none' will disable the counter.

Note: IE8 supports the counter-increment property only if a !DOCTYPE is specified. Also, an element that is not displayed (display:none) cannot increment or reset a counter.

Using the Counter Value:

We use counter values with pseudo elements for display purpose. The in built 'counter' function will return the current elements increment value with respect to the chapter. The return value can be formatted by passing the following property values as parameter to the counter function.

decimal
Decimal numbers, beginning with 1.
decimal-leading-zero
Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).
lower-roman
Lowercase roman numerals (i, ii, iii, iv, v, etc.).
upper-roman
Uppercase roman numerals (I, II, III, IV, V, etc.).
georgian
Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).
armenian
Traditional uppercase Armenian numbering.
lower-latin or lower-alpha
Lowercase ascii letters (a, b, c, ... z).
upper-latin or upper-alpha
Uppercase ascii letters (A, B, C, ... Z).
lower-greek
Lowercase classical Greek alpha, beta, gamma, ... (α, β, γ, ...)

Example:

section{
     counter-reset: chapter;
}
section > h1{
    counter-increment: chapter;
}
section h1:before{
    content:"(Chapter " counter(chapter, upper-roman) ")"
}

ul{
    counter-reset: list;
}
ul > li {
    counter-increment:list;
}
ul li:before{
    content: "(Item " counters(list, ".") ")";
}

Output:

Click Here For Demo

:empty Pseudo Selector:

The :empty pseudo selector will select empty elements or elements with only comments. This will be helpful in hiding empty elements.

Example:

/*CSS*/
div:empty { 
   display: none; 
}

<!--HTML-->
<div></div>
<div><!-- test --></div>

'will-change' CSS Property - For Performance

If you tried getting some complex animations and transforms via css3, you might noticed some flickers in the animation in most of the webkit based browsers. Here you might need to understand the term 'Hardware acceleration'. Hardware Acceleration means that the Graphics Processing Unit (GPU) will assist your browser in rendering a page by doing some of the heavy lifting, instead of throwing it all onto the Central Processing Unit (CPU) to do.

Click here to Read More....

translateZ() (or translate3d()) Hack:

transform: translate3d(0, 0, 0);

Generally the browser's 3d rendering is hardware accelerated. So, this hack informs the browser to hardware accelerate the element.

Hardware-accelerating an operation results in the creation of what is known as a compositor layer that is uploaded to and composited by the GPU. However, force-hacking layer creation may not always be the solution to certain performance bottlenecks on a page. Layer creation techniques can boost page speed, but they come with a cost: they take up memory in system RAM and on the GPU (particularly limited on mobile devices) and having lots of them can have a bad impact (especially on mobile devices), so they must be used wisely and you need to make sure that hardware-accelerating your operation will really help the performance of your page, and that a performance bottleneck is not being caused by another operation on your page.

In order to avoid such layer creation hacks, CSS introduces a new property 'will-change', which enables the browser to hardware accelerate the element while performing certain operation that we mention in the property.

Example:

will-change: transform, opacity;

Note: Don’t Use will-change to Declare Changes to Too Many Properties or Element, this may lead to browser crash. Example,

*,
*::before,
*::after {
 will-change: all;
}

New CSS3 Cursors

Mouse over the list to view cursors,

none
context-menu
cell
vertical-text
alias
copy
no-drop
not-allowed
col-resize
row-resize
all-scroll
zoom-in
zoom-out

Browser support:

FIREFOX - All supported. Issue: no-drop same as not-allowed

IE - Doesn't support none, context-menu, cell, alias, copy, zoom-in/out.

OPERA - Only supports col-resize, row-resize, all-scroll and zoom-in/out on Windows

SAFARI - All supported

CHROME - All supported

Javascript - Some Useful Tips & Tricks

2014-06-11T20:35:00.000+05:30

Use window.name for simple session handling

window object has its own property 'name'. The name of the window is used primarily for setting targets for hyperlinks and forms. Windows do not need to have names. With this property we can achieve simple session storage. Browser preserves the property value (window.name) until the window/tab is closed.

Labels

You can use a label to identify a loop, and then use the break or continue statements to indicate whether a program should interrupt the loop or continue its execution.

var i, j;

loop1:
for (i = 0; i < 3; i++) {      //The first for statement is labeled "loop1"
   loop2:
   for (j = 0; j < 3; j++) {   //The second for statement is labeled "loop2"
      if (i === 1 && j === 1) {
         continue loop1;
      }
      console.log('i = ' + i + ', j = ' + j);
   }
}

// Output is:
//   "i = 0, j = 0"
//   "i = 0, j = 1"
//   "i = 0, j = 2"
//   "i = 1, j = 0"
//   "i = 2, j = 0"
//   "i = 2, j = 1"
//   "i = 2, j = 2"
// Notice how it skips both "i = 1, j = 1" and "i = 1, j = 2"

Know more about typeof, instanceof and constructor:

typeof: An operator – returns a string indicating the type of the unevaluated operand.

Note: typeof null will return "object", and for most of the object types (Array, Date, Number, Function, String …) will return "object". On IE 6, 7, and 8 a lot of host objects are objects and not functions. For example: typeof alert === 'object'

Type	Result
Undefined	"undefined"
Null	"object"
Boolean	"boolean"
Number	"number"
String	"string"
Host object (provided by the JS environment)	Implementation-dependent
Function object (implements [[Call]] in ECMA-262 terms)	"function"
Any other object	"object"

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof

constructor: A reference to the function that created an object. All objects inherit a constructor property from their prototype and it can be changed programmatically

instanceof: An operator - which tests presence of constructor.prototype in object prototype chain.

//EXAMPLE
var obj = {},
arr= [],
d = new Date(),
f1 = new Function(),
f2 = function(){},
s1 ="a string",
s2 = new String(),
n1 = new Number(5),
n2 = 5,
n3 = 3.14;
typeof obj //return "object"
typeof arr //return "object"
typeof d //return "object"
typeof f1 //return "function"
typeof f2 //return "function"
typeof s1 //return "string"
typeof s2 //return "object"
typeof n1 //return "object"
typeof n2 //return "number"
typeof n3 //return "number"
obj instanceof Object //return true
arr instanceof Array //return true
arr instanceof Object //return true
d instanceof Object //return true
d instanceof Date //return true
f1 instanceof Object //return true
f1 instanceof Function //return true
f2 instanceof Function //return true
f2 instanceof Object //return true
s1 instanceof Object //return false
s1 instanceof String //return false
s2 instanceof Object //return true
s2 instanceof String //return true
n1 instanceof Object //return true
n1 instanceof Number //return true
n2 instanceof Object //return false
n2 instanceof Number //return false
n3 instanceof Object //return false
n3 instanceof Number //return false
obj.constructor()//return Object {}
arr.constructor()//return []
d.constructor()//return "(current date)"
f1.constructor()//return function anonymous() { }
f2.constructor()//return function anonymous() { }

s1.constructor()//return ""
s2.constructor()//return ""

n1.constructor()//return 0
n2.constructor()//return 0
n3.constructor()//return 0

Shuffle an array

var arr = [“a”, “b”, 1, 100, 5, 10, 200, 458, 98];
arr = arr.sort(function(){ return Math.random() - 0.5});

Get a random item from an array

var arr = [1,5,6,7,4,3,9,”a”,”xyz”];
var  randomItem = arr[Math.floor(Math.random() * arr.length)];

Max and Min values in an array of numbers

var arr = [1, 100, 5, 10, 200, 458, 98];
var max = Math.max.apply(Math, arr); 
var min = Math.min.apply(Math, arr);

Variable conversion shortcuts

var x = "1.592",
//to string
str = ""+ x,

//to integer
int = ~~x,  

//to float
float = 1*x,

//to boolean
bool = !!x,

//to array
array = [x];

‘yield’ Keyword:

JavaScript 1.7+ supports yield keyword, which is used to suspend execution of a function. Only firefox supports this option for now.

function currentLoop(){
  var i = 0;
  while(true){
    i++;
    yield i;
  }
}

var g= currentLoop();

g.next(); //return 1
g.next(); //return 2
g.next(); //return 3
g.next(); //return 4

Base conversion in javascript [...]

Using Angular with Laravel / Conflict between Laravel Blade and Angular

2014-05-31T17:36:00.003+05:30

The Conflict:

Peoples who are using Laravel and AngularJs may know, Laravel’s Blade templating engine and AngularJs uses the same markup when displaying variables

{{ variableName }}

Solution 1 (Laravel):

Laravel Blade template engine comes with an option to change the literal tags. so if you want to keep the angular syntax, then include the following code in app/routes.php

//general syntax
Blade::setContentTags('<%', '%>'); 

//for escaped data: 
Blade::setEscapedContentTags('<%%', '%%>');

Solution 2 (AngularJs):

AngularJs comes with an option to change the literal tags using $interpolateProvider

It should be declared within your module.

angular.module('MyApp', [], function($interpolateProvider) {
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
});

A fair play with Maths and JQuery Animation

2014-02-22T02:08:00.002+05:30

This is a new try with the simple maths that we already know. I have used basic trigonometric equations and JQuery animation for the play.

DEMO

Demo Explained:

Create set of div and append it to the body

for (var i = 0; i < 360; i++) {
    //random color
    var color = '#'+parseInt(Math.random()*0xccccc);
    //create and append DOM
    $('<div/>').appendTo('body').css('background',color);
}

For random positioning use Math.random() to generate random x,y values

for (var i = 0; i < 360; i++) {
        var left = 100 + Math.random() * 300 + 'px';
        var top = 100 + Math.random() * 300 + 'px';
        $('div').eq(i).animate({left:left,top:top},1000);
}

To draw circle,
x = tx + r cos(t)
y = ty + r sin(t)
so looping through t value from 0 to 360 will generate circle

for (var i = 0; i < 360; i++) {
        r = 150;
        var left = 400 + r*Math.cos(i);
        var top = 200 + r*Math.sin(i);
        $('div').eq(i).animate({left:left,top:top},1000);              
    }

To draw sine wave,
y = constant
x = tx + r sin(t)
so looping through t value from 0 to 360 will generate sine wave

for (var i = 0; i < 360; i++) {
        r = 100;
        var left = i*10;
        var top = 300 + 10 * Math.sin(i);
        $('div').eq(i).animate({left:left,top:top},1000);              
    }

To draw cos wave,
y = constant
x = tx + r cos(t)
so looping through t value from 0 to 360 will generate cos wave

for (var i = 0; i < 360; i++) {
        var left = i*10;
        var top = 300 + 10 * Math.cos(i);
        $('div').eq(i).animate({left:left,top:top},1000);              
}

For animating DOM elements to a single point (mouse click over document), get x,y position using mouse click event and animate each element towards the point with setTimeout function

$(document).on('click',function(e){
    for (var i = 0; i < 360; i++) {
        var left = e.clientX + 'px';
        var top = e.clientY + 'px';
        var f = (function(i){
            return function(){
                $('div').eq(i).animate({left:left,top:top},500);
            };
        })(i);
        setTimeout(f,i*5);
    }
});

DEMO

Custom Select Box with new approach

2014-02-21T01:47:00.001+05:30

This is my new JQuery plugin for replacing select box. I have tried to implement some cool features which makes it easy to implement and you can play with it as like the native one.

Your suggestions, issues are welcome, so that I can improve this plugin

DEMO

Fork this on GitHub

Implementation:

Step 1: include css and scripts in head section

<link href="customselectbox.css" rel="stylesheet" type="text/css"></link>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="customselectbox.js"></script>

Step 2: initialize customselect box

$(document).ready(function(){
  $('select').customSelect();
});

Features:

Support thumbnails within option
Search option
Set and Get value with normal JQuery method. No need to process or query the generated new select box, you can use the ref of the native select box.
eg:
```
//set value
$('#myselect').val(value);
//get value
$('#myselect').val();
```
Support native reset within the form - i.e) when form gets reset the value of the select box gets reset to its default value
supported browsers: IE8+, firefox, safari, chrome

attaching events,

$('select').change(function () {
   alert('Change Event Fired');
});

$('select').click(function () {
  alert('Click Event Fired');
});

Android Pattern locker plugin - Javascript

2013-08-29T19:06:00.002+05:30

This is my new JavaScript plugin for generating Android like Pattern locker for web applications.

This is fully customizable plugin. Don't know where it can be used.... Just developed in my own interest.... please suggest some improvements for the same..... I think the captcha can be replaced with this plugin.

I have created the plugin using raphaeljs.

DEMO

Fork this on GitHub

How to use?

Step 1: Include the following scripts in your head section (click here to download raphaeljs , click here to download pattern.js)

<script src="raphael-min.js" type="text/javascript"></script>
<script src="pattern.js" type="text/javascript"></script>






Step 2: Create an instance for the pattern with your custom properties and draw the pattern within the container with instance.draw(container).



var s = new Pattern(properties);
s.draw(container); 




Properties

    

            Property
                
            Description
                
            Default Value
                
        

            dimension
                
            Dimension of the patern
                

No. of rows
                    x No. of columns
                

Eg:
                

dimension:‘5x5’
                
            3x3
                
        

            patternRadius
                
            Radius of the pattern circle
                

Eg:
                

patternRadius:25
                
            20
                
        

            patternGap
                
            Gap between each Pattern Circle
                

Eg:
                

patternGap:70
                
            50
                
        

            outerColor
                
            Color of the Pattern Circle. The color value can be either hex color or hex gradient color
                

Eg: 
                

outerColor:’#FC0000’
                

outerColor :‘90-#239EE0:5-#1951A0:95’
                
            #333333
                
        

            innerColor
                
            Color of the inner circle within the Pattern Circle
                

Eg:
                

innerColor:’#FC0000’
                

innerColor :‘90-#239EE0:5-#1951A0:95’
                
            90-#239EE0:5-#1951A0:95
                
        

            background
                
            Pattern box background color
                

Eg:
                

background:’#FF00F0’
                
            #000000
                
        

            backgroundOpacity
                
            Pattern box background opacity
                

Eg:
                

background:0.5
                
            1
                
        

            hoverColor
                
            Stroke color of Pattern Circle when mouse over
                

Eg:
                

hoverColor:’#FF00F0’
                
            #c8ee17
                
        

            errorColor
                
            Stroke color of Pattern Circle for Invalid Pattern
                

Eg:
                

errorColor:’#FF00F0’
                
            #FF0000
                
        

            padding
                
            Pattern Box padding
                

Eg:
                

padding:25
                
            Value of pattern radius
                
        

            onFinish
                
            Handler to be executed when the user completes the pattern
                

Eg:
                

onFinish:function(value){
                

}
                

value
                    – value of the pattern drawn passed to the handler
                
            null
                
        




also you can set the property values externally with the created pattern Object


Functions

    

            Function
                
            Description
                
            Return value
                
        

            draw (container)
                
            Draw the pattern within the container. Should be called with pattern instance.
                

Eg:
                    


                        s.draw(‘mydiv’);
                        

                    
                    Here ‘mydiv’ represents containerId
                

s.draw(document.getElementById(‘mydiv’));
                
            Return Pattern Object
                
        

            clear()
                
            Resets the pattern.
                

Eg:
                    

s.clear();
                
            Return Pattern Object
                
        

            error()
                
            Used to mark the drawn pattern as error
                

Eg:
                    

s.error();
                
            Return Pattern Object
                
        

            val()
                
            Used to get the value of drawn pattern
                

Eg:
                    

s.val();
                    

for the image attached in this post, the value returned will be ‘3-4-5-10-15’
                
            Return pattern value
                
        




eg: 
var samplePattern = "3-4-5-10-15";
var s = new Pattern({
    dimension: '5x5',
    outerColor: '#000',
    patternRadius: 20,
    patternGap: 30,
    padding: 20,
    background: '#333',
    backgroundOpacity: 0.5
});
s.onFinish = function (v) {
    if (v == samplePattern) alert('success');
    else this.error();
};
s.draw('mypattern');








Plugin 



var Pattern = function (options) {
    this.dimension = options.dimension && options.dimension.indexOf('x') !== -1 ? options.dimension.split('x') : [3, 3];

    this.patternRadius = options.patternRadius || 20;
    this.patternGap = options.patternGap || 50;
    this.innerColor = options.innerColor || '90-#239EE0:5-#1951A0:95';
    this.outerColor = options.outerColor || '#333333';
    this.background = options.background || '#000000';
    this.backgroundOpacity = options.backgroundOpacity || 1;
    this.hoverColor = options.hoverColor || '#c8ee17';

    this.errorColor = options.errorColor || '#FF0000';

    this.padding = options.padding || this.patternRadius;

    this.onFinish = options.onFinish || function (v) {};

    this.width = this.dimension[0] * (2 * this.patternRadius + this.patternGap) + (this.padding * 4) - this.patternGap;
    this.height = this.dimension[1] * (2 * this.patternRadius + this.patternGap) + (this.padding * 4) - this.patternGap;

    this.paper = null;
    this.patternCircle = [];
    this.value = [];
    this.blocker = null;

    var patternObj = this;
    this.isMouseDown = false;
    this.lineX = 0;
    this.lineY = 0;
    this.currentPath = null;
    this.currentTarget = null;


    //styes
    this.paperStyle = {
        fill: patternObj.background,
            'stroke-width': 0,
        opacity: patternObj.backgroundOpacity
    };
    this.selectedStyle = {
        'fill': '#CCC',
            'fill-opacity': 0.3,
            'stroke-width': 3,
            'stroke': '#C8E02A'
    };
    this.innerStyle = {
        'fill': patternObj.innerColor,
            'stroke-width': 0
    };
    this.outerStyle = {
        'fill': patternObj.outerColor,
            'stroke-width': 0,
            'fill-opacity': 1,
    };
    this.hoverStyle = {
        'stroke-width': 3,
            'stroke': patternObj.hoverColor,
            'stroke-opacity': 1
    };
    this.pathStyle = {
        stroke: '#FFF',
            'stroke-width': '5',
            'stroke-linecap': 'round',
            'opacity': 0.3
    };
    this.errorStyle = {
        'stroke-width': 3,
            'stroke': patternObj.errorColor,
            'stroke-opacity': 0.75
    };

    //common handlers
    var paperMouseUpHandler = function () {
        patternObj.isMouseDown = false;
        if (patternObj.currentPath) {
            patternObj.currentPath.remove();
        }
        if (patternObj.currentTarget.length && patternObj.currentTarget[0].data('connection') == 1) {
            patternObj.blocker = patternObj.paper.rect(0, 0, patternObj.width, patternObj.height, patternObj.patternRadius).attr({
                fill: '#000',
                    'stroke-width': 0,
                    'fill-opacity': 0
            });
        }
        patternObj.currentPath = [];
        patternObj.currentTarget = [];

        if (typeof (patternObj.onFinish)) {
            patternObj.onFinish(patternObj.val());
        }
    };

    var drawPathHandler = function (e) {
        e = e || window.event;

        var pX = e.pageX;
        var pY = e.pageY;
        if (pX === undefined) {
            pX = e.clientX;
            pY = e.clientY;
        }
        pX = pX - ((window.pageXOffset || document.body.scrollLeft) + patternObj.paper.canvas.getBoundingClientRect().left);
        pY = pY - ((window.pageYOffset || document.body.scrollTop) + patternObj.paper.canvas.getBoundingClientRect().top);

        e.stopPropagation();
        if (patternObj.isMouseDown && patternObj.currentPath) {
            patternObj.currentPath.attr('path', "M" + patternObj.lineX + " " + patternObj.lineY + "L" + pX + " " + pY);
        }
    };

    this.disableSelection = function (target) {
        if (typeof target.onselectstart != "undefined") {
            target.onselectstart = function () {
                return false
            };
        } else if (typeof target.style.MozUserSelect != "undefined") {
            target.style.MozUserSelect = "none";
        } else {
            target.onmousedown = function () {
                return false
            };
        }
    };

    this.createPattern = function (paperObj) {
        var x = 0,
            y = 0,
            i, j, elm = null;
        for (i = 0; i < patternObj.dimension[0]; i++) {
            x = i * (patternObj.patternGap + patternObj.patternRadius * 2) + patternObj.padding + patternObj.patternRadius;
            for (j = 0; j < patternObj.dimension[1]; j++) {
                y = j * (patternObj.patternGap + patternObj.patternRadius * 2) + patternObj.patternRadius + patternObj.padding;
                elm = patternObj.drawPatternPoint(paperObj, x, y, i, j);
                patternObj.patternCircle.push(elm);
                elm[0].data({
                    x: i,
                    y: j
                });
            }
        }
        patternObj.sort();
    };

    this.sort = function () {
        var i, j, tmpAry = [],
            elm, cnt = 1;
        for (i = 0; i < patternObj.dimension[1]; i++) {
            for (j = 0; j < patternObj.dimension[0]; j++) {
                elm = patternObj.getByXY(j, i);
                elm[0].data({
                    'value': cnt
                });
                elm[1].data({
                    'value': cnt
                });
                tmpAry.push(elm);
                cnt++;
            }
        }
        patternObj.patternCircle = tmpAry;
    };

    this.drawConnection = function (oCircle, iCircle, currentTarget) {
        patternObj.currentPath.attr('path', "M" + patternObj.lineX + " " + patternObj.lineY + "L" + (oCircle.getBBox().x + oCircle.getBBox().width / 2) + " " + (oCircle.getBBox().y + oCircle.getBBox().height / 2));
        patternObj.lineX = (oCircle.getBBox().x + oCircle.getBBox().width / 2);
        patternObj.lineY = (oCircle.getBBox().y + oCircle.getBBox().height / 2);

        patternObj.currentPath = patternObj.paper.path("M" + patternObj.lineX + " " + patternObj.lineY + "L" + patternObj.lineX - 2 + " " + patternObj.lineY - 2).attr(patternObj.pathStyle);
        patternObj.currentPath.mouseup(paperMouseUpHandler);
        currentTarget.data({
            'connection': 1
        }).attr(patternObj.selectedStyle);
        iCircle.data({
            'connection': 1
        });
        oCircle.data({
            'connection': 1
        }).attr(patternObj.selectedStyle);
        patternObj.value.push(oCircle.data('value'));
    };

    this.getByXY = function (x, y) {
        for (var i = 0; i < this.patternCircle.length; i++) {
            if (this.patternCircle[i][0].data('x') == x && this.patternCircle[i][0].data('y') == y) {
                return this.patternCircle[i];
            }
        }
        return null;
    };

    this.drawPatternPoint = function (paperObj, x, y, xi, yi) {
        var patternElm = paperObj.set();
        var oCircle = paperObj.circle(patternObj.padding + x, patternObj.padding + y, patternObj.patternRadius).attr(patternObj.outerStyle);
        var iCircle = paperObj.circle(patternObj.padding + x, patternObj.padding + y, patternObj.patternRadius / 3).attr(patternObj.innerStyle);
        iCircle.data({
            'connection': 0,
                'x': xi,
                'y': yi
        });
        oCircle.data({
            'connection': 0,
                'x': xi,
                'y': yi
        });

        patternElm.push(oCircle, iCircle);

        var patternMousemoveHandler = function (e) {
            oCircle.attr(patternObj.hoverStyle);

            if (patternObj.currentPath && (patternObj.currentTarget[0] !== oCircle[0] && patternObj.currentTarget[1] !== iCircle[0]) && (iCircle.data('connection') == 0)) {

                var x1 = patternObj.currentTarget[0].data('x');
                var y1 = patternObj.currentTarget[0].data('y');
                var x2 = oCircle.data('x');
                var y2 = oCircle.data('y');

                var xs = x1 > x2 ? x2 : x1;
                var xe = x1 > x2 ? x1 : x2;
                var ys = y1 > y2 ? y2 : y1;
                var ye = y1 > y2 ? y1 : y2;

                var i, j;
                var telm = null;
                var connect = function (a, b) {
                    telm = patternObj.getByXY(a, b);
                    if (telm[0].data('connection') == 0) {
                        patternObj.drawConnection(telm[0], telm[1], telm[0]);
                    }
                };
                if (x1 == x2 && y1 !== y2) {
                    if (y1 < y2) {
                        for (i = ys; i <= ye; i++) {
                            connect(xs, i);
                        }
                    } else {
                        for (i = ye; i >= ys; i--) {
                            connect(xs, i);
                        }
                    }
                } else if (y1 == y2 && x1 !== x2) {
                    if (x1 > x2) {
                        for (i = xe; i >= xs; i--) {
                            connect(i, ys);
                        }
                    } else {
                        for (i = xs; i <= xe; i++) {
                            connect(i, ys);
                        }
                    }
                } else if (Math.abs(x1 - x2) == Math.abs(y1 - y2)) {
                    for (i = 0; i <= Math.abs(ys - ye); i++) {
                        if (y1 < y2 && x1 > x2) {
                            connect(x1 - i, y1 + i);
                        } else if (y1 > y2 && x1 < x2) {
                            connect(x1 + i, y1 - i);
                        } else if (y1 < y2) {
                            connect(x1 + i, y1 + i);
                        } else {
                            connect(x1 - i, y1 - i);
                        }
                    }
                }
                patternObj.currentTarget.pop();
                patternObj.currentTarget = [oCircle, iCircle];
            }

        };

        var patternMouseoutHandler = function () {
            if (oCircle.data('connection') == 0) {
                oCircle.attr({
                    'stroke-width': 0
                });
            }
        };

        var patternMouseDownHandler = function (e) {
            patternObj.isMouseDown = true;
            patternObj.currentTarget = [oCircle, iCircle];
            patternObj.lineX = patternElm.getBBox().x + patternElm.getBBox().width / 2;
            patternObj.lineY = patternElm.getBBox().y + patternElm.getBBox().height / 2;
            patternObj.currentPath = patternObj.paper.path("M" + patternObj.lineX + " " + patternObj.lineY + "L" + patternObj.lineX - 2 + " " + patternObj.lineY - 2).attr(patternObj.pathStyle);
            patternObj.currentPath.touchend(paperMouseUpHandler);
            patternObj.currentPath.mouseup(paperMouseUpHandler);
        };

        patternElm.mousemove(patternMousemoveHandler);
        patternElm.mouseout(patternMouseoutHandler);
        patternElm.mousedown(patternMouseDownHandler);
        patternElm.mouseup(paperMouseUpHandler);
        return [oCircle, iCircle];
    };

    this.drawPaper = function (elm) {
        var paper = Raphael(elm, patternObj.width, patternObj.height);
        var rect = paper.rect(0, 0, patternObj.width, patternObj.height, patternObj.patternRadius).attr(patternObj.paperStyle);
        rect.mousemove(drawPathHandler);
        rect.mouseup(paperMouseUpHandler);
        return paper;
    };

    this.draw = function (elm) {
        patternObj.paper = patternObj.drawPaper(elm);
        patternObj.createPattern(this.paper);
        patternObj.disableSelection(patternObj.paper.canvas);
        return this;
    };

    this.clear = function () {
        var paths = patternObj.paper.canvas.getElementsByTagName('path');
        var cnt = paths.length;
        for (var i = 0; i < cnt; i++) {
            paths[0].parentNode.removeChild(paths[0]);
        }
        patternObj.paper.forEach(function (el) {
            if (el[0].tagName.toLowerCase() == 'circle') {
                el.data({
                    'connection': 0
                });
                if (patternObj.patternRadius == el.attr('r')) {
                    el.attr(patternObj.outerStyle);
                }
            }
        });
        if (patternObj.blocker) {
            patternObj.blocker.remove();
        }
        patternObj.blocker = null;
        patternObj.currentPath = null;
        patternObj.currentTarget = [];
        patternObj.value = [];
        
        return this;
    };

    this.error = function () {
        for (var i = 0; i < patternObj.patternCircle.length; i++) {
            if (patternObj.patternCircle[i][0].data('connection') == 1) {
                patternObj.patternCircle[i][0].attr(patternObj.errorStyle);
            }
        }
        
        return this;
    };

    this.val = function () {
        return patternObj.value.toString().replace(/,/g, '-');
    };
};



How to change the URL without Page Reload
2013-08-29T18:37:00.005+05:30

Before start, you have to understand the HTML5 History API,



Following code is used to change the url without page load,



window.history.popstate(state,title,url);


state can be any JSON data structure. It is passed back to the popstate event hander, which you’ll learn about in just a moment. We don’t need to track any state in this demo, so I’ve left it as null.
title can be any string. This parameter is 
currently unused by major browsers. If you want to set the page title, 
you should store it in the state argument and set it manually in your popstate callback.

url can be, well, any URL. This is the URL you want to appear in the browser’s location bar.





Change Event Handler,



window.addEventListener("popstate", function(e) {
   //your code
});


The basic methods of history object are:
    
    


window.history.length: Returns the number of entries in the joint session history.
window.history.state: Returns the current state object.
window.history.go(n): Goes backwards or forwards 
by the specified number of steps in the joint session history. If the 
value you specify is zero, it will reload the current page. If it would 
cause the target position to be outside the available range of the 
session history, then nothing happens.
window.history.back(): Goes backwards by one step in the joint session history. If there is no previous page to go to, it does nothing.
window.history.forward(): Goes forwards by one step in the joint session history. If there is no next page to go to, it does nothing.
window.history.pushState(data, title [, url]): Pushes the data specified in the arguments onto the session history, with the given title and URL (the URL is optional).
window.history.replaceState(data, title [, url]): Updates the current entry in the session history, with the given data, title and URL (the URL is optional).




 




 



Clear Lens - JQuery Plugin
2013-08-09T18:39:00.004+05:30











This is my New jQuery Plugin.  You can find the working example at http://jsfiddle.net/ajai/k8Ube/

Hope it will be useful to some one.... 




I have used "pixastic" for image processing. 




To implement the plugin you have to include the pixastic library. and call the plugin in $(window).load event, Beacuse for image processing first the image should be loaded. Hope you all know $(window).load will be triggered after all the assets are loaded.




DEMO

Fork this on GitHub




How to use?

It is very simple to implement the plugin

1. include you jQuery 

2. include Pixastic Library 

3. include the plugin code

4. Add attribute fitler="blur" for images that you want to apply

5. on $(window).load Event call the following code



$('img').blurLens();
or


$('img').blurLens({
    width: 200,
    height: 200,
    blur: 5
});



width - Width of lens


height - Height of lens


blur - Blur Amount



JQuery 


(function ($) {
    $.fn.blurLens = function (lensproperty) {

        return $(this).each(function (ind, elm) {
            if ($(elm).attr('filter') == 'blur') {
                var w = 50;
                var h = 50;
                var blur = 2;

                if (lensproperty && lensproperty.width) w = lensproperty.width;
                if (lensproperty && lensproperty.height) h = lensproperty.height;
                if (lensproperty && lensproperty.blur) blur = lensproperty.blur;

                $(elm).wrap('
');

                var wrapper = $('


').width($(elm).width()).height($(elm).height());
                wrapper.appendTo($(elm).parent());


                var lens = $('


').css('background', 'url(' + $(elm).attr('src') + ') no-repeat 0 0').width(w).height(h);
                lens.appendTo(wrapper);

                var endL = $(wrapper).width() - w;
                var endT = $(wrapper).height() - h - 3;

                $(wrapper).on('mousemove', function (e) {
                    lens.show();
                    var l = e.pageX - $(this).offset().left;
                    var t = e.pageY - $(this).offset().top;
                    lens.css({
                        left: l + 'px',
                        top: t + 'px',
                            'background-position': '-' + l + 'px -' + t + 'px'
                    });
                });

                $(wrapper).on('mouseout', function (e) {
                    lens.hide();
                });

                $(elm).parent().css('visibility', 'visible');

                $(elm).pixastic("blurfast", {
                    amount: blur
                });
            }
        });
    }
})(jQuery);







CSS

.blur {
    visibility: hidden;
    position:relative;
}
.blur .lens-wrap {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:200;
    overflow:hidden;
}
.blur .lens {
    display:none;
    width:50px;
    height: 50px;
    border:1px solid rgba(0, 0, 0, 0.5);
    box-shadow:0px 0px 10px #333;
    position:absolute;
    top:0;
    left:0;
    /*border-radius:100%;*/
    z-index:100;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
[filter="blur"] {
    visibility:hidden;
}



Base Conversion in Javascript
2012-12-12T12:59:00.003+05:30

You might think how base conversion worked out in JavaScript. Here the solution, 



Number to Base Value  
Number.toString([radix]);
Number -  Integer number that is to be converted
radix - base value either 2, 8, 16 (optional parameter)



Example:

<script> 
//INTEGER TO BASE VALUE
var n = 42;
document.write(n.toString(2));
document.write(n.toString(8));
document.write(n.toString(16));

//HEX TO base
var h = 0xa;
document.write(n.toString(2));
document.write(n.toString(8));
</script>

Output:

101010
52
2a

1010
12




Any Base value to Integer value

parseInt(string, [radix]); 


string - string that is to be converted. The string can be binary value, octal value or hexadecimal value
 

radix - base value either 2, 8, 16 (optional parameter)



Example:

<script> 
//Binary to integer
document.write(parseInt('111',2));

//Octal to integer
document.write(parseInt('12',8));

//Hex to integer
document.write(parseInt('0xc',16));
</script>


Output:


7
10
12






Exception Handling in PHP
2012-12-11T21:00:00.002+05:30


Notices:
 

These
are trivial, non-critical errors that PHP encounters while executing a script

Example:  Accessing a variable that has not yet been
defined. By default, such errors are not displayed to the user at all - although
you can change this default behavior.




Warnings:

These
are more serious errors

Example:
attempting to include() a file which does not exist. By default, these errors
are displayed to the user, but they do not result in script termination.




Fatal errors:


These
are critical errors

Example: Instantiating
an object of a non-existent class, or calling a non-existent function. These
errors cause the immediate termination of the script, and PHP’s default behavior
is to display them to the user when they take place.




Parse Error:


When
we make mistake in PHP code like, missing semicolon or any unexpected symbol in
code




What are Exceptions?

Exceptions are
the PHP 5 way of flagging up an unexpected event. They contain an information
message, and can be extended just like any other object. Exceptions are thrown
rather than warnings in newer PHP extensions, although you do still see
extensions returning errors.



When an exception is thrown, we either catch it where it happens, or it causes
the code to return to its calling context. If it isn’t caught there, it returns
again, and so on. As usual it is easier to explain with examples than
words! 

Here is an
example in which DateTimeZone objects are created, first with a valid
timezone string of ‘Europe/Amsterdam’, then another with an invalid timezone
‘nonsense’:




$timezone = new DateTimeZone('Europe/Amsterdam');





var_dump($timezone);












$timezone2 = new DateTimeZone('nonsense');




As the documentation
explains, DateTimeZone throws an exception when called with
unexpected data. This indeed happens if you run the above script, and the
exception appears as an error message from PHP, looking something like this:




Exception: DateTimeZone::__construct(): Unknown or bad timezone
(nonsense) 





in /...../exception1.php on line 6



We don’t want our entire application to stop and spit out errors over a
nonsense timezone, and working with exceptions means we can do so much more
with these situations than we can with errors. We “catch” exceptions and can
use the information in the exception itself and in the context of the current
scope to decide how best to react. This is a great improvement on the previous
situation of having a few different error levels and only being able to choose
whether to display, log or ignore each level as was the situation before PHP 5.




Handling Exceptions

We handle
exceptions with a try/catch block like this:




try {





    $timezone2 =
new DateTimeZone('nonsense');





    echo
"time!";





} catch(Exception $e) {





    echo
"Oops!  Something bad
happened!";





    print_r($e);





}




The “try” bit
goes around the code that you would normally write, but which contains
operations which can cause an exception. The “catch” bit states what kind of
exception to catch, and contains the code to execute if we do catch anything.

If you ran this
script with a valid timezone as the argument to
the DateTimeZone constructor, you would see the “time!” output and
never enter the code inside the “catch” block. However in our example, an
exception will be caused and so we jump straight into this block, without
echoing “time!”. This is a fairly key concept – the code in the try block
actually stops and we jump into the catch block and start executing from there.
Any code after the point at which the exception is throw simply isn’t run.

Inside an Exception

Exceptions can
hold all sorts of information. If we inspect our Exception thrown by
DateTimeZone’s constructor using print_r, we’d see something like this:




Exception Object





(





   
[message:protected] => DateTimeZone::__construct(): Unknown or bad
timezone (nonsense)





   
[string:private] =>





   
[code:protected] => 0





   
[file:protected] =>
/home/lorna/data/personal/publish/thinkvitamin/exceptions/exceptions2.php





    [line:protected]
=> 4





    [trace:private]
=> Array





        (





            [0]
=> Array





                (





                   
[file] =>
/home/lorna/data/personal/publish/thinkvitamin/exceptions/exceptions2.php





                   
[line] => 4





                   
[function] => __construct





                   
[class] => DateTimeZone





                   
[type] => ->





                   
[args] => Array





                       
(





                            [0] => nonsense





                       
)












                )












        )












    [severity]
=> 2





)




Walking through
the object, there are many useful elements here:




message This
contains a useful and relevant information message

code By
default this is zero but we can use this to include a numeric error code with
our exception

file Path
to the file where this exception was thrown

line Line
number where the exception was thrown

trace This
is the stack trace, so you can see the stack of calls which were made before
this exception was thrown

This is all
valuable information and we can use it to inform how we handle errors in the
catch block in our code. In addition we’ll take a look at how we can set these
ourselves by making our own exceptions a little later on.




Throwing Exceptions

It isn’t only
PHP itself that can throw exceptions, we can use exactly the same functionality
in our own code. Here is a really simple example, taken directly from the PHP manual itself,
of how to throw an exception manually.




function inverse($x) {





    if (!$x) {





        throw new
Exception('Division by zero.');





    }





    else return
1/$x;





}




We simply throw
a new Exception object that we create as we need it. The string
passed into the constructor becomes the object’s message property, and we can
also pass a second argument to the constructor if we want to set the code
property as well. It is usual to throw exceptions in functions or methods, and
then catch them from the location they are called – this lets the calling code
decide what to do in the context of what it intended and is much more flexible
than simple errors or having your methods return false and set an error string
somewhere, which I’m sure is how I solved this before exceptions were
introduced in PHP 5.




Extending Exceptions

The Exception
object by itself is great, but we can extend it so that we can return
additional information and different types of exceptions – so if one of a
number of different scenarios actually happens, we can respond differently.
Consider this script and in particular the takeTwoNumbers function:




class BigNumberException extends Exception { }





class FavouriteNumberException extends Exception { }












function takeTwoNumbers($a, $b) {





    if($a > 15
|| $b > 15 || ($a + $b) > 20) {





        throw new
BigNumberException('Keep it simple with smaller numbers');





    } elseif($a !=
3 && $b != 3) {





        throw new
FavouriteNumberException('But three is my favourite number!');





    } else {





        return $a +
$b;





    }





}












try {





    echo
takeTwoNumbers(3,9) . "\n";





    echo
takeTwoNumbers(4,16) . "\n";





    echo
takeTwoNumbers(7,5) . "\n";





} catch(Exception $e) {





    echo
$e->getMessage() . "\n";





}




The function accepts
two numbers, checks the values, and if there are any problems, throws a
relevant exception. If the values are OK (and yes, this is a totally contrived
example, in an effort to illustrate the concept without any complicating
factors like the real world getting involved!) then the function simply adds
them together and returns them. Our calling script calls the function 3 times,
with different number sets. The first one executes fine and the numbers get
added together. However the second includes a large number and so an error is
thrown, causing our code to jump to the “catch” block, and so the third
function call is never made. 

Although we
declared empty classes to extend Exception here and so only the class
name changed, you can do all sorts of things to help record the information you
need. We would set custom error messages here (remember the helpful error
message returned by DateTimeZone?), set error codes, or even set new
properties of our own. It depends on your application which of these is helpful
but having the custom exception classes makes it very nice and tidy to do so.
The differing class names let us detect what *kind* of a problem occured and
what we want to do in response. When we catch an exception, we can state what
kind of an exception we wanted to catch – so we can narrow ourselves down to
only dealing with a known situation. We can also use multiple catch blocks,
like this:




try {





    echo
takeTwoNumbers(3,9) . "\n";





    echo
takeTwoNumbers(4,16) . "\n";





    echo
takeTwoNumbers(7,5) . "\n";





} catch(BigNumberException $e) {





    echo "Big
Number: " . $e->getMessage() . "\n";





} catch(FavouriteNumberException $e) {





    echo
"Favourite Number: " . $e->getMessage() . "\n";





}




In this example,
we can handle the two types of exception differently. If any other type of
exception were to occur, it wouldn’t be caught here, but instead would “bubble”
up the stack, getting returned from the end of the second catch block to
wherever this code was called from – in this very simple example we are in a simple
PHP file but if we were nested in functions, the code would keep on returning
until PHP caught the exception, or until it reached the top at which point it
would show an error like the one we saw at the start of this post.




Uncaught Exceptions

So if an
exception is thrown in a method, and not caught, it returns from the function
to where that function is called from. If it isn’t caught here, it returns to
where this code was called from, and so on until it reaches the top of the
stack. If it gets to the top of the stack, uncaught, we’ll see the error we saw
at the beginning of the post. We can also give PHP instructions about how to
handle any exceptions that get this far, using set_exception_handler.
Many frameworks will do this and return nicely formatted messages, often
logging the detail of the error so that users do not see it but developers can
do so. 

Here’s an
example of a catch-all exception handling function:




function my_exception_handler($exception) {





 
error_log("Uncaught " . get_class($exception) . " exception:
" . $exception->getMessage() . "\n");





}





set_exception_handler('my_exception_handler'); 





throw new Exception('Oooops!');




All we need to
do is declare our exception handling function and then tell PHP to use it for
uncaught exceptions. This simple example simply passes a string to error_log function,
which you can configure to behave however you need it to for your system. In a
real-world application you might want to notify administrators of the problem
or perhaps provide some nice feedback to the user in addition to logging the
error.




Exceptions in Your Applications

Hopefully this
has given some insight into what you can do with exceptions and how they
interact with the rest of your object-oriented application. Even functional
code needs awareness of exceptions since some core language elements now throw
them, so it is worth making sure you have the exception handler declared
alongside your existing error handler even if you don’t need to be extending or
throwing exceptions yourself.






Random Bouncing Ball Animation
2012-12-11T20:38:00.001+05:30

Simple animation of random balls that bounces within the screen





Source:



#include<stdio.h>
#include<graphics.h>
#include<conio.h>
#include<dos.h>
#include<math.h>

void drawBall(struct ball *b, int color);

struct ball{
int x, y;
int dx, dy;
int radius;
};

void main()
{
  int gd=0, gm=VGAHI;
  int i;
  struct ball b[10];
  initgraph(&gd, &gm, "");

  for(i=1;i<=15;i++){
 b[i].radius = rand()%20;
 b[i].x=rand()%getmaxx();
 b[i].y=rand()%getmaxy();
 b[i].dx=2;
 b[i].dy=4;
  }

  while(!kbhit())
  {
 delay(5);
 cleardevice();
 for(i=1;i<=15;i++)
 drawBall(&b[i],i);
  }
closegraph();

}

void drawBall(struct ball *b, int color){
 setfillstyle(1,color);
 setcolor(color);
 fillellipse(b->x, b->y, b->radius, b->radius);
 if(b->x+b->radius > getmaxx() || b->x-b->radius<0)
 b->dx = -b->dx;
 if(b->y+b->radius > getmaxy() || b->y-b->radius<0)
 b->dy = -b->dy;

 b->x+=b->dx;
 b->y+=b->dy;
}




Output:






RGB in C
2012-10-06T03:01:00.000+05:30


Default palette size for normal graphics driver is 16 i.e) the color number rages from 0 to 15




To use rgb color modes we have to choose VGA or IBM 8514 as a graphics driver




For VGA, Palette size is 16 i.e) color number ranges from 0-16

For IBM 8514, Palette size is 256 i.e) color number ranges from 0-255, we can also say it as VGA with 256 palette size




By using setrgbpalette function we can generate RGB colors, we can generate colors with respect to Palette size. This function replaces the default palette colors with the generated Palette colors.




Syntax:

void setrgbpalette(int colornum, int red, int green, int blue);
/*
colornum - color number in palette (0-15 or 0-255 depens on graphics driver)
red - color value for red (0-255)
green - color value for green (0-255)
blue - color value for blue (0-255)
*/







Example:

#include<graphics.h>
#include<stdio.h>
#include<conio.h>
#include<stdlib.h>
#include<time.h>
void main(){
int gd=VGA, gm=VGAHI, i, r, g, b , x, y, w ,h;
char *msg;
initgraph(&gd,&gm,"");
w = getmaxx()/4;
h = getmaxy()/4;
randomize();
for(i=0;i<16;i++){
  x = w * (i % 4);
  y = h * (i / 4);
  r = random(255);
  g = random(255);
  b = random(255);

  setrgbpalette(i,r,g,b);
  setfillstyle(SOLID_FILL,i);
  bar(x , y , x+w, y+h);
  sprintf(msg, "R:%d G:%d B:%d", r,g,b);
  outtextxy(x+10, y+10, msg);
}
getch();
}





Output:








CSS Selectors
2012-09-26T18:07:00.001+05:30


  

      Pattern
      Meaning
      Described in section
      First defined in CSS level
    

  

      *
      any element
      Universal selector
      2
    

      E
      an element of type E
      Type selector
      1
    

      E[foo]
      an E element with a "foo" attribute
      Attribute selectors
      2
    

      E[foo="bar"]
      an E element whose "foo" attribute value is exactly equal to "bar"
      Attribute selectors
      2
    

      E[foo~="bar"]
      an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
      Attribute selectors
      2
    

      E[foo^="bar"]
      an E element whose "foo" attribute value begins exactly with the string "bar"
      Attribute selectors
      3
    

      E[foo$="bar"]
      an E element whose "foo" attribute value ends exactly with the string "bar"
      Attribute selectors
      3
    

      E[foo*="bar"]
      an E element whose "foo" attribute value contains the substring "bar"
      Attribute selectors
      3
    

      E[foo|="en"]
      an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"
      Attribute selectors
      2
    

      E:root
      an E element, root of the document
      Structural pseudo-classes
      3
    

      E:nth-child(n)
      an E element, the n-th child of its parent
      Structural pseudo-classes
      3
    

      E:nth-last-child(n)
      an E element, the n-th child of its parent, counting from the last one
      Structural pseudo-classes
      3
    

      E:nth-of-type(n)
      an E element, the n-th sibling of its type
      Structural pseudo-classes
      3
    

      E:nth-last-of-type(n)
      an E element, the n-th sibling of its type, counting from the last one
      Structural pseudo-classes
      3
    

      E:first-child
      an E element, first child of its parent
      Structural pseudo-classes
      2
    

      E:last-child
      an E element, last child of its parent
      Structural pseudo-classes
      3
    

      E:first-of-type
      an E element, first sibling of its type
      Structural pseudo-classes
      3
    

      E:last-of-type
      an E element, last sibling of its type
      Structural pseudo-classes
      3
    

      E:only-child
      an E element, only child of its parent
      Structural pseudo-classes
      3
    

      E:only-of-type
      an E element, only sibling of its type
      Structural pseudo-classes
      3
    

      E:empty
      an E element that has no children (including text nodes)
      Structural pseudo-classes
      3
    

      E:link

E:visited
      an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
      The link pseudo-classes
      1
    

      E:active

E:hover

E:focus
      an E element during certain user actions
      The user action pseudo-classes
      1 and 2
    

      E:target
      an E element being the target of the referring URI
      The target pseudo-class
      3
    

      E:lang(fr)
      an element of type E in language "fr" (the document language specifies how language is determined)
      The :lang() pseudo-class
      2
    

      E:enabled

E:disabled
      a user interface element E which is enabled or disabled
      The UI element states pseudo-classes
      3
    

      E:checked
      a user interface element E which is checked (for instance a radio-button or checkbox)
      The UI element states pseudo-classes
      3
    

      E::first-line
      the first formatted line of an E element
      The ::first-line pseudo-element
      1
    

      E::first-letter
      the first formatted letter of an E element
      The ::first-letter pseudo-element
      1
    

      E::before
      generated content before an E element
      The ::before pseudo-element
      2
    

      E::after
      generated content after an E element
      The ::after pseudo-element
      2
    

      E.warning
      an E element whose class is "warning" (the document language specifies how class is determined).
      Class selectors
      1
    

      E#myid
      an E element with ID equal to "myid".
      ID selectors
      1
    

      E:not(s)
      an E element that does not match simple selector s
      Negation pseudo-class
      3
    

      E F
      an F element descendant of an E element
      Descendant combinator
      1
    

      E > F
      an F element child of an E element
      Child combinator
      2
    

      E + F
      an F element immediately preceded by an E element
      Adjacent sibling combinator
      2
    

      E ~ F
      an F element preceded by an E element
      General sibling combinator
      3
    





Creating arrow edges using CSS
2012-09-22T19:18:00.001+05:30

Before we start, we have to understand the concept behind  "border"



Basically, borders render like this:

#sampleStyle{
   border-top   : 25px solid #a71d95;
   border-right : 25px solid #1da2a7;
   border-bottom: 25px solid #70a71d;
   border-left  : 25px solid #c10902;
   width :60px;
   heigth:60px;
}





If we compress the content area, i.e) make width and height values to "0px"



#sampleStyle{
     border-top   : 25px solid #a71d95;
     border-right : 25px solid #1da2a7;
     border-bottom: 25px solid #70a71d;
     border-left  : 25px solid #c10902;
     width :0px;
     heigth:0px;
}






If we want right arrow , make all border-color except border-left-color to transparent





#sampleStyle{
     border-top   : 25px solid #a71d95;
     border-right : 25px solid #1da2a7;
     border-bottom: 25px solid #70a71d;
     border-left  : 25px solid #c10902;
     width :0px;
     heigth:0px;
}






Example:

.arrow_box { 
  position: relative;
  background: #182126; 
  border: 1px solid #000000; 
  padding: 40px;
  width: 280px;
  height: 100px;
  border-radius: 6px;
  font-family:"Arial";
  font-size:46px;
} 

.arrow_box:after, .arrow_box:before { 
  top: 100%; 
  border: solid transparent; 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  pointer-events: none;
} 

.arrow_box:after { 
  border-color: rgba(24, 33, 38, 0); 
  border-top-color: #182126; 
  border-width: 30px; 
  left: 50%; 
  margin-left: -30px; 
}

.arrow_box:before { 
  border-color: rgba(0, 0, 0, 0); 
  border-top-color: #000000; 
  border-width: 31px; 
  left: 50%; 
  margin-left: -31px; 
}
HTML

<div class="arrow_box">CSS ARROW EXAMPLE</div>


OUTPUT

















Personal Diary - A Mini Project Written in Turbo C With Graphical Interface
2012-09-13T15:13:00.001+05:30





A Simple Personal Diary written in Turbo C with Graphical User Interface



Features,


Birthday Reminder
Notes
Address Book 







The main part of the project is UI



'GUI.h' header file includes texbox, message-box and more custom graphical functions  

' Dairy.h' header file includes functionality of Personal Dairy

' Dairyload.c' includes loadingscreen, login screen, installation check etc

'Dairy.c' - execution stats here




















3D Projection
2012-09-07T14:18:00.001+05:30

I hope you will remember engineering graphics in your first year of engineering, This basic idea will be useful in understanding the concept.  Usually projection is nothing but the representation of a 3D object in a 2D form with the angle we view. Basically we represent a 3D object in a 2D form with three basic views


Front View
Top View
Side View

In the following code, the user is asked to enter the co-ordinates for a 2D object and with the depth we enter it will generate a 3D object. For example , consider a cube - the view you see without a depth will be a square.



Note: In computer graphics the co-ordinates start from top-left (0,0) of your screen










CODE :



#include <stdio.h>
#include <stdlib.h>
#include <graphics.h>
#include <conio.h>

int ARRAY_SIZE;

int array_max(int *arr, int returnIndex);
int array_min(int *arr, int returnIndex);
void draw3d(int sides, int *x, int *y, int depth);
void drawFrontView(int sides, int *x, int *y);
void drawSideView(int sides, int *x, int *y, int depth);
void drawTopView(int sides,int *x,int *y, int depth);
void drawAxis(int *x, int *y, int depth);

int array_max(int *arr, int returnIndex){
  int i, max = arr[0], index=0;
  for(i=1;i<ARRAY_SIZE;i++){
      if(arr[i]>max)
      {
       max=arr[i];
       index=i;
      }
  }
  return returnIndex?index:max;
}

int array_min(int *arr, int returnIndex){
  int i, min = arr[0], index=0;
  for(i=1;i<ARRAY_SIZE;i++){
      if(arr[i]<min)
      {
  min=arr[i];
  index=i;
      }
  }
  return returnIndex?index:min;
}

void drawAxis(int *x, int *y, int depth){
  int maxy, minx;
  maxy = array_max(y,0);
  minx = array_min(x,0);

  setcolor(BLUE);
  //z-axis
  line(minx+depth, maxy-depth, -depth, getmaxy());
  //x-axis
  line(minx+depth, maxy-depth, getmaxx(), maxy-depth);
  //y-axis
  line(minx+depth, maxy-depth, minx+depth, 0);
  setlinestyle(0,1,2);
  setfillstyle(CLOSE_DOT_FILL, WHITE);
  floodfill(0,0,BLUE);
  setfillstyle(CLOSE_DOT_FILL, BROWN);
  floodfill(getmaxx(),0,BLUE);
  setfillstyle(CLOSE_DOT_FILL, DARKGRAY);
  floodfill(getmaxx(),getmaxy(),BLUE);
}

void draw3d(int sides,int *x,int *y,int depth)
{
  int i,j,k=0;
  setlinestyle(0,1,1);
  drawAxis(x, y, depth);
  setcolor(YELLOW);
  for(j=0;j<2;j++)
  {
    for(i=0;i<sides;i++)
    {
      if(i!=sides-1)
      line(x[i]+k,y[i]-k,x[i+1]+k,y[i+1]-k);
      else
      line(x[i]+k,y[i]-k,x[0]+k,y[0]-k);

      if(j==0)
      line(x[i],y[i],x[i]+depth,y[i]-depth);
    }
    k=depth;
  }
}

void drawFrontView(int sides,int *x,int *y)
{
    int i;
    setlinestyle(0,1,1);
    setcolor(LIGHTGREEN);
    for(i=0;i<sides;i++)
    {
       if(i!=sides-1)
       line(x[i],y[i],x[i+1],y[i+1]);
       else
       line(x[i],y[i],x[0],y[0]);
    }
}

void drawSideView(int sides,int *x,int *y, int depth)
{
    int i, maxyIndex, minyIndex, maxxIndex;
    maxxIndex=array_max(x,1);
    maxyIndex=array_max(y,1);
    minyIndex=array_min(y,1);

    setcolor(LIGHTGREEN);
    for(i=0;i<sides-1;i++)
    {
 if(y[i]<y[maxyIndex] && y[i]>y[minyIndex] && x[i]<x[maxxIndex])
 setlinestyle(3,1,1);
 else
 setlinestyle(0,1,1);

 line(x[0],y[i],x[0],y[i+1]);
 line(x[0]+depth*2,y[i],x[0]+depth*2,y[i+1]);
 line(x[0],y[i],x[0]+depth*2,y[i]);
 line(x[0],y[i+1],x[0]+depth*2,y[i+1]);
    }
}

void drawTopView(int sides, int *x, int *y, int depth)
{
    int i, minyIndex, maxxIndex, minxIndex;
    maxxIndex=array_max(x,1);
    minxIndex=array_min(x,1);
    minyIndex=array_min(y,1);
    setcolor(LIGHTGREEN);
    for(i=0;i<sides-1;i++)
    {
 if(x[i]<x[maxxIndex] && x[i]>x[minxIndex] && y[i]>y[minyIndex])
 setlinestyle(3,1,1);
 else
 setlinestyle(0,1,1);

 line(x[i],y[0],x[i+1],y[0]);
 line(x[i],y[0]+depth * 2,x[i+1],y[0]+depth*2);
 line(x[i],y[0],x[i],y[0]+depth*2);
 line(x[i+1],y[0],x[i+1],y[0]+depth*2);
    }
}

void main(){
int gd=0,gm;
int x[20],y[20],i,sides,depth,key;
initgraph(&gd,&gm,"");
printf("No of sides(front view only) : ");
scanf("%d",&sides);
printf("Co-ordinates : ");
for(i=0;i<sides;i++)
{
printf("(x%d,y%d)",i,i);
scanf("%d%d",&x[i],&y[i]);
}
printf("Depth :");
scanf("%d",&depth);
ARRAY_SIZE=sides;
while(1){
key=getche();
clrscr();
cleardevice();
printf("LEFT ARROW -> 3D View\nUP ARROW - > Front View\nDOWN ARROW -> Top View\nRIGHT ARROW -> Side View\nESC -> Exit");
switch(key){
 case 75: //left arrow
 draw3d(sides,x,y,depth);
 break;
 case 72: //up arrow
 drawFrontView(sides,x,y);
 break;
 case 77: //right arrow
 drawSideView(sides,x,y,depth);
 break;
 case 80: //down arrow
 drawTopView(sides,x,y,depth);
 break;
 case 27: //esc
 exit(0);
 break;
}
}
}




OUTPUT:










































3D Rotation
2012-09-07T14:16:00.001+05:30




#include <stdio.h>
#include <stdlib.h>
#include<graphics.h>
#include<conio.h>
#include<math.h>
void draw3d(int fs,int x[20],int y[20],int tx,int ty,int d);
void draw3d(int fs,int x[20],int y[20],int tx,int ty,int d)
{
int i,j,k=0;
for(j=0;j<2;j++)
{
for(i=0;i<fs;i++)
{
if(i!=fs-1)
{
line(x[i]+tx+k,y[i]+ty-k,x[i+1]+tx+k,y[i+1]+ty-k);
}
else
line(x[i]+tx+k,y[i]+ty-k,x[0]+tx+k,y[0]+ty-k);
}
k=d;
}
for(i=0;i<fs;i++)
{
line(x[i]+tx,y[i]+ty,x[i]+tx+d,y[i]+ty-d);
}
}

void main()
{
int gd=DETECT,gm;
int x[20],y[20],x1[20],y1[20],tx=0,ty=0,i,j,k,fs,temp,d,a;
float theta;
initgraph(&gd,&gm,"");
printf("No of sides (front view only) : ");
scanf("%d",&fs);
printf("Co-ordinates : ");
for(i=0;i<fs;i++)
{
printf("(x%d,y%d)",i,i);
scanf("%d%d",&x[i],&y[i]);
}
printf("Depth :");
scanf("%d",&d);
draw3d(fs,x,y,tx,ty,d);
printf("translation (x,y),rotate(a)");
scanf("%d%d%d",&tx,&ty,&a);
theta=(float)(a*(3.14/180));
for(i=0;i<fs;i++)
{
x1[i]=tx+((x[i]-tx)*cos(theta))-((y[i]-ty)*sin(theta));
y1[i]=ty+((y[i]-ty)*cos(theta))+((x[i]-tx)*sin(theta));
}
draw3d(fs,x1,y1,tx,ty,d);
getch();
closegraph();
}





3D Scaling
2012-09-07T14:15:00.000+05:30


#include <stdio.h>
#include <stdlib.h>
#include<graphics.h>
#include<conio.h>
#include<math.h>
void draw3d(int fs,int x[20],int y[20],int tx,int ty,int d);
void draw3d(int fs,int x[20],int y[20],int tx,int ty,int d)
{
int i,j,k=0;
for(j=0;j<2;j++)
{
for(i=0;i<fs;i++)
{
if(i!=fs-1)
line(x[i]+tx+k,y[i]+ty-k,x[i+1]+tx+k,y[i+1]+ty-k);
else
line(x[i]+tx+k,y[i]+ty-k,x[0]+tx+k,y[0]+ty-k);
}
k=d;
}
setfillstyle(1,15);
for(i=0;i<fs;i++)
{
line(x[i]+tx,y[i]+ty,x[i]+tx+d,y[i]+ty-d);
}
}

void main()
{
int gd=DETECT,gm;
int x[20],y[20],x1[20],y1[20],tx=0,ty=0,i,j,k,fs,temp,d,xm,ym;
float theta;
initgraph(&gd,&gm,"");
printf("no of sides (front view only) : ");
scanf("%d",&fs);
printf("co-ordinates : ");
for(i=0;i<fs;i++)
{
printf("(x%d,y%d)",i,i);
scanf("%d%d",&x[i],&y[i]);
}
printf("Depth :");
scanf("%d",&d);
draw3d(fs,x,y,tx,ty,d);
printf("magnification (x,y,xmag,ymag)");
scanf("%d%d%d%d",&tx,&ty,&xm,&ym);
for(i=0;i<fs;i++)
{
x1[i]=(x[i]*xm);
y1[i]=(y[i]*ym);
}
d=d*(ym+xm)/2;
draw3d(fs,x1,y1,tx,ty,d);
getch();
}




3D Translation
2012-09-07T14:13:00.001+05:30


#include <stdio.h>
#include <stdlib.h>
#include<graphics.h>
#include<conio.h>
void draw3d(int fs,int x[20],int y[20],int tx,int ty,int d);
void draw3d(int fs,int x[20],int y[20],int tx,int ty,int d)
{
int i,j,k=0;
for(j=0;j<2;j++)
{
for(i=0;i<fs;i++)
{
if(i!=fs-1)
line(x[i]+tx+k,y[i]+ty-k,x[i+1]+tx+k,y[i+1]+ty-k);
else
line(x[i]+tx+k,y[i]+ty-k,x[0]+tx+k,y[0]+ty-k);
}
k=d;
}
for(i=0;i<fs;i++)
{
line(x[i]+tx,y[i]+ty,x[i]+tx+d,y[i]+ty-d);
}
}

void main()
{
int gd=DETECT,gm;
int x[20],y[20],tx=0,ty=0,i,fs,d;
initgraph(&gd,&gm,"");
printf("no of sides (front view only) : ");
scanf("%d",&fs);
printf("co-ordinates : ");
for(i=0;i<fs;i++)
{
printf("(x%d,y%d)",i,i);
scanf("%d%d",&x[i],&y[i]);
}
printf("Depth :");
scanf("%d",&d);
draw3d(fs,x,y,tx,ty,d);
printf("translation (x,y)");
scanf("%d%d",&tx,&ty);
draw3d(fs,x,y,tx,ty,d);
getch();
}




2D Shearing
2012-09-07T14:12:00.000+05:30


#include <stdio.h>
#include <stdlib.h>
#include<graphics.h>
#include<conio.h>
#include<math.h>
void draw2d(int,int [],int [],int,int);
void main()
{
int gd=DETECT,gm;
int x[20],y[20],x1[20],y1[20],tx=0,ty=0,i,fs,a;
initgraph(&gd,&gm,"");
printf("No of sides : ");
scanf("%d",&fs);
printf("Co-ordinates : ");
for(i=0;i<fs;i++)
{
printf("(x%d,y%d)",i,i);
scanf("%d%d",&x[i],&y[i]);
}
draw2d(fs,x,y,tx,ty);
printf("translation (x,y) : ");
scanf("%d%d",&tx,&ty);
while(1)
{
clrscr();
cleardevice();
printf("1. X Shear\n\n2. Y Shear\n\n3. Exit\n\n");
draw2d(fs,x,y,0,0);
switch(getche())
{
case '1':
printf("X Shear Value : ");
scanf("%d",&a);
for(i=0;i<fs;i++)
{
x1[i]=x[i]+(a*(y[i]-ty));
y1[i]=y[i];
}
break;
case '2':
printf("Y Shear Value : ");
scanf("%d",&a);
for(i=0;i<fs;i++)
{
x1[i]=y[i];
y1[i]=y[i]+(a*(x[i]-tx));
}
break;
case '3':
closegraph();
exit(0);
}
draw2d(fs,x1,y1,tx,ty);
getch();
}
}
void draw2d(int fs,int x[20],int y[20],int tx,int ty)
{
int i;
for(i=0;i<fs;i++)
{
if(i!=(fs-1))
line(x[i]+tx,y[i]+ty,x[i+1]+tx,y[i+1]+ty);
else
line(x[i]+tx,y[i]+ty,x[0]+tx,y[0]+ty);
}
}




2D Scaling
2012-09-07T14:10:00.000+05:30


#include<stdio.h>
#include <stdlib.h>
#include<graphics.h>
#include<conio.h>
#include<math.h>
void draw2d(int,int [],int [],int,int);
void main()
{
int gd=DETECT,gm;
int x[20],y[20],tx=0,ty=0,i,fs;
int mx,my;
initgraph(&gd,&gm,"");
printf("No of sides : ");
scanf("%d",&fs);
printf("Co-ordinates : ");
for(i=0;i<fs;i++)
{
printf("(x%d,y%d)",i,i);
scanf("%d%d",&x[i],&y[i]);
}
draw2d(fs,x,y,tx,ty);
printf("magnification (x,y) : ");
scanf("%d%d",&mx,&my);
for(i=0;i<fs;i++)
{
x[i]=x[i]*mx;
y[i]=y[i]*my;
}
draw2d(fs,x,y,tx,ty);
getch();
}
void draw2d(int fs,int x[20],int y[20],int tx,int ty)
{
int i;
for(i=0;i<fs;i++)
{
if(i!=(fs-1))
line(x[i]+tx,y[i]+ty,x[i+1]+tx,y[i+1]+ty);
else
line(x[i]+tx,y[i]+ty,x[0]+tx,y[0]+ty);
}
}




2D Rotation
2012-09-07T14:08:00.000+05:30

#include <stdio.h>
#include <stdlib.h>
#include<graphics.h>
#include<conio.h>
#include<math.h>
void draw2d(int,int [],int [],int,int);
void main()
{
int gd=DETECT,gm;
int x[20],y[20],x1[20],y1[20],tx=0,ty=0,i,fs,a;
float theta;
initgraph(&gd,&gm,"");
printf("No of sides : ");
scanf("%d",&fs);
printf("Co-ordinates : ");
for(i=0;i<fs;i++)
{
printf("(x%d,y%d)",i,i);
scanf("%d%d",&x[i],&y[i]);
}
draw2d(fs,x,y,tx,ty);
printf("translation (x,y), Angle : ");
scanf("%d%d%d",&tx,&ty,&a);
theta=(float)(a*(3.14/180));
for(i=0;i<fs;i++)
{
x1[i]=tx+((x[i]-tx)*cos(theta))-((y[i]-ty)*sin(theta));
y1[i]=ty+((y[i]-ty)*cos(theta))+((x[i]-tx)*sin(theta));
}
draw2d(fs,x1,y1,tx,ty);
getch();
}
void draw2d(int fs,int x[20],int y[20],int tx,int ty)
{
int i;
for(i=0;i<fs;i++)
{
if(i!=(fs-1))
line(x[i]+tx,y[i]+ty,x[i+1]+tx,y[i+1]+ty);
else
line(x[i]+tx,y[i]+ty,x[0]+tx,y[0]+ty);
}
}

Property	Description	Default Value
dimension	Dimension of the patern No. of rows x No. of columns Eg: dimension:‘5x5’	3x3
patternRadius	Radius of the pattern circle Eg: patternRadius:25	20
patternGap	Gap between each Pattern Circle Eg: patternGap:70	50
outerColor	Color of the Pattern Circle. The color value can be either hex color or hex gradient color Eg: outerColor:’#FC0000’ outerColor :‘90-#239EE0:5-#1951A0:95’	#333333
innerColor	Color of the inner circle within the Pattern Circle Eg: innerColor:’#FC0000’ innerColor :‘90-#239EE0:5-#1951A0:95’	90-#239EE0:5-#1951A0:95
background	Pattern box background color Eg: background:’#FF00F0’	#000000
backgroundOpacity	Pattern box background opacity Eg: background:0.5	1
hoverColor	Stroke color of Pattern Circle when mouse over Eg: hoverColor:’#FF00F0’	#c8ee17
errorColor	Stroke color of Pattern Circle for Invalid Pattern Eg: errorColor:’#FF00F0’	#FF0000
padding	Pattern Box padding Eg: padding:25	Value of pattern radius
onFinish	Handler to be executed when the user completes the pattern Eg: onFinish:function(value){ } value – value of the pattern drawn passed to the handler	null

Function	Description	Return value
draw (container)	Draw the pattern within the container. Should be called with pattern instance. Eg: s.draw(‘mydiv’); Here ‘mydiv’ represents containerId s.draw(document.getElementById(‘mydiv’));	Return Pattern Object
clear()	Resets the pattern. Eg: s.clear();	Return Pattern Object
error()	Used to mark the drawn pattern as error Eg: s.error();	Return Pattern Object
val()	Used to get the value of drawn pattern Eg: s.val(); for the image attached in this post, the value returned will be ‘3-4-5-10-15’	Return pattern value

Pattern	Meaning	Described in section	First defined in CSS level
*	any element	Universal selector	2
E	an element of type E	Type selector	1
E[foo]	an E element with a "foo" attribute	Attribute selectors	2
E[foo="bar"]	an E element whose "foo" attribute value is exactly equal to "bar"	Attribute selectors	2
E[foo~="bar"]	an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"	Attribute selectors	2
E[foo^="bar"]	an E element whose "foo" attribute value begins exactly with the string "bar"	Attribute selectors	3
E[foo$="bar"]	an E element whose "foo" attribute value ends exactly with the string "bar"	Attribute selectors	3
E[foo*="bar"]	an E element whose "foo" attribute value contains the substring "bar"	Attribute selectors	3
E[foo\|="en"]	an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"	Attribute selectors	2
E:root	an E element, root of the document	Structural pseudo-classes	3
E:nth-child(n)	an E element, the n-th child of its parent	Structural pseudo-classes	3
E:nth-last-child(n)	an E element, the n-th child of its parent, counting from the last one	Structural pseudo-classes	3
E:nth-of-type(n)	an E element, the n-th sibling of its type	Structural pseudo-classes	3
E:nth-last-of-type(n)	an E element, the n-th sibling of its type, counting from the last one	Structural pseudo-classes	3
E:first-child	an E element, first child of its parent	Structural pseudo-classes	2
E:last-child	an E element, last child of its parent	Structural pseudo-classes	3
E:first-of-type	an E element, first sibling of its type	Structural pseudo-classes	3
E:last-of-type	an E element, last sibling of its type	Structural pseudo-classes	3
E:only-child	an E element, only child of its parent	Structural pseudo-classes	3
E:only-of-type	an E element, only sibling of its type	Structural pseudo-classes	3
E:empty	an E element that has no children (including text nodes)	Structural pseudo-classes	3
E:link E:visited	an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)	The link pseudo-classes	1
E:active E:hover E:focus	an E element during certain user actions	The user action pseudo-classes	1 and 2
E:target	an E element being the target of the referring URI	The target pseudo-class	3
E:lang(fr)	an element of type E in language "fr" (the document language specifies how language is determined)	The :lang() pseudo-class	2
E:enabled E:disabled	a user interface element E which is enabled or disabled	The UI element states pseudo-classes	3
E:checked	a user interface element E which is checked (for instance a radio-button or checkbox)	The UI element states pseudo-classes	3
E::first-line	the first formatted line of an E element	The ::first-line pseudo-element	1
E::first-letter	the first formatted letter of an E element	The ::first-letter pseudo-element	1
E::before	generated content before an E element	The ::before pseudo-element	2
E::after	generated content after an E element	The ::after pseudo-element	2
E.warning	an E element whose class is "warning" (the document language specifies how class is determined).	Class selectors	1
E#myid	an E element with ID equal to "myid".	ID selectors	1
E:not(s)	an E element that does not match simple selector s	Negation pseudo-class	3
E F	an F element descendant of an E element	Descendant combinator	1
E > F	an F element child of an E element	Child combinator	2
E + F	an F element immediately preceded by an E element	Adjacent sibling combinator	2
E ~ F	an F element preceded by an E element	General sibling combinator	3