Javascript ajax wait until file is changed

Question

I'm programming an website to control my Raspberry Pi robot. I'm driving two stepper motor using .py script I call it:

sudo ./GPS.py forward 100 30

Fist argument is way to go, second is how many steps to do, and the last is delay between steps.

The script open location.txt file (it looks like "100/50/18") and take coordinations x=100, y=50 and Alpha=18 degress. Then make a move, calculate new coordination and write it into this file.

Read part at the top of script:

fo = open("location.txt", "r")
data = fo.read()
fo.close()
coordinates= data.split("/")
temp1 = coordinates[0]
temp2 = coordinates[1]
temp3 = coordinates[2]
Alpha= float(temp3)
X = float(temp1)
Y = float(temp2)

Then it make all requested moves and calculations, and then at the end save new X,Y,Alpha back to file:

 fo =open("location.txt", "w")
 fo.write(str(X)+"/"+str(Y)+"/"+str(Alpha))
 fo.close

Allright, this works perfect in Putty, but now I wanted to drive my robot through website, so I've made website to control it.

But now I have a problem. Now I have site like this:

HTTP --> Javascript --> PHP --> .PY script to move robot.

This works, but I have no idea how refresh X,Y,Alpha coordinates from location.txt on my website. I have an idea:

Javascript run .PY and wait it finishes, then JS open .txt and get data and finally set new coordinates to my webpage. But I don't know how to do it. This waiting to .PY finishes is killing me.

Thanks for your help! Yacked2

PS.

I have apache installed on my Raspberry Pi, and I can donwload my .py script though webpage and I can open .txt file.

Answer 1

The classic web way of doing this would be to poll from the client until you are told of a change.

E.g.

• Tweak your file so that it contains a date+time updated.
• Implement a PHP script to open the file and serve the contents as a JSON object (with the date updated, X, Y and Alpha as properties)
• On load of the page, load the location and store all 4 components.
• When you send a move instruction to the server, start to poll for a change - periodically reload the JSON object until you have one with a changed date updated. You can then stop polling.
• This updated location should then be stored and used to update your page.
• Set a maximum number of times to poll and abort with error if you reach the maximum.

Let's say your main page contains

<div id="locationInfo" />

And you have implemented the PHP script getLocationInfo.php that returns a JSON object like this:

{ date_updated: "13-11-2013 15:45:98",
  x_position: 105,
  y_position: 120,
  alpha: 123 }

In the main page you can have a script using jQuery that will (for example, something along the lines of - but more complex than)

$.get( "getLocationInfo.php", function( data ) {
  var html = 'Location: ' + data.x_position + ', ' + data.y_position + ' @' + data.alpha
  $( "#locationInfo" ).html( html );
});

All that's really missing from the above is the bit that repeatedly polls and aborts when date_updated has changed.

There is a simple example of polling described here by @johnny-craig: jQuery, simple polling example

In those examples you just need an exit condition for once you have the data you need (recognised by a change in date_updated)

It'll probably work, be pretty simple to implement, but suffers from the amount of duff requests being made from the web page. Though bear in mind the web has worked for a LONG time doing this kind of thing.

Alternatively, you can get all HTML5 about it and read up on websockets. Using websockets you can instigate the update from the server side, rather than the client side. There's less polling required and the response time on the client should be better.

Here's something that'll give you the basics:

• http://www.html5rocks.com/en/tutorials/websockets/basics/