Plugin show ON/OFF devices. | ThingSpeak Apps | Forum

<p>Status LED</p>
</div>
</body>
</html>

3) In the CSS section put this

<style type="text/css">
.led-box {
height: 30px;
width: 25%;
margin: 10px 0;
float: left;
}

.led-box p {
text-align: center;
margin: 1em;
}

.red-led {
margin: 0 auto;
width: 40px;
height: 40px;
background-color: #F00;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
}

.green-led {
margin: 0 auto;
width: 40px;
height: 40px;
background-color: #0F0;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
}

</style>

4) In the Javascript section put this:

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
https://www.google.com/jsapi

google.setOnLoadCallback(initChart);

// load the data
function loadData() {

// get the data from thingspeak
$.getJSON('https://api.thingspeak.com/channels/YOUR CHANNEL NUMBER HERE/feed/last.json?api_key=CHANNEL API READ KEY HERE, function(data) {

// get the data point
p = data.field1;
q = document.getElementById('LED');

// if there is a data point display it
if (p && q) {
if (p>100){ q.className = 'red-led'; } else {q.className = 'green-led';}
}
});
}

// initialize the chart
function initChart() {
loadData();
// load new data every 15 seconds
setInterval('loadData()', 1000);
}

5) Add the plugin that you just created to the channel's private or public view

You can easily extend this concept to create any plugin you wish if you know HTML, Javascript and some CSS.