2:13 am


Silver
February 25, 2017

2:15 pm


MathWorks
May 1, 2016

It is pretty easy to create a custom plugin for it. Below is an example of a status LED.
1) Create a new plugin on ThingSpeak
2) In the HTML section put this:
<html>
<head>
%%PLUGIN_CSS%%
%%PLUGIN_JAVASCRIPT%%
</head>
<body>
<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.
6:39 pm


MathWorks
May 1, 2016

Make a modification to the above, change the javascript logic to:
// get the data point
p = (Date.now() - new Date(data.created_at)) / (60*1000);
q = document.getElementById('LED');
// if there is a data point display it
if (p && q) {
if (p>5){ q.className = 'red-led'; } else {q.className = 'green-led';}
}
This will make the status LED go red if the channel was updated over 5 minutes ago.
5:17 am


Silver
February 25, 2017

9:43 am

April 24, 2018

5:39 am

January 8, 2019

Most Users Ever Online: 166
Currently Online:
26 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
rw950431: 272
Vinod: 240
piajola: 95
turgo: 70
vespapierre: 63
Adarsh_Murthy: 62
Member Stats:
Guest Posters: 1
Members: 8665
Moderators: 1
Admins: 2
Forum Stats:
Groups: 3
Forums: 14
Topics: 1600
Posts: 5760
Newest Members:
Advantagetreeexperts, laundrydaddyuk, techhhelp5, ken, tran, huldacormierModerators: cstapels: 460
Administrators: Hans: 405, lee: 457