MAKIO135/index.html

## 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>
        #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">
    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";
                    }
                });
            }
        }
    } )();
</script>
</body>
</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>
	#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">
	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";
	}
	});
	}
	}
	} )();
	</script>
	</body>
	</html>