Virtual Open Sign

This Instructable is my project from the YuKonstruct Spark Core Build Night!

In this Instructable, you will learn how to use a Spark Core to make a switch that posts its position to a website. We plan to use this at our YuKonstruct Makerspace to allow us to indicate open and closed hours when the schedule varies.

Bill Of Materials.

1. A Spark Core
2. A Solderless Bread-Board
3. A USB Power Supply
4. A Micro-Switch
5. Two Jumper Wires
6. A Free Google Account

Step 1: Setting Up Your Spark Core

Plug the USB cable into your spark core (first image)

Make sure you are connected to a Wi-Fi network.

Download the IOS or Android App "Spark Core" and Create a Spark IO account.

Put in your Wi-Fi password (it should autofill the SSID field).

Wait for the spark core to set itself up.

Watch the main light on your spark core for the stages of progress:

1. Blinking blue: listening for Wi-Fi credentials.
2. Solid blue: getting Wi-Fi information from app.
3. Blinking green: connecting to the Wi-Fi network.
4. Blinking cyan: connecting to the Spark Cloud.
5. Blinking magenta: updating to the newest firmware.
6. Breathing cyan: connected!

Next it will ask you to name your core, once finished, it will take you to the Tinker user interface (see second image).

To test that your core is working right:

1. Tap "D7"
2. Tap digitalWrite
3. Tap "D7" again so that it says "High" beside "D7"

A second light on you spark core should illuminate, this happens because the pin "D7" is linked to a digital pin and a LED, amazing right!

Step 2: Plugging in Your Breadboard

Stick the spark core pins into the breadboard straddling the ridge that goes down the middle.

Plug your micro switch into the breadboard so that it is parallel to the ridge running down the middle and either above or below where the pins end on the spark core.

Attach a jumper wire from the hole beside the middle pin on your micro switch to the hole beside the pin labeled "D6" on the spark core.

Now attach a jumper wire from the hole beside the top pin on your micro switch to the hole beside the pin labeled "D7" on the spark core.

Step 3: The BackEnd

The BackEnd is where you put the coding to tell the Spark Core what you want it to do. I wrote the following code to tell the Spark Core to read the position of the switch (up or down) and then send this information to the Google script (we will configure the Google script later).

Okay lets do this.

On your computer, go to https://www.spark.io/build/.

Sign in with your Spark account.

Paste the following code into the window and then click the lightning bolt to flash this code to your Spark Core.

char resultstr[64];

void setup(){
    pinMode(D7, INPUT);
    pinMode(D6, OUTPUT); 
    Spark.variable("result", &resultstr, STRING); 
}

void loop()
{
    digitalWrite(D6, HIGH);
    int data1 = digitalRead(D7);
    sprintf(resultstr, "{\"data1\":%d}", data1); 
    delay(1000);
}

Step 4: Setting Up the FrontEnd

The FrontEnd is what the user sees. Here we will configure the Google script or logic, so that the computer outputs either open, or closed, depending on the position of the micro switch (up or down).

Go to https://drive.google.com and sign in with your Google account.

To get Google Script working:

1. Click New>More>Connect more apps. (image one).
2. Search for Google Apps Script when it comes up click connect (image two).
3. To open the app click New>More>Google Apps Script.

When Google Apps Script opens:

1. Click create Script as a web app
2. Delete everything (it's just example code).
3. Copy and paste in my code below:

function doGet() {

  var app = UiApp.createApplication();
  

  var response = UrlFetchApp.fetch("https://api.spark.io/v1/devices/PUT YOUR DEVICE ID HERE/result?access_token=PUT YOUR ACCESS TOKEN HERE");
                              
  try {
   response = JSON.parse(response.getContentText()); 
    var result = unescape(response.result);

    try {
      var p = JSON.parse(result); 
      var d = new Date(); 
      if (p.data1 == 1) { 
               var label = app.createLabel("Open") //adjust text for open
                 .setId('statusLabel')
                 .setVisible(true);
        app.add(label);
      } else {
               var label = app.createLabel("Closed") //adjust text for closed
                 .setId('statusLabel')
                 .setVisible(true);
      app.add(label);

      }

      
    } catch(e)
    {
      Logger.log("Unable to do second parse");
    }
  } catch(e)
  {
    Logger.log("Unable to returned JSON");
  }

  
  app.close();
  return app;
   
}

Step 5: The FrontEnd

Continuing in Google Apps Script, find the text "PUT YOUR DEVICE ID HERE" in the code and replace it with your device ID . Your device ID can be found in the "Cores Page" of spark.io/build (Click the Core Page icon on the bottom left, to open the Cores Page - first image).

Return to your Google Apps Script and find the text "PUT YOUR ACCESS CODE HERE" in the code and replace it with your access code. Your access code can be found on the "Settings Page" of spark.io/build (Click the gear icon on the bottom left below the Core Page icon to open the Settings Page).

At the top of the Google Apps Script page click Run>doGet. The app will then prompt you for permission to send a signal to the spark.io server. Click allow. It looks like it did absolutely nothing! However, this was important because you needed to give the script access to run the UrlFetchApp.fetch() line.

At the top of the Google Apps Script page again, click Publish>Deploy As A Web App. A window will popup allowing you to click "Save New Version" and then "Deploy".

That's it! Copy the link it gives you and paste it into your web browser. Voila! a working Virtual Open/Closed Sign!

When you go to this webpage it will say either "Open" or "Closed" depending on the position of your micro switch (up or down). Try changing the position of the switch and reload the webpage to confirm that it's working (you might need to reload a couple of times).

Note: When the switch is in the Open (up) position a second light (blue) will come on on the Spark Core.

Have fun!

You can change what you see on the webpage by editing the code where it says ("Open") or ("Closed"), just remember to republish the code as described above.