In this tutorial, we will provide the web server example to display the sensor value (ADC) using Gauge. You will use the JAVA script for Gauge display and ioShield-A (in which W5500 is embedded) for Ethernet connectivity.
Below is the system diagram about AJAX (Asynchronous JavaScript And XML)
AJAX is the combination of the asynchronous JavaScript & XML. For the data exchange with a web server, it does not renew whole web page, but some portion.
AJAX has below components.
1) XMLHttpRequest : It’s related to the communication with a web server. It transmits the user’s request to the web server and returns the result to the web browser.
2) DOM(Document Object Model) : a cross-platform and language independent convention for representing and interacting with objects in HTML, XHTML and XML
3) CSS (Cascading Style Sheets) : a style sheet language used for describing the look and formatting of a document written in markup language.
4) JavaScript : a dynamic computer programming language. It transmits the request to web server using XMLHttpRequest object. When it gets the response from XMLHttpRequest, it controls the browser using DOM and CSS.
This tutorial will use below hardware parts
1) Arduino Mega
2) ioShield-A (WIZ550io+Arduino Interface Board)
3) uSD, Bread Board, Jumpers and Potentiometer
Connect 3 pins of a potentiometer to the VCC, Analog 8 and GND pins of Arduino Mega using bread board and jumpers as below picture.
You can get the Arduino Sketch file and web page examples from below link.
Ajax Web Sever File Download : Ajax_WebServer
When you save the HTML file to the SD card, please change the name as ‘index.htm’.
Below is the demonstration movie.
COMMENTS