This tutorial introduces a web page that retrieves Analog readings from the Arduino’s Analog Pins and display them on a bar chart within the web page.
The web page will use jQuery and AJAX to request the data from the Arduino Web Server, allowing us to update the bar chart dynamically, without having to refresh the entire web page. The Arduino Web Server will send the Analog readings to the web page in JSON format where it will be processed and displayed accordingly.
In this tutorial, there isn’t an actual connection to Arduino’s Analog pins, which means the data retrieved will be that of randomly floating analog pins. Feel free to connect a potentiometer, temperature sensor or any other analog sensor to these pins if you want to create a more “useful” project.
The main aim here was to show you how to transmit the data in JSON format, and to update only a portion of the web page using asynchronous communication (using AJAX), to improve the performance of data retrieval and visualisation.
Video Quick Links
0:55 – Parts List
1:49 – Process Overview
3:08 – Download WIZnet Ethernet Library and further info
6:04 – ioShield-A Pin Utilisation
6:43 – Testing the ioShield with the Web Server example sketch
7:41 – Arduino Web Data Server code explained (step by step)
14:32 – Creating the Web Page – HTML and jQuery code explained
17:33 – the jQuery code within the script tags
21:13 – View the Web Page in action
21:45 – Google Chrome Developer tools – good for debugging
23:20 – Data in JSON format
24:10 – Link to full tutorial
Please note: The WIZnet ioShield-A ver1.1 comes with the WIZ550io board. So if you buy the ioShield-A, you will receive both boards. I have provided the link to the WIZ550io shield because you can buy that shield on its own. Regardless, you will need to use both boards for this tutorial.