Web Page Variable Viewer

From STEAMwiki
Jump to: navigation, search

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);

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>
  <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( $ ) {
             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);
<h1>Gnome Status</h1>
    <p>Temperature: <span id="TemperatureID">Loading</span></p>
    <p>Moisture: <span id="MoistureID">Loading</span></p>

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