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.
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.
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.
When you save the HTML file to the SD card, please change the name as ‘index.htm’.
Below is the demonstration movie.