World Wide WiDo Web Power Outlet ! ! the Ultimate Arduino IoT DIY

WWWWiDo is a power outlet accessible from any device with a browser that can remotely control a plugged device, and is upgradable to monitoring and automation with sensors and actuators. This system is an alternative to the common services online that pushes your Arduino data online then via this service lets you control it. It's of medium difficulty due to the potential networking configurations with the router. Using Dynamic DNS services from changeip we can manage directly our "Internet Thing" from outside our home network, or in a "out of the box" way we can do it directly via home network, just by being connected to the same WiFi.

Brief:

I needed a way to access my power outlet remotely and directly without any intermediary. So I wanted to directly access to Arduino from my phone, computer or any other device. Ideally I would've used an application on my phone that connects to the system, but I needed this simple and quick, plus this method would not allow me to grab any other device without the app. I set my WiDo to the WiFi network (following the documentation) and made a quick and simple web to turn on and off the pins for my green house and pet feeder. The only thing I need is smart phone with Internet access and the IP attached to Arduino.

The problem we face then, is the IP address, if we don't have a static IP. The address will be changing quite often, so it will become quite useless. Another step is the web server port. By default, routers have ports closed rejecting anyone that tries to open a connection externally.

This Instructable explains how to set up your Arduino IoT and do the necessary routing steps to get it available on your home Wireless network and optionally from external wireless networks, such as from your 3G phone, school network or work.

Step 1: Tools Needed

Aside from my old power outlet, and the components mentioned on the instructable just a WiDo is required. That aside, you could just use the WiDo with it's internal LED alone for testing.

This is a very easy and simple build. Please consider upgrading it and posting your results. It's a little rough around the edges.

Tools needed:

Parts	Source
Arduino Power outlet
WiDo
DDNS account (optional)
A lamp	Scavenged

Step 2: Outlet Power and Wido

The outlet power with exposed pins is perfect suit for this tutorial. With the outlet I can just plug in the other Arduino devices or just plug a home lamp at first to give it a try. You can even plug an LED in case you share it with your friend and he or she decide to mass Spam your light.

Follow the tutorial, or alternatively connect your Wido and use the internal LED if you want to try this first. In this tutorial we will use the the outlet. But you can easily adapt it to use just the LED. For just the LED you can grab the code on the link.

Step 3: Modding the Outlet for WiDo

The only modification is the USB drill hole for Leonardo and Wido is slightly different. So I've expanded the USB connector hole with a drill.

This is a fairly simple step, and anyone having a different outlet will have to do the modding differently. But you can get an idea. This is easily done with any power tools that you have around. Safety measures always! Hold steady the outlet so it does not move, or fly away if the driller is stuck. Wear protective goggles so your eyes will last much longer.

Step 4: The Button Input Output Code

HTML on this code is quite simple, we are using button forms to send input to Arduino and then parse the string Arduino gets to figure out what to do next.

When the button is clicked sends a string back to Arduino. It's a lot more explanatory if you add the serial print function of what the client(browser) sends. Arduino program is waiting for the browser to connect and once it's connected it sends some information and requests the web. Arduino then sends the small HTML button code we have. The HTML is parsed by the browser and displayed. At this point the HTML code is simple, and with some basic HTML guide, the presentation can be improved.

When the buttons are clicked on the browser, it sends back to Arduino some text. It's important to note that since there is no other code, the browser doesn't know how to behave after the click data is sent. This keeps Arduino from doing extra work and focus on the hardware side.

Basically Arduino needs to send to the client something like this (edit here):

The middle paragraph is the button code itself. The top and bottom indicates the code sent to the client is part of a website. If any of these strings are missing, raw text will be outputted instead of showing a button. Using this approach, when clicking the button will send the name of the button inside the tags. Then we can use this on Arduino and parse it to activate the task.

Step 5: WiDo Connecting

To connect your Wireless network, check out for these 2 lines:

#define WLAN_SSID       "WifiName"    
// WLAN_SSID cannot be longer than 32 characters!
#define WLAN_PASS       "PASSWORD"

Check your Wireless name and password, replace and upload the code to your Arduino.

Step 6: Wido Web Output

With the Example code you are ready to go with a simple button web. However, you can play with hello world to get a better idea of what is going on. exchange the following webserver.write lines for this one:

webServer.write ("Hello World");

Any other text outputted this way will not be formatted. Meaning, your browser will just display text, and no other features. It will not be considered as a website. For a web, you will need the HTML tag and the document type. For further information, is a good idea to take a look at w3schools site.

Step 7: The Web Access, and the IPs

The IP range for default router configurations usually is 192.168.1.xxx. In my case, slightly different: 192.168.0.239

Some router's lets you set static IP for your connected devices. So when Arduino request an IP via DHCP it gets a static one instead. Usually the best way is to test with the code attached for a automatic IP (DHCP) and then change to a static IP if you need it within your Arduino code. This is because the router might change the IP given to Arduino at some point. Specially if the device was not powered on and connected for longer than a day or half day.

At this point, if you have uploaded the code to Wido, on the serial terminal you will get the connection output with the IP information. This IP can be directly written on your browser and you will connect to your Wido straight away. Best results if you keep it close to the router to avoid wireless range problems while testing.

This is basically the step that confuses most, but as you can see is not difficult to get a Web IoT device on home network. Keeping track of the IP is possibly the most annoying thing but is still a fixable problem.

Step 8: External Arduino Access

So far so good, but what I am really looking forward to do is remotely connect to my Wido anywhere, anytime. I got the DHCP IP already, and connected from my Wifi. Now I want to connect whenever I am away. Redirecting the connection to Arduino is the next step. For this we need access to our router configuration in order to forward the port.

Default router configuration address is 192.168.1.1. Type it on your browser and you should land at the router web configuration tool. Some routers have a different address. Check with your provider if you can't find it and have a different one. Input your user login and password. Then in the menu search for port forwarding or similar entry, there are several guides online but here is an example:

TPlink portforwarding guide

Portforward.com this site provides a lot of documentation on how to do for different routers and brands. The even have a neat tool that do this for you. Check it if you can't find the information for your device.

Web access port is 80, but if needed this can be changed on your Wido. In this case we just use the port 80, and if your router has any trouble allowing this, change the port of your Arduino and port forwarding. Just make sure the ports are same on Arduino and port forward and enabled.

After you have done so right, ask a friend to type your internet IP on the browser. Your friend now should be able to connect to your Arduino: Your internet IP address can be found by typing “what is my ip?” on google.

Step 9: Getting a IP Updater Script UP and Running

Because many of us have an IP that keeps changing every now and then automatically and inevitably. A way to work around this problem is to check everytime the IP has changed and take note of the change. Doing this manually would defeat the purpose of making this simple or easy to use. But there are lots of software and programs that do this for you. Generally you need to create an account on a system that will take note of your IP, and will give you a hostname which is much easier to remember than an IP address. The procedure is simple, install and configure this software then connect to your Arduino with your new hostname. Connecting will be same as with the IP but instead, now we can use a name such: myArduino.service.com.

You can use Changeip.com software on a PC

Tplink guide on how to do this on some of their routers.

Supported routers with this functionality (not all routers integrate this feature)

Another option is to try the Arduino DDNS library ( Download ), it's working but a little rough around the edges. We are going to go for this one, since it is the best method available. Low power consumption, since does not require a computer running. Easy setup, just need to include it to your WiDo and type in your update info.

Step 10: DDNS Arduino Library

The library does the following steps:

Check external IP by opening the following website
Compare the IP to the stored IP for changes
If no change, ignore it and wait the defined time for next update, if change the continue to step 4
Connect to Changeip, and inform them of the change to update the IP on the logs.
Wait the defined time for next update.

This steps are done several times per day since we don't know the exact time of the IP change. The web server is running the rest of the time. It's possible you hit the address while its performing an update and it returns a timeout error while loading the website. Hit refresh again and eventually you get back to your WiDo.

DDNS library needs several fields. Username, password and hostname are the minimum things you require. Register your account and make sure you input on your WiDo DDNS settings the same ones. For the Hostname field you will need to create one, the next steps explains the process.

Step 11: Getting Your Hostname

This step is quite straight forward, after you have registered your account go to DNS manager.

Search for the input field as in the second attached picture and input your Wido outlet preffered name. This is going to be your Hostname. The same hostname we will use on the DDNS library. It's a free service so proceed with the checkout account all the way until you click on complete order. Unless you complete the whole process you won't get an email confirmation, so make sure you do all the clicks to complete the order.

Step 12: Extended, Optional

Some of you might have a FTTH (optic fiber) connection with a problematic modem. Opening ports might not be that easy. The main reason for this is due to complicated networking parameters set on these devices to enable TV or voice. Due to this, setting and configuring several options are not easily done.

A way to get this done, is using a FTTH modem connected to a router. Configure your router to do the internet connection by it self instead of the modem. Then you can easily open the ports as you would like on the links attached on this guide. Usually this is called Bridged connection.

Step 13: Another Extension

Beautifying the controlling website is just a couple of hours tops for the profane. This great tutorial gives quite a few decent ideas:

https://www.instructables.com/id/How-to-Enhance-You...

In order to include some of it on your code, just add a new line on WiDo with the new tags. You can copy/paste and repeat the process several times and edit just the HTML lines. However, keep in mind the print() consumes RAM memory, and this can lead to your hardware to crash if done excessively. If you really want to work it out and improve the design a lot, your best options are external storage, compressed data on WiDo and use of the EEPROM.

Introduction: World Wide WiDo Web Power Outlet ! ! the Ultimate Arduino IoT DIY