Web applications | neethutv

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

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..

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…..

neethutv

Category Archives: Web applications

Canvas- Transformations and Animations

My web application to shortening url