How to implement the Web Server for real-time monitoring using ioShield-A

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.
ORIGINAL POST
By Wiznet Academy
details

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_flow

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

Arduino-Mega

2) ioShield-A (WIZ550io+Arduino Interface Board)

3) uSD, Bread Board, Jumpers and Potentiometer
mSD

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.
Hardware-connection

You can get the Arduino Sketch file and web page examples from below link.

Ajax Web Sever File Download : Ajax_WebServer

Download from GitHub

 

When you save the HTML file to the SD card, please change the name as ‘index.htm’.

Below is the demonstration movie.

COMMENTS

Please Login to comment
  Subscribe  
Notify of