Difference between revisions of "Web Page Variable Viewer"

From STEAMwiki
Jump to: navigation, search
(Created page with "You can publish data from your Particle chip to the cloud using the Particle.variable command. This example Particle Arduino code reads analog temperature and moisture sensor...")
 
m
 
Line 37: Line 37:
 
     <script src="https://andyforest.github.io/sparkControl/js/sparkControl.js"></script>
 
     <script src="https://andyforest.github.io/sparkControl/js/sparkControl.js"></script>
 
     <script type="text/javascript">
 
     <script type="text/javascript">
       var sparkCore = new sparkControl("Your-Particle-ID", "Your-Access-Token");  
+
       var particlePhoton = new sparkControl("Your-Particle-ID", "Your-Access-Token");  
 
        
 
        
 
       jQuery( document ).ready(function( $ ) {
 
       jQuery( document ).ready(function( $ ) {
         sparkCore.getVariable("temperature", displayTemperature);
+
         setInterval(function(){
        sparkCore.getVariable("moisture", displayMoisture);  
+
            particlePhoton.getVariable("temperature", displayTemperature);
 +
            particlePhoton.getVariable("moisture", displayMoisture);
 +
        }, 1000);
 
       });
 
       });
 
          
 
          
Line 63: Line 65:
 
</pre>
 
</pre>
  
To update the data in real time, use the javascript setInterval() function to call the sparkCore.getVariable function repeatedly.
+
To update the data in real time, the code uses the javascript setInterval() function to call the particlePhoton.getVariable function repeatedly.
  
 
To display this information as a Google Gauge, try this example code:
 
To display this information as a Google Gauge, try this example code:
 
https://developers.google.com/chart/interactive/docs/gallery/gauge?csw=1#overview
 
https://developers.google.com/chart/interactive/docs/gallery/gauge?csw=1#overview

Latest revision as of 01:11, 2 June 2016

You can publish data from your Particle chip to the cloud using the Particle.variable command.

This example Particle Arduino code reads analog temperature and moisture sensors. You can update this code so that it reads and publishes data from any sensor you wish, analog or digital.

int temperature = 0;
int moisture = 0;
  
void setup() {
    Particle.variable("temperature", &temperature, INT);
    Particle.variable("moisture", &moisture, INT);
    pinMode(A0, INPUT);
    pinMode(A1, INPUT);
}
  
void loop() {
    temperature = analogRead(A0);
    moisture = analogRead(A1);
    delay(200);
}

Once the data is being published to the cloud, you can use these values in your web interface.

This basic example shows you how to display the value of particle variables in your HTML interface. Make sure to replace Your-Particle-ID and Your-Access-Token with the correct values for your Particle chip and user account.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Particle Variable Status</title>
  <link rel="stylesheet" href="style.css">
   
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://andyforest.github.io/sparkControl/js/sparkControl.js"></script>
    <script type="text/javascript">
      var particlePhoton = new sparkControl("Your-Particle-ID", "Your-Access-Token"); 
       
      jQuery( document ).ready(function( $ ) {
        setInterval(function(){ 
             particlePhoton.getVariable("temperature", displayTemperature);
             particlePhoton.getVariable("moisture", displayMoisture);
        }, 1000);
      });
         
      function displayTemperature(temperature) {
        // alert(temperature);
        jQuery( "#TemperatureID" ).text(temperature);
      }
       
      function displayMoisture(moisture) {
        jQuery( "#MoistureID" ).text(moisture);
      }
    </script>
</head>
<body>
<h1>Gnome Status</h1>
    <p>Temperature: <span id="TemperatureID">Loading</span></p>
    <p>Moisture: <span id="MoistureID">Loading</span></p>
  </body>
</html>

To update the data in real time, the code uses the javascript setInterval() function to call the particlePhoton.getVariable function repeatedly.

To display this information as a Google Gauge, try this example code: https://developers.google.com/chart/interactive/docs/gallery/gauge?csw=1#overview