Adding counter total on a webpage

Getting Started
1

Hello everyone, I’ve been working on a Spark game but I can not figure out how to create an simple count where I can add a +1 to the total everytime a button is pressed.
With the arduino, I would have done it like this

int myCount = 0; 
digitalWrite(btn, HIGH)
{doSomeCoolStuff;
 myCount ++;
 }

I’m really new to the particle and I can not understand how to keep count then display it on a webpage,
(sorry if this has been discussed before)

2

I’d guess Spark.variable() will be the thing to look into for you.

Also have a read here
Tutorial: Spark Variable and Function on One Web Page
Reading Spark Variables with Your Own HTML File

Otherwise, your Arduino code would just work the same (but don’t put the blank between myCount and the post increment ++).

3

Does the count on the website have to be real-time, or would an interval poll work as well? If it has to be real-time, I’d look into SSEs. If it’s not that time-sensitive, Spark.variables() is a good option as @ScruffR pointed out.

1 Like
4

Thanks Scruffrfor your replys, I’ll look into the variable documentation, I’m still wondering how to display value on a page using the old arduino method. I will read all the examples and try to see which one fits best :smile:

@Moors7 - I would like them to be almost real time

thanks for the help

5

Could you elaborate a bit on what that might be? A 'regular' Arduino doesn't have internet, so you'd need some kind of shield/breakout to get that in the first place. Then you'd have to struggle with getting the information out.

With the Particle ecosystem, everything works over a REST api. You can use that to send or request data. Retrieving variables can be done using an HTTP GET request, whereas functions may be triggered using an HTML POST request.
SSE are a tad more complicated, but those too are HTML standards. Shouldn't be too hard. There's a JavaScript library available which you can use to handle these scenarios, check the docs.

For the most real-time option, go with the SSEs, those get pushed from the device, rather than polled. it's also nicer on the network, since it only transmits data when there's actually something to transmit, rather than polling repeatedly.
If you browse through the tutorial category on the forum, you should find some nice guides :smile:

6

Hey @Moors7,
I’ve made some progress in my game, I’m using spark.variable to add a count and can see a change when I access my core through here: http://jordymoors.nl/interface/

but no matter how I adapt the code from the above tutorial, I get no count on the webpage,
here’s my current code, maybe you can tell me what I’m doing

$( document ).ready(function() {
  window.setInterval(function() {
    var varName = "totalCount";
    document.getElementById("totalCount").innerHTML = "Waiting for data...";
    $.getJSON(requestURL, function(json) {
      document.getElementById("totalCount").innerHTML = json.result + "totalCount";
      document.getElementById("totalCount").style.fontSize = "28px";
    });
  }, 1000);
});
7

It’s very hard to find the error without the rest of the code, or error messages from the console for example. This code, however, is tested, and working. It used the javascript library to save you the hassle of having to design your own requests. Give it a try, and let me know if it worked for you:

<html>
  <head>
      <title>Spark variable Example</title>
  </head>

  <body>    
    <input type="text" class="form-control" id="variable" disabled>    
    
    <script src="http://cdn.jsdelivr.net/sparkjs/1.0.0/spark.min.js"></script>
    <script>
      //you can use your accesstoken, or your email/passsword to log in. Uncomment accordingly below.
      var accessToken = "accesstoken_here";
      var deviceID = "deviceID_here";
      var variableName = "variableName_here"
      
      var variable = document.getElementById('variable');
      
      // callback to be executed by each core
      var varCb = function(err, data) {
        if (err) {
          console.log('An error occurred while getting device attrs:', err);
        } else {
          console.log('Device attr retrieved successfully:', data);
          variable.value = data.result;
        }
      };
      
      function getVariable(){
        spark.getVariable(deviceID, variableName, varCb);
        setTimeout(getVariable, 1 * 1000);
      }
      
      spark.on('login', function(response) {           
        console.log(response);    
        getVariable();
      });
      
      // Uncomment a line below depending on your preferred log-in method.   
      //spark.login({ username: 'email@example.com', password: 'password' });  
      spark.login({ accessToken: accessToken });
      
    </script>
  </body>
</html>
1 Like