Posted on

Raphael js, Drawing a funny monster

When i was young i discovered that it’s possible to draw using Qbasic language .. So i passed all my time exploring circles, lines sprites and etc. Now the web is populated by great tools for simple and complex graphics, Rapahel is one of them.

Raphael is a javascript library for vectorial graphics, but it can also be used to make nice animations and it is using SVG.

In this tutorial i will try to explain how to draw a funny monster face (which looks like Domo) view Demo , or Download source files.

So first of all you’ll need to download raphael js library and create a simple html file :

Setting up

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Domo like</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="raphael.js"></script>
        <script>
            window.onload = function(){
                var paper = Raphael("canvas", 640, 480);
            }

        </script>
    </head>
    <body>
        <div id="canvas"></div>
    </body>
</html>

The important thing is “paper” value which is the raphale object :

 var paper = Raphael("canvas", 640, 480);

1 . drawing the head and the mouth :

var head = paper.rect(180, 50, 320, 340, 15);
head.attr({
    'stroke-width' : 6,
    'fill' : '15-#AA0000-#511'
});
mouth = paper.rect(200, 150, 240, 200, 5);

mouth.attr({
    'stroke-width' : 10,
    'fill' : '#000'
})

This code will give us :

2. Adding eyes and tongue

var eyes = paper.set();

eyes.push(
    paper.rect(200, 100, 15, 10, 5),
    paper.rect(410, 100, 35, 20, 5)
);

eyes.attr({
    'stroke-width' : 10,
    'fill' : '#000'
});
tongue = paper.ellipse(350, 310, 60, 20);
tongue.attr({
    'stroke-width' : 3,
    'fill' : '#FF0000'
});

Result :

3. Adding teeth

Okey our little monster needs some teeth we’ll use loops to draw em.

teeth = paper.set();

for(i=200; i<= 420; i+=20){
    teeth.push(paper.rect(i, 150, 20, 70 , 5));
    teeth.push(paper.rect(i, 310, 20, 40, 5));
}

teeth.attr({
    'fill' : '#FFFFFF'
})

Final Result :

Et voilà ! Hope you like the result ! ^^

View Demo Download
 
   
Posted on

CouchDB, nosql tutorial

CouchDB is a document orientated that can be queried and indexed in a MapReduce fashion using JavaScript. It provides a RESTful JSON API than can be accessed from any environment that allows HTTP requests.

And unlike SQL databases CouchDb is schema free, so there are no restrictions for data creation, for example on MySQL to create a person entity we use table called person with sometimes NULL values :

id
 
Name
 
phone
 
adress
123 Jane 11-11111 Adress
124 John NULL NULL

But on CouchDB document are created with only needed attributes so if we want to have the defined on couchDB we’ll have :

{
  _id : '123',
  name : 'John'
}

and

{
  _id : '124',
  name : 'Jane',
  adress : 'Adress',
  phone : '111-11111'
}

Installation

We will not discuss about CouchDB installation, but here you can find all you need for your Os :

http://wiki.apache.org/couchdb/Installation

I personally use couchdbx for intel macos.

Let’s start !

We will use curl to interact with couchDb server. In this tutorial we’ll try to  do basic commands like create database, insert documents, update and delete them.

Creating database “Documents”

curl -X PUT http://127.0.0.1:5984/documents

you will receive message like this : {“ok”:true} that means that creation was successful and now we have a new database called “documents“.
To get all created databases type :

curl -X GET http://127.0.0.1:5984/_all_dbs

A Json array will be returned with the list of created Databases.
Now let’s try to add documents

Creating documents :

Assuming that our documents will have a title, an author and a description :

curl -X PUT http://127.0.0.1:5984/documents/myDocument -d '{"title":"MyDocument", "autho":"hbensalem","description":"test document creation with couchDB"}'

Result :

{"ok":true,"id":"myDocument",
"rev":"1-1a9820b794c6746cf7d45cd9cd949d95"}

Now to get created document :

curl -X GET http://127.0.0.1:5984/documents/myDocument

Result :

{"_id":"myDocument","_rev":"1-1a9820b794c6746cf7d45cd9cd949d95",
"title":"MyDocument","autho":"hbensalem","description":"test document creation with couchDB"}

Updating Documents

We have forgot to add a creation date for myDocument so let’s update it :

curl -X PUT http://127.0.0.1:5984/documents/myDocument -d '{"_rev":"1-1a9820b794c6746cf7d45cd9cd949d95",
"creationDate":"2010-10-10"}'

Result :

{"ok":true,"id":"myDocument",
"rev":"2-68ef7cc631d81746f759f0f0294fd993"}

As you can see we have passed _rev to the service this is very important because couchDb create a revision for every document modification.

deleting documents

curl -X DELETE http://127.0.0.1:5984/documents/myDocument?rev=2-68ef7cc631d81746f759f0f0294fd993

Result :

{"ok":true,"id":"myDocument",
"rev":"3-7095fc86cdd65c9eb286d48acf7ccf00"}

As you can see deletion also creates a new revision !

That’s all for this tutorial, for the next one i will try to explain how to create views in couchDb.