Firstly we need a host program to read the data generated by the PHP and poll our “request” folder created in part-2 for updated data. Then we need to transmit this information serially to the microcontroller which pans based on that information. Im using C# to create this host program so here it goes. Start Visual Studio create a windows application. Throw in a button, a combo box and timer control. The stop button would stop the timer which will be initiated by the combo box changed event.

The code looks like:

namespace RotomaticFront

{

public partial class Form1 : Form

{

public Form1()

{

InitializeComponent();

}

private void Loader(object sender, EventArgs e)

{

string[] aFilenames;

string fileName;

byte[] buf = null;

aFilenames = Directory.GetFiles("C:\\Program Files\\Apache Software Foundation\\Apache2.2\\htdocs\\Rotomatic\\request\\");

if (aFilenames.Length > 0)

{

fileName = Path.GetFileNameWithoutExtension(aFilenames[0]);

StreamReader SR;

string S;

SR = File.OpenText("C:\\Program Files\\Apache Software Foundation\\Apache2.2\\htdocs\\Rotomatic\\request\\" + fileName);

S = SR.ReadLine();

SR.Close();

File.Delete(aFilenames[0]);

SerialPort port = new SerialPort(comboBox1.SelectedItem.ToString(), 9600, Parity.None, 8, StopBits.One);

port.Open();

port.Write(dirr[1]);

//port.Write(angl[1]);

port.Close();

}

}

private void Form1_Load(object sender, EventArgs e)

{

foreach (string s in SerialPort.GetPortNames())

{

comboBox1.Items.Add(s);

}

}

private void button1_Click(object sender, EventArgs e)

{

timer1.Stop();

}

private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)

{

timer1.Interval = 1000;

timer1.Start();

}

}

Lets start with the form_load() event. I populate the combo box with the com ports which are available on the system. Since the arduino board is connected to one of the com ports and I have a lot of usb/com conversions going on I have a lot of ports which keep changing, you might not have this problem so you can skip it, it’s entirely up to you.

Once the combo box index changes a timer is initiated with a 1 second interval and the event that is triggered on each tick is the Loader() event I will explain its working in a bit. The stop button simply stops the timer. The Loader event gets the file names in the request directory first, if the length of the files is >0 means a file is there, the file name is then acquired without the extension. The file is opened and the first line is read ( since we only wrote only one line we don’t need to do a while loop but you might need to if you add other options). The file is then closed and deleted. A serial port connection is opened at 9600 baud and the data read is transmitted serially to the arduino board/microcontroller. I keep saying microcontroller and not the arduino board because the end device to control the motor could be a PIC or any other microcontroller it doesn’t necessarily have to be the arduino board.

Thats it run the program make sure everything is working throw in a couple of message boxes while reading the data to make sure you are actually reading the right data.

Now lets move onto the code for the micro controller. For those who don’t know the code is written in arduino programming language based on C/C++. Here is the code:

int dirPin  = 4;

int stepperPin= 3;

int sleepPin=7;

int ledPin=8;

char dir;

void setup () {

pinMode (dirPin, OUTPUT);

pinMode (stepperPin, OUTPUT);

pinMode(sleepPin,OUTPUT);

pinMode(ledPin,OUTPUT);

Serial.begin(9600);

Serial.flush();

}

void step(boolean dir,int steps){

digitalWrite(sleepPin,HIGH);

digitalWrite(dirPin,dir);

delay(50);

for(int i=0;i<steps;i++){

digitalWrite(stepperPin, HIGH);

delayMicroseconds(100);

digitalWrite(stepperPin, LOW);

delayMicroseconds(100);

}

digitalWrite(sleepPin,LOW);

}

void loop(){

dir=' ';

if (Serial.available()) {

dir=Serial.read();

if(dir=='1'){

step(true,15);

digitalWrite(ledPin,HIGH);

//delay(500);

}

if(dir=='0'){

step(false,15);

digitalWrite(ledPin,LOW);

//delay(500);

}

}

}

The basic function for stepping is the same and was mentioned in part-1. The only new thing is the LED on PIN 8 for determining the direction of pan. The setup() function consists of a Serial.begin(9600) which initiates the serial communication followed by the baud rate settings. The Loop() function which is the arduino equivalent of C main() with the only difference as the name suggests, it keeps looping forever. Anyway Serial.availible() checks if there is any serial data to be read on the serial port. If there is it is read by serial.read() and stored in the dir variable. If the direction is one the clockwise rotation is turned on and 15 steps are taken in the clockwise direction – step(true,15)  . The opposite is true if a 0 is read from the serial port. LED turns high for the clockwise rotation and off for the anti-clockwise rotation. Its a good indicator as it helps to see data coming through is correctly being read. Load the program to the arduino board and your done.

Run the PHP webpage along with the streaming server ( “simpleSubscriber”) . Try panning and it should work and there you have it a surveillance system from a webcam :]. I would’ve  provided you with a URL to mine but its installed at my work place!!!! So I cant let me install one at home and then ill post a link. Ill also try to get a video of it going anyway, please post any questions you have in the comments section followed by the part you are having problems with or cant understand. Till then happy coding!.

There are two modules within this post aswell I wont bother splitting them up into two rather just go on describing them in one. The first one is the streaming server with a client which serves the need for our surveillance. The second part includes the PHP webpage which includes the streaming client followed by code to generate a request file telling the motor which direction to rotate in.

Streaming Server:  Ill start off with the server which is needed to stream video from a webcam. Im using Red5 which as an open source alternative to the flash media server and is written in java. It supports shared objects, flv streaming and a lot more. Details of this can be obtained from http://osflash.org/red5.  Red5 uses RTMP (real time messaging protocol) to transmit video and data over the internet between a flash player and a server and therefore it is ideal for multiplayer flash games. Infact it provides some demos when you install it which covers the details of shared objects and other neat stuff. Since I’ve effectively touched the installation bit id simply go on and describe the process. It took me a while to understand and get going with red5 and couldn’t find much help for it. Things you need before you can install and get going with red5:

1- Java SE 1.6 SE its available to download from their website and you can get it from http://java.sun.com/javase/

Since red5 is written in java you need it to make it all work.

2- Tomcat – Optional read below

Now there are two paths from here either install Tomcat run the Red5 as a server on it or use the installer provided by Red5 which embeds tomcat and runs Red5 as a service. This phenomenon is summarized in the images below:

If you chose the first path then you have to download the Red5 “War” file and place it in tomcats the “webapps” folder where it would be extracted automatically, this type of installation is explained in more detail here: http://osflash.org/red5/windowstomcat . I chose the latter but I did try the other one as well and for some reason my demos would not work on that so I decided to go with the installer. Note even with the Installer you do need the Java SE. Once you have done that by default the server is hosted on port 8080 so typing http://localhost:8080 should show you a red5 welcome page.

Now if you get an error on localhost go to windows->services and check for Red5 and make sure its running. If its not make sure you have the right Java sdk I’m using 1.6 along with the installer for that version. You can change the port its running on by going to the directory where you installed red5->conf->Red5.properties file. In here you will see different settings, look at the one which says HTTP and it is the port where http requests are served, change this to whatever you like. RTMP is set to 1935 which is the default standard port for RTMP but you can change this to whichever ones are available on your system.

I had a lot of problems with these since my apache server and Red5 were on the same port and wouldn’t get along. Then I changed the ports but I still could not access them. The reason came out to be that I was behind University Firewall (don’t ask ) and the ports were blocked so I had to get them open to get all of this going! A pain but someone has to do it. Make sure you don’t have these firewall problems.

The Server:

Now for the streaming server, well once youve installed Red5 now you should be able to view the demos. Go to the demo page and there is one called “simpleBroadcaster”. These demos are open source and come with the flash source so you can do all sorts of things with them. Once you are at the demo page, enter the ip address or localhost if you want to run it locally and click connect. The 5 symbol should turn green and you should be able to see your camera. If that is the case your server is working along with the RTMP port. If youve used something other than 1935 for the RTMP you would have to run the broadcaster as “rtmp://localhost:port/oflaDemo”.

The Client:

Similarly within the same demo’s page open another browser page and open simpleSubscriber. Enter the IP address or localhost and click the connect button. Now you should be able to view the stream. Its that simple. You can also use the clients which provide support to view RTMP streams. One can be found at: http://www.longtailvideo.com/ which allows you to configure the player online and generate code to embed in your webpage’s. I’m using the one which comes with the Red5 server.

The webpage:

I copied the swf file for the simpleSubscriber which is present in the Red5 into my apache web server folder where I will create the page embedding the client. Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Rotomatic</title>

</head>

<body>

<script>

swfobject.embedSWF("simpleSubscriber.swf", "myContent", "400", "400", "8.0.0", "assets/expressInstall.swf");

</script>

<div align="right" >

<h1>You need the Adobe Flash Player for this demo, download it by clicking the image below.</h1>

<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

</div>

</body>

</html>

The swfobject.embedSWF embeds the swf into the webpage, there is an extra “assets/expressInstall.swf” which is a support to allow users visiting the webpage to install flash player or update it without leaving the webpage. You can embed you own player here like the one I mentioned earlier provided by Longtail which can be configured online along with the code to embed it.

The Remaining Webpage:

Now for the rest of the page. Im going to create two simple buttons one to allow the camera to be panned to the right and the other to pan to the left. When these buttons are clicked a file is generated in a request folder. This file contains either a 0 or a 1. “0” for a clockwise rotation and “1” for an anticlockwise rotation. Pretty stupid creating a file with such information right?. Not really it can later be configured to allow auto panning options of the camera along with angle values and other neat stuff. Im using JQuery (sorry Sajax fans but I mentioned I was going to move to JQuery) to transfer data from my webpage to the PHP script that writes the file. The code for the main page is as follows:

<?php

session_start();

$PHPSESSID = session_id();

include("rwfile.php");

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Rotomatic</title>

<script src="scripts/jquery.js"></script>

<script src="scripts/jquery.ajaxmanager.js"></script>

<script src="assets/swfobject.js"></script>

</head>

<body>

<script>

var ajaxManager1 = $.manageAjax({manageType: 'abortOld', maxReq: 10});

var dirc;

function send(){

ajaxManager1.add({   success: function(html)

{

},

type: "POST",

url: "rwfile.php",

data:      "dir=" + dirc

});

}

function incrementAngle(){

dirc=0;

send();

}

function decrementAngle(){

dirc=1;

send();

}

swfobject.embedSWF("simpleSubscriber.swf", "myContent", "400", "400", "8.0.0", "assets/expressInstall.swf");

</script>

<div align="right" >

<h1>You need the Adobe Flash Player for this demo, download it by clicking the image below.</h1>

<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

</div>

<div align="left">

<label>Camera Panning</label>

<br>

<input type="button" onclick="decrementAngle();"value="<<">

<input onclick="incrementAngle();" value=">>">

</div>

</body>

</html>

The include(“rwfile.php”);  file holds the PHP script which will we will see in a bit and is responsible for writing the text file holding the direction information. The other two within the script tags are the standard JQuery files while the swfObject is for the express installer. The functions incrementAngle() and decrementAngle() simply set the values of the dirc variable and performing a post operation to rwfile.php for writing the file. The code above also includes the streaming client code.

The code for the  “rwfile.php” looks something like this:

<?php

session_start();

$PHPSESSID = session_id();

writeRequestFile();

function writeRequestFile()

{

if(!is_dir("request"))

{

mkdir("request") or die("Could not create request directory");

}

if(!is_dir("request\\temp"))

{

mkdir("request\\temp") or die("Could not create request directory");

}

$id=session_id();

if(is_file("request\\{$id}"))

{

unlink("request\\{$id}");

}

if(@$fh = fopen("request\\temp\\{$id}","w"))

{

$dir=$_POST["dir"];

$angle=$_POST["Angle"];

fwrite($fh,"dir=$dir\r\n");

fwrite($fh,"angle=$angle\r\n");

fclose($fh);

}else

{

return FALSE;

}

return rename("request\\temp\\{$id}","request\\{$id}");

}

?>

The session is used as a file name to which holds the direction values. First it is ensured if the “request” directory exists along with a temp directory whose purpose is explained below, if they don’t exist they are created. If a file exists within the request directory with the same session id it is deleted the unlink command performs this operation. The files are initially written to a temp directory within the request folder. This is just a safety measure to ensure the file is not written while already one is being created with the same session id, since the event occurs on a button click some users might go crazy pressing the button. The ending code is a return call with a rename which moves the temp file to the request directory.

That’s all for the web page front end. Now I will describe how the file created by the PHP is handled by the host program followed by the code for the microcontroller in Part 3 – The communication module. So if you’re still interested move to part 3.

Part-1:  Hardware

The Story: Its been a while since my last post due to some work projects which have been occupying a lot of time and effort. However I still managed to find time for a hobby project, a DIY surveillance system using a webcam so I thought I’d go and share it with the rest. It’s not really a hobby project the real motivation behind the project are some of the cleaners which mess up some of the wirings of some work related project I am involved in. So you’d leave everything okay and when you come back in the morning something would either be unplugged or just not working. I’d  to spend a lot of time probing on the scope of what’s wrong and most important where! with so many wires it’s a pain.  So I decided to go ahead with building a surveillance system for myself using a webcam and some other hardware which I will mention in a while (I don’t want to go in detail of why not buy one off the shelf so don’t ask). The project however did help me learn about some valuable electronics concepts and it wasn’t all for fun. Anyway without further delay id just get on with it.

Id cover this project in three parts:

1-      The hardware

2-      The comms (communication with the hardware)

3-      The software (web based control including streaming)

The second one is also related to software but since its more about channelling communication down to the hardware I decided to keep it separate.  The flow of this entire process is summarized in the diagram below.

I would start off with the hardware part which is crucial as if that doesn’t work, there is no point to the rest of it really. The hardware that is needed for the projects include:

1-      Webcam

2-      Stepper Motor (4 wired  = 2 Coils for a clockwise and an 2 for anticlockwise rotation)- http://www.sparkfun.com/commerce/product_info.php?products_id=9238

3-      Motor Driver Board (Controlling the motor why this is needed is discussed below)-http://www.sparkfun.com/commerce/product_info.php?products_id=9402

4-      Arduino Board (any would do I’m using which has the ATmega168 on it. Description below)

Webcam is pretty obvious since its a surveillance system so cant do much without the video I guess. The webcam I am using is:

http://www.flickr.com/photos/45253805@N07/4156146981/

The stepper motor was a bit tricky to decide on compared with servos. But to summarize it down for those who don’t know much about it is that servos operate on a closed loop and perform a feedback mechanism to the microcontroller to adjust position errors in other words they aren’t that precise. So say I want the camera to be at a 45 degree angle id have to rely on the feedback from the motor to first decide where it is and then move on to adjust the position. Stepper motors are however are relatively cheap and provide precision control by operating in steps. A complete discussion on servos vs steppers is discussed here and is worth having a look at http://www.torchmate.com/motors/electronics_selection.htm. The motor for this project can be viewed at the link above and is a bipolar motor. The stepper motor: (http://www.flickr.com/photos/45253805@N07/4156919912/)

The stepper driver is the A3967SLB and can be viewed at the link above which is used to control motor movement and provide precision control based on the input pulses provided to it. It can be operated in full-, half-, quarter-, and eighth-step modes. For people who still don’t understand just consider it as way to translate the high/low pulses into something meaningful for the motor to move a step a very small if it’s just 1 pulse. The driver(http://www.flickr.com/photos/45253805@N07/4156920162/)

The last but not the least is the arduino board which has the Atmega168 microcontroller on it. This is needed as it talks to the stepper driver which in turn controls the movement on the motor.

Connecting it all up:

1- Camera to the stepper motor

Ok so now we know the basic components of what are going to use so lets get on with the connections and how all of this will work. The first thing was to cut the camera (you can see the image at the flickr link mentioned above) and make it fit on the motor. Now this is a very crucial yet very important procedure so make sure you don’t damage the camera. I cannot exactly go about telling how to cut it up but here are some of the snaps of how the camera is mounted on the motor:

1-      http://www.flickr.com/photos/45253805@N07/4156920424/in/photostream/ – Side view

2-      http://www.flickr.com/photos/45253805@N07/4156158481/in/photostream/ – Back view

Once this is done plug the camera within the USB port to make sure its working!!! Else you’ve done something wrong or damaged the camera J.

2-  The Stepper Driver – Motor Connection

The simplified diagram of the stepper is as follows, it only includes only the pins I am using

The 5v and the Gnd are to run the driver board. Instead of using a power supply for this what I did was use the pins on the arduino to get the 5v directly. This powers the driver.  The PWR is the power to the motor and can be from 12v to 30v. Im using 12v to power it from an external power supply. The C-A and C-B are the coils from the stepper motor in other words the 4 wires from the stepper motor would go in here. If you are using a motor different than the one mentioned above please read the data sheet to ensure that the correct wires are placed. In total there are 4 coils within the motor 2 to ensure a clockwise rotation and 2 to ensure an anticlockwise rotation. If these wires are attached in a wrong order the clockwise and the anticlockwise motion might cancel each other out and the motor might not move. The connections for the motor above are as follows:

Red and Green are for Coil A – C-A

Yellow and Blue are for Coil B – C-B

So now you would have the motor connected to the stepper driver board.

3- Stepper Driver- Arduino Connections

Ive connected the dir pin which controls the direction of the motor to Pin 4 on the arduino and the stepperPin which controls the amount of steps the motor should take is connected to Pin 3.The sleep pin is connected to Pin 7

My connections: http://www.flickr.com/photos/45253805@N07/4161441034/

Why connect the sleep pin?

Ok this is important because it allows the coil which holds the shaft in its position, to demagnetise. What I mean is if you don’t use the sleep pin the motor still functions but if you try to move it with your hand you wouldn’t be able to since the coils are magnetised and they hold the shaft firmly. Since the coils are magnetised this causes the motor to heat up and I didn’t want that to happen if the motor is not in operation else it would melt the glue that is holding the camera.

Test Software:

Now to ensure everything is alright and the motor is working upload the following test code which is a basic routine which comes with the driver to see if everything is working or not. I’ve added a bit to control the sleep pin you may wish to remove this to observe what happens without the sleep pin. This code is written with the arduino programming language which is based on c/c++

int dirPin  = 4;
int stepperPin= 3;
int sleepPin=7;
void setup () {
pinMode (dirPin, OUTPUT);
pinMode (stepperPin, OUTPUT);
pinMode(sleepPin,OUTPUT);
}

void step(boolean dir,int steps){
digitalWrite(sleepPin,HIGH);
digitalWrite(dirPin,dir);
delay(50);
for(int i=0;i<steps;i++){
digitalWrite(stepperPin, HIGH);
delayMicroseconds(100);
digitalWrite(stepperPin, LOW);
delayMicroseconds(100);

}
digitalWrite(sleepPin,LOW);
}
void loop(){
step(true,15);
delay(500);
step(false,15);
delay(500);
}

The code is self explanatory, there is a simple step function which allows a direction to be input 0 for clockwise and 1 for anti-clockwise. The steps are the number of movements which the motor should take. The duration of the 1 step is determined by the delayMicroseconds in the functions which determines how long to hold the pulse high and in turning causing the motor to turn for that time period.  The main function or the loop simply calls this function once to make it turn clockwise and then anticlockwise. If this works as expected and the motor is moving the hardware step to the project is complete. We are now ready to create the front end software, the arduino would then be revisited once the front end software is complete.

Please note that the above code is not the final version of the code to go on the microcontroller and would be revisited.

The greatest thing about Firebug is that it is browser based and if you’re using Firefox it’s just a matter of accessing the plug-in. FireBug also allows you to check you’re CSS, edit, change or disable certain lines to see the expected output. Great news for newbie CSS coders who can now practice/learn design based on hit n trial. Let’s have a look at some of these features in practice. For this tutorial I will be using Firefox version 3.05.

Tools needed:

1)      FireBug plug-in can be downloaded at: https://addons.mozilla.org/firefox/addon/1843 or visit www.getfirebug.com for other ways of using the tool other than as a plug-in for Firefox.

Install the plug-in and you’re ready to go. Open Firefox with the page containing your CSS, HTML, JavaScript.

First let’s look at how CSS design can be viewed/improved using FireBug. The page I created looks like this:

Now right-click in the browser window and click “Inspect Element”, make sure FireBug is installed at this point.

Or as an alternative click the “Bug” image at the bottom-right corner of the browser which looks like:

A window at the bottom of the browser would appear. Click the CSS tab to view/edit the CSS directly.

Now click at each of the attributes and see how it affects the design. Double clicking the empty space also allows you to add new attributes at runtime or right click and select “new property”. I get the following output when I disable the “boxhead” attributes, observe how it is different from the previous design.

Pretty simple and easy to use eh ?. It’s an ideal tool if you wish to learn about CSS, different properties or even test your design out.

Moving on to some more functionality, let’s see how JavaScript debugging works using FireBug. Enable JavaScript debugging by selecting the “script” tag and checking the option “support for JavaScript debugging”

Within the same page I created a simple script that executes a loop as follows:

<script type=“text/javascript”>

function test(){

var x=0;

while(x<10){

x=x+1;

}

}

test();

</script>

Open FireBug, Select the scripts tab and find the code you wish to debug, then place the break point by clicking the line number, add a watch by clicking the watch tab on the left and adding your variable, in this case it is “x “. Refresh the Page and  press F8 to Continue. The image below highlights these features:

These features are very useful if you have lots of functions in JavaScript with multiple calls. Overall a great tool, highly recommended.

In the last post I presented an overview of the SAJAX library. Today I will talk about argument passing to and from the SAJAX function and the respective JavaScript function.  Then I shall make a sample HTML form and pass the values to the PHP function for addition into a MySQL database. If you are new to SAJAX and don’t know what I’m talking about I suggest you view my earlier post which can be found at: http://garagedeveloper.wordpress.com/2009/01/09/using-ajax-with-php/

The code last time looked something like:

<?php
  require(‘Sajax.php’);
  
  function worker()
  {
      return ‘hello World’;
  }
  
  $sajax_request_type = “GET”;
  
  sajax_init();
  
  $sajax_debug_mode = 1;
  
  sajax_export(“worker”);
  
  sajax_handle_client_request();
?>

<script>

<?php
  sajax_show_javascript();
?>

X_worker(callback);

Function callback(retArg){

Alert(retArg);}

</script>

Make sure you have the SAJAX libraries.

Let’s make the worker function do something interesting then a mere hello world. I will edit the worker function so now it takes two strings concatenates them and returns the result back to the JavaScript Function.  

So I change the worker function and now it looks like this:

 function worker($arg1, $arg2)
  {
      $cat = $arg1 . ‘ ’ . $arg2;
      
      return $cat;
  }

Notice however I don’t change the “export” call arguments.  So the code till this point looks like:

<?php
  require(‘Sajax.php’);
  
  function worker($arg1, $arg2)
  {
      $cat = $arg1 . ‘ ’ . $arg2;
      
      return $cat;
  }
  
  $sajax_request_type = “GET”;
  
  sajax_init();
  
  $sajax_debug_mode = 1;
  
  sajax_export(“worker”);
  
  sajax_handle_client_request();
?>

<script>

<?php
  sajax_show_javascript();
?>

X_worker(callback);

Function callback(retArg){

Alert(retArg);}

</script>

Now I change the respective JavaScript function Call to look like this:

x_worker(‘something’, ‘intresting’, cb)

You can pass any number of arguments at the start and the last argument always is the Call-back function name. So the code looks like:

<?php
  require(‘Sajax.php’);
  
  function worker($arg1, $arg2)
  {
      $cat = $arg1 . ‘ ’ . $arg2;
      
      return $cat;
  }
  
  $sajax_request_type = “GET”;
  
  sajax_init();
  
  $sajax_debug_mode = 1;
  
  sajax_export(“worker”);
  
  sajax_handle_client_request();
?>

<script>

<?php
  sajax_show_javascript();
?>

x_worker(‘something’,'intresting’,callback) 

function callback(retArg){

Alert(retArg);}

</script>

When the retArg alerts you get something like: “something interesting”. Easy wasn’t it J ?. Similarly you can pass any number of arguments this way to your PHP function be it arrays, objects, and strings. Just make sure you don’t echo something out in the PHP function or have your include libraries before the SAJAX stuff.

Now let’s look at how you can get values in your JavaScript function in a similar way. For this I shall declare an array in the PHP function and make it return the array to the JavaScript. So Now the PHP function looks like this:

 function worker()
  {
      $arr = array(“foo” => “bar”, “Max” => “Sajax”);
      
      return $arr;
  }

$arr is an array with bar at location “foo” and sajax at location “Max”. In the respective JavaScript function I output the values like : 

alert(retArg["foo"]);

which outputs bar where retArg is the arg from the call-back function. The code is now:

<?php
  require(‘Sajax.php’);
  
  function worker()
  {
      $arr = array(“foo” => “bar”, “Max” => “Sajax”);
      
      return $arr;
  }
  
  $sajax_request_type = “GET”;
  
  sajax_init();
  
  $sajax_debug_mode = 1;
  
  sajax_export(“worker”);
  
  sajax_handle_client_request();
?>

<script>

<?php
  sajax_show_javascript();
?>

x_worker(callback);

Function callback(retArg)
  {
      Alert(retArg[“foo”]);
  }

</script>

Okay now that you’ve got grips with all this (I hope) let’s move to creating a simple html form getting data from it and inserting it in a database which is mysql in this case. Ok so let’s begin. First I edit the worker function so that I perform a simple insert MYSQL query. Ill assume you have already setup the connection with the database, I place mine in a separate file which in this case it is ‘database.php’. The worker function now becomes:

 function worker($name, $dob, $address, $pnum)
  {
      mysql_query(“INSERT INTO tbl_name (name,dob,address,pnum) 

      VALUES($name,$dob,$address,$pnum)”;
      
      return 0;
  }

I create a simple HTML form which holds some basic details and looks likes this:

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />

<title>Untitled Document</title>

</head>

<form name=“frmDetails”>

Name:<input type=“text” name=“nam” /> <br />

DOB:<input type=“text” name=“DOB” /><br />

Address:<input type=“text” name=“Address” /><br />

Phone Number:<input type=“text” name=“Pnum” /><br />

<input type=“submit” value=“Submit” onclick=“run()”/>

</form>

<body>

</body>

</html>

Notice on the onClick event I’m calling a run() function. This is the function which takes all the values from the form when the submit button is clicked and calls our JavaScript worker function so the run function is:

  function run()
  {
      x_worker(frmDetails.nam.value, frmDetails . DOB . value, frmDetails . Address . value, 

      frmDetails . Pnum . value, callback);
  }

I get the values from the form and pass them to the worker function.  In the PHP worker function I return a 0 which can act as an identifier if everything went alright or not. The entire code is as follows:

<?php
  require(‘Sajax.php’);
  
  include(‘ database . php’);
  
  function worker($name, $dob, $address, $pnum)
  {
      mysql_query(“INSERT INTO tbl_name (name,dob,address,pnum) VALUES($name,$dob,$address,$pnum)”;
      
      return 0;
  }
  
  $sajax_request_type = “GET”;
  
  sajax_init();
  
  //$sajax_debug_mode=1;
  
  sajax_export(“worker”);
  
  sajax_handle_client_request();
?>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head>

<script>

<?php
  sajax_show_javascript();
?>

function callback(retArg)

{

alert(retArg);

}

function run()
{
x_worker(frmDetails.nam.value,frmDetails.DOB.value,

frmDetails.Address.value, 

frmDetails.Pnum.value,callback);
} 

</script>

<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />

<title>Untitled Document</title>

</head>

<form name=“frmDetails”>

Name:<input type=“text” name=“nam” /> <br />

DOB:<input type=“text” name=“DOB” /><br />

Address:<input type=“text” name=“Address” /><br />

Phone Number:<input type=“text” name=“Pnum” /><br />

<input type=“submit” value=“Submit” onclick=“run()”/>

</form>

<body>

</body>

</html>
 

Hope this helps and clears out some confusion on the use of SAJAX J

Right so the objective is to use PHP with AJAX to achieve what is normally known as “refresh less browsing”. When I started off with my work I had to deal with quiet a lot of forms which posted variables to  a PHP page and then I could use them either by query string or whatever method to display them. The only problem with this was that the page had to be refreshed. I had a vague idea about AJAX but never really got into using it until I really got fed up of page refreshes, so if you share the same enthusiasm (slightly) this might prove helpful.

Besides the story above AJAX stands for Asynchronous JavaScript and XML. The objective of AJAX is to allow asynchronous transfer of data from the server to the client and vice versa without interfering with any of the stuff on the main page (page refreshes) and since JavaScript is executed on the client end and PHP code is executed on the server end (duh) we need a way to do that. How AJAX actually achieves that we’ll leave that discussion for another time. Now i have been searching for a library or something magical that makes my life easier. That’s when i came across SAJAX an open source library which does that something magical.

So what do you need:

1)      PHP ( since we will be using SAJAX with PHP) whatever version I used 5 i don’t know if SAJAX works with other versions or not

2)      SAJAX library can be found at : http://www.modernmethod.com/sajax/download.phtml download the zip file and extract it to wherever you need it

Now within the SAJAX there would be a number of folders. ASP, Coldfusion and others(Probably support for other platforms, you could’ve guessed that couldn’t you ! ).  So there is another folder PHP open it and get the “SAJAX.php” file from there and paste it in the project or folder or wherever you wish to use it. Notice there are a few examples there as well if you can get a grip of it from it i guess this is the end of the line for you then but if not continue reading.

Ok so now we have the library so lets begin. At the top of your PHP page include:

<?php
  require(‘Sajax.php’);
?>

Can be a include as well but a personal choice. Now the objective:

Send data from client to server – > Process it – > Return it to Client which is

JavaScript -> PHP -> JavaScript

So first we define a function in PHP which would be the worker or which would do something when invoked by the client, which means I’m effectively entertaining the middle part of the chain which I just mentioned above. Once you get the hold of it you can start off from anywhere. So I declare a function like:

<?php
  require(‘Sajax.php’);
  
  Function worker()
  {
      Return ‘hello world’;
  }
?>

Right so the function will simply worker function will simply return a hello world. Now we add some SAJAX stuff which actually export this function to JavaScript and make everything happen.  After my function I stick in these lines:

$sajax_request_type = ”GET”;

sajax_init();

$sajax_debug_mode=1;

sajax_export(“worker”);

sajax_handle_client_request();

Now lets go through each of these lines. Firstly the request type, it works the same way as in normal forms, the GET method appends values to the URL and since the URL can only handle a limited number of parameters there is a possibility it might get truncated so its only used if the amount of parameters to be passed are less, simililary the fields such as passwords etc will be displayed if passed using the GET method.  This can also be a “POST” request which would require changing the above to “POST” which appends all the values to the body of the HTTP request. Too much detail?. Anyway the second line sajax_init() initializes the library variables etc. The third line is a not so fancy debugger which outputs what happens behinds the curtains in the form of alert boxes set it to “0”if you don’t want to use it and set it to “1” if you want to use it or better just remove the line if you don’t care. The fourth line is and export call which tells the library this is the function we wish to export, export where? To the JavaScript so that we make use of it, how? We shall know it soon.

Notice however one thing no matter what type of function you have or whatever it takes as arguments you just have to put its name in the export and nothing else remember NOTHING ELSE JUST THE NAME. We shall see how we deal with arguments later on. The last line simply tells the library to get ready to handle requests from the client its like an automatic poller thing which checks for requests so now the overall code looks like this:

<?php
  require(‘Sajax.php’);
  
  function worker()
  {
      return ‘hello World’;
  }
  
  $sajax_request_type = “GET”;
  
  sajax_init();
  
  $sajax_debug_mode = 1;
  
  sajax_export(“worker”);
  
  sajax_handle_client_request();
?>

Now we call this function from our JavaScript, before that we need to stick a small line into our JavaScript code which is:

<script>

<?php
  sajax_show_javascript();
?>

</script>

This is something which just be done to make the function usable and i have nothing to do with it. Now lets call our JavaScript function which is done by:

<script>

<?php
  sajax_show_javascript();
?>

X_worker(callback);

Function callback(retArg)

{

Alert(retArg);

}

</script>
 

Ok so lets see what’s going on we had a function in PHP called worker no in order to call it from JavaScript we must append and “x_” to the name of the function we “exported” so it becomes x_worker if the export function was “test” then we call it using “x_test”.  Within the function though there is no argument in the PHP function though in JavaScript I pass a call-back argument. This in fact is the function which would be called once the worker function is done doing its job so in this case the name is call-back and the returned argument from the PHP function is “hello world” so retArg alerts “hello world”

Ok some things to mention and try out:

1)      Do not try to echo or use print statements within the PHP function if you try to do that, it will append the results with the return argument and give you an error “Cannot Eval” in the debugger.

2)      When using the statements :

$sajax_request_type = ”GET”;

sajax_init();

$sajax_debug_mode=1;

sajax_export(“worker”);

sajax_handle_client_request();

Make sure you place them before any of your other “includes” because it would append them to the results and what you would see in your debugger is a

full HTML alert.The final code looks like this:

<?php
  require(‘Sajax.php’);
  
  function worker()
  {
      return ‘hello World’;
  }
  
  $sajax_request_type = “GET”;
  
  sajax_init();
  
  $sajax_debug_mode = 1;
  
  sajax_export(“worker”);
  
  sajax_handle_client_request();
?>

<script>

<?php
  sajax_show_javascript();
?>

X_worker(callback);

Function callback(retArg){

Alert(retArg);}

</script>

The next post will cover passing arguments from be it arrays, objects etc using the SAJAX. Feel free to post any questions and I will try to get back to you with answers.

 The next step was to add grass. I looked around for a while searching google for some grass images but then this heart shape in photoshop kept bothering me so I clicked it and voila i see lots of shapes. Scrolling through them I saw grass. Made a layer with grass and copied them by clicking ‘alt’ and dragging them  all around the ground area. There are alot of custom shapes availible, I used grass 2 there was others aswell but just a personal choice.

Now for the garage. I grabbed the garage image from http://www.firstdaycottage.com/images/GarageSketch.jpg. Now to remove its background so i could place it on the ground area I opened this image used the magic wand tool and selected the white area. Then right clicked and selected the “Select Inverse” option which gives you the inverse, the not selected area which is the garage and there you have it.

 The cycle , shovels even the man digging his own grave is from photoshop custom shapes, thats pretty much there is to the splashscreen/banner/ watever u wanna call it.