Skip to content

Instantly share code, notes, and snippets.

@krhoyt

krhoyt/switch.css

Last active November 10, 2017 19:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save krhoyt/4636123 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save krhoyt/4636123 to your computer and use it in GitHub Desktop.
Download ZIP
This is an example of how to pass data from a web page, through PHP, to an Electric Imp. The example is a light switch that turns an LED on and off based on the value passed.
Raw
switch.css
/*
* Background gradient generated using ColorZilla
* http://www.colorzilla.com/gradient-editor
*/
body {
background: #dddedd;
background: -moz-linear-gradient( -45deg, #dddedd 0%, #d5d6d6 100% );
background: -webkit-linear-gradient( -45deg, #dddedd 0%, #d5d6d6 100% );
background: -o-linear-gradient( -45deg, #dddedd 0%, #d5d6d6 100% );
background: -ms-linear-gradient( -45deg, #dddedd 0%, #d5d6d6 100% );
background: linear-gradient( 135deg, #dddedd 0%, #d5d6d6 100% );
margin: 0px;
padding: 0px;
}
/*
* Thanks to All Vectors for the switch assets
* http://www.allvectors.com/vector-switch
*/
.switch {
background-image: url( switch.png );
background-position: 0px;
background-repeat: no-repeat;
height: 225px;
overflow: hidden;
width: 500px;
}
Raw
switch.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Light Switch</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="switch.css">
<!-- Logic -->
<script src="switch.js" type="application/javascript"></script>
</head>
<body>
<!-- Content holder for light switch -->
<div class="switch"></div>
</body>
</html>
Raw
switch.js
// Fake constants
var SWITCH_OFF = 0;
var SWITCH_ON = -500;
var SWITCH_URL = 'switch.php';
// Global variables for light state and XHR
var state = 0;
var xhr = null;
// Called when the switch is clicked
// Toggles the image to show opposite state
// Calls PHP script for pass through to Electric Imp
function doLightClick()
{
var light = null;
// The light switch content
light = document.querySelector( '.switch' );
// If the switch is in the "on" position
if( state )
{
// Turn the light switch off
// Update state reference
light.style.backgroundPosition = SWITCH_OFF + 'px';
state = 0;
} else {
// Turn the light switch on
light.style.backgroundPosition = SWITCH_ON + 'px';
state = 1;
}
// Make an XHR request to the PHP script
// Asynchronous
// Using HTTP POST
// Single "value" value is the state of the switch
xhr = new XMLHttpRequest();
xhr.addEventListener( 'load', doLightLoad );
xhr.open( 'POST', SWITCH_URL, true );
xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
xhr.send( 'value=' + state );
}
// Called when the PHP script has returned
// Logs message to console for reference
// Cleans up XHR
function doLightLoad()
{
xhr.removeEventListener( 'load', doLightLoad );
console.log( xhr.responseText );
xhr = null;
}
// Called when the window loads
// Adds the click handler to the switch
// Sets up initial positioning
function doWindowLoad()
{
var light = null;
// Click event handler on switch
light = document.querySelector( '.switch' );
light.addEventListener( 'click', doLightClick );
// Position switch in center of screen
doWindowResize();
}
// Called when the window resizes
// Also called when layout updates are needed
// Centers the switch in the center of the screen
function doWindowResize()
{
var light = null;
// Center the switch using margins
// Might alternatively use absolute positioning
light = document.querySelector( '.switch' );
light.style.marginLeft = Math.round( ( window.innerWidth - light.clientWidth ) / 2 ) + 'px';
light.style.marginTop = Math.round( ( window.innerHeight - light.clientHeight ) / 2 ) + 'px';
}
// Initial event hooks to kick the whole thing off
window.onload = doWindowLoad;
window.onresize = doWindowResize;
Raw
switch.nut
// Switch an LED on an off using HTTP
// Input port for incoming values
// Single value used for switch
// Could be JSON for more complex values
class SwitchIn extends InputPort
{
function set( ledState )
{
// Set the pin high or low based on "value" value
// Only the HTTP POST field "value" is used
// Other fields are ignored
hardware.pin7.write( ledState );
// Show in the planner just to see it working
server.show( ledState );
}
};
// Configure pin seven (7) as digital out
// Set initial value to off (0)
hardware.pin7.configure( DIGITAL_OUT );
hardware.pin7.write( 0 );
// Show the initial value of the light in the planner
server.show( 0 );
// Configure the Imp
imp.configure( "Switch", [SwitchIn()], [] );
Raw
switch.php
<?php
// Thanks to the following content for pointers
// Query String - http://ditio.net/2008/06/12/php-query-string/
// CURL POST - http://davidwalsh.name/curl-post
// HTTPS and SSL - http://unitstep.net/blog/2009/05/05/using-curl-in-php-to-access-https-ssltls-protected-sites/
// Imp address
// Values to be passed
$url = 'https://api.electricimp.com/v1/134045bb5c6addca/30d2dcd967a157ea';
$fields = array(
'value' => $_POST['value']
);
// Stringify the URL
foreach( $fields as $key => $value )
{
$fields_string .= $key . '=' . $value . '&';
}
// Trim that last "&" symbol
rtrim( $fields_string, '&' );
// Create the request
$request = curl_init();
// Set the parameters
// Do not verify SSL peer
// Imp address is HTTPS
curl_setopt( $request, CURLOPT_URL, $url );
curl_setopt( $request, CURLOPT_POST, count( $fields ) );
curl_setopt( $request, CURLOPT_POSTFIELDS, $fields_string );
curl_setopt( $request, CURLOPT_SSL_VERIFYPEER, false );
// Execute the request
// Get the response
$response = curl_exec( $request );
// Close the connection
curl_close( $request );
// Show the response for informational purposes
echo $response
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment