Switching LEDs on from a Web Page using Arduino

The Arduino and Ethernet shield are set up as a web server. The web page that the server hosts allows two LEDs to be controlled by clicking checkboxes on the web page.

This video shows the Arduino and web page in action:

The LEDs are interfaced to pin 2 and pin 3 of the Arduino.

This is an answer to a question from the Arduino web server blog entry relating to the article on Arduino Web Server LED Control. The question is on how to control two LEDs from a web page.

The Arduino sketch for this solution:
eth_websrv_LED2.zip
This code is a hack from some previous code that I wrote and so does not look exactly like the code from the sketch that the question is related to.

Changing Text and Button Color using AJAX and the Arduino Web Server

This is an answer to the question about part 7 of the Arduino Ethernet shield web server tutorial (using Ajax) posted on the blog entry for the tutorial. The question is on how to change the text that shows the status of a switch on a web page as well as the color of the button on the web page. The switch is interfaced to the Arduino Ethernet web server.

This video shows the solution to the question in operation, but the color of the button text is changed instead of the color of the button (because it looked better):

 

The Arduino sketch for this solution sends the following web page (HTML with JavaScript and CSS) to the web browser:

HTML with JavaScript and CSS from Arduino Web Server

Click for a bigger image

 

 

 

 

 

 

 

 

 

The sketch for this solution can be downloaded here: eth_websrv_AJAX_switch_colour.zip

Solution Explanation

The idea is to send the status of the switch (either ON or OFF) as well as the button HTML code with text color to the web browser. This is done every time that the that an Ajax call is made. An initial Ajax call is made when the page loads. Additional Ajax calls are made every time the button on the web page is clicked. In other words the status of the switch is displayed on the web page the first time that the web page is loaded and then every time that the button on the web page is clicked. The button text will be colored red when the switch is open and colored green when the switch is closed.

The Arduino sketch is a modified version of the sketch from part 7 of the tutorial: Arduino Web Server Switch Status Using AJAX Manually

The following is modified in the sketch:

First of all, a div is created with the ID “data_to_update”. Both elements to be updated (text and button) will be inserted here by JavaScript code after they have been received from the Arduino web server. This will occur after an Ajax call. The div looks as follows on the web page:
<div id="data_to_update">
<p id="switch_txt">Switch state: Not requested...</p>
</div>

The div could have been left empty as everything in the div will be replaced after the Ajax call.

Next, the following line of JavaScript code replaces everything between the opening and closing div tags when the Arduino responds to the Ajax call:
document.getElementById("data_to_update").innerHTML = this.responseText;

The last modification to the code is to make sure the JavaScript function GetSwitchState() is called at least once when the page is loaded. If it is not called, the button will not be visible on the web page and therefore the user will not be able to click the button to make Ajax calls. The onload event is used to run this function once when the web page loads by adding a call in the body tag of the HTML page:
<body onload="GetSwitchState()">

In the Arduino sketch, the Arduino responds to the Ajax call from the web page by sending the button status text and the button with color information. This is done in the Arduino sketches’ GetSwitchState() function. This function checks the state of the interfaced push-button switch and responds as follows:
If the switch is open, it sends OFF paragraph text and red button text:
cl.println("<p>Switch state: OFF</p><button type=\"button\" style=\"color: red;\" onclick=\"GetSwitchState()\">Get Switch State</button>");
The above line of Arduino code sends these lines of HTML with CSS to color the button text red:
<p>Switch state: OFF</p>
<button type="button" style="color: red;" onclick="GetSwitchState()">Get Switch State</button>");

If the switch is closed, this line of Arduino code is run:
cl.println("<p>Switch state: ON</p><button type=\"button\" style=\"color: green;\" onclick=\"GetSwitchState()\">Get Switch State</button>");
which sends this HTML with CSS code to color the button text green:
<p>Switch state: ON</p>
<button type="button" style="color: green;" onclick="GetSwitchState()">Get Switch State</button>");

ATtiny2313 8-bit Microcontroller Course

This ATtiny2313 course is presented as a multi-part tutorial and covers software development and hardware development using the ATtiny2313 AVR microcontroller from Atmel.

More parts to this tutorial will be added soon …

Arduino Web Server Tutorial

Want to learn how to use the Arduino + Arduino Ethernet shield as a HTTP web server? There are many technologies that must come together to be able to make the Arduino able to host web pages. The most basic configuration requires HTTP and HTML. This can further be enhanced by adding CSS, JavaScript and AJAX.

The Arduino can produce web pages from within the Arduino sketch or host web pages that are stored on the SD card (there is a micro SD card socket on the Arduino Ethernet shield). These web pages can be configured to control and monitor hardware from a web browser on any Ethernet network that the Arduino is connected to.

This multi-part tutorial explains how to use the Arduino as a web server step-by-step. The tutorial starts with the basics and then introduces the technologies needed by using easy to understand practical examples.

The tutorial consists of the following parts: