Spark Lamp Control

by dougal

HTML

<ul id="mode_list">
    <li id="off" data-mode="0" data-selected="false">Off</li>
    <li id="torch" data-mode="1" data-selected="false">Torch</li>
    <li id="colorwheel" data-mode="2" data-selected="false">Color Wheel</li>
    <li id="lavalamp" data-mode="3" data-selected="false">Lava Lamp</li>
    <li id="lamp" data-mode="4" data-selected="true">Lamp</li>
    <li id="lampwave" data-mode="5" data-selected="false">Lamp Wave</li>
    <li id="sound" data-mode="6" data-selected="false">Sound Visualization</li>
</ul>

CSS

#mode_list li {
    display:block;
    width: 140px;
    border: 1px outset #ccc;
    padding: 3px;
    margin-bottom: 5px;
    color: #3333cc;
    font-weight: normal;
    cursor: pointer;
}

#mode_list li[data-selected=true] {
    font-weight: bold;
    color: green;
}

/* Use a different color for 'Off' selection */
 #mode_list li#off[data-selected=true] {
     color: red;
}

 }

JavaScript

var accessToken = "MYACCESSTOKEN";
var deviceID = "MYDEVICEID";
var postFunc = "MYPOSTFUNCTION";
var requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + postFunc + "/";

$('#mode_list').on('click', 'li', function(e){
    // Reset selected item
    $(this).parent().children().attr('data-selected', 'false');
    $(this).attr('data-selected', 'true');
    
    // send the new mode
    var lampmode = 'mode=' + $(this).data('mode');
    
    // For testing purposes, alert instead of $.post
    alert('Sending... \nURL: ' + requestURL + '\naccess_token: ' + accessToken + '\na: ' + lampmode);
    
    //$.post( requestURL, { access_token: accessToken, a: lampmode });
});