Hue Plants

Using plants as touch-controllers for Hue lights.
What have I done?

I wanted to show a proof of concept for the invisible integrated world of IoT. I put some succulents in little pots made of soda cans, and wired them to a Makey Makey.
To complete the circuit I wrote the instructions in conductive paint
The rest was up to PHP, JavaScript, and the Hue API.

Some Code

This isn't the whole project, but it is enough code to get you started.


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>&#9729;</title>


<style type="text/css">
body,td,th {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #FFFFFF;
}
a {
    color: #FFFFFF;    
}
h1 {
    border:none;
    background:#666;
    padding:5px;
    cursor: help;
}
h2 {
    border:none;
    background:#333;
    padding:5px;
    cursor: help;
}
body {
    background-color: #3F8183;
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}
</style>
</head>

<body>
<table cellpadding="20">
<tr><td valign="top">
<div class="btn1"><h1>RESET</h1></div>
<div class="btn2"><h2>PLANTS</h2></div>
<div class="btn3"><h2>GARAGEWORX</h2></div>
<hr>
<p><a href="https://www.meethue.com/api/nupnp" target="hue">Click For Hue Info</a></p>
<p><span class="hueIP">HUE IP</span> &#9729; <span class="hueID">HUE ID</span></p>
</td><td valign="top">
<div class="info">waiting</div>
<hr>
<div class="plant">...</div>
<hr>
<div class="gw">...</div>
</td></tr>
</table>

<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="huejs.js"></script>


<script>
$(function() {
    // Document is ready
    //https://github.com/bsalinas/huejs
    //https://www.meethue.com/api/nupnp
    
    var hueIP = "192.168.1.3";
    var hueID = "001788fffe17eaa9";
    var hjs = HueJS({
        ipAddress:hueIP,
        devicetype:"DLabHue01",
        username:hueID
    });
    
    var brightLock = bright = 240;
    
    var colorLock = color = 48000;
    var colorMax = 65535;
    var colorAlt = 1;
    
    var lightId = Array(8,10,11);
    var l = lightId.length;
    
    var gwID = 9;
    var gwColor = 45535;
    var gwColorTemp = 100;
    var gwSineTime =  0;
    var gv = sv = svGW = gwTimer = null;
    
    // ----------------
    
    function defaultHue() {
        // GARAGEWORX
        setGarageWorx();
        
        // PLANT    
        hjs.authenticate( 
          function(f){
            //alert("Successfully Found!");
            //$("body").append(JSON.stringify(hjs.getCache()));
            console.log(hjs.getCache());
            
            gv = hjs.getValue(lightId[0],["bri","alert","name"]);
            console.log(gv);
            $("".info").html("<p>Ready!</p>");
            
            // default color
            color = colorLock;
            bright = brightLock;
            updateHue();
            
          },
          function(f){
                console.log(f);
                $(".info").html("<p>You Broke It</p>");
          });
          $(".hueIP").html(hueIP);
          $(.hueID").html(hueID);
    };
    
    function updateHue(){
        $("#plant").html("...");
        var n =""
        for(i=0;i<l;i++){
            sv = hjs.setValue(lightId[i],{bri:bright,hue:color,sat:254,on:true});
            n += " b:"+bright+" c:"+color+"</br>";
        }
        $(".plant").html(n);
        $(".info").html("<p>b:"+brightLock+" c:"+colorLock+"</p>");
    };
    
    function colorRand(){
        color = Math.floor(Math.random()*colorMax);
        updateHue()
    }
    
    function colorSine(){
        gwSineTime = gwSineTime + 0.2;
        
        for(cnt = -1; cnt <= gwColor; cnt++)
        {
            gwColorTemp = Math.floor(gwColor - (Math.random() * 2 + Math.cos(gwSineTime + cnt * 0.05) * 5000 ));
        }

        svGW = hjs.setValue(gwID,{bri:bright,hue:gwColorTemp,sat:254,on:true}); 
        $(".gw").html(gwColorTemp);
    }
    
    function setGarageWorx(){
        clearInterval(gwTimer);
        gwTimer = setInterval(colorSine, 500);
        
    }
    
    
    // ----------------
  
    $(".btn1").click(function(e){
        // RESET
        defaultHue();
    });
        
    $(".btn2").click(function(e){
         // PLANTS
         colorRand()
    });
    $(".btn3").click(function(e){
        // GARAGEWORX
        setGarageWorx();
    });  
       
        $.get();
    
    // MAKEY MAKEY
    $(this).keydown(function(e) {
        //$(".info").html(e.which);
        switch(e.which) {
            case 32: // spacebar :DEFAULT
                defaultHue()
            break;
        // ---------
            case 87: // w :W KEY
            
            break;    
            case 65: // a :A KEY
                
            break;
            case 83: // s :S KEY
            
            break;
            case 68: // d :D KEY
                
            break;
            case 70: // f :F KEY
                
            break;
            case 71: // g :G KEY
                
            break;
        // ---------
            case 37: // left :COLOR ADJUST
                colorRand()
            break;
            case 39: // right : COLOR RANDOM
                colorRand()
            break;
        // ---------
            case 38: // up :BRIGHT ADJUST
                colorRand()
            break;
            case 40: // down :BRIGHT ADJUST
                colorRand()
            break;
        // ---------
            default: return; // exit this handler for other keys
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    });
    
    // -------- Launch on Start
    defaultHue();
    
});
 </script>
 
</body>
</html>