Using SparkJS (former Particle.io)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script type="text/javascript" src="https://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>

Modified http://cdn.jsdelivr.net/sparkjs/0.5.9/spark.min.js to a secure url

https://cdn.jsdelivr.net/sparkjs/0.5.9/spark.min.js