Project Description

Description:

Arduino web-server shows the state of a switch on a webpage using Ajax.The State of State is updated Automatically.

56

Hardware:

Arduino Uno

Ethernet Shield w5100.

Push Button.

Modification to HTML and JavaScript

The image below shows the modifications that were made to the HTML file that the Arduino sketch sends to the web browser (this file is sent line by line using client.println() in the sketch).

57

Web Page Button Code

Firstly, the code that creates a button on the web page has been removed as the button is no longer needed. It can be seen commented out in the above image.

Calling the GetSwitchState() Function

The GetSwitchState() function that was previously being called each time the button was pressed is now being called when the page is loaded. This is done by calling the function when the page load event occurs by modifying the <body> tag of the HTML: <body onload=”GetSwitchState()”>

This is added to the Arduino sketch with the following line of code:
client.println(“<body onload=\”GetSwitchState()\”>”);

Making the AJAX Call Every Second

The GetSwitchState() function would only be called once when the web page loads, unless we change the code to periodically call this function.

The following line of code is added to the bottom of the GetSwitchState() function to make sure that this function is called every second:
setTimeout(‘GetSwitchState()’, 1000);

What this line of JavaScript code does is call GetSwitchState() every 1000 milliseconds (every second). An AJAX call is therefore made every one second which fetches the status of the switch and updates it on the web page.

This code is added to the web page by adding this line to the Arduino sketch:
client.println(“setTimeout(‘GetSwitchState()’, 1000);”);

 

Demo:

Tags:201802,Arduino Uno,Ethernet Shield w5100,Push button.

Author:W.A.Smith