Arduino has gone totally IoT with the Arduino Yun. It has both Wireless and wired connectivity options. IoT doesn’t necessarily mean that it has to deal with Cloud drives, automated inputs, automatic backup to SQL database, etc. It can also mean that your inputs and outputs are user controlled albeit over the Internet. In my previous project, I made a rover which would be controlled by a web interface. Since the webpage was designed such that it would load the whole page depending on each user input (this is how HTML works), many times the http request would timeout as the Arduino was not able to process whole page loads. I had to find out a way in which the web page would not have to change each time I changed the direction of the rover. This is where AJAX comes into picture. What AJAX enables us to do is send a request to the Arduino and get a reply from the Arduino while not requiring a page reload. Since I learn stuff as and when there is a requirement, I scoured the Internet for folks who had already implemented such a thing. The only article on the Internet which dealt with Arduino Yun and AJAX was “Interact and remotely control Arduino YUN with Ajax” by Boris Landoni.

Why this Article?

The major problem with the above article is that he has relied on Italian words for many scripts which mostly doesn’t make sense to English speaking folks. I tried real hard to understand it using google translate. The reason for writing this blog is the hope that I would be better able to explain what he has written. There are 3 other reasons for writing this blog. First is that the quotes and double quotes he has used in the HTML and arduino sketch are not recognised by the Arduino application nor by Linino. This makes copy paste of his code impossible. It probably could be because the ASCII codes of his quotes and double quotes are different to ours (Also, his quotes and our quotes look different if put side by side). Second is that he has used many inputs and outputs using “for” loops which could be overwhelming for beginners. I have tried to use minimum inputs and outputs. Third is that I have used actual inputs and outputs with LEDs, buttons and sensors.

Update: Control Input Output of ESP8266 with AJAX

Inputs and Outputs to the Yun

As discussed earlier, for simplicity, we will use just one of each input and output. I will not go into much details as to how to use the inputs and outputs. If you have reached this stage, then you probably know how to program inputs and outputs and the way they are connected to the Arduino. If you have the Arduino starter kit, you can easily replicate this setup.

1) Digital Input: Pin 2 of the Yun will be used as a digital input. This means that pin 2 will sense a 1 or a 0 on the pin. Depending on the input, the color of the output on the web page will change asynchronously i.e. without page reload. For this purpose, we will use a simple push button switch. When pressed, the output will be solid green and when released, the output will be dark green.

2) Digital Output: We will use the in built led on pin 13 and an LED connected to pin 12 as output. Depending upon the input we provide to the Yun via the web interface, the LEDs will be either ON or OFF. Also, the buttons 12 and 13 will be either red or green depending on the actual state of the LEDs.

3) Analog Input: Since A0 – A5 are the only analog sensing pins, we will use A0 as the analog input pin. We will connect a TMP36 temperature sensor to it. This will give varying voltages depending upon the temperature around it.

4) Analog Output: We will connect another LED to pin 3 of the Arduino. The way Arduino provides analog output is through PWM which means when we change the value of the input on the web interface, the Duty cycle of the Pulse Width Modulated signal changes hence giving the effective output of analog change. When we change the slider on the page, the brightness of the LED will change.

The Web Interface

The Web Interface consists of either user input to the Arduino or change in the status in web page depending on status of pins.

 

Input ADC: The text box field will reflect the values of the Temperature sensor in Celsius connected to A0.

Input Digital: This is another field which does not depend upon user input. Its value will change from dark green to solid green depending upon the status of the Digital pin 2.

DAC: PWM output from a pin has a value ranging from 0 to 255. The DAC slider sets the value of Pin 3 from 0 to 255. Also, the text below it shows the current value of the output.

Output button: We have used Pin 12 and 13 as output on Arduino. The output will change depending upon  what we do to the button 12 and 13 on the page. If we click the button once, the output on the pin will toggle to digital one and the button color will change to green. Click once again and it will toggle the pin to digital zero and reflect the change on the page by turning button red.

Project Files

You can find the HTML Code, INO file and the buttons in this zip.

HTML Code of Web page explained

The whole HTML code can be found at the end of the page. We will take snippets of the code and discuss it here. First we will look into the code that makes the page. We will not go into the details as to the formatting, just the things which form part of the interaction.

<input type=”text” style=”text-align: center;” name=”analogA0″ id=”analog0″ value=”0″ size=”6″ readonly/>

This is the text box below “Temperature in C”. The important thing to note here is the id and the value. The script requires that we have an id and a value so that we could reference it into a script and change its value.

<img src=”led_off.jpg” width=”50″ id=”image2″ />

This is the image below the Digital Input 2. The current image is led_off.jpg but as soon as the script will run and the status of pin 2 will change to 1 depending on push button press, the source image will be replaced by led_on.jpg. The script will reference the id of image2 to change the image.

<input type=”hidden” name=”pin” value=”3″ id=”pin3″ />
<input type=”range” style=”width: 50px; height: 30px;” id=”dac3″ min=”0″ max=”255″ value=”0″ step=”1″ onchange=”sendDac(document.getElementById(‘pin3’).value,
this.value);”/>
<span id=”valueDac3″>0</span>

These codes are representing the DAC3 slider. The first field is hidden which means you will not see anything about it but it is important because it has a value and an id which will be referenced later. The second line is the code of the slider as depicted by the input=range. The starting value is 0 and the ending value is 255 and the step is 1. 0 to 255 represents the values PWM can take. Also, moving the slider will cause an event “sendDAC” which will send the current value of the slider with the value of pin3 to the script. We will discuss the scripts later on. valueDac3 (the number below the slider) currently has a value of 0 but will be replaced by another value depending upon the output of the script.

<input type=”hidden” name=”pin” value=”12″ id=”pin12″ />
<input type=”hidden” name=”action” value=”0″ id=”action12″ />
<img src=”off.jpg” width=”50″ id=”image12″ onclick=”sendbutton(document.getElementById(‘pin12’).value,document.getElementById(‘action12’).value);”/>

The code above represents the Digital output pin 12. The first line represents the value of pin12 to be referenced later. The second line represents the action that will be taken when we click the image. The action will be either 0 or 1. Initially the image will be dark green as the value of action12 is 0. Later on, the source image will change to on.jpg (solid green) as we click the image triggering the event “sendbutton” which sends the value of pin12 and the value of action12 to the script.

<p id=”description”> – </p>

There will be many times we will get response from the Arduino and we will place that in the id description so that we can see the communication.

Now that we are done with the way the page looks and acts, let us take a look at the way the page will behave when it receives the events.
window.onload=Pinstatus;
function Pinstatus(){
morestatus();
}

The above portion is the script part of the html code. When the window will load in a user PC, the “Pinstatus” script will run. This script calls another script “morestatus”.

function morestatus(){
setTimeout(morestatus, 2000);
document.getElementById(“description”).innerHTML = “Processing Status”;
server = “/arduino/status/99”;   
request = new XMLHttpRequest();
request.onreadystatechange = updateasyncstatus;
request.open(“GET”, server, true);
request.send(null);
}

The timeout on the script causes it to run every 2 seconds. You remember the description field in the previous section at the end. That description will be replaced by “Processing Status” in the page by the innerHTML attribute. The “request = new XMLHttpRequest()” creates a new request and on a state change, it calls another script “updateasyncstatus”. “request.open(“GET”, server, true)” creates a GET request with a value of server which in total amounts to “http://ip address of Yun/arduino/status/99”. Also, the true indicates that it is an Asynchronous request which means the page will not required to be reloaded. “request.send(null)” sends the created request to the Yun.

The script updateasyncstatus updates the state of the page i.e. all the images we were talking about before, the text boxes, the sliders, etc.

function updateasyncstatus(){
if ((request.readyState == 4) && (request.status == 200))
{
result = request.responseText;       //result will store the response received from Arduino
document.getElementById(“description”).innerHTML = result; //description will now show the response received
fullset = result.split(“#”);

The response we receive from the Arduino will be of the format status#2=0#12=0#13=1#3=190#A0=24. What the result.split will do is split the string at “#” into an array of “pin and its value” pair. So the array will look like 2=0,12=0,13=1,A0=24. fullset will store this array and you can call any entry based upon fullset[position of entry].

In the following “for loop”, we will further segregate the values to make them usable. The for loop will run as long as the length of the response received i.e. 5.

for(i = 1; i
PinPair = fullset[i];                                                  //for the value of i=1, PinPair will be “2=0”
singleset = PinPair.split(“=”);       //this will cause PinPair to split at “=” into an array of [2,0]
PN = singleset[0];                                                     //PN will hold the pin number,example 2
Pinstatus = singleset[1];                               //this will hold the status of pin 2, for example 0
if (PN > 11)                                             //  if pin number is greater than 11 i.e. pin 12 and 13
{
ActNum = “action” + PN;                                                   // eg for pin 12, ActNum=action12
ImgNum = “image” + PN;                                                                        // ImgNum=image12
if (Pinstatus == 0)
{
PinAct = “1”;          //If the current status of pin 12 is 0, set image to off.jpg and PinAct to 1.
image = “off.jpg”;

document.getElementById(ActNum).value = PinAct” will change the value of action12 in main HTML to 1. What this will do is the next time when you click on image12 i.e. pin12, it will send a value of 1 as currently its value is 0. This makes it a toggle switch.

“document.getElementById(ImgNum).src = image” will change the image of button 12 to be red i.e. off.jpg as pin status is 0.

if (PN == 2)
{
ImgNum = “image” + PN;
if (Pinstatus == 1)
{
image = “led_on.jpg”;
}
else
{
image = “led_off.jpg”;
}
document.getElementById(ImgNum).src = image;
}

In the case of pin 2, since it is not a toggle switch, we do not require PinAct. If Pin status is 1, image2 in the HTML will be replaced by led_on.jpg (solid green) and vice versa.
if (PN == 3 )
{
PinVal = parseInt(singleset[1]);  //Since pin 3 is analog output, it has values between 0 and 255. This integer value will need to be extracted from the array using parseInt() in order to be usable.
DacNum = “dac” + PN;                                                                                               //dac3
ValNum = “valueDac” + PN;                                                                             //valueDAC3
document.getElementById(DacNum).value = PinVal;

This will set the value of dac3 to the actual value from 0 to 255 in the HTML page i.e. the slider
document.getElementById(ValNum).innerHTML = PinVal;
This will display the value of valueDAC3 below the slider

if (PN.substr(0,1) == “A”)                          //if the pin is an analog input pin starting with A
{
PinVal = parseFloat(singleset[1]);          //the value of A0 received from Arduino will not be actual value of A0 but calculated value of temperature, so we need to extract it as floating point value using parseFloat
AnalogNum = “analog” + PN.substr(1,2);                                                                 //analog0
document.getElementById(AnalogNum).value = PinVal;

This will change the value in the text box analog0 to the value of temperature received from Arduino

The Page updates the status of pins asynchronously every 2 seconds. The following script will change the status of the pin when the button (12 or 13) is pressed and it will also command the arduino to change the digital output (pin 12 or 13). When we pressed pin 12 for example, the script sent 2 values with the script. The 2 values of pin number and action will be used here. (Note: The following explanation will use pin 12 as an example with a pin state of 1.)
function sendbutton(Pin,action){
document.getElementById(“description”).innerHTML = “Processing Button Click”;
server = “/arduino/digital/” + Pin + “/” + action;                                       //arduino/digital/12/1
request = new XMLHttpRequest();
request.onreadystatechange = updateasyncbutton;
request.open(“GET”, server, true);
request.send(null);
AJAX request will be created and sent as “http://ip address of Yun/arduino/digital/12/1 to Arduino (and processed by sketch) and updateasyncbutton script will be run. updateasyncbutton script will process the response coming back from Arduino i.e. in the form of digital,12,1.

function updateasyncbutton(){
if ((request.readyState == 4) && (request.status == 200))
{
result = request.responseText;             //result will hold response of Arduino i.e. digital,12,1
document.getElementById(“description”).innerHTML = result;
singleset = result.split(“,”);                         //the result will be split into array as {digital,12,1}
PinType = singleset[0];                                                                                               //digital
PinNum = singleset[1];                                                                                                      //12
Pinstatus = singleset[2];                                                                                                      //1
ActNum = “action” + PinNum;                                                                                 //action12
ImgNum = “image” + PinNum;                                                                                 //image12

The way the following code behaves has already been explained in the status change section.

if (Pinstatus == 0)
{
PinAct = “1”;
image = “off.jpg”;
}
else
{
PinAct = “0”;
image = “on.jpg”;
}
document.getElementById(ActNum).value = PinAct;
document.getElementById(ImgNum).src = image;
document.getElementById(“description”).innerHTML = result;

The following script kicks in when the value of slider 3 changes. The event will send 2 values i.e. Pin=3 and value=position of slider

function sendDac(Pin,value){
ValNum = “valueDac” + Pin;                                                                                 //valueDac3
document.getElementById(ValNum).innerHTML=value;
document.getElementById(“description”).innerHTML = “Processing Slider”;
server = “/arduino/dac/” + Pin + “/” + value;                                             //arduino/dac/3/190
request = new XMLHttpRequest();
request.onreadystatechange = updateasyncDac;
request.open(“GET”, server, true);
request.send(null);
The above code creates and sends a request to Arduino as “http://ip address of Yun/arduino/dac/3/190 and runs script updateasyncDac. What this function does is change the value of slider and the value below it.
function updateasyncDac(){
if ((request.readyState == 4) && (request.status == 200))
{
result = request.responseText;                                                                              //dac,3,190
singleset = result.split(“,”);                                                                     //array of {dac,3,190}
PinType = singleset[0];                                                                                                    //dac
PinNum = singleset[1];                                                                                                         //3
PinVal = parseInt(singleset[2]);                                                                                        //190
DacNum = “dac” + PinNum;                                                                                          //dac3
ValNum = “valueDac” + PinNum;                                                                         //valueDac3

The following has already been explained in the status change section

document.getElementById(DacNum).value = PinVal;
document.getElementById(ValNum).innerHTML = PinVal;
document.getElementById(“description”).innerHTML = result;

Arduino Sketch explained

Before we discuss the sketch, I would like to give some important information about how the Yun deals with the html page and the sketch. If you have an sd card in the Yun and an /arduino/www created in the root directory of the sd card, the Yun will automatically transfer the HTML you wrote from your sketch directory to /arduino/www/sketchname folder. So in our case, my sketch is in \Documents\Arduino\AJAX, so I will have to create a folder www in AJAX directory and have my HTML as index.html. Now when I upload the sketch using wifi, the index.html will be placed in /arduino/www/AJAX/index.html in the Yun and you can run this page by entering “http://ip address of yun/sd/AJAX”. The sketch can be found at the end of the page. Following is the video explaining the above procedure

Now we will move to the explanation of the sketch. The communication between the Linux and the microcontroller is using REST APIs i.e. using /arduino/12/1 format. The Arduino will split the string into usable details

Note: All the values in explanation on right are example values

int dac = 0;                                                                                     //Then initial value of pin 3
int DigitalPin[] = {2, 12, 13};         //the array holding the digital pins so that we can reference them easily using for loops
int DacPin = 3;
YunServer server;
void setup() {
pinMode(2,INPUT);
pinMode(4,INPUT);
pinMode(12,OUTPUT);
pinMode(13,OUTPUT);
digitalWrite(13, LOW);
Bridge.begin();
digitalWrite(13, HIGH);  //we are toggling the value of pin 13 so as to know when the bridge starts
server.listenOnLocalhost();
server.begin();
}
void loop() {
YunClient client = server.accept();
if (client) {
process(client);
client.stop();
}
delay(50);
}
void process(YunClient client) {   //This script will process the request sent from the web page
String command = client.readStringUntil(‘/’);                    
if (command == “digital”) {                                                //for example /arduino/digital/12/1
digitalCommand(client);                                 //the process digitalcommand will be executed
}
if (command == “dac”) {                                                     //for example /arduino/dac/3/190

dacCommand(client);

}
if (command == “status”) {                                                   //for example /arduino/status/99
statusCommand(client);
}
}
void digitalCommand(YunClient client) {
int pin, value;
pin = client.parseInt();                                                           //for /arduino/digital/12/1, pin=12
if (client.read() == ‘/’) {
value = client.parseInt();                                                     //for /arduino/digital/12/1, value=1
digitalWrite(pin, value);                                                         //lights LED connected to Pin 12
}
else {
value = digitalRead(pin);
}
client.print(F(“digital,”));
client.print(pin);
client.print(F(“,”));
client.println(value);                                                               //sends digital,12,1 to web page
}
void dacCommand(YunClient client) {
int pin, value;
pin = client.parseInt();                                                              //for /arduino/dac/3/190, pin=3
if (client.read() == ‘/’) {
value = client.parseInt();                                                  //for /arduino/dac/3/190, value=190
dac = value;                                        //dac is used as a placeholder for storing slider value
analogWrite(pin, value);                                                          //lights led on pin 3 using PWM
}
else {
value = dac;
}
client.print(F(“dac,”));
client.print(pin);
client.print(F(“,”));
client.println(value);                                                                //sends dac,3,190 to web page
}
void statusCommand(YunClient client) {    //this will send the status of all pins to web page
int pin, value;
client.print(F(“status”));                                            //the string of data will start with “status”
for (int thisPin = 0; thisPin //which means pins 2,12,13
pin = DigitalPin[thisPin];                                                     //for thispin=0, DigitalPin[0]=2=pin
value = digitalRead(pin);                                                                   //status of pin2 i.e. 0 or 1
client.print(F(“#”));
client.print(pin);
client.print(F(“=”));
client.print(value); //the string should look like #2=1
}                                                      //after for loop, the string will be status#2=0#12=0#13=1
{
pin = DacPin;                                                                                                                 //pin=3
value = dac;                                                                                                           //value=190
client.print(F(“#”));
client.print(pin);
client.print(F(“=”));
client.print(value);                                                             //the string should look like #3=190
}
{
value = analogRead(0);                                                      
float voltage = value * (5000/ 1024);                                   // convert the reading to millivolts
float temperature = (voltage – 500)/10;            // convert the millivolts to temperature celsius
client.print(F(“#A0”));
client.print(F(“=”));
client.print(temperature);                                                 //the string should look like #A0=24
}
client.println(“”);
}         //the total status sent to web page becomes status#2=0#12=0#13=1#3=190#A0=24

Project Files

You can find the HTML Code, INO file and the buttons in this zip.

Demo of the Project (Watch it in Full screen and Full HD)

Video Tutorial for accessing Arduino YUN over the Internet

Arduino Sketch

Note: It is advisable to use the ino and HTML files from the link above as compared to copying and pasting from the webpage as some users have complained that it does not work.

#include
#include
#include
int dac = 0;
int DigitalPin[] = {2, 12, 13};
int DacPin = 3;
YunServer server;
void setup() {
pinMode(2,INPUT);
pinMode(4,INPUT);
pinMode(12,OUTPUT);
pinMode(13,OUTPUT);
digitalWrite(13, LOW);
Bridge.begin();
digitalWrite(13, HIGH);
server.listenOnLocalhost();
server.begin();
}
void loop() {
YunClient client = server.accept();
if (client) {
process(client);
client.stop();
}
delay(50);
}
void process(YunClient client) {
String command = client.readStringUntil(‘/’);
if (command == “digital”) {
digitalCommand(client);
}
if (command == “dac”) {
dacCommand(client);
}
if (command == “status”) {
statusCommand(client);
}
}
void digitalCommand(YunClient client) {
int pin, value;
pin = client.parseInt();
if (client.read() == ‘/’) {
value = client.parseInt();
digitalWrite(pin, value);
}
else {
value = digitalRead(pin);
}
client.print(F(“digital,”));
client.print(pin);
client.print(F(“,”));
client.println(value);
}
void dacCommand(YunClient client) {
int pin, value;
pin = client.parseInt();
if (client.read() == ‘/’) {
value = client.parseInt();
dac = value;
analogWrite(pin, value);
}
else {
value = dac;
}
client.print(F(“dac,”));
client.print(pin);
client.print(F(“,”));
client.println(value);
}
void statusCommand(YunClient client) {
int pin, value;
client.print(F(“status”));
for (int thisPin = 0; thisPin HTML Code

Note: It is advisable to use the ino and HTML files from the link above as compared to copying and pasting from the webpage as some users have complained that it does not work.

Arduino Yun I/O Demo

window.onload=Pinstatus;
function Pinstatus(){
morestatus();
}
function morestatus(){
setTimeout(morestatus, 2000);
document.getElementById(“description”).innerHTML = “Processing Status”;
server = “/arduino/status/99”;
request = new XMLHttpRequest();
request.onreadystatechange = updateasyncstatus;
request.open(“GET”, server, true);
request.send(null);
}
function updateasyncstatus(){
if ((request.readyState == 4) && (request.status == 200))
{
result = request.responseText;
document.getElementById(“description”).innerHTML = result;
fullset = result.split(“#”);
document.getElementById(“description”).innerHTML = fullset;
for(i = 1; i 11)
{
ActNum = “action” + PN;
ImgNum = “image” + PN;
if (Pinstatus == 0)
{
PinAct = “1”;
image = “off.jpg”;
}
else
{
PinAct = “0”;
image = “on.jpg”;
}
document.getElementById(ActNum).value = PinAct;
document.getElementById(ImgNum).src = image;
}
if (PN == 2)
{
ImgNum = “image” + PN;
if (Pinstatus == 1)
{
image = “led_on.jpg”;
}
else
{
image = “led_off.jpg”;
}
document.getElementById(ImgNum).src = image;
}
if (PN == 3 )
{
PinVal = parseInt(singleset[1]);
DacNum = “dac” + PN;
ValNum = “valueDac” + PN;
document.getElementById(DacNum).value = PinVal;
document.getElementById(ValNum).innerHTML = PinVal;
}
if (PN.substr(0,1) == “A”)
{
PinVal = parseFloat(singleset[1]);
AnalogNum = “analog” + PN.substr(1,2);
document.getElementById(AnalogNum).value = PinVal;
}
}
}
}
function sendbutton(Pin,action){
document.getElementById(“description”).innerHTML = “Processing Button Click”;
server = “/arduino/digital/” + Pin + “/” + action;
request = new XMLHttpRequest();
request.onreadystatechange = updateasyncbutton;
request.open(“GET”, server, true);
request.send(null);
}
function updateasyncbutton(){
if ((request.readyState == 4) && (request.status == 200))
{
result = request.responseText;
document.getElementById(“description”).innerHTML = result;
singleset = result.split(“,”);
PinType = singleset[0];
PinNum = singleset[1];
Pinstatus = singleset[2];
ActNum = “action” + PinNum;
ImgNum = “image” + PinNum;
if (Pinstatus == 0)
{
PinAct = “1”;
image = “off.jpg”;
}
else
{
PinAct = “0”;
image = “on.jpg”;
}
document.getElementById(ActNum).value = PinAct;
document.getElementById(ImgNum).src = image;
document.getElementById(“description”).innerHTML = result;
}
}
function sendDac(Pin,value){
ValNum = “valueDac” + Pin;
document.getElementById(ValNum).innerHTML=value;
document.getElementById(“description”).innerHTML = “Processing Slider”;
server = “/arduino/dac/” + Pin + “/” + value;
request = new XMLHttpRequest();
request.onreadystatechange = updateasyncDac;
request.open(“GET”, server, true);
request.send(null);
}
function updateasyncDac(){
if ((request.readyState == 4) && (request.status == 200))
{
result = request.responseText;
singleset = result.split(“,”);
PinType = singleset[0];
PinNum = singleset[1];
PinVal = parseInt(singleset[2]);
DacNum = “dac” + PinNum;
ValNum = “valueDac” + PinNum;
document.getElementById(DacNum).value = PinVal;
document.getElementById(ValNum).innerHTML = PinVal;
document.getElementById(“description”).innerHTML = result;
}
}

</head>
<font face=”Arial”>
<table name=”Table” border=”1″ cellpadding=”6″>
<tr> <th align=”center” colspan=”6″ >Input ADC</th></tr>
<tr>
<td align=”center”>
Temperature in C
<br>
<input type=”text” style=”text-align: center;” name=”analogA0″ id=”analog0″ value=”0″ size=”6″ readonly/>
</td>
</tr>
<tr> <th align=”center” colspan=”6″ >Input digital</th></tr>
<tr>
<td align=”center”>
2
<br>
<img src=”led_off.jpg” width=”50″ id=”image2″ />
</td>
</tr>
<tr> <th align=”center” colspan=”6″ >DAC</th></tr>
<tr>
<td align=”center”>
3
<br>
<input type=”hidden” name=”pin” value=”3″ id=”pin3″ />
<input type=”range” style=”width: 50px; height: 30px;” id=”dac3″ min=”0″ max=”255″ value=”0″ step=”1″ onchange=”sendDac(document.getElementById(‘pin3’).value,
this.value);”/>
<br>
<span id=”valueDac3″>0</span>
</td>
</tr>
<tr> <th align=”center” colspan=”6″ >Output button</th></tr>
<tr>
<td align=”center”>
12
<br>
<input type=”hidden” name=”pin” value=”12″ id=”pin12″ />
<input type=”hidden” name=”action” value=”0″ id=”action12″ />
<img src=”off.jpg” width=”50″ id=”image12″ onclick=”sendbutton(document.getElementById(‘pin12’).value,document.getElementById(‘action12’).value);”/>
</td>
</tr>
<tr>
<td align=”center”>
13
<br>
<input type=”hidden” name=”pin” value=”13″ id=”pin13″ />
<input type=”hidden” name=”action” value=”0″ id=”action13″ />
<img src=”off.jpg” width=”50″ id=”image13″ onclick=”sendbutton(document.getElementById(‘pin13’).value,document.getElementById(‘action13’).value);”/>
</td>
</tr>
</table>
<br><br>
<br><br>
<p id=”description”> – </p>
</font>
</html>