Control Input Output of Arduino Yun with AJAX

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.Diagram

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.

Web interface Arduino Yun

 

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>

 

Advertisements

86 thoughts on “Control Input Output of Arduino Yun with AJAX

  1. Pingback: Web Controlled Table Lamp using Arduino Yun and Relay | Baba AweSam

  2. Hi, do you have both files available for download? After swapping all the ” and ‘ I can get both to upload, but can only turn outputs off, not on. A download would be appreciated.
    Thanks

      • Hi Samir,

        thank you for the great work. I tried to get it to run on my Yun, but unfortunately I do not get the html file to run properly. So could you please send me all the needed files or give me a link to download.
        Thank you very much.

      • Okay, my mistake. I didn’t recognize to change the quotation marks also in the html file. Now it works fine.
        Again thank you for the great work.

      • Hello Samir,

        I am a new user with the arduino yun and I would like to test your project to learn more about it. Could you please be so kind and sent me all the files?

        Thanks in advance for your attention and support.

        Best regards.

      • Hello Samir,

        I am a new user with the arduino yun and I would like to test your project to learn more about it. Could you please be so kind and sent me all the html files?

        Thanks in advance for your attention and support.

        Best regards.

    • Hello. Nice project to start with. Could you please be so kind and email all the files needed for this super project.
      Thank you.

    • Well, it is starting to make some sense. . . the HTML loads with the sketch . . . BUT, an IP option for my YUN does not show up in the TOOLS / PORT menu on the IDE? I have tried 2 different computers. Any ideas ? Tks G

      • You have to ensure that the computer and the YUN are on the same network. Wait for a while before giving up. Also, disable any firewall on the computer and see whether it helps.

      • Definitely on the same network IDE 1.5.8 Mac OSX . I tried with 2 different computers still nothing shows up . . . weird ? No firewall enabled. Been trying for 2 days . It has to be something simple ? maybe ? Tks G

      • Did you check whether you are able to get web access to it OR ssh to it? If you are on a home network, you can log into your router to see what ip address the YUN got via DHCP.

      • Yes, I have web access to it ( both by Ethernet and WiFi) I also can get ssh via terminal. I have it set to static IP 192.168.1.215 therefore not in DHCP list I had changed the port from 80 to 8215 , but I did a hard reset on the YUN and now it is back to 80 . . . .Wireless and Ethernet are both showing 192.168.1.215 on the YUN dashboard . . .

  3. Hi, can I have both sketch and html code for download? I’m programming a similar application for the heater of my caravan up in the mountains. Can I ask you also the .jpg images for on and off? They look pretty good.

  4. Love it! This has to be the best write up I’ve used online so far. Only thing I can note to mention is that the HTML needs to be in an index.html or some other .html file in order to work for those wondering. Thanks again, I got my little set up using the ARDX starter kit!

  5. IT FUCKING WORKS!!!!! This is, with the Yaler Relay, the best stuff I’ve found to make my project with Arduino Yun!!

    BE BLESSED SAMIRSOGAY

  6. Its really great tutorial but dont know why, i tried it correctly, still its not running. i mean if i give arduinoip/sd/AJAX, the page loads, but the images of led_on and led_off dont load and nothing responds neither digital input nor the buttons as digital output, any help??

  7. Pingback: Web Controlled Power Strip using Arduino Yun and Yaler | Baba AweSam

  8. Hi thanks so much really helpful tutorial
    One question. All the inputs in the html code have a “name” as well as an “id” attribute. If I change the name will this effect other parts of the code or will it still run the same? Seems like only the id matters

    • “Name ” can be considered like description. “id” has real value because it can be referenced from other parts of the HTML. So you can keep name whatever you please.

      • Thanks again.
        Do you think that the updateasyncbutton and updateasyncdac functions could be removed if you put a version of those scripts inside the sendbutton and senddac functions? Is it necessary for the arduino to send a response for those functions?

      • updateasyncbutton and updateasyncdac can be removed depending on your use. updateasyncbutton and updateasyncdac is used for arduino sending states to user at regular intervals without user intervention. sendbutton and senddac requires user intervention to get states from Arduino. So if you have an arduino being used by multiple users, then if you make some pin change, sendbutton and senddac will provide you with refreshed states but since the other users have not clicked sendbutton and senddac, they will not get the new states. In this case, updateasyncbutton and updateasyncdac will provide regular state change updates to other users.

  9. Hi, I can send a value from webpage to arduino. for example, i need to do a math operation with the temperature and a number intruced by me on webpage

    • Yes you can send any value to arduino. Take that value in a variable and do math operation on it and send back the result to the Web page. In this tutorial, I have done math operation on the temperature except that the input is a sensor.

  10. Hi Samir, I watched your video and it’s a really good work. I’m trying to create the files from zero but I’m having troubles. Could you please help me mailing your code? Thanks Again

      • Buenas, copie el archivo descargado cree una Carpeta arduino/AJAX/www y dentro la www esta el index y las imagenes pero no logro levantar la pagina introduciondo iparduino/sd/AJAX

      • Did you verify that the files have successfully transferred to the YUN after sketch upload. You can verify by logging into the YUN via ssh and seeing in the /mnt/sda1/arduino/www folder.

  11. Samir Hello, Thanks for sharing your project.
    I downloaded the project and works well, but the image button pin 13 “on” and “off” do not change when clicked.

    Thank you

  12. Hello Samir,

    I am a new user with the arduino yun and I would like to test your project to learn more about it. Could you please be so kind and send me all the files needed including the html files?

    Thanks in advance for your attention and support.

    Best regards.

  13. Thanks. This is just what I wanted to do with my Yun. This is an absolutely excellent set of instructions. The only thing I found is that in your index.html file, you reference on.jpg and off.jpg and those files are really on.png and off.png. I corrected and it works as desired. Understandable error as the led_on.jpg and led_off.jpg are correctly jpg files. I want to hook up a webcam and put that on the html page if this is possible. I was able to get this working on it’s own from the website below, but want both on same page. Any idea how to do that?

    https://learn.adafruit.com/wireless-security-camera-arduino-yun/stream-video-to-youtube

    • Thanks for bringing to my notice. It is surprising that the file in my Laptop is Jpg but the shared file is PNG. Anyway, as far as your other query is concerned, I also had great difficulties to have 2 things on the same page. I have a rover with web controls and also the viewfinder via webcam. After trying several things, what I did was have the output of the webcam stream on my control page via an image.
      where 192.168.1.50 is ip of YUN and Mjpeg streamer is working on port 8080. You have to see to it that the ip address of YUN doesn’t chnage or else you will have to keep on changing the HTML.

  14. Hello Samir,i am stuck with DHT11 temperature sensor,i would like it to work on yun and that the temperature is shown where it should be,
    this code works on uno
    #include “DHT.h”
    #define DHTPIN 2 // what digital pin we’re connected to
    #define DHTTYPE DHT11
    DHT dht(DHTPIN, DHTTYPE);
    void setup() {
    dht.begin();
    }
    void loop() {
    delay(2000);
    float h = dht.readHumidity();
    float t = dht.readTemperature();
    float f = dht.readTemperature(true);
    if (isnan(h) || isnan(t) || isnan(f)) {
    return;
    }
    float hif = dht.computeHeatIndex(f, h);
    float hic = dht.computeHeatIndex(t, h, false);
    client.print(F(“#A0”));
    client.print(F(“=”));
    client.print(t);
    client.println(“”);
    }
    I would be very greateful if you could help me

    • It seems you have have cut paste several things to make it work. You have to have an understanding of the YUN sketch if you want to modify it according to your requirements. Anyway, where do you want to see the output of temperature and humidity? If you want to see on a serial monitor on YUN, the sketch for YUN will be exactly the same as that used on UNO. If you want to display the temperature and humidity on a web page then you have to read my article first and understand it. Only then will you be able to modify the sketch and HTML and make it work for you.

  15. Pingback: Control Input Output of ESP8266 with AJAX | Baba AweSam

  16. hello Samir, this is a excellent job, congratulations!! I am starting now with arduino and your project is great! Can you send me the files?I want test your project and after I want modify for acoplate it to my project. Thank you!

  17. your article code is missing some code in the for loop for the PinPair assignment. Thanks for the great work, i am tweeking the code to work with a Mega and a W5100 ethernet shield. If anyone id

  18. thank you so much for the guidance on Arduino yun it is highly appreciated and may Allah reward you brother. please could you help me send all the files to my email thank you

  19. Hello! Thank you for your wonderful tutorial. It was very useful. I would like to ask you something about your circuit. Can we get ride of the Temperature sensor TMP36 and only work with the LEDs? Thank you!!

  20. Hi Samir,
    I have tried to program your code to Arduino UNO using Yun shield. all files are present in /www/AJAX, including index.html and .jpg files. I am able to access the index.html but nothing change when I click the button ’13’ and so the other data.
    Do you have any suggestion to make your code working on my UNO+Yun Shield??
    Regards,
    Bambang

    • I do not have a YUN shield so I cannot comment. What I would suggest is study one example of how a YUN shield works with arduino UNO with a web server example and then modify my sketch to fit your need.

  21. Hey Samir
    I am looking for some help with adding an additional DAC slider. I dont know if this is possible. Any advise would be greatly appreciated.

    • Adding another DAC slider is possible. Just change the HTML code and arduino sketch accordingly. It is better to have understanding of how the HTML sketch works so that you can duplicate the slider code for how many ever sliders you want. Accordingly you will have to duplicate portions of the arduino sketch which receives that data from the HTML.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s