Link back to main menu Fast Track to Arduino Programming
Sorry this one was so long in coming, it has taken a while to work through getting the web page up and running without being complicated and also to figure the best pins to use while not compromising the next few lessons as I want to build upon this lesson in future tutorials, the video should be up in the next couple of days (by 23rd June 2014)
So in preparation for the video I am going to preview this one with what the output is going to look like
Yes this is the output of the this tutorial, it is a fully functional html page that actually talks to your Arduino over tcp/ip (Ethernet) and controls and retrieves data for the various I/O pins of the Arduino UNO
If you think about it, this tutorial is about adding an Ethernet shield to the UNO, so how are we going to test it, there are plenty of Android or IOS clients that can be configured to work but we need something we can all use and run on a basic PC, the best way to do this is provide the client... Please welcome my test client or control console, depending on how you look at it 
. A simple web page that will drive the UNO from anywhere on your home network and you can modify it to suit your own projects later
You can turn on and off three digital pins (Pin 2, 3 and 5)
You can read two input pins (Actually all of them but only two with buttons) (Pins 7 and 8)
You can change the PWM output of two channels with a simple slide of the mouse (Pin 6 and 9)
and it automatically reads the Analog inputs of 4 channels every second and displays the results on those pretty Gauge's... sweet (Pins A0, 1, 2 and 3)
oh and lastly it will retrieve the current Mills() value and show you the up time of the board
Oh and while it is doing all of this it is writing debug info to the serial port and responding o commands from the serial port too
The video is over an hour long, it needs to be edited and should be up tomorrow (Later today, its 2:39am so ill do it later), code for sketch it posted now so enjoy
If you think this looks scary and beyond your abilities, I don't blame you, but believe me it is not, this is tested on IE, it has issues with Chrome, it is not the Arduino's fault but I am not a pro WEB developer so I am not sure why, I have not yet tested on other browsers. I will post the HLML page now and if there is a web developer out there that can tell me why it fails in chrome, that would be nice, correct the file and return it to me would be appreciated too, I will give you the credit for the fix in this blog
The WEB page is pure browser side, it uses HTML 5, Canvas and CSS but everything is contained in the one file attached. The is room for improvement and optimization but this is an Arduino tutorial, not a WEB one. The java script uses ajax and json formatted data returned from the UNO.
The code on the UNO will not look much different from lesson 3B but of course with an Ethernet reader which you will see is almost identical to the serial reader we have already reviewed.
The process to doCommand() in lesson 3 is the same with the exception of adjustments for the change in pins and available I/O and adding even more commands (The process is the same) but you will learn about recursion
A quick explanation as to why I have eliminated eight pins from the available I/O
5 Pins are used by SPI
MOSI - 11
MISO - 12
SCK - 13
Ethernet Chip Select - 10
SD Card Chip Select - 4
2 pins for I2C
SCL - A4
SDA - A5
2 Pins used by the serial port to talk to your PC via the USB
TX - 0
RX - 1
Future lessons are going to use these pins (Lesson 4 is already using the SPI pins and all previous ones are using TX and RX) so I figured it is better to eliminate them now to save confusion later and allow me to keep things consistent as possible
You may think this seriously inhibits the capability of the UNO, it does not, with the addition of a single chip I can extend digital IO by 8 pins, add 16 PWM channels or even an LCD display without loosing any more pins and by the time these lessons are over we will have done all of this.
in order for things to work you will need to edit the top of the htm page, you can use any text editor for this, set the ip address to suit your environment and match the IP address you use in the sketch
<!DOCTYPE html>
<html><head>
<title>www.TheBreadBoard.ca - Arduino Fast Track - Lesson 4</title>
<script>
var myIPaddress = "http://192.168.1.247/";
var analogAlljson = "analogAlljson";
var digitalAlljson = "digitalAlljson";
var analog0 = 0;
var analog1 = 0;
var analog2 = 0;
var analog3 = 0;
var Gauge = function (b) {
Top Comments