Posted on

ThingSpeak – Apps

As promised, here’s a bit more information from our pals at ThingSpeak.

One of the visualizations you can add are Gauges.  Below are two gauges, one showing realtime pump pressure, the other realtime pool temperature:


Bear in mind, as of this writing the temperature can only be trusted if the pump is running. That’s because when the pump stops, the water in the pipes stop too, and the temperature starts to change based on ambient air temperature, sunlight, etc. I’ll be looking at ways to keep the last “good” temperature displayed while the pump is off.

Okay, how it’s done:

  1. ThingSpeak Configuration
    1. Select Apps from the menu at the top of the page
    2. Click on Plugins, New
    3. Select Google Gauge from the selection of radio buttons, then hit Create
    4. There are four windows containing customization elements
        1. In the Name window, enter what you want the gauge called
        2. Leave the HTML window alone
        3. I found the default gauges to be too small, so in the CSS window I changed #gauge_div width from 120px to 220px
        4. I changed a lot in the JavaScript window, so I’m just going to copy and paste what I have for the Pressure Gauge:
          <script type=’text/javascript’ src=’https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’></script>
          <script type=’text/javascript’ src=’https://www.google.com/jsapi’></script>
          <script type=’text/javascript’>// set your channel id here
          var channel_id = 123456;
          // set your channel’s read api key here if necessary
          var api_key = ’96LKJWOM0EVM3IJS’;
          // maximum value for the gauge
          var max_gauge_value = 100;
          // name of the gauge
          var gauge_name = ‘psi’;// global variables
          var chart, charts, data;// load the google gauge visualization
          google.load(‘visualization’, ‘1’, {packages:[‘gauge’]});
          google.setOnLoadCallback(initChart);// display the data
          function displayData(point) {
          data.setValue(0, 0, gauge_name);
          data.setValue(0, 1, point);
          chart.draw(data,options);
          }

          // load the data
          function loadData() {
          // variable for the data point
          var p;

          // get the data from thingspeak
          $.getJSON(‘https://api.thingspeak.com/channels/’ + channel_id + ‘/feed/last.json?api_key=’ + api_key, function(data) {

          // get the data point
          p = data.field2;

          // if there is a data point display it
          if (p) {
          //     p = Math.round((p / max_gauge_value) * 100);
          displayData(p);
          }

          });
          }

          // initialize the chart
          function initChart() {

          data = new google.visualization.DataTable();
          data.addColumn(‘string’, ‘Label’);
          data.addColumn(‘number’, ‘Value’);
          data.addRows(2);

          chart = new google.visualization.Gauge(document.getElementById(‘gauge_div’));
          options = {
          title: ‘Pump Pressure’,
          width: 220,
          height: 220,
          min: 0,
          max: 50,
          redFrom: 40,
          redTo: 50,
          yellowFrom:30,
          yellowTo: 40,
          majorTicks: [“0″,”10″,”20″,”30″,”40″,”50”],
          minorTicks: 5
          };

          loadData();

          // load new data every 15 seconds
          setInterval(‘loadData()’, 15000);
          }

          </script>

    5. Click the check box for the channel you want the gauge to display and hit Save
    6. Go to your channel and hit Refresh.  You may get a blank window at first, but it’s just waiting for some data.  Once it gets some (should be within 15 seconds), your gauge will display!

I’ve seen some really nice dashboards that use Google Gauges, and I’m anxious to put something together that combines all the data I want to see in an easy to understand dashboard.  I’ll post that up once I’ve got it figured out!

Posted on

ThingSpeak

I’m experimenting with ThingSpeak, a service that allows you to upload, analyze, manipulate, and display data in charts.  You can then copy the chart code and paste it into your own website.

I’ve got my Pool Controller ESP8266 logging Pool Water Temperature, Pump Pressure, Controller Box Temp and Humidity.  Below are the charts:

Here’s how to do it:

  1. ThingSpeak Configuration
    1. Sign up with ThingSpeak
    2. Create a channel
    3. Create a chart for each ESP8266 output you want to record
    4. Write down the Write API key
  2. ESPEasy – Configuration
    1. Set Protocol to ThingSpeak
    2. Enter 184.106.153.149 as the Controller IP
    3. Enter the Write API key from above into the Controller Password field
  3. ESPEasy – Devices
    1. Set the IDX/Variable for each task to the corresponding chart number in ThingSpeak.  For instance, I have 1 entered for the Uptime task.  This is how the data is routed to the correct chart.
    2. If you have two readings for a given sensor, Temp will go the chart that matches the DHT IDX/Variable and Humidity will go to the IDX+1 chart. For instance, I have DHT11 set as IDX 5. In ThingSpeak, Temperature is displayed on chart 5 and Humidity on chart 6.
  4. ESPEasy – Tools|Advanced
    1. Set Message Delay (ms) to 15000

ThingSpeak offers many other tools and apps, all of which I’ll be exploring in the coming weeks.  In the meantime, thanks for letting me share this cool service with you.