This tutorial shows how to use the Arduino MEGA 2560 and Arduino Ethernet shield to make a web server that hosts a web page allowing 24 outputs to be controlled by clicking checkboxes on the web page.
Basic Code Structure
The code consists of an Arduino sketch that is loaded to the Arduino MEGA and an index.htm file that is copied to the micro SD card. The index.htm page contains HTML, CSS and JavaScript. The micro SD card is inserted into the micro SD card socket on the Ethernet shield.
The Arduino MEGA and Ethernet shield are programmed to behave as a web server that serves up the web page from the micro SD card when a web browser connects to the server and requests the page.
The JavaScript that is embedded in the page communicates with the Arduino web server using Ajax after the web page has been loaded to the web browser.
Hardware and Circuit Diagram
An Arduino MEGA 2560 and Arduino Ethernet shield are used in this project. A 2GB micro SD card is used to store the web page that is hosted by the Arduino.
The circuit diagram shows how the LEDs are connected to the Arduino. Only the first two and last two LEDs with series resistors are shown in the circuit as the rest of the LEDs are connected in the same way sequentially from pin 26 to pin 49 of the Arduino MEGA.
NOTE: Pins 50 to 53 (four pins) can not be used as outputs when using the Ethernet shield. This is because these are SPI port pins that are used to control the Ethernet chip and SD card.
Arduino Sketch Code
Setup
The setup() function initializes the SD card, then sets the Arduino pins 26 to 49 as outputs and switches them low (or off).
The Ethernet is then initialized before the main loop is run.
The Main Loop
The main loop in the sketch handles the browser requests. It responds to two types of requests – a request for the web page and an Ajax request.
Page Request
When a web browser is used to connect to the web server at it’s IP address, the Arduino web server responds with the index.htm page which then gets loaded to the browser.
Once the web page is loaded to the browser, the JavaScript in the web page will start to run and will do an Ajax request every second.
Ajax Request
The JavaScript on the web page will send the state of any of the checkboxes to the Arduino with each Ajax request.
The Arduino responds to the Ajax request with an XML file that contains all the states of the LEDs / checkboxes. This is so that if a second browser connects to the web server, the correct states of the checkboxes (checked or unchecked) will be set on the page.
Each time the an Ajax request is received by the Arduino, the SetLEDs() function is run which sees which checkboxes have been checked or unchecked and then sets or clears the corresponding LED.
The state of each LED is stored as a bit in the LED_state array which consists of 3 bytes of 8 bits each = 24 bits corresponding to the 24 outputs. Whenever the state of an LED is set or cleared, the corresponding bit is set in the array to keep track of the LED states.
Because of this array, each time that the array is accessed, it is accessed in a for loop as 3 bytes and a secondfor loop accesses each bit in the current byte using bitwise operators.
After SetLEDs() is called in response to the received Ajax request, XML_response() is called to send back the XML file containing the LED states.
HTML, CSS and JavaScript
The HTML, CSS and JavaScript for the project are all embedded in a single file called index.htm and no external files are used.
Source: http://startingelectronics.org/tutorials/arduino/arduino-MEGA-24-output-web-server/
Tags: 201503, arduino mega2560, ethernet shield, tutorial, 24 output, web server, ajax
COMMENTS