Difference between revisions of "Tutorial: SQLite and Processing, Part II"

From dftwiki3
Jump to: navigation, search
(Exercises)
Line 2: Line 2:
 
<google1 style="2"></google1>
 
<google1 style="2"></google1>
 
</div>
 
</div>
--[[User:Thiebaut|D. Thiebaut]] 17:01, 30 June 2011 (EDT)
+
--[[User:Thiebaut|D. Thiebaut]] 17:01, 30 June 2011 (EDT)<br />
 +
Updated --[[User:Thiebaut|D. Thiebaut]] ([[User talk:Thiebaut|talk]]) 17:03, 31 July 2013 (EDT)
 
----
 
----
  
 
<bluebox>
 
<bluebox>
This is the second part of a quick tutorial to accessing an SQLite database from Processing.  Check out [[Tutorial: SQLite and Processing, Part I| Part 1]] for how to run the example in Processing's IDE.
+
This is the second part of a quick tutorial to accessing an SQLite database from Processing.  Check out [[Tutorial: SQLite and Processing, Part I| Part 1]] for how to run the example in Processing's IDE.   This tutorial uses [http://processing.org Processing 2].
 +
 
 
</bluebox>
 
</bluebox>
 
<br />
 
<br />
Line 14: Line 16:
 
* Note: sometimes it is hard to get the '''Build Path''' option for the ''core.jar'' file.  If this option does not appear, a work-around is to right click on the project, and pick '''Properties''', '''Java Build Path''', then click on the '''Libraries''' tab, then '''Add Jar''', pick the '''core.jar''' file, and then click '''Ok'''.
 
* Note: sometimes it is hard to get the '''Build Path''' option for the ''core.jar'' file.  If this option does not appear, a work-around is to right click on the project, and pick '''Properties''', '''Java Build Path''', then click on the '''Libraries''' tab, then '''Add Jar''', pick the '''core.jar''' file, and then click '''Ok'''.
  
=Skeleton Class=
+
=Download SQLite Library=
 +
* We download the SQLite library recommended on the [http://processing.org/reference/libraries/ Procssing/libraries] Website: the [https://github.com/fjenett/sql-library-processing Bezier SQLib library].
 +
* We need 3 files from the library, which is setup to use inside a sketch, but with Eclipse we need to reorganize them slightly.
 +
* In a Terminal window (we are working on a Mac, the procedure is similar under Windows):
 +
 
 +
  '''cd ~/Downloads'''
 +
  '''ls'''
 +
  BezierSQLib-0.2.0.zip            ''(the file we just downloaded from http://processing.org/reference/libraries/)''
 +
 +
  '''mkdir Bezier'''
 +
  '''mv BezierSQLib-0.2.0.zip  Bezier'''
 +
  '''cd Bezier'''
 +
  '''unzip BezierSQLib-0.2.0.zip '''
 +
  '''ls '''
 +
 +
  BezierSQLib-0.2.0.zip examples/ library.properties
 +
  documentation/ library/ source/
 +
 +
  '''cp library/sqlite-jdbc-3.7.2.jar ..'''        ''(copy the sqlite jdbc file in ~/Download folder)''
 +
  '''cp source/de/bezier/data/sql/SQL*.java ..'''  ''(copy SQL.java and SQLite.java to ~/Download folder)''
 +
  '''cp source/de/bezier/data/sql/mapper/NameMapper.java ..'''
 +
  '''cp source/de/bezier/data/sql/mapper/UnderScoreToCamelCaseMapper.java ..'''
 +
 +
:The Download folder should now contain six files
 +
 +
  '''ls -1 ~/Downloads'''
 +
  Bezier/
 +
  NameMapper.java
 +
  SQLite.java
 +
  SQL.java
 +
  sqlite-jdbc-3.7.2.jar
 +
  UnderScoreToCamelCaseMapper
 +
 
 +
* Edit the java files and modifiy their headers as shown below (the added text is in <font color="red">red</font>):
 +
** SQL.java
 +
<font color="red">// </font>package de.bezier.data.sql;                                                                                 
 +
import processing.core.*;
 +
<font color="red">// </font>import de.bezier.data.sql.mapper.*;                                                                         
 +
<font color="red">import mapper.*</font>
 +
import java.io.*;
 +
import java.sql.*;
 +
. . .
 +
''(remaining of the file unchanged)''
 +
 
 +
** SQLite.java
 +
 +
<font color="red">//</font>package de.bezier.data.sql;                                                                               
 +
 +
import processing.core.*;
 +
import java.util.ArrayList;
 +
 +
/**                                                                                                         
 +
  *              SQLite wrapper for SQL library for Processing 2+                                           
 +
  */
 +
 +
<font color="red">//</font>public class SQLite extends de.bezier.data.sql.SQL                                                       
 +
<font color="red">public class SQLite extends SQL </font>{
 +
 +
 
 +
 
 +
=Main Project Class=
  
 +
* Open '''Eclipse''' and create a new '''Java Project'''
 
* Create a new class in your package, and call it '''Main.java'''.
 
* Create a new class in your package, and call it '''Main.java'''.
 
* In the '''Edit''' Window, enter the following code:
 
* In the '''Edit''' Window, enter the following code:
Line 52: Line 115:
 
* Click on the white triangle in a green circle under the top menu, and run the Applet.  Notice that a circle should appear and follow the mouse.  Notice also that it should change color as you click the mouse button.
 
* Click on the white triangle in a green circle under the top menu, and run the Applet.  Notice that a circle should appear and follow the mouse.  Notice also that it should change color as you click the mouse button.
  
 
=Exercises=
 
Here is a collection of exercises you should go through.  They will build on this simple example and get you to play with different features of Processing.
 
<br />
 
{| style="width:100%; background:#eeeeff"
 
|-
 
|
 
===Exercise #1===
 
|}
 
[[Image:QuestionMark1.jpg|right|100px]]
 
<br />
 
* Change the color of circle to yellow and red, depending on whether the mouse button is clicked or not.  Use the [http://http://processing.org/ processing.org] site to figure out how color works in Processing.
 
 
<br /><br />
 
{| style="width:100%; background:silver"
 
|-
 
|
 
===Exercise #2===
 
|}
 
[[Image:QuestionMark2.jpg|right|100px]]
 
<br />
 
* Swap the mouseX and mouseY coordinates in the ellipse() function and see what happens.
 
* Replace one of the mouseX or mouseY by a call to the [http://processing.org/reference/random_.html '''random()'''] function.
 
* You will notice that the circle change widely in the random direction every frame.  It's way to busy to be interesting.  Instead make the circle stay put when the mouse button is not pressed, and move only when the button is pressed.
 
* Figure out a way to make the circle move in a random direction, but in a ''smoother'' more attractive way...
 
<br /><br /><br />
 
{| style="width:100%; background:#eeeeff"
 
|-
 
|
 
===Exercise #3===
 
|}
 
[[Image:QuestionMark3.jpg|right|100px]]
 
<br />
 
* Remove the call to the '''background()''' function in the '''draw()''' function and see what happens...
 
* Make the color random and use the new applet to paint the screen.  Use the mouse button to switch between painting and erasing.
 
 
 
<br /><br /><br />
 
{| style="width:100%; background:silver"
 
|-
 
|
 
===Exercise #4===
 
|}
 
[[Image:QuestionMark4.jpg|right|100px]]
 
<br />
 
 
 
<br /><br /><br />
 
{| style="width:100%; background:#eeeeff"
 
|-
 
|
 
===Exercise #1===
 
|}
 
[[Image:QuestionMark2.jpg|right|100px]]
 
<br />
 
 
 
<br />
 
{| style="width:100%; background:silver"
 
|-
 
|
 
===Exercise #1===
 
|}
 
[[Image:QuestionMark2.jpg|right|100px]]
 
<br />
 
 
 
<br />
 
{| style="width:100%; background:#eeeeff"
 
|-
 
|
 
===Exercise #1===
 
|}
 
[[Image:QuestionMark2.jpg|right|100px]]
 
<br />
 
  
  
 
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />  
 
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />  
 
[[Category:Processing]][[Category:SQLite]]
 
[[Category:Processing]][[Category:SQLite]]

Revision as of 16:03, 31 July 2013

--D. Thiebaut 17:01, 30 June 2011 (EDT)
Updated --D. Thiebaut (talk) 17:03, 31 July 2013 (EDT)


This is the second part of a quick tutorial to accessing an SQLite database from Processing. Check out Part 1 for how to run the example in Processing's IDE. This tutorial uses Processing 2.


Setup

  • First follow the steps of this great tutorial for creating Processing applications with Eclipse. Remember the steps for adding the core.jar library to your Eclipse project. You will need to repeat them for every new Processing project you want to create. The other option you'll have is to copy paste the skeleton project into another new project, in which case the core library should follow automatically into your new project.
  • Note: sometimes it is hard to get the Build Path option for the core.jar file. If this option does not appear, a work-around is to right click on the project, and pick Properties, Java Build Path, then click on the Libraries tab, then Add Jar, pick the core.jar file, and then click Ok.

Download SQLite Library

  • We download the SQLite library recommended on the Procssing/libraries Website: the Bezier SQLib library.
  • We need 3 files from the library, which is setup to use inside a sketch, but with Eclipse we need to reorganize them slightly.
  • In a Terminal window (we are working on a Mac, the procedure is similar under Windows):
  cd ~/Downloads
  ls
  BezierSQLib-0.2.0.zip             (the file we just downloaded from http://processing.org/reference/libraries/)

  mkdir Bezier
  mv BezierSQLib-0.2.0.zip  Bezier
  cd Bezier
  unzip BezierSQLib-0.2.0.zip 
  ls 

  BezierSQLib-0.2.0.zip	examples/		library.properties
  documentation/		library/		source/

  cp library/sqlite-jdbc-3.7.2.jar ..         (copy the sqlite jdbc file in ~/Download folder)
  cp source/de/bezier/data/sql/SQL*.java ..   (copy SQL.java and SQLite.java to ~/Download folder)
  cp source/de/bezier/data/sql/mapper/NameMapper.java ..
  cp source/de/bezier/data/sql/mapper/UnderScoreToCamelCaseMapper.java ..

The Download folder should now contain six files
  ls -1 ~/Downloads
  Bezier/
  NameMapper.java
  SQLite.java
  SQL.java
  sqlite-jdbc-3.7.2.jar
  UnderScoreToCamelCaseMapper
 
  • Edit the java files and modifiy their headers as shown below (the added text is in red):
    • SQL.java
// package de.bezier.data.sql;                                                                                   
import processing.core.*;
// import de.bezier.data.sql.mapper.*;                                                                           
import mapper.*
import java.io.*;
import java.sql.*;
. . .
(remaining of the file unchanged)
 
    • SQLite.java
//package de.bezier.data.sql;                                                                                

import processing.core.*;
import java.util.ArrayList;

/**                                                                                                          
 *              SQLite wrapper for SQL library for Processing 2+                                             
 */

//public class SQLite extends de.bezier.data.sql.SQL                                                         
public class SQLite extends SQL {


Main Project Class

  • Open Eclipse and create a new Java Project
  • Create a new class in your package, and call it Main.java.
  • In the Edit Window, enter the following code:


package tutorial1;

import processing.core.*;

public class Main extends PApplet {

	public void setup() {
		// define the window size, make graphics softer, and make
		// the background white
		size(600, 600);
		smooth();
		background(255);
	}

	public void draw() {
                // erase screen
		background(255);

                // change color of circle paint depending on mouse button
		if (mousePressed) 
			fill(0);
		else 
			fill(255);
		
                // draw a circle where the mouse is located
		ellipse(mouseX, mouseY, 80, 80);
	}
}


  • Click on the white triangle in a green circle under the top menu, and run the Applet. Notice that a circle should appear and follow the mouse. Notice also that it should change color as you click the mouse button.