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

Avatar

Please consider registering
Guest

sp_LogInOut Log In sp_Registration Register

Register | Lost password?
Advanced Search

— Forum Scope —






— Match —





— Forum Options —





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

sp_Feed sp_TopicIcon
Plugin show ON/OFF devices.
No permission to create posts
February 25, 2017
2:13 am
Avatar
Maco33

Silver
Members
Forum Posts: 6
Member Since:
February 25, 2017
sp_UserOfflineSmall Offline

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 😉

February 25, 2017
2:15 pm
Avatar
Vinod

MathWorks
Members
Forum Posts: 279
Member Since:
May 1, 2016
sp_UserOfflineSmall Offline

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.

February 25, 2017
6:39 pm
Avatar
Vinod

MathWorks
Members
Forum Posts: 279
Member Since:
May 1, 2016
sp_UserOfflineSmall Offline

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. 

February 25, 2017
6:45 pm
Avatar
Vinod

MathWorks
Members
Forum Posts: 279
Member Since:
May 1, 2016
sp_UserOfflineSmall Offline

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>
February 26, 2017
5:17 am
Avatar
Maco33

Silver
Members
Forum Posts: 6
Member Since:
February 25, 2017
sp_UserOfflineSmall Offline

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

March 1, 2017
8:11 am
Avatar
Maco33

Silver
Members
Forum Posts: 6
Member Since:
February 25, 2017
sp_UserOfflineSmall Offline

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.

April 24, 2018
9:43 am
Avatar
oleksid
New Member
Members
Forum Posts: 3
Member Since:
April 24, 2018
sp_UserOfflineSmall Offline

Hello.

I tried to apply this to see the LED status connected to ESP8266 but I wasn’t successful.

Is there another code that I can use?

Thanks,
Oleks.

January 8, 2019
5:39 am
Avatar
HallMark
New Member
Members
Forum Posts: 1
Member Since:
January 8, 2019
sp_UserOfflineSmall Offline

I do not know CSS and javascript much but when I tried to copy your code directly to the section. I got this to my view field.
Screenshot_10.jpgImage Enlarger

sp_PlupAttachments Attachments
January 8, 2019
9:17 am
Avatar
cstapels
Moderator
Members


Moderators
Forum Posts: 610
Member Since:
March 7, 2017
sp_UserOfflineSmall Offline

HallMark,
Can you describe what you are trying to do?
If you want to show an LED status, we now have a lamp indicator widget that will do that for you. On your channel view, you can select Add Widget form the top.

Forum Timezone: America/New_York

Most Users Ever Online: 166

Currently Online:
30 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:

adeeeban, theweddingties, Vasant Gosai, pavithra, shivaniprakash, Akeyan

Moderators: cstapels: 460

Administrators: Hans: 405, lee: 457