Turn on LED On/Off from internet using Arduino UNO R3 based Webserver (mini IOT example)

details

w5100

Aim: To teach basics in connecting Arduino Uno R3 to the internet with Arduino Web Server and to turn On/Off LED using the same. The hardware network is designed for beginners and is not professionally suggested.

 

Ethernet/ LAN Cable = 1 Qty.
Jumper Wire (male to male) = 2 Qty.
Red LED = 1 Qty.
Resistor 220 Ohms = 1 Qty.
Standard USB Cable A Plug B Plug for Arduino = 1 Qty.
Laptop with Windows 7 Operating System.
Internet connection (USB dongle or Cable). I got Tata Photon+ 3G

Softwares Required:

USB Drivers for Arduino
 (DNS Update Client) (from No-IP)
 on SourceForge.net

Accounts Required:

Knowledge Required:
Arduino Language.
HTML Language.
Google Drive.
Networking in Windows.

 

blockDia

Connections shown through photographs:
(Green Jumper Wire corresponds to Ground / Yellow Jumper Wire corresponds to Digital IO Pin 6 Output)

My Web Server Setup

 

Red LED connected in Series with 22 Ohms for Current Limiting

 

Arduino connection for Ground and Digital Output

 

Now Open Arduino IDE.
Open ethernet web server file using ( File – Examples – Ethernet – WebServer )
In the Sketch first you will see  includes of SPI and Ethernet. Since communication to w5100 Ethernet Chip is done through SPI Interface and so do the SD Card but that feature we will come in next tutorial. The ethernet shield configuration is configured for W5100 IC. I don’t know if the header file works for other controllers since I’ve not tested them.
Basic Ethernet Initialization

 

Then we store the mac address to the ethernet chip which is given to you on the hardware otherwise you can use this given mac_address from example (0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED ).
Then store IP address of your arduino ethernet shield. Mine is (192.168.137.100) but you can modify this as per your configuration. For example my computer LAN IP address is 192.168.137.1 . So as per that configuration I had to adjust arduino Ethernet IP address. To change computer LAN Settings go to Control Panel – Network and Sharing Center – Change Adapter Settings – Local Area Connection – (Right Click) Properties – Internet Protocol Version (TCP/IPv4) – Properties – Select use follow IP address –  Change IP address to 192.168.137.1 – Change subnet mask to 255.255.255.0 and click OK. Your LAN settings are done. You can now officially link your arduino to computer through TCPIP protocol.
Next comes Ethernet Server PORT. Usually the example states port as 80 but when you make your arduino available on web you usually should take port 8080
So rewrite
EthernetServer server(8080);
With this settings itself now you are ready to go on Local network. After uploading code to arduino uno. You can open Internet Explorer/ Firefox/ Google chrome browser on your desktop/laptop.
type in http://192.168.137.100:8080
You will be getting the browser page on LAN. The page will refresh every 5 seconds and will display analog input values which will get updated every 5 seconds as per page refresh.
Remember the code example includes HTML file which looks as below:

When you get this page on browser it will look like below:

But to understand what was sent to client computer (your PC) you need to Right Click – View Page Source

The above picture will tell you what you received from arduino ethernet. Now compare this to your arduino web server code. Did you notice?? The HTML file lines are getting printed in Client.println command which hence gets updated every 5 seconds which you will see as refresh 5 written.
To modify this use your HTML Skills to make your modifications as per your settings. I cant help you with the HTML coding because its totally new topic. You got to learn on your own atleast some simple stuff.

You can also download my code for turning On/Off LED. 
You can view my page (Live) By  

I have tweaked some changes in webserver example file provided by arduino IDE to support my needs.
Now upto here your setup will work only for LAN connections.
How to make it available online???
Since I’m using USB dongle (photon +) its IP address changes everytime I connect to the internet.
To tackle this problem you need to make account on No-IP website which I provided above.

To sign up: 

Use hostname with ddns.net which is free. In this case I selected mine as embeddedlife.ddns.net
After doing this procedure. Sign In.
After signing in, click on manage host. You will see your domain name (embeddedlife.ddns.net in my case).
Click on modify. Select host type as Port 80 Redirect. This host is defined for server purposes so by default your port will be 8080.
Click on update host. And your job is done on this website. You can check all the features include on the website after mastering the whole idea.

 

Next is download DuC (DNS Update Client) you can find the link above in software requirements.
After installing. Run DuC as administrator. Enter user name and password.
You will get above information. Your present IP will be set in 3rd Tick mark. This IP in few minutes will be updated inside No-IP account using this software. To link host click on edit host/ select the domain then ok. Now  with this settings embeddedlife.ddns.net is linked to my recent IP address. This IP address changes every time you reconnect or error on your USB Dongle. So to make this IP Static in nature we need to make use of this tool. Thank you No-IP.
But if you want permanent IP Address you can always ask your internet dealer for packages. Usually dedicated IP will cost you alot.
Now secondly,
You need to forward all the connections coming to your PC to Arduino because your Server lies there. Which can be done using Router only! With a method called port forwarding.
But I don’t have a router connected to my computer!!! I have direct internet access through USB dongle, then what’s the different method??
It took me days to find out what is an option here.

Well thank you to Sourceforge.net. From software requirements download PassPort Utility from above.

PassPort Utility looks like this:

Run the PassPort Utility as administrator. Then Click on service on menu. Install. It will install a service in (right click on computer) – Manage – Services. Check for service named : PassPort(Port forwarding) and click start if its not started.
Now come back to PassPort Utility Software and click on Define/view forwards. You will get the below screen:

 

 

Now we need to divert the incoming connection from internet to your arduino. That is done by editing source port as : IP Address visible on DuC. eg. on my computer IP was visible as 14.97.77.140 and I entered source address as 14.97.77.140 and port as 8080 since your domain will direct you to this address and server responds to port 8080. This all will happen provided you keep DuC running. The above IP address is dynamic IP of your USB dongle which changes when you re connect to internet. But using No-IP we are making it static in nature. So now enter Target port/host address as you programmed in arduino that is 192.168.137.100 and listens on port 8080. Select TCP.
And click Add. Then ok.
You can click on Start. Now PassPort Utility will act like Router and will divert port 8080 to your arduino.
(NOTE: DuC and PassPort Utility and Internet needs to be ON all the time and so your Desktop/Laptop)
Now you are ready to go live. Try your mobile or any other computer with internet to access your own page. Mine looks like this on mobile check below:

 

Did you notice the LED color changes?
I personally created a PNG file using my ms paint software and updated it on Google Drive under (share settings as view as public). So there are basically 2 PNG files. One where LED is off and another where LED is on. So basically you can use Google Drive for saving your image files and using it. To use images you select the image uploaded on Google file and on right side click on details. Copy the HOSTING address. This address will help you to print the image on your page. And not the share link Note it.
Now everything is up to you with modifying the HTML and looks and making your server look smarter.

 

w5100

Aim: To teach basics in connecting Arduino Uno R3 to the internet with Arduino Web Server and to turn On/Off LED using the same. The hardware network is designed for beginners and is not professionally suggested.

 

Ethernet/ LAN Cable = 1 Qty.
Jumper Wire (male to male) = 2 Qty.
Red LED = 1 Qty.
Resistor 220 Ohms = 1 Qty.
Standard USB Cable A Plug B Plug for Arduino = 1 Qty.
Laptop with Windows 7 Operating System.
Internet connection (USB dongle or Cable). I got Tata Photon+ 3G

Softwares Required:

USB Drivers for Arduino
 (DNS Update Client) (from No-IP)
 on SourceForge.net

Accounts Required:

Knowledge Required:
Arduino Language.
HTML Language.
Google Drive.
Networking in Windows.

 

blockDia

Connections shown through photographs:
(Green Jumper Wire corresponds to Ground / Yellow Jumper Wire corresponds to Digital IO Pin 6 Output)

My Web Server Setup

 

Red LED connected in Series with 22 Ohms for Current Limiting

 

Arduino connection for Ground and Digital Output

 

Now Open Arduino IDE.
Open ethernet web server file using ( File – Examples – Ethernet – WebServer )
In the Sketch first you will see  includes of SPI and Ethernet. Since communication to w5100 Ethernet Chip is done through SPI Interface and so do the SD Card but that feature we will come in next tutorial. The ethernet shield configuration is configured for W5100 IC. I don’t know if the header file works for other controllers since I’ve not tested them.
Basic Ethernet Initialization

 

Then we store the mac address to the ethernet chip which is given to you on the hardware otherwise you can use this given mac_address from example (0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED ).
Then store IP address of your arduino ethernet shield. Mine is (192.168.137.100) but you can modify this as per your configuration. For example my computer LAN IP address is 192.168.137.1 . So as per that configuration I had to adjust arduino Ethernet IP address. To change computer LAN Settings go to Control Panel – Network and Sharing Center – Change Adapter Settings – Local Area Connection – (Right Click) Properties – Internet Protocol Version (TCP/IPv4) – Properties – Select use follow IP address –  Change IP address to 192.168.137.1 – Change subnet mask to 255.255.255.0 and click OK. Your LAN settings are done. You can now officially link your arduino to computer through TCPIP protocol.
Next comes Ethernet Server PORT. Usually the example states port as 80 but when you make your arduino available on web you usually should take port 8080
So rewrite
EthernetServer server(8080);
With this settings itself now you are ready to go on Local network. After uploading code to arduino uno. You can open Internet Explorer/ Firefox/ Google chrome browser on your desktop/laptop.
type in http://192.168.137.100:8080
You will be getting the browser page on LAN. The page will refresh every 5 seconds and will display analog input values which will get updated every 5 seconds as per page refresh.
Remember the code example includes HTML file which looks as below:

When you get this page on browser it will look like below:

But to understand what was sent to client computer (your PC) you need to Right Click – View Page Source

The above picture will tell you what you received from arduino ethernet. Now compare this to your arduino web server code. Did you notice?? The HTML file lines are getting printed in Client.println command which hence gets updated every 5 seconds which you will see as refresh 5 written.
To modify this use your HTML Skills to make your modifications as per your settings. I cant help you with the HTML coding because its totally new topic. You got to learn on your own atleast some simple stuff.

You can also download my code for turning On/Off LED. 
You can view my page (Live) By  

I have tweaked some changes in webserver example file provided by arduino IDE to support my needs.
Now upto here your setup will work only for LAN connections.
How to make it available online???
Since I’m using USB dongle (photon +) its IP address changes everytime I connect to the internet.
To tackle this problem you need to make account on No-IP website which I provided above.

To sign up: 

Use hostname with ddns.net which is free. In this case I selected mine as embeddedlife.ddns.net
After doing this procedure. Sign In.
After signing in, click on manage host. You will see your domain name (embeddedlife.ddns.net in my case).
Click on modify. Select host type as Port 80 Redirect. This host is defined for server purposes so by default your port will be 8080.
Click on update host. And your job is done on this website. You can check all the features include on the website after mastering the whole idea.

 

Next is download DuC (DNS Update Client) you can find the link above in software requirements.
After installing. Run DuC as administrator. Enter user name and password.
You will get above information. Your present IP will be set in 3rd Tick mark. This IP in few minutes will be updated inside No-IP account using this software. To link host click on edit host/ select the domain then ok. Now  with this settings embeddedlife.ddns.net is linked to my recent IP address. This IP address changes every time you reconnect or error on your USB Dongle. So to make this IP Static in nature we need to make use of this tool. Thank you No-IP.
But if you want permanent IP Address you can always ask your internet dealer for packages. Usually dedicated IP will cost you alot.
Now secondly,
You need to forward all the connections coming to your PC to Arduino because your Server lies there. Which can be done using Router only! With a method called port forwarding.
But I don’t have a router connected to my computer!!! I have direct internet access through USB dongle, then what’s the different method??
It took me days to find out what is an option here.

Well thank you to Sourceforge.net. From software requirements download PassPort Utility from above.

PassPort Utility looks like this:

Run the PassPort Utility as administrator. Then Click on service on menu. Install. It will install a service in (right click on computer) – Manage – Services. Check for service named : PassPort(Port forwarding) and click start if its not started.
Now come back to PassPort Utility Software and click on Define/view forwards. You will get the below screen:

 

 

Now we need to divert the incoming connection from internet to your arduino. That is done by editing source port as : IP Address visible on DuC. eg. on my computer IP was visible as 14.97.77.140 and I entered source address as 14.97.77.140 and port as 8080 since your domain will direct you to this address and server responds to port 8080. This all will happen provided you keep DuC running. The above IP address is dynamic IP of your USB dongle which changes when you re connect to internet. But using No-IP we are making it static in nature. So now enter Target port/host address as you programmed in arduino that is 192.168.137.100 and listens on port 8080. Select TCP.
And click Add. Then ok.
You can click on Start. Now PassPort Utility will act like Router and will divert port 8080 to your arduino.
(NOTE: DuC and PassPort Utility and Internet needs to be ON all the time and so your Desktop/Laptop)
Now you are ready to go live. Try your mobile or any other computer with internet to access your own page. Mine looks like this on mobile check below:

 

Did you notice the LED color changes?
I personally created a PNG file using my ms paint software and updated it on Google Drive under (share settings as view as public). So there are basically 2 PNG files. One where LED is off and another where LED is on. So basically you can use Google Drive for saving your image files and using it. To use images you select the image uploaded on Google file and on right side click on details. Copy the HOSTING address. This address will help you to print the image on your page. And not the share link Note it.
Now everything is up to you with modifying the HTML and looks and making your server look smarter.

 

COMMENTS

Please Login to comment
  Subscribe  
Notify of