Spark Core Controlled Relay W/ Web Panel

Introduction: Spark Core Controlled Relay W/ Web Panel

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.


  • Spark Core from
  • 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)


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


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.

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 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.

Be the First to Share


    • Anything Goes Contest

      Anything Goes Contest
    • Rice & Grains Challenge

      Rice & Grains Challenge
    • Lamps Challenge

      Lamps Challenge



    6 years ago

    I am working on a very similar project myself. I want the outlets to be controlled with a DHT22 temperature and humidity sensor. I put a decent amount of effort into designing a PCB for it, though in the end I have decided to use Particle's relay shield so that I don't have to reinvent the wheel and then I can focus on the external wiring and building a safe enclosure. Check it out on my Hack-A-Day, I hopefully will have a functional prototype over my Winter Break.


    6 years ago

    In the US, white or gray is the nuetral, or return. Black, red, and sometimes orange(in a high leg delta) is the hot or phase wire. Sometime other colors are used but never white, gray or green. Green is ground.

    Let me mention that light blue is the color for _your_ neutral ;-) Consumer electronics has few standards. In the US, green is ground (earth), white is hot, and black is the return. But again, don't trust that to remain constant.

    Now I have something to do with my arduinos ;-)

    PSA: Safely hacking about in consumer grade stuff requires you to use a multimeter to make sure what they've done! Don't rely on wire colors to remain constant even within the same item.


    Reply 7 years ago on Introduction

    Yes, I agree. I wanted to put a full disclaimer regarding color of cables. It's always safe to check instead of relying on other people doing their job.

    Light blue is indeed the color for neutral :) In the power outlet they wrongly used light blue and I followed them (because I had that color of cable, knowingly doing it wrong).

    Thanks for your comment!


    7 years ago

    might be a better idea to enclose in grounded metal box... also a fuse wouldn't hurt


    Reply 7 years ago

    You mean to enclose the relay or the outlet?

    Good idea about the fuse! How would you add it? Maybe I can modify it to fit your suggestion! Thanks!


    Reply 7 years ago on Introduction

    I would stick the whole thing in a metal box, then attach the earth ground to the box itself. that way if anyone (say a child or pet) gets near it, it would be safe.. no loose wires etc. you would want to install a fuse inline with mains power inside the enclosure.


    Reply 7 years ago on Introduction

    I completely agree. I do have to point out once again that this was just a proof of concept.

    Please keep on making suggestions for a better version, this time for real :)

    Thank you!