Control Your Electronic World Over Internet

by AchithaP in Circuits > Remote Control

1435 Views, 9 Favorites, 0 Comments

Control Your Electronic World Over Internet

Control your electronic world over internet
iot-history_0.jpg

By following this instructable, you will be able to ON and OFF a LED from anywhere in the world. Read all the instructions carefully and follow the steps one by one. After studying this instructable,you will be able to use this knowledge on various applications like home automation systems,IOT projects with your innovative skills.

Materials

IMG_20180511_091721.jpg
IMG_20180511_135218.jpg
IMG_20180511_135311.jpg
nokia_5-recommended.jpg

1. A computer

2. A router with an active internet connection which is connected to your computer.

3. A arduino(I am using a arduino UNO.)

4. A smartphone or another pc with mobile data or a another internet network

Check Your IP

Screenshot (2).png

First of all it's important to findout that you have a public ip or not.Because if you don't have a public ip you can't access to your computer from outside.That means if you have a public ip,you have a adress from world internet.You can check this by contacting your internet service provider.I also didn't have a public ip,but after contacting my ISP, they gave me a public ip for free.Find more about ip addresses from here.

You can findout your current ip address of your device by simply typing "What's my ip" on google.

Convert Your Pc Into a Server Using XAMPP

Screenshot (4).png

You need to convert your pc to a server to access it from the internet."Apache" is the software which is used to convert a pc to a server.But there are lot of things to configure if you use only the "Apache".So there are third party applications to do this job effortlessly."XAMPP" is one of them.You can download and install it from here.Windows,Linux,Mac versions are available.

Open the XAMPP

Screenshot (6).png

Go to the drive where you have installed the XAMPP.Find the folder named "xampp" and inside that you will find a application called "xampp-control".Open it up.After openning it,it will lookes like the image above.

Check XAMPP

Screenshot (6).png
Screenshot (5).png

After openning XAMPP,click start button which is inside the row named "Apache".Then open the browser and type "localhost" in address bar.If you have installed XAMPP successfully,you will directed into the default webpage of xampp which is showed in the second image.

Programme the Arduino

Arduino_logo-700x477.png

Upload this programme to arduino to on,off the onboard LED over serial port by sending "H" and "L" characters."H" to on the LED an "L" to off the LED.

Downloads

Building the Web Page

Screenshot (8).png
Screenshot (9).png
Screenshot (10).png

To do this job we use HTML,AJAX and PHP.I will explain the use of these three languages briefly.You can findout further more informations using below links.Basically HTML is used to create webpages.It contains the things what going to be appeared on the web pages after loading it on the browser.AJAX is used to send PHP requests without reloading the web page.PHP is used to control comport of the server to control the LED.

1. Find more about HTML in here.

2. Find more about AJAX in here.

3. Find more about PHP in here.

First create a folder with a any desired name inside the folder named "htdocs" where in the folder "xampp" which we found earlier in step 4.

1.Write the code in the first image in a notepad file and save it as "index.html" in the folder which we created.

2.Write the code in the second image in a notepad file and save it as "ledoff.php" in the folder which we created.

3.Write the code in the third image in a notepad file and save it as "ledon.php" in the folder which we created.

Changing the Comport

Screenshot (9).jpg
Screenshot (10).jpg

You have to change the comport of your arduino in the PHP scripts.If not it will load the webpage,but the LED would not work.Find your arduino's comport number in Arduino IDE or in the device manager in your os.Then change it in the both "ledoff.php" and "ledon.php" files as mentioned in the above images.According to my pc it's com7.

Make Your Web Page Visible

Screenshot (12).jpg
Screenshot (11).png

As you checked in the step 5,after logging in to your server using "localhost" you will see that it is directing to the default webpage of XAMPP.So how we can log into our webpage? Type your folder's name where you have saved HTML and PHP files in address bar of browser like this.

localhost/"your folder name"

According to me my folder name is "serialportcontrol".The method of typing it in the address bar in the browser is mentioned in the first image.

After hitting enter you will see the above webpage as mentioned in the second image.

With clicking "LED ON" and "LED OFF" buttons you will be able to turn ON and OFF the biult in LED of the arduino using a webpage.You can control LED also connecting a another pc or a smartphone to the same router and logging the same web address which we used first under local area network.

Changing the Port Number of Our XAMPP Server

Screenshot (18).jpg
Screenshot (14).jpg
Screenshot (15).jpg
Screenshot (16).jpg
Screenshot (17).jpg
Screenshot (19).jpg

OK,now we know that our system works fine in our local area network.So this is the most interesting part in our job.First of all we need to change the port number of our XAMPP server.Because default port of XAMPP server is 80.

(The port means,it's just like a number of a home in a lane as mentioned in the home address.The lane is the public ip of your pc.The number of the home is the port number.Your pc has a one ip address and several ports are used in your pc to communicate with each tasks like if you use XAMPP server twice to do two jobs in same computer,you need to use two port numbers to each XAMPP servers.)

80 is the default port number for HTTP.When you typing the "localhost" in the browser address bar, browser automatically adds that port number to the end of the web address although you can't see it.It sounds doesn't matter.So why it need to be change the port number?

Because all routers use their default port number as 80.When you connecting to your server from the internet, if you doesn't change the port number,you will directly connected to the router's default web page without connecting to your server.Above images will guide you to change the port number of you XAMPP server.I am using 1997 as my port number.Make sure to stop APACHE server in XAMPP before change the port number.After changing the port number then start the APACHE server.

Checking the Changed Port Number

Screenshot (20).jpg

Type your new localhost web address to check that your port is working or not. According to me it's

localhost:1997/"your folder name"

If you are successfully logging into our web page,that means your port changing ids successful. If not try a another port number.

Configuring the Router

IMG_20180511_091721.jpg
IMG_20180511_091937.jpg

Now it's time to play with your router. Port forwarding is the method which is used to open the specific ports to the next level of network,that means it allows someone to connect to your server from the internet. You can find more about port forwarding in here and here.The configurations of your router are shown in below steps.

I am using a HUAWEI E5172 4G router. So these configurations are referred to my router. Different manufacturers provide different user interfaces for routers. But the features are same in any kind of router. You can find how to port forward a router under many different brands and models in here.

Don't be discouraged if you are not able to find the functions mentioned in the below steps. With reading descriptions and following some video guides of different router brands you will be able to configure your router successfully.

Configuring DHCP Settings

Screenshot (21).jpg
Screenshot (22).jpg
Screenshot (25).jpg
Screenshot (24).jpg
Screenshot (26).jpg
Screenshot (27).jpg
Screenshot (28).jpg
Screenshot (29).jpg

When you connecting to a router over WiFi or Ethernet, the router gives you a specific ip automatically. But if it is connecting more devices to same router again and again,that ip can be changed. It only lasts until you restart your server. So you have to reserve a specific ip address from router to your server.Let's begin with finding out what's your local ip address is.

1.Open CMD, type "ipconfig" and hit enter....

2. As mentioned in the second image you will find your server's local ipv4 address and default gateway....

3. As mentioned in the third image, log into to your router using the password and username.The default gateway is your router's ip (According to me it's 192.168.1.1 as mentioned in the third image) .....

4. Find "DHCP settings" in your router. It's under LAN in my router as mentioned in the fourth image.

5. Goto "Bundled address list" > "edit list" > "Add" according to my router.

6. Then you can see all the ip addresses of devices which is connected into your router automatically under a dropdown menu. I have connected both my pc and phone to the router,So here you can see two ip addresses as mentioned in the eighth(8th) image.

7. Select your server's ip,then "submit" and "apply" the settings.

8. Then it takes few minutes to restart the router (According to my one).

After that your server will receive a specific same ip whenever you restart your pc.

You can find a video guide to a TP-LINK router from here.

Configuring "port Forwarding" Settings

Screenshot (30).jpg
Screenshot (31).jpg
Screenshot (32).jpg
Screenshot (33).jpg
Screenshot (34).jpg

Now it's time to open the server's port to the public internet.

1. Goto "security" > "firewall level" as mentioned in the first image.

2. Then put the firewall level into "Low" using the dropdown menu as mentioned in the second image.

3. Then click "submit" to save the settings as mentioned in the third image.

4. Then goto "port forwarding" > "Add item" as mentioned in the fourth image.

5. Add data as we configured before and as mentioned in the fifth image.

Type: Custom

protocol: TCP

Remote Host: ...............

Remote port range: 1997

Local Host: 192.168.1.3

Local port: 1997

6. Then click "submit" to save settings.

You can find video guides to a TP-LINK and a D-LINK router from here and here.

Testing

Screenshot (35).jpg
Screenshot_20180511-090509.jpg
Screenshot_20180511-090658.jpg
Screenshot_20180511-090809.png

Now it's time to check our system. You have to use a device with a network out of the router connection. Here I am using mobile data of my smartphone. First of all you have to findout your public ip address of your pc.

1. Simply type on google "what's my ip" as mentioned in the first image.

2. Then note down the ip address.

Then it's time check it on a another mobile device.

1. Put the mobile data "on" in your smartphone.

2. Then open the browser. I am using google chrome.

3. Type the public ip of your pc on your mobile browser as mentioned in the third image like this.

"public ip":"port number"/"folder name"

According to me > public ip: 111.223.xx.xx

port number: 1997

"folder name": myprogrammes/serial port control/succeeded project(ajax)

Then hit enter on your smartphone.Then you will be able to control the onboard LED of arduino from anywhere in the world by clicking "LED ON" and "LED OFF" buttons.

Innovative Thinking, More Effort, More Creations

Thumbs_Up_Skin-Color.png

So I think that I was able to give you a good instructable. Now,basically you can control a arduino remotely over internet. Using your innovative thinking and ability to learn from internet, you can create robots,home automation systems which can control over internet from anywhere in the world. If you use this technology for good deeds, you can make this world much better for all of us. Thank you!...

For any kind of problem related to this,send a email to me or send a massage on the instructable forum.

my mail: achitha.bodhaka1997@gmail.com