CSCI 178 I2C and AJAX

AJAX

If you want to do a more detailed study of AJAX, take a look at the previous AJAX discussion.

Getting set up

Copying the files

This time most of the files are going to be provided for you. Start by downloading the following two tar.gz files into your home directory on your Raspberry Pi.

Since you a logged into remotely to the Pi, it might just be easiest to cut-and-paste the following two wget commands. 

wget http://www.cs.unca.edu/brock/classes/Fall2016/csci178/notes/finallab/csci178-lab.tar.gz
wget http://www.cs.unca.edu/brock/classes/Fall2016/csci178/notes/finallab/levelit.tar.gz

Extracting the files

This part is a little tricky. You must extract csci178-lab.tar.gz in the root (/) directory and levelit.tar.gz in your home directory.

Do this with the following commands. 

cd /
tar xfvz ~/csci178-lab.tar.gz
ls -l
cd ~
tar xfvz ~/levelit.tar.gz
ls -l

Adjusting for right accelerometer

Now we have to adjust for which kind of accelerometer you have.

If you have the 9DOF, the big one, do this. 

cd /var/www/html/cgi-bin
ln acctest-9dof.cgi acctest.cgi
cd ~
ln levelit-9dof.py levelit.py

If you have the ADXL345, do this. 

cd /var/www/html/cgi-bin
ln acctest-adxl.cgi acctest.cgi
cd ~
ln levelit-adxl.py levelit.py

Restarting the web server

Finally, tell lighttpd to read its updated configuration files. 

sudo service lighttpd force-reload

Keeping it level

Run the Python program levelit.py in your home directory. You’ll have to use python3. Move your Pi around a little and make sure your program is really checking if the board is level.

Take a look at the levelit.py program and modify it to turn on the LED with your Pi is upside down.

Revisiting GCI

From the console

Using the command line, connect to the /var/www/html/cgi-bin directory and try three CGI scripts we used last week.

Notice that when all three programs, as required by the HTTP protocol, write a content type as the first line of output.

To the browser

Go into your browser and try to use these CGI programs. You should be using the following URL’s where the X is replaced with your Pi’s letter.

Using a query string

Consider the following URL: http://www3.unca.edu/schedules/schedules.php?term=201660&registrar=true&department=CSCI . The term=201660&registrar=true&department=CSCI is a query string.

Just as Python functions have parameters, the parameters of the URL is the query string. (Read about it.)

Take a look at the source of the CGI script pinset.cgi and see how cgi.FieldStorage() and form.getvalue are use to set variables pin and pulse which are, in turn, used to control the servo attached to your Pi via the PCA9685 breakout board.

Pay particular attention to the ways in which the CGI script verifies that the query string values are reasonable. The xkdc cartoon Exploits of a Mom illustrates the dangers of just accepting any query.

Control your server by loading the page http://uncacsci-pi-X.cs.unca.edu/cgi-bin/pinset.cgi with the appropriate query string. You can also extend the CGI script so that it can change the frequency of the PCA9685.

Trying out AJAX

Finally, connect to the following web page which must be customized for your Pi and press on the quote that mentions Juliet being the sun.

Take a look at the JavaScript/jQuery code used to update the Juliet quote. 

        $("#julietisthesun").click(
            function () {
		$.getJSON(
		    '/cgi-bin/acctest.cgi',
		    function (acceleration) {
			// console.log(acceleration);
			// console.log(acceleration.x) ;
			$('#vx').text(acceleration.x) ;
			$('#vy').text(acceleration.y) ;
			$('#vz').text(acceleration.z) ;
		    }
		);
	    }
	)

This is AJAX. With AJAX, JavaScript makes an asynchronous call to a remote server-side script and processes the result. Notice that the function is “calling” the same CGI script, cgi-bin/acctest.cgi, that we manually loaded earlier. Without jQuery, AJAX is almost impossible. With jQuery, AJAX is very hard. Take a look at tutorialspoint if you need convincing.

There are also potential security issues that are “solved” with the same-origin policy. In theory, you should be able to call acctest.cgi from another web browser but it can be challenging. You can try out the suggestions of the MDN same-origin policy. Let’s save this for our final exam meeting.