So, as @sahmad suggested, it looks like AJAX is the way to go. Like I said earlier, I started out trying to solve the problem with a browser plugin. I used firebreath for this. A couple of hard lessons learned along the way. Most important, you either need to crash your plugin and reload the page or restart your browser when you make changes to your plugin. I wasted many hours ignorant to this simple fact. This plugin direction also took longer for me because my C++ skills are in the early stages of development.
The AJAX route was quite simple to learn. I used this page as my starting point: http://www.degraeve.com/reference/simple-ajax-example.php
I thought I would complete my example and report back my solution then this matter would be all finished. However, in the process of creating my example, I came up with another question. Here are files:
I modified the html file like so:
<html>
<head>
<title>Simple Ajax Example</title>
<script language="Javascript">
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}
function getquerystring() {
qstr = 'latLon=' + escape(document.forms['f1'].lat.value + ':' + document.forms['f1'].lon.value);
return qstr;
}
function updatepage(str){
document.getElementById("result").innerHTML = str;
}
function moveMarker(){
document.getElementById("timer").innerHTML= parseFloat(document.getElementById("timer").innerHTML) + 1
xmlhttpPost("/cgi-bin/ajax3.py")
var latFromGPS = document.forms["f1"]["gpsLat"].value;
var lonFromGPS = document.forms["f1"]["gpsLon"].value;
document.forms["f1"]["lat"].value=latFromGPS;
document.forms["f1"]["lon"].value=lonFromGPS;
}
window.setInterval('moveMarker()', 2000);
</script>
</head>
<body>
<form name="f1">
<p id=timer>0</p>
<p><input type="text" id="lat" name="lat" value="35.0"> </p>
<!-- <input type="hidden" name="gpsLat" value="35.0"> -->
<p><input type="text" id="lon" name="lon" value="-106.0"> </p>
<div id="result"></div>
</form>
</body>
</html>
and here is my python cgi script (for this example it should be saved as ajax3.py in cgi-bin):
#! /usr/bin/python
import cgi
import cgitb; cgitb.enable() # for troubleshooting
print "Content-type: text/html"
print ""
# Create instance of FieldStorage
form = cgi.FieldStorage()
gpsLat = float(form.getvalue("latLon").split(":")[0])
gpsLon = float(form.getvalue("latLon").split(":")[1])
print '<input type="hidden" name="gpsLat" value="%s">' % (gpsLat + 0.001)
print '<input type="hidden" name="gpsLon" value="%s">' % (gpsLon + 0.001)
I tried to simulate the GPS reporting coordinates by simply adding one-thousandth of a degree to both the latitude & longitude in the cgi script. Then sending this result back to the original page via hidden input types. What was interesting, was that I essentially have to call moveMarker() at twice the frequency that I want coordinates reported back. This isn't a problem, but I would like to understand why this is. From my naive standpoint, I figured that the
xmlhttpPost("/cgi-bin/ajax3.py")
command would execute and complete before then next command
var latFromGPS = document.forms["f1"]["gpsLat"].value;
was executed. This is not, however, the case. So does the first command complete only after a certain amount of time or does it not complete until after moveMarker() completes?