<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Garage Core</title>
</head>
<style>
body{
background: #2f4064;
}
h1{
color: white;
text-align: center;
font-family: “Arial”;
margin-top: 2%;
}
input{
text-align: center;
}
article{
margin: 0 auto;
text-align: center;
max-width: 500px;
padding: 20px;
}
.select_button{
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
color:#000000;
font-family:arial;
font-size:28px;
font-weight:bold;
padding:26px 53px;
text-decoration:none;
}
.all_button{
border-radius:9px;
-moz-border-radius:9px;
-webkit-border-radius:9px;
color:#ffffff;
font-family:arial;
font-size:28px;
font-weight:bold;
padding:26px 53px;
text-decoration:none;
}
.button1 {
/*
-moz-box-shadow:inset 0 1px 0 0 #7a8eb9;
-webkit-box-shadow:inset 0 1px 0 0 #7a8eb9;
box-shadow:inset 0 1px 0 0 #7a8eb9;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad), color-stop(1, #5972a7));
background:-moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-o-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#637aad’, endColorstr=’#5972a7′,GradientType=0);
*/
background-color:#637aad;
display:block;
border:1px solid #314179;
cursor:pointer;
}
.button2 {
/*
-moz-box-shadow:inset 0 1px 0 0 #7a8eb9;
-webkit-box-shadow:inset 0 1px 0 0 #7a8eb9;
box-shadow:inset 0 1px 0 0 #7a8eb9;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad), color-stop(1, #5972a7));
background:-moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-o-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:-ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
background:linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#637aad’, endColorstr=’#5972a7′,GradientType=0);
*/
background-color:#637aad;
display:block;
border:1px solid #314179;
cursor:pointer;
}
/*
.button:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7), color-stop(1, #637aad));
background:-moz-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-o-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:-ms-linear-gradient(top, #5972a7 5%, #637aad 100%);
background:linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#5972a7′, endColorstr=’#637aad’,GradientType=0);
background-color:#5972a7;
}
*/
.button:active {
position:relative;
top:1px;
}
.status_open {
background-color:#d02e3a;
display:block;
border:1px solid #5c1a29;
}
.status_open1 {
background-color:#d02e3a;
display:block;
border:1px solid #5c1a29;
}
.status_open2 {
background-color:#d02e3a;
display:block;
border:1px solid #5c1a29;
}
.status_closed {
background-color:#2ca335;
border:1px solid #1f4a29;
display:block;
}
.status_none {
background-color:#7e7a78;
border:1px solid #444644;
display:block;
}
@media(max-width: 500px){
}
</style>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js’></script>
<script>
/*jslint browser: true*/
/*global $, jQuery*/
/*jshint strict: true */
/*EDIT THESE VARIABLES*/
//key is the same as your ‘access token’
var key = “XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”;
//device_id is the same as the ‘core id’
var device_id = “XXXXXXXXXXXXXXXXXXXX”;
//status_check_time is the amount of time in ms that you want
//to wait between checking the status of the garage door
var status_check_time = 1000;
/*EDIT ABOVE VARIABLES*/
var status = ‘-1’;
var currTime = ‘-1’;
var state = ‘0’;
var debug = 0;
function time_call() {
“use strict”;
$.ajax({
url: “https://api.spark.io/v1/devices/” + device_id + “/getTime”,
async: false,
type: “POST”,
data: {access_token: key},
success: function (response) {currTime = response.return_value; }
});
document.getElementById(“clock”).innerHTML = currTime;
}
function getState() {
“use strict”;
$.ajax({
url: “https://api.spark.io/v1/devices/” + device_id + “/getState”,
async: false,
type: “POST”,
data: {access_token: key},
success: function (response) {state = response.return_value; }
});
document.getElementById(“stateToggle”).selectedIndex = state;
}
function ajax_call() {
“use strict”;
$.ajax({
url: “https://api.spark.io/v1/devices/” + device_id + “/status”,
async: false,
type: “POST”,
data: {access_token: key},
success: function (response) {status = response.return_value; }
});
}
function check_status() {
“use strict”;
if (!debug) {
ajax_call();
}
$(‘.status_closed’).css(‘display’, ‘none’);
$(‘.status_open’).css(‘display’, ‘none’);
$(‘.status_open1’).css(‘display’, ‘none’);
$(‘.status_open2’).css(‘display’, ‘none’);
$(‘.status_none’).css(‘display’, ‘none’);
if (status === ‘1’) {
$(‘.status_open1’).css(‘display’, ‘block’);
} else if (status === ‘2’) {
$(‘.status_open2’).css(‘display’, ‘block’);
} else if (status === ‘3’) {
$(‘.status_open’).css(‘display’, ‘block’);
} else if (status === ‘0’) {
$(‘.status_closed’).css(‘display’, ‘block’);
} else if (status === ‘-1’) {
$(‘.status_none’).css(‘display’, ‘block’);
}
}
$(document).ready(function () {
“use strict”;
console.log(status);
check_status();
});
function button_click_relay1() {
$.post(“https://api.spark.io/v1/devices/” + device_id + “/relayOne”, {access_token: key});
}
function button_click_relay2() {
$.post(“https://api.spark.io/v1/devices/” + device_id + “/relayTwo”, {access_token: key});
}
function setState() {
var newState = document.getElementById(“stateToggle”).value;
if(newState == “1”) {
$.post(“https://api.spark.io/v1/devices/” + device_id + “/setDisabled”, {access_token: key});
}
if(newState == “0”) {
$.post(“https://api.spark.io/v1/devices/” + device_id + “/setEnabled”, {access_token: key});
}
}
setInterval(function () {“use strict”; check_status(); time_call(); getState(); }, status_check_time);
</script>
<body>
<h1>Garage Door Opener</h1>
<article>
<p class=”button1 all_button” onclick=”button_click_relay1()” text-align:center>Door 1 Button</p>
<p class=”button2 all_button” onclick=”button_click_relay2()” text-align:center>Door 2 Button</p>
</article>
<article>
<p class=”status_closed all_button”>CLOSED</p>
<p class=”status_open all_button”>OPEN</p>
<p class=”status_open1 all_button”>OPEN1</p>
<p class=”status_open2 all_button”>OPEN2</p>
<p class=”status_none all_button”>NO CONNECTION</p>
</article>
<article>
<select id=”stateToggle” class=”select_button” onchange=’setState()’>
<option value=”0″>Disabled</option>
<option value=”1″>Enabled</option>
</select>
</article>
<article>
<p id=”clock” class=”status_time all_button”>TIME</p>
</article>