Introduction: Spark Core Controlled Relay W/ Web Panel

By Wazzabi

What’s the use of the Internet of Things (IoT) if it’s not to control domestic artifacts from the internet? ;)

This project came up from one of the first things that comes to mind when we think about IoT: turning the coffee maker when we are going to work so it has the coffee done when we get there. What I did was think about the possibility of controlling four power outlets independently using Spark Core and simple web app (programmed in HTML and a bit of PHP) This is the first functional prototype :)

For the next version I would like to design a cute PCP for the Spark (and not use a protoboard, yikes!) In this tutorial we presuppose that you know: How to configure your Spark Core’s WiFi. How to load a program to your Spark Core. How to upload files via FTP to a server Find out your Spark Core’s access_token and device_id’s.

Materials:

  • Spark Core from spark.io
  • A 4 output power outlet (ideally cabled on the inside)
  • Tin for soldering
  • 4 to 6mm cable (a length of 50 cm)
  • Protoboard Cables (6 to 10 short cables)
  • A box for the relay and the Spark Core.
  • Apache Server (to host our web panel)

Tools:

  • Soldering Iron
  • Pliers
  • Screwdrivers from all sizes.
  • Scissors
  • Knife (for the plastic case)

References:

This tutorial was developed during Chorispark, a Build Night with Spark IO organized by Wazzabi in Buenos Aires, Argentina.

There's a Spanish version of this tutorial here. This Instructable was translated by Giancarlo Sandoval.

Step 1: Take Apart the Power Outlet

In the case of the power outlet I found (a very cheap one, not recommendable), the cable that joined together all the outlets had various soldering points. What I did was let them loose so as to give power to each output separately. The neutral cable (in this case, a violet one), was left untouched.

Important note: in this power outlet the cable that corresponds to the phase is the one in LIGHT BLUE. This is incorrect and dangerous: the light blue always represents neutral cables. I ignored this color in my wiring and used the light blue for the phase.

Step 2: Cable the Relay

In this step we can take a cable that belonged to the power outlet (as was my case) or we can take a cable and open up segments in order to bend it and connect it to the relay as it is shown here.

The important part is that power gets to the first relay channel and then is connected in parallel with the other three channels.

Step 3: ​Wire the Power Outlets to the Relay

In this step we will connect each output from the power outlet to its correspondent switch on the relay. Then we will connect those cables to the relay.

BONUS: We can make slots in the power outlet’s plastic for the cable to pass more smoothly ;)

Step 4: ​Connecting the Power Outlet and the Relay to the Power to the Electricity.

Now we must simply connect the electricity to the power outlet we assembled. It’s important to verify the color coding (as I warned in the beginning). In my case I had to ignore the color of power outlet’s cables in order to respect the colors for the phase, neutral and ground.

Step 5: ​Connect the Relay to SparkCore

Connecting the relay to SparkCore is very simple. We must simply connect:

  • GND (Relay) -> GND (Spark Core)
  • IN1 (Relay) -> D0 (Spark Core)
  • IN2 (Relay) -> D1 (Spark Core)
  • IN3 (Relay) -> D2 (Spark Core)
  • IN4 (Relay) -> D3 (Spark Core)
  • VCC (Relay) -> VIN (Spark Core)

To connect the relay to the Spark Core I used a motherboard’s cable (the one that connects the frontal panel to the motherboard) but it can be done with whatever set of cables you want.

Step 6: ​Program Your Spark Core!

From inside our Spark panel we must simply copy the code of this GitHub repository and our Spark will know how to turn on the relay.

Basically, what it does is set digitalWrite (D0, HIGH) to the pins we indicate (D0 to D3), in each case turning a different channel from the relay.

I will attach the code here, but beware that the code will be always be updated in GitHub.

Attachments

Step 7: ​Configure Our Web Panel

Now we must configure our web panel to give the indications to our Spark Core.

We are gonna need just two files in our server: proxy.php and index.php

proxy.php is gonna protect our credentials, so the user that activates the relay can only find out our Device ID (that won’t be use of anything), but not our access_token. In this file we must put the access_token from the Spark website.

index.php is going to have six buttons that operate our relay: one for each channel, one to turn everything one and one to turn everything off. Modify this file to put our Device ID.

These two files need just to be uploaded to any public accesible folder on the web and that's it :)

Step 8: ​Turn Things on and Off From the Internet!

Once our files are uploaded to our web server (for example http://example.com/spark) we can simply click on the button we programmed and our SparkCore will activate the relay.

In a little bit I will upload an improved version of the HTML panel (to operate from a cellphone), but for now this will do as a proof of concept :)

Leave any questions you have in the comments!

Much thanks to Instructables and Spark IO for the product samples that made this tutorial possible <3.