Canvas- Transformations and Animations

Canvas is a interesting feature in HTML5. Nowadays many developers use canvas to create powerful web applications. By definition canvas is  “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly”. Canvas allow us to draw graphics using javascript. When we use canvas there is no need to install browser plug-ins like flash player. We can draw many shapes using properties in canvas. Currently canvas support 2D surface.

We can create a canvas in the browser using following code

<canvas id=”myCanvas” style=”width:300px; height:300px”></canvas>

This canvas will be invisible also canvas have x and y coordinates. Using following code we can get context of canvas.

var myCanvas = document.getElementById(“myCanvas”)
var context = myCanvas.getContext(“2d”)

Transformation functions

• scale – allows you to scale the current context.
• rotate – allows you to rotate the x and y coordinates of the current context.

State functions

• save – allows you to save the current state of the context.
• restore – allows you to restore the state of the context from a previously saved state.

Transformations &Animations

When the context is created, the transformation matrix must initially be the identity transform. It may then be adjusted using the transformation methods.

• scale(x, y)      – changes the scaling transformation with the given characteristics
• rotate(angle)  – changes the transformation matrix to apply a rotation transformation with the given characteristics
• translate(x, y) – changes the transformation matrix to apply a translation transformation with the given characteristics
• transform(m11, m12, m21, m22, dx, dy) – changes the transformation matrix to apply the matrix given by the arguments
• setTransform(m11, m12, m21, m22, dx, dy) – changes the transformation matrix to the matrix given by the arguments.

Transformations and animations can work separately.  Let’s observe how is the  rotation. To rotate the context, pass in an angle and it will rotate on the canvas. The following example demonstrates draws a rectangle every 250 milliseconds and each rectangle is rotated, so the effect is like a spinning wheel.

var can = function () {
var canvas;
var context;

return {
draw: function () {
var r = Math.floor(Math.random() * 255) + 70;
var g = Math.floor(Math.random() * 255) + 70;
var b = Math.floor(Math.random() * 255) + 70;
var s = ‘rgba(‘ + r + ‘,’ + g + ‘,’ + b + ‘, 0.5)’;

context.rotate(0.2 * Math.PI);
context.fillStyle = s;
context.fillRect(10, 0, 150, 50);
},
init: function () {
canvas = document.getElementById(“myCanvas”);
context = canvas.getContext(“2d”);
context.translate(200, 250);
setInterval(can.draw, 250);
}
}
} ();

window.onload = can.init;

The output will be like this..

My web application to shortening url

Web applications are part of web technology. There are many ways to develop a scalable web application. Google app engine  is a product of google which enables us to build powerful web applications. I created a web application to shortening the urls using Google app engine.  We can easily create  and maintain our  application in app engine  and  there is no need of any other server. With app engine we can build web application using languages such as java ,python ,Go. I selected python for my  application because it provide many libraries , tools and frameworks. When we use python a fast Python 2.5 interpreter needed. A Python web app interacts with the App Engine web server using the CGI protocol. Google app engine is reliable because our application run in a secure environment.

First  download and install software development kit from http://code.google.com/appengine/downloads.html. Then create a folder that contain our  application . I called mine application as ‘ urlshorten-neethu’.  To develop application our folder contain following files

• app.yaml    –  basic settings for application
• index.html  –  contain our application’s home page
• index.yaml  – generate automatically
• main.py     – main python program contain main functions for application

please visit my bitbucket account to see the codes contain above files , its url is https://bitbucket.org/neethuedappal/url-shortener

app.yaml contain name of our application , version,runtime and api_version .’Handlers’ are way of handling urls, script is our main python program. After creating app.yaml we can start like this.

dev_appserver.py ~/full/path/to/urlshorten-neethu

The web server listens on port 8080 by default. You can visit the application at this URL: http://localhost:8080/. And when we make changes to our app, the server will automatically load them, so we don’t need to worry about restarting it for changes.

The main program main.py contain all url shortening functions and datastore models . Our application is to short the long urls into tiny url, so we can use datastore property of google app engine. App engine datastore provide scalable storage of  web application also provide replication of data. Datastore saves data objects known as entities and entities have one or more properties. For our application we create a object and its two properties are original url which we enter and short url which we make. When we enter a url ,then first check whether it already present  in datastore, If already presents then fetch its short url from datastore. Otherwise create object and its propertis as entering url and short url and save object.

To redirecting our short url we create another class and check short url present in database using query and if present fetch and redirect its original url. After creating our application uploading it in google app engine.To upload our finished applicaton,run the following command

‘appcfg.py update urlshorten-neethu’

Now i  can provide  my url  shortening service to every one. please visit my application here http://urlshorten-neethu.appspot.com/  and short your urls…..

Prototype for managing unmanned level cross

Railways ,being cheapest mode of transportation in the world. But railway safety is a crucial aspect of rail operations . There are many accidents at unmanned railway cross due to lack of care . Here a solution to accidents at unmanned railway  level crossing. A GPS receiver is used to detect the current position of train by giving latitude and longitude. Then send this parameters to receiver system contain Atmega16 microcontroller using wireless communication. Receiver system calculate distance between level crossing and train , if distance less than a particular value flashing lights.

Advantages

• Cost effective
• Less security threats
• Number of GPS receiver same as number of trains
• Incremental introduction of new technology
• Reduce cost by saving expensive wiring

Data Flow Digrams

Here is the link for complete code https://bitbucket.org/neethuedappal/main-project-codes