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

Avatar

Please consider registering
Guest

Search

— Forum Scope —






— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

Register Lost password?
sp_Feed sp_TopicIcon
Plugin show ON/OFF devices.
Avatar
Maco33

Silver
Forum Posts: 6
sp_UserOfflineSmall Offline
1
February 25, 2017 - 2:13 am
sp_Permalink sp_Print

Hi, I need pligin, which would show the logical state of various devices such as on / off light (no graph). Perhaps as a site where it would be five wheels (signal LED) show  red ON, white OFF. It is possible to create such a plugin for Thinkspeak? Excuse my English 😉

Avatar
Vinod

Forum Posts: 179
sp_UserOfflineSmall Offline
2
February 25, 2017 - 2:15 pm
sp_Permalink sp_Print sp_EditHistory

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.

Avatar
Vinod

Forum Posts: 179
sp_UserOfflineSmall Offline
3
February 25, 2017 - 6:39 pm
sp_Permalink sp_Print

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. 

Avatar
Vinod

Forum Posts: 179
sp_UserOfflineSmall Offline
4
February 25, 2017 - 6:45 pm
sp_Permalink sp_Print sp_EditHistory

The forum software seems to have mangled my example's HTML section. It is missing an HTML

div id="LED"
 
just before the 
 
<p> status LED </p>
Avatar
Maco33

Silver
Forum Posts: 6
sp_UserOfflineSmall Offline
5
February 26, 2017 - 5:17 am
sp_Permalink sp_Print

Thank you very much, I'm going to study 😉 

Avatar
Maco33

Silver
Forum Posts: 6
sp_UserOfflineSmall Offline
6
March 1, 2017 - 8:11 am
sp_Permalink sp_Print

Hi Vinod, so I modified it a bit and it works. Please could you create JAVA script for at least two LEDs(Channels 2 and ...), that I knew how to continue? HTML and CSS, I learned a little bit, but I do not learned  JavaScript yet.Frown
Thank you very much.

Forum Timezone: America/New_York

Most Users Ever Online: 114

Currently Online: cstapels
24 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

rw950431: 252

Vinod: 164

cstapels: 96

piajola: 75

vespapierre: 63

Adarsh_Murthy: 59

Newest Members:

yeseniara11

RomanFug

JamesPes

RobertBak

ScottSmiva

Amourhotte

Forum Stats:

Groups: 4

Forums: 17

Topics: 1313

Posts: 4565

 

Member Stats:

Guest Posters: 1

Members: 5703

Moderators: 0

Admins: 2

Administrators: Hans, lee