Completed Garage Door and Web Interface - Schematic and Code included

Social Project Share
8

So, instead of polling the Core, you want the Core to send out a message if the State is changed? Using the Spark.publish should work. I’m not sure why you’re using the Tinker firmware in your code, unless you absolutely want to use the Tinker app. Using the Code provided by @austinpe, combined with some stuff from one of my little projects, I think I’ve managed to create something that might work.

New Core Code:

#define relay D7
#define delayRelay D3
#define reed D6
int Interval = 1000;
char status;
char tempState;

void setup() {
    Spark.function("relay", relayPulse); 
    Spark.function("state", state);

    Serial.begin(9600);
    
    pinMode(relay, OUTPUT);
    pinMode(delayRelay, OUTPUT);
    pinMode(reed, INPUT);    

    digitalWrite(relay, LOW);
    digitalWrite(delayRelay, LOW);

	status = digitalRead(reed); //Check the Start-up status with the Reed contact.
	Spark.publish("garage_state", String(status)); //Publish start-up state.
	Serial.println("startup status:" + status);
};

void loop() {
    //Comment this section out if you haven't got a sensor attached.
    //otherwise it will spit out random values, which isn't what we need.
	tempState = digitalRead(reed); //Check the current state
	if (status != tempState){ //Compare current state to status.
		status = tempState; //Make tempState the new status
		Spark.publish("garage_state", String(status)); //Publish the status.
		delay(Interval); //Delay Interval millisecond, as to not to overload the server.
	}
};

//For testing purposes only, so you can change the state with a Function.
//Make a REST request and instert the state in the argument, either HIGH
//or LOW. You'll notice the changes on the webpage. I suggest using this
//for testing: http://suda.github.io/spark-web-interface/ it's really 
//easy to use. Simply click the "execute" button at the "state" function
//and then enter either HIGH or LOW. Should work...
int state(String command){
	String state = String(command);
	Serial.println("Command:"+command);
	Serial.println("state:"+state);
	Spark.publish("garage_state", String(state)); //Publish the status.
} 

int relayPulse(String command){
    digitalWrite(relay, HIGH);
    delay(2000);
    digitalWrite(relay, LOW);
    return 1;
};

I’ve used the original HTML/CSS file, so you will still need those. I’ve edited the JavaScript though.
JavaScript:

var deviceID    = "1234567890123456789";	
var accessToken = "1234567890asdfghjkl1234567890";	

/*EDIT ABOVE VARIABLES*/
var status = "HIGH";
var baseURL = "https://api.spark.io/v1/devices/";
//Open Eventstream.
var eventSource = new EventSource(baseURL + deviceID + "/events/?access_token=" + accessToken); 

$(document).ready(function () {
    "use strict";
    console.log(status);
    //Hide the next three buttons until we know we've got a connection.
    $('.status_closed').css('display', 'none');
    $('.status_open').css('display', 'none');
    $('.button').css('display', 'none');


$(".button").click(function () {
    "use strict";
    $.ajax({
        url: baseURL + deviceID + "/relay",
        async: false,
        type: "POST",
        data: {access_token: accessToken}
    });
});

eventSource.addEventListener('garage_state', function(e) {	//Listen to SSE
	var status = (JSON.parse(e.data)).data;	
	console.log("status" + status);
	
	//Enable Push button now that we know we've got a connection.
	$('.button').css('display', 'block'); 
  
	
  if (status != "HIGH" && status != "LOW"){ 
    $('.status_none').css('display', 'block'); 
    //Disable "no connection" message.
  }
  else if (status == "HIGH") {
    $('.status_open').css('display', 'block'); 
    $('.status_closed').css('display', 'none');
    $('.status_none').css('display', 'none');
    //Enable "open" message.
  } 
  else if (status == "LOW") {
    $('.status_closed').css('display', 'block'); 
    $('.status_open').css('display', 'none');
    $('.status_none').css('display', 'none');
    //Enable "closed" message.
  } 
}, false);


});

Since I haven’t got the required components, I haven’t been able to test this. Might at least be useful as some inspiration as to how it could be done.

Hope it helps!

Some improvements are made to the code, as things weren’t working properly. Also, there is some sort of testing function included.

1 Like