c_meyer/thingspeak
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

update with changes from Production branch

Browse Source
This commit is contained in:
Lee Lawlor
2014-02-17 12:05:39 -05:00
parent 5b640cf9d8
commit a4937fb2e5
384 changed files with 14690 additions and 2242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/views/pages/about.html.erb Normal file
View File

@ -0,0 +1 @@
<h3><%= t(:about) %></h3>

116
app/views/pages/export.html.erb Normal file
View File

@ -0,0 +1,116 @@
<h2>export test</h2>
<br>
<script type="text/javascript">
// users timezone offset
var myOffset = new Date().getTimezoneOffset();
// converts date format from JSON
function getChartDate(d) {
// get the data using javascript's date object (year, month, day, hour, minute, second)
// months in javascript start at 0, so remember to subtract 1 when specifying the month
// offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct
return Date.UTC(d.substring(0,4), d.substring(5,7)-1, d.substring(8,10), d.substring(11,13), d.substring(14,16), d.substring(17,19)) - (myOffset * 60000);
}
$(document).ready(function() {
// blank array for holding chart data
var chartData = [];
// variable for the date string
var d;
// variable for the data point
var p;
// variable for the local date in milliseconds
var localDate;
// get the data with a webservice call
$.getJSON('https://api.thingspeak.com/channels/9/field/1.json?callback=?&amp;results=15&amp;offset=0', function(data) {
// if no access
if (data == '-1') {
$('#chart-container').append('This channel is not public. To embed charts, the channel must be public or a read key must be specified.');
}
// iterate through each feed
$.each(data.feeds, function() {
p = this.field1;
// if a numerical value exists add it
if (!isNaN(parseInt(p))) {
chartData.push([getChartDate(this.created_at), parseFloat(p)]);
}
});
// specify the chart options
var chartOptions = {
chart: {
renderTo: 'chart-container',
defaultSeriesType: 'line',
backgroundColor: '#ffffff'
},
title: {
text: ''
},
plotOptions: {
line: {
color: '#d62020'
},
bar: {
color: '#d62020'
},
column: {
color: '#d62020'
},
series: {
marker: {
radius: 3
},
animation: true
}
},
tooltip: {
// reformat the tooltips so that local times are displayed
formatter: function() {
var d = new Date(this.x + (myOffset*60000));
return this.series.name + ':<b>' + this.y + '</b><br/>' + d.toDateString() + '<br/>' + d.toTimeString().replace(/\(.*\)/, "");
}
},
xAxis: {
type: 'datetime',
title: {
text: ''
}
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
series: [{
name: data.channel.field1
}]
};
// add the data to the chart
chartOptions.series[0].data = chartData;
// set chart labels here so that decoding occurs properly
chartOptions.title.text = 'Dynamic Light Levels';
chartOptions.xAxis.title.text = 'Time';
chartOptions.yAxis.title.text = data.channel.field1;
// draw the chart
var dynamicChart = new Highcharts.Chart(chartOptions);
});
});
</script>
<br />
<div id="chart-container" style="width: 500px; height: 260px; padding-left: 20px; float: left;"></div>

22
app/views/pages/features.html.erb Normal file
View File

@ -0,0 +1,22 @@
<h3><%= t(:features) %></h3>
<div class="section_header_reverse">All-purpose Data Storage and Retrieval</div>
<p>You use ThingSpeak to <em>Send</em> and <em>Receive</em> &quot;data&quot; via simple HTTP requests, much like going to a web page and filling out a form. Data can be from anything -- <em>Blood Sugar Levels</em> measured by a glucose meter, <em>Server Usage and Uptime</em> reported by servers, or <em>Location Info</em> from a mobile phone. Once the data is in ThingSpeak, you can build applications that retrieve the data, use the data for process decision making, and reporting.</p>
<p>Data is stored in a ThingSpeak Channel. Each channel allows you to store up to 8 fields of data up to 255 alphanumeric characters; 4 dedicated location fields for <em>Location Description</em>, <em>Latitude</em>, <em>Longitude</em>, and <em>Elevation</em>; Status Update to augment the data; and a Time Date Stamp to time code each piece of incoming data.</p>
<div class="section_header_reverse">Data Importing</div>
<p>Do you already have a bunch of data collected from data acquisition devices, server logs, or sensors? Then you can use the ThingSpeak Importer to bring in your existing data and leverage the ThingSpeak API and Charts to share with and connect to applications instantly.</p>
<div class="section_header_reverse">Dynamic Charting</div>
<p>When you need to visualize your data, ThingSpeak has dynamic charts and an API to make customizations. The charts are perfect for displaying sensor data over time and finding some meaning behind the data. ThingSpeak Charts work on all desktop browsers, iPhones, and Android devices by using JavaScript instead of Flash. The chart types supported are <em>Line</em>, <em>Bar</em>, <em>Column</em>, and <em>Step</em>. You can set colors, sizing, and labels to allow the charts to fit perfectly into your web page or web application.</p>
<div class="section_header_reverse">Data Processing</div>
<p>When pulling data out of ThingSpeak, you can process the data to get it ready for your application. You can also filter the data by setting minimum and maximum value thresholds. Processing options include time scaling, summing, averaging, and median.</p>
<div class="section_header_reverse">Integration with Twitter</div>
<p>Often enough you will find times where you want to share significant data across social networks like Twitter. You can have your garage door Tweet,
&quot;You left your garage door open&quot; or have your house, say &quot;Today's Power Use was 6150 watts.&quot; The ThingSpeak API has Twitter baked in, so you can send status updates to Twitter along with storing your data in a ThingSpeak Channel at the same time. </p>
<div class="section_header_reverse">Fully Localized</div>
<p>ThingSpeak supports over 40 time zones and time offsets for locations that support Day Light Savings. When charts and data are presented to users, we format times and dates using the viewer's time zone. The user interface for ThingSpeak currently supports English and Brazilian Portuguese languages automatically, but the localization <a href="https://github.com/iobridge/thingspeak/blob/master/config/locales/en.yml" title="GitHub Localization file for ThingSpeak.">file</a> is available for translation into other languages. ThingSpeak numerical data supports commas used as decimals, for example, it's getting 38,2 degrees in here, for our friends in Brazil and many other <a href="http://en.wikipedia.org/wiki/Decimal_mark#Countries_using_Arabic_numerals_with_decimal_comma" title="Countries using Arabic numerals with decimal comma" target="_blank">countries</a>.</p>
<div class="section_header_reverse">Privacy Options for Open Data</div>
<p>We respect your privacy. You can choose to make your data public or private. Over 95% of ThingSpeak Channels are private meaning that the data is not publicly accessible without API keys and user authentication. You can control who has access to your data and build applications that are open to those that you choose. We don't sell your data to third-parties. You can even run ThingSpeak on a private network at your facility or home and build tightly secured applications for your organization's needs.</p>
<div class="section_header_reverse">Open Source for Open Source</div>
<p>The ThingSpeak API is available on <a href="https://github.com/iobridge/thingspeak" title="GitHub repo for ThingSpeak source code" target="_blank">GitHub</a> for download and installation on your own servers. You can also take the source code and make changes and contribute new features. ThingSpeak is a modern Ruby on Rails 3.0 application and includes everything to get started including, a full web application, <em>User Management</em>, <em>API Key Management</em>, <em>Channel Management</em>, and <em>Charting</em>. The license for ThingSpeak is under GPLv3 for open source use and can be licensed from <a href="http://www.iobridge.com" title="ioBridge" target="_blank">ioBridge</a> for closed source applications. ThingSpeak has been installed on over 500 servers and licenced commercially since its release on GitHub in March 2011. <a href="mailto:oem@iobridge.com" title="Contact ioBridge for licensing options for ThingSpeak">Contact ioBridge</a> for licensing options for commercial use<a href="mailto:oem@iobridge.com" title="Contact for ThingSpeak Licensing"></a>. ThingSpeak will be powering many new services and products coming to market in 2012.</p>
<p align="center"><a href="https://github.com/iobridge/thingspeak" target="_blank"><%= image_tag 'GitHub_ThingSpeak_API.jpg', :size => '300x288' %></a></p>

7
app/views/pages/headers.html.erb Normal file
View File

@ -0,0 +1,7 @@
<table border="1">
<% for header in request.env.select {|k,v| k.match("^HTTP.*")} %>
<tr>
<td><%=header[0].split('_',2)[1]%></td><td><%=header[1]%></td>
</tr>
<% end %>
</table>

235
app/views/pages/home.html.erb
View File

@ -1,5 +1,230 @@
<% if current_user %>
<%= t(:homepage_logged_in) %>
<% else %>
<%= t(:homepage) %>
<% end %>
<script type="text/javascript">
// users timezone offset
var myOffset = new Date().getTimezoneOffset();
// converts date format from JSON
function getChartDate(d) {
// get the data using javascript's date object (year, month, day, hour, minute, second)
// months in javascript start at 0, so remember to subtract 1 when specifying the month
// offset in minutes is converted to milliseconds and subtracted so that chart's x-axis is correct
return Date.UTC(d.substring(0,4), d.substring(5,7)-1, d.substring(8,10), d.substring(11,13), d.substring(14,16), d.substring(17,19)) - (myOffset * 60000);
}
$(document).ready(function() {
// blank array for holding chart data
var chartData = [];
// variable for the date string
var d;
// variable for the data point
var p;
// variable for the local date in milliseconds
var localDate;
// get the data with a webservice call
$.getJSON('https://api.thingspeak.com/channels/9/field/1.json?callback=?&amp;results=15&amp;offset=0', function(data) {
// if no access
if (data == '-1') {
$('#chart-container').append('This channel is not public. To embed charts, the channel must be public or a read key must be specified.');
}
// iterate through each feed
$.each(data.feeds, function() {
p = this.field1;
// if a numerical value exists add it
if (!isNaN(parseInt(p))) {
chartData.push([getChartDate(this.created_at), parseFloat(p)]);
}
});
// specify the chart options
var chartOptions = {
chart: {
renderTo: 'chart-container',
defaultSeriesType: 'line',
backgroundColor: '#fff',
events: {
load: function() {
// push data every 15 seconds
setInterval(function() {
// get the data with a webservice call
$.getJSON('https://api.thingspeak.com/channels/9/feed/last.json?callback=?&amp;offset=0', function(data) {
p = data.field1;
d = getChartDate(data.created_at);
last_date = dynamicChart.series[0].data[dynamicChart.series[0].data.length-1].x;
// if a numerical value exists and it is a new date, add it
if (!isNaN(parseInt(p)) && (d != last_date)) {
dynamicChart.series[0].addPoint([d, parseFloat(p)], true, true);
}
});
}, 15000);
}
}
},
title: {
text: ''
},
plotOptions: {
line: {
color: '#d62020'
},
bar: {
color: '#d62020'
},
column: {
color: '#d62020'
},
series: {
marker: {
radius: 3
},
animation: true
}
},
tooltip: {
// reformat the tooltips so that local times are displayed
formatter: function() {
var d = new Date(this.x + (myOffset*60000));
return this.series.name + ':<b>' + this.y + '</b><br/>' + d.toDateString() + '<br/>' + d.toTimeString().replace(/\(.*\)/, "");
}
},
xAxis: {
type: 'datetime',
title: {
text: ''
}
},
yAxis: {
title: {
text: ''
}
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
series: [{
name: data.channel.field1
}]
};
// add the data to the chart
chartOptions.series[0].data = chartData;
// set chart labels here so that decoding occurs properly
chartOptions.title.text = 'Dynamic Light Levels';
chartOptions.xAxis.title.text = 'Time';
chartOptions.yAxis.title.text = data.channel.field1;
// draw the chart
var dynamicChart = new Highcharts.Chart(chartOptions);
});
});
</script>
<div class="row">
<div class="text-center">
<%= image_tag 'front.png', :size => '854x144' %>
</div>
</div>
<br><br><br>
<div class="row">
<div class="col-sm-6">
<div id="chart-container" class="center-block" style="width: 500px; height: 260px; padding-left: 20px;"></div>
</div>
<div class="col-sm-6">
<div style="margin-top: 55px;" class="text-center"><a href="http://community.thingspeak.com/tutorials/netduino/create-your-own-web-of-things-using-the-netduino-plus-and-thingspeak/"><%= image_tag 'my_house_status_update.png' %></a></div>
</div>
</div>
<br><br><br>
<div class="row">
<div class="col-sm-4">
<h4 class="breadcrumb">Features</h4>
<p>
<ul>
<li>Open Source API</li>
<li>Real-time data collection</li>
<li>Data processing</li>
<li>Data visualizations</li>
<li>Location-awareness</li>
<li>Status context</li>
<li>Application infrastructure</li>
<li>Twitter proxy</li>
<li>Apps</li>
<li>Plugins</li>
<li><%= link_to '... more', features_pages_path %></li>
</ul>
</p>
</div>
<div class="col-sm-4">
<h4 class="breadcrumb">Applications</h4>
<p>
<ul>
<li>Sensor monitoring</li>
<li>Energy monitoring</li>
<li>Connecting devices and systems</li>
<li>Geo location tracking</li>
<li>Interfacing with social networks</li>
<li>RFID transactions</li>
</ul>
</p>
<h4 class="breadcrumb">Who Uses ThingSpeak</h4>
<p>
<ul>
<li>Application developers</li>
<li>Product integrators</li>
<li>Web designers</li>
</ul>
</p>
</div>
<div class="col-sm-4">
<h4 class="breadcrumb">Get Started</h4>
<div class="col-pad">
If you are ready to get started, <span id="feature_signup"> <%= link_to t(:signup), new_account_path %></span> for a free user account.
</div>
<h4 class="breadcrumb">Connect</h4>
<p>
<ul>
<li><a href="http://www.twitter.com/thingspeak" title="Follow ThingSpeak on Twitter">Twitter</a></li>
<li><a href="https://github.com/iobridge/ThingSpeak" title="Open Source Internet of Things Project on GitHub">GitHub</a></li>
<li><a href="http://community.thingspeak.com" title="Join the ThingSpeak Community">ThingSpeak Community</a></li>
<li><a href="http://community.thingspeak.com/documentation" title="ThingSpeak API and Apps Documentation">Documentation</a> and <a href="http://community.thingspeak.com/tutorials" title="ThingSpeak Tutorials">Tutorials</a></li>
<li><a href="mailto:support@thingspeak.com" title="Contact ThingSpeak">Questions</a></li>
</ul>
</p>
</div>
</div>
<br><br><br>
<div class="row">
<div class="col-sm-offset-2 col-sm-8 col-xs-12">
<div class="center-block" style="max-width: 600px;">
<h4><a href="http://community.thingspeak.com/" title="ThingSpeak Community, Blog, and Forum">latest news<a> <a href="http://feeds.feedburner.com/internetofthings/" title="ThingSpeak RSS Feed"><%= image_tag 'icon_rss.gif' %></a></h4>
<br>
<% cache("blog-posts-on-homepage", :expires_in => 10.minutes) do %>
<%= raw blog_entries %>
<% end %>
</div>
</div>
</div>

145
app/views/pages/social_home.html.erb Normal file
View File

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html>
<head>
<title>The Social Sensor Network</title>
<style type="text/css">
body {
background-color: #bcd1e4;
}
a {
text-decoration: none;
color: #ffffff;
font: 18px Arial, Sans-Serif;
font-weight: 700;
text-shadow: 0px 1px 2px #535353;
}
h2 {
margin: 10px 0 0 0;
font: 45px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #535353;
text-shadow: 0px 2px 3px #62a09d;
}
h3 {
margin: 0 0 0 0;
font: 14px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #656fad;
text-shadow: 0px 1px 2px #62a09d;
}
input, #submit {
font: 14px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #656fad;
border: 1px solid #535353;
}
#content {
margin: 0 auto;
text-align: center;
width: 800px;
}
#social {
float:left;
}
#demo {
margin: 5px;
border: 1px solid #535353;
padding: 15px;
background: #c46353;
}
#demo_text {
display: block;
margin: 0 0 10px 0;
font: 25px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #535353;
text-shadow: 0px 2px 3px #62a09d;
}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22749436-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="content">
<div id="social">
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share?via=socialsensors" class="twitter-share-button">Tweet</a>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.socialsensornetwork.com%2F&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=tahoma&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
</div>
<div style="clear:both;"></div>
<% link_to 'irs-refund/' do %>
<img src='<%= "#{@api_domain}images/social_sensor_network_main.png "%>' width='600' height='415' border='0' />
<% end %>
<h2>the social sensor network is forming.</h2>
<h3>We have one thing in common. At almost all times we are connected to the web.<br />
The Social Sensor Network allows everyone to report and share data in an open and meaningful way.</h3>
<br />
<form method=post action="https://app.icontact.com/icp/signup.php" name="icpsignup" id="icpsignup2312" accept-charset="UTF-8" onsubmit="return verifyRequired2312();" >
<input type=hidden name=redirect value="http://www.socialsensornetwork.com?invite=success" />
<input type=hidden name=errorredirect value="http://www.socialsensornetwork.com" />
<input type=text name="fields_email">
<input type=hidden name="listid" value="26352">
<input type=hidden name="specialid:26352" value="SP8K">
<input type=hidden name=clientid value="874748">
<input type=hidden name=formid value="2312">
<input type=hidden name=reallistid value="1">
<input type=hidden name=doubleopt value="0">
<input type="submit" name="submit" id="submit" value="Sign up for Invite">
</form>
<script type="text/javascript">
// alert user for successful form submission
if (window.location.toString().indexOf('invite=success') > 0) {
alert('Your email address has been submitted, thanks!');
window.location = window.location.toString().replace('?invite=success', '');
}
var icpForm2312 = document.getElementById('icpsignup2312');
if (document.location.protocol === "https:")
icpForm2312.action = "https://app.icontact.com/icp/signup.php";
function verifyRequired2312() {
if (icpForm2312["fields_email"].value == "") {
icpForm2312["fields_email"].focus();
alert("The Email field is required.");
return false;
}
return true;
}
</script>
<br />
<br />
<span id="demo_text">demo channels</span>
<br />
<span id="demo"><a href="http://www.socialsensornetwork.com/irs-refund">IRS Refunds</a></span>
<span id="demo"><a href="http://www.socialsensornetwork.com/online-poker">Frozen Online Poker Money</a></span>
</div>
</body>
</html>