Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 31, 2015 08:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save anonymous/a56fdaf5d9742a703e0d to your computer and use it in GitHub Desktop.
Save anonymous/a56fdaf5d9742a703e0d to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/jufubunuwa
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript" src="http://cdn.jsdelivr.net/sparkjs/0.5.9/spark.min.js">
</script>
<style id="jsbin-css">
#led1{
width: 150px;
height: 150px;
background: #000;
margin-bottom: 10px;
}
#potar{
height: 20px;
padding-left: 5px;
border-left: solid #000 0px;
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="led1"></div>
<div id="potar">potar</div>
<script id="jsbin-javascript">
var led1 = document.getElementById("led1");
var device = null;
spark.on('login', function(){
//list devices
spark.listDevices(function(err, devices) {
device = devices[3];
console.log('Device name: ' + device.name);
console.log('- connected?: ' + device.connected);
console.log('- variables: ' + device.variables);
console.log('- functions: ' + device.functions);
console.log('- version: ' + device.version);
console.log('- requires upgrade?: ' + device.requiresUpgrade);
});
led1.onmouseenter = function(){
if(device !== null ){
led1.style.background = "#00F";
device.callFunction('led', 'on', function(err, data) {
if (err) {
console.log('An error occurred:', err);
} else {
console.log('Function called succesfully:', data);
}
});
}
};
led1.onmouseleave = function(){
if(device !== null ){
led1.style.background = "#000";
device.callFunction('led', 'off', function(err, data) {
if (err) {
console.log('An error occurred:', err);
} else {
console.log('Function called succesfully:', data);
}
});
}
};
});
spark.login({accessToken: ''});
var potar = document.getElementById("potar");
var t=0;
function getPotar(){
requestAnimationFrame(getPotar);
t++;
if(t%20 === 0){
if(device !== null){
device.getVariable('potarValue', function(err, data) {
if (err) {
// console.log('An error occurred while getting attrs:', err);
} else {
// console.log('Device attr retrieved successfully:', data);
potar.style.borderLeft = "solid #000 " + Math.floor(data.result/10) +"px";
}
});
}
}
}
getPotar();
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript" src="//cdn.jsdelivr.net/sparkjs/0.5.9/spark.min.js">
<\/script>
</head>
<body>
<div id="led1"></div>
<div id="potar">potar</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">#led1{
width: 150px;
height: 150px;
background: #000;
margin-bottom: 10px;
}
#potar{
height: 20px;
padding-left: 5px;
border-left: solid #000 0px;
font-family: sans-serif;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
var led1 = document.getElementById("led1");
var device = null;
spark.on('login', function(){
//list devices
spark.listDevices(function(err, devices) {
device = devices[3];
console.log('Device name: ' + device.name);
console.log('- connected?: ' + device.connected);
console.log('- variables: ' + device.variables);
console.log('- functions: ' + device.functions);
console.log('- version: ' + device.version);
console.log('- requires upgrade?: ' + device.requiresUpgrade);
});
led1.onmouseenter = function(){
if(device !== null ){
led1.style.background = "#00F";
device.callFunction('led', 'on', function(err, data) {
if (err) {
console.log('An error occurred:', err);
} else {
console.log('Function called succesfully:', data);
}
});
}
};
led1.onmouseleave = function(){
if(device !== null ){
led1.style.background = "#000";
device.callFunction('led', 'off', function(err, data) {
if (err) {
console.log('An error occurred:', err);
} else {
console.log('Function called succesfully:', data);
}
});
}
};
});
spark.login({accessToken: ''});
var potar = document.getElementById("potar");
var t=0;
function getPotar(){
requestAnimationFrame(getPotar);
t++;
if(t%20 === 0){
if(device !== null){
device.getVariable('potarValue', function(err, data) {
if (err) {
// console.log('An error occurred while getting attrs:', err);
} else {
// console.log('Device attr retrieved successfully:', data);
potar.style.borderLeft = "solid #000 " + Math.floor(data.result/10) +"px";
}
});
}
}
}
getPotar();</script></body>
</html>
Raw
jsbin.jufubunuwa.css
#led1{
width: 150px;
height: 150px;
background: #000;
margin-bottom: 10px;
}
#potar{
height: 20px;
padding-left: 5px;
border-left: solid #000 0px;
font-family: sans-serif;
}
Raw
jsbin.jufubunuwa.js
var led1 = document.getElementById("led1");
var device = null;
spark.on('login', function(){
//list devices
spark.listDevices(function(err, devices) {
device = devices[3];
console.log('Device name: ' + device.name);
console.log('- connected?: ' + device.connected);
console.log('- variables: ' + device.variables);
console.log('- functions: ' + device.functions);
console.log('- version: ' + device.version);
console.log('- requires upgrade?: ' + device.requiresUpgrade);
});
led1.onmouseenter = function(){
if(device !== null ){
led1.style.background = "#00F";
device.callFunction('led', 'on', function(err, data) {
if (err) {
console.log('An error occurred:', err);
} else {
console.log('Function called succesfully:', data);
}
});
}
};
led1.onmouseleave = function(){
if(device !== null ){
led1.style.background = "#000";
device.callFunction('led', 'off', function(err, data) {
if (err) {
console.log('An error occurred:', err);
} else {
console.log('Function called succesfully:', data);
}
});
}
};
});
spark.login({accessToken: ''});
var potar = document.getElementById("potar");
var t=0;
function getPotar(){
requestAnimationFrame(getPotar);
t++;
if(t%20 === 0){
if(device !== null){
device.getVariable('potarValue', function(err, data) {
if (err) {
// console.log('An error occurred while getting attrs:', err);
} else {
// console.log('Device attr retrieved successfully:', data);
potar.style.borderLeft = "solid #000 " + Math.floor(data.result/10) +"px";
}
});
}
}
}
getPotar();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment