Paint app with flask

The paint app i made using html 5 canvas and javascript has been modified with a save option and flask is given as the backend.
When each picture is drawn details are stored as a json object. Like while a circle is drawn each detail is stored as a json object and pushed to a list.This list of objects is send to the database(here postgresql) and it is shown in the gallery.
When we click in any name in gallery it will retrieve the picture info from that name in database and will redraw in the canvas.

For example given below is the code for drawing circle in paint app.We added an extra line to store details about the circle on mouseup function.Then it is pushed into the list(here list name is  jsondata).

1:  function circle(){  
2:  canvas.onmousedown=circledown;  
3:  canvas.onmouseup=circleup;  
4:  canvas.onmousemove=circlemove;  
5:  function circledown(e){  
6:   img=context.getImageData(0,0,canvas.width,canvas.height);  
7:   startx=e.x;  
8:   starty=e.y;  
9:   drag3=true;  
10:  }  
11:  function circleup(e){  
12:  jsondata.push({"Type":"circle", "X0":startx,"Y0":starty,"X1":endx,"Y1":endy,"width":context.lineWidth,"color":context.strokeStyle,"fill":f})  
13:  drag3=false;  
14:  }  
15:  function circlemove(e){  
16:  if (drag3){  
17:  context.putImageData(img,0,0);  
18:  endx=e.x;  
19:  endy=e.y;  
20:  context.beginPath();  
21:  context.arc(Math.abs(endx+startx)/2,Math.abs(endy+starty)/2,Math.sqrt(Math.pow(endx-startx,2)+Math.pow(endy-starty,2))/2, 0, Math.PI*2, true);   
22:  context.closePath();  
23:  context.stroke();  
24:  if (f==1){  
25:  context.fill();  
26:  }  
27:  }}}  

In line number 12 the data is stored as a json variable.

Now the following code redraws the circle when the name is selected.

 if (l[i]["Type"]=='circle'){  
 context.beginPath();  
 context.arc(Math.abs(l[i]["X1"]+l[i]["X0"])/2,Math.abs(l[i]["Y1"]+l[i]["Y0"])/2,Math.sqrt(Math.pow(l[i]["X1"]-l[i]["X0"],2)+Math.pow(l[i]["Y1"]-l[i]["Y0"],2))/2, 0, Math.PI*2, true);   
 context.strokeStyle=l[i]['color']  
 context.fillStyle=l[i]['color']  
 context.lineWidth=l[i]['width']  
 if(l[i]['fill']==1){  
 context.fill()  
 }  
 context.stroke();  
 context.closePath();  
 }  

where l is defined as

 l=JSON.parse(imagedata);  

That is the json variable is stored as string in database.We take it back and redraw it by parsifying that data.

By using flask the whole paint app became efficient ,interactive and useful.

Following shows the screen shots from my paint app.

when we click the save button a "saved" alert wil pop up.

Then if we check out the gallery we can see the name of pic in there.

If there are more than one picture ,the names will appear as a list.

Then when we click on that this canvas page will appear.

Click on the load button and the image will be retrieved from database.

And thats how the paint app works.

My app is stored in heroku. You test it by clicking this link.

Click here to see the code in github .

Blog app with flask

Blog app with options for posting,viewing post,and commenting option enabled on each post can be efficiently developed using flask.

So what is flask?
The following definition from http://flask.pocoo.org/ explains it perfectly.

"Flask is a microframework for Python based on Werkzeug, Jinja 2 and good intentions."

Here i used postgresql for the database part. psycopg2 module is widely used in python for the postgresql database handling.I used the same in my app.In the app a sign_in part is provided so that posting is allowed only to the admin. Username for my app is 'admin' and password is'1234'.

If we grab a basic knowledge in flask then it will be easy to grasp the code i wrote for this app.The main modules i used are Flask,render_template,request etc.

For a quick reference i will explain the post_store function in my app.

The HTML part is as given below

 <h4>Post your thoughts here</h4>  
 <form method="post" action="{{ url_for('post_store')}}">  
 <div align="center">  
 <p> Title </p>  
 <input type="text" name="name" style="width: 250px"><br>  
 <textarea name="blogpost" cols="45" rows="15">  
 </textarea><br>  
 <input type="submit" value="Submit" />  
 </div>  
 </form>  

so here you can see form's action part given as '{{ url_for('post_store')}}'.Which means after submitting the form the action is to connect to the post store function in python.I hope you are already aware on "form" tag in html.

Given below is the post_store function written in python.

  
 @app.route('/post',methods=['POST'])  
 def post_store():  
      conn=psycopg2.connect(database='nidhin')  
      c=conn.cursor()  
      c.execute("INSERT INTO blogspot (author,post,day,time) VALUES (%s,%s,%s,%s)",[request.form['name'],request.form['blogpost'],strftime("%d %b %Y ", gmtime()),strftime("%H:%M:%S ", gmtime())])  
      conn.commit()  
      conn.close()  
      return render_template('post.html')  

The first line @app.route('/post',methods=['POST']) indicates that the following function will work if the url is 'some_main_url'/post and the method is POST.
app is connected to the postgresql using psycopg2 and the data is from the form is stored in it.

If you are a beginner and cannot make a word out of the things above, then you should try this Flask mega tutorial by miguelgrinberg.It helped me a lot.

So in this way i tried to test flask by creating a blog app and honestly i am very much satisfied with the outcome.I felt the differnce after getting tired by using conventional commands in python.django is prior to flask i know.But i never tried it.So from my experience flask made my day.If you are reading this you should give it a try.

And i stored my app in heroku.So you can test it by clicking this link.

For the funky version click here.

To see the code click the links below.There are three versions.

version one is blog app built on virtual environment.

version two is blog app built normally.

version three is the blog app with funky theme.