If you’re new to the Flyport, one of the key questions you’ll be asking is ‘how can I read data from the device’. At first glance the answer looks complicated, and at the time of writing no clear documentation has been provided which lays out a basic explanation – so here goes.
Let’s say that we’ve attached a thermometer or other sensor to the FlyPort and we want to display that data on a simple webpage. First we’ll connect the sensor between 3.3V, Ground and with the signal pin going to A1_in – A1 is one of the 2 available analogue to digital converter pins. Once this is done, we’ll assume that our sensor is outputting a voltage between 0V and 3.3V into A1_in.
Now to the web page. Luckily the guys at OpenPICUS have already written a example. You can find this in the ‘Webpages’ folder inside the IDE. The files inside of this folder are very useful and we’ll base this tutorial on them. Best to copy this folder to your desktop – we’ll actually only be changing the ‘index.htm’ file, but it’s good to have a complete separate copy in an easy to access place.
To avoid confusion, we’re actually going to completely overwrite index.htm and replace it with our own. Before we do that, a little bit about how the web page will work.
status.xml
An xml file is a simple way to store data. For the FlyPort, it’s the place where the device writes the values of the different on-board resources, like the LEDs, the buttons and the ADC channels. The FlyPort is constantly updating this file and it does it automatically, without any intervention from us. You can see the values in the file, by simply pointing your browser at “http://192.168.0.1/status.xml” (or whatever your device address is)
You’ll see a list of zeros, ones, numbers and text saying ‘up’ or ‘down’. If you refresh your browser a few times, you’ll see some of these values change, most probably the ADC channels, as they jump around a little with electronic noise.
So this is great news! There’s a file with values in it – we know where it is, and all we need to do is to read it!
mchp.js
This is a javascript file provided by Microchip (the chip and wifi module manufacturer). You shouldn’t need to change it at first. Crucially, the file contains the javascript functions that will retrieve information from the status.xml file and allow us to display it.
Actually, extracting just one value out of the xml file is a bit of a pain, but the OpenPICUS guys have written a few bits of Javascript that will do this without any fuss. Most of the clever code is contained in a file called mchp.js – again, this is included in your ‘Webfiles’ folder already. We just need to make sure that this file is ‘included’ in our final index.htm file.
stylesheet.css
Like any normal CSS stylesheet, this contains styles which we’ll use in the main index.htm file. Actually, most of these styles are now redundant and can be deleted
header.inc and footer.inc
In the original example, these files go at the top and bottom of index.htm. For clarity, we’ve got rid of them from this example. All they contained anyway was some opening html stuff, and some closing divs. Basically – these files aren’t needed for this example, although you may wish to use them later as your code gets more complex.
Let’s write index.htm
So just to restate – the job of index.htm is to display the reading coming from the ADC_1 input on a webpage.
We’ll start by writing some simple HTML header 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" xml:lang="en" lang="en">
<head>
<title>Cool Components FlyPort Test Page#1</title>
Nothing complicated here – all we’re doing it telling the browser what kind of document we’re serving, and setting the title of the page.
<link href="/style.css" rel="stylesheet" type="text/css" />
<script src="/mchp.js" type="text/javascript"></script>
The next section includes a couple of the previously mentioned files – firstly, the stylesheet (“style.css”) and secondly the clever javascript (“mchp.js”). Next – the crucial (simplified) javascript section that grabs the value of the ADC from status.xml and displays it…
<script type="text/javascript">
<!--
// Parses the xmlResponse from status.xml and updates the status box
function updateStatus(xmlData)
{
// Check if a timeout occurred
if(!xmlData) {return;}
document.getElementById('pot0').innerHTML = getXMLValue(xmlData, 'pot0');
}
setTimeout("newAJAXCommand('status.xml', updateStatus, true)",500);
//-->
</script>
updateStatus is a javascript function that is confusingly called from the code within mchs.js. Leaving this stumbling block aside, the code is very simple.
Firstly we check to see whether there’s any data (xmldata) worth processing. If there’s none, we exit the function.
The
document.getElementById('pot0').innerHTML = getXMLValue(xmlData, 'pot0');
line is critical. Here we’re using javascript to get the value called ‘pot0′ from status.xml and write it to the ‘div’ section that’s called by the identifier ‘pot0′. The “document.getElementById(‘name’) just returned a
handle to an element on the webpage. By using the ‘innnerHTML’ method we can set the text of that element to be what we want. In this case, we’re setting the text to become the value of the ADC channel.
We’re grabbing the value of the ADC channel with “getXMLValue(xmlData, ‘pot0′)”. the ‘getXMLValue’ function is the way we get data from status.xml. It’s pretty simple, and we’re just passing it two arguments : the place to store the data (a variable called xmlData) and the name of the resource inside of status.xml that we want to get the value for.
So that’s the main task completed – we’ve grabbed the data and displayed it to the web page. There’s just one more very cool function that will transform your page from a dull, static page to an exciting, dynamic, automatically updating page.
The key to getting this working is
setTimeout("newAJAXCommand('status.xml', updateStatus, true)",500);
If you notice – in the entire index.htm so far, we haven’t yet called our crucial ‘updateStatus’ function once. So this is where we finally call it. We’re actually calling a function hidden in mchp.js which in turn calls updateStatus.
The function within mchp.js is called “newAJAXCommand” and it takes the following arguments – the url of the resource (status.xml), the function that the resulting data gets sent to (updateStatus), and whether it’s a request that will be repeated ad infinitum (true).
So going back to our code line in index.htm that calls newAJAXCommand, we can see that the function call itself is sitting as a parameter inside another function called setTimeout. This is quite usual in javascript, although it can look a bit confusing to beginnners.
What we’re saying with the setTimeout call is that we want to wait a certain amount of time before calling the newAJAXCommand function. In this case it’s 500 milliseconds (half a second). It’s actually possible to get away with not using setTimeout, but we’ll leave it in for completeness.
Where is the data actually displayed?
All we need now is a little bit of normal html code that can be modified ‘on the fly’ by updateStatus. So here it is :
</head>
<body>
<p>The temperature is : <span id="pot0" style="font-weight:normal">?</span></p>
</body>
</html>
Just a little house-keeping : In this code section we’re closing off the ‘head’ section of the html code where the javascript code goes, and right at the bottom, we’re closing the whole html section with a </html>.
But the crucial bit of this code section is:
The temperature is : <span id="pot0">?</span>
We’re declaring a section called “pot0″ and putting a little bit of initial text in. The ‘?’ will appear for the first 500mS until our javascript ‘setTimeout’ kicks in and starts the whole process running.
Now compile the webpages and run!
Check all of your code – Javascript is fussy about case, and html needs proper closing tags to match any opening tags. Once you’re happy, save your code.
Now open up your OpenPICUS IDE and open a project that you have already proven connects to your wireless network. Click on the ‘Webpages Import’ button on the toolbar, and navigate to the folder where all of your code has been saved. Note that we’re choosing a folder not a selection of files. Click the botton marked ‘Generate’ and you’ll get a message saying OK. Note that every time you change your web code, you need to re-include the folder where it’s stored using this process.
Now, as usual, compile the whole project and download (or upload!) it to your Flyport.
Once your Flyport is reset and connects to your network, you’ll be able to navigate to your index.htm just by typing the IP address of your Flyport (192.168.0.101 in our case). You should see something like this.
Note that the ‘temperature’ or whatever it is, is constantly being updated. This is because of code inside of mchp.js which is calling the getXMLData function once every 500mS
Next Steps
That’s pretty much it – but if you want to further extend your code, you could try reading some of the other ‘resources’ within status.xml. Here’s handy list of what they’re called.
- LED 0 – “led0″
- LED 1 – “led1″
- LED 2 – “led2″
- LED 3 – “led3″
- LED 4 – “led4″
- LED 5 – “led5″
- Button 0 – “btn0″
- Button 1 – “btn1″
- Button 2 – “btn2″
- Button 3 – “btn3″
- Button 4 – “btn4″
- ADC Channel 0 – “pot0″
- ADC Channel 1 – “pot1″
