Displaying multiple spark.publish events on one page

Cloud
1

Hi guys,

I’m really new to particle and html coding.

I’m currently mucking around with a GPS and wanted to display multiple variables on the same page.

I have the Particle coding down and can read each variable I send individually. however as I’m pretty new to html I’m not sure how to display more than one.

Could anyone give me a hand with some simple sample code that shows more thatn one variable at the same time (preferably in a table),

Thanks for any help given!

Griffin.

2

You mean this?

Just to be sure, since your description is rather vague, are you using particle.publish() or particle.variable()? Those are two very different things and should be treated as such.

3

Hi @Moors7 thanks for your reply and sorry about my vague description.

The sample you linked works fine however it only shows one variable at a time. In my case I would like at least 2 but proably more varribles on the screen at the same time. I am using spark.publish to send my variables. For instance:

Spark.publish("lngcode",lng);
Spark.publish("Uptime",publishString)

These both work however I am looking for a way in html to display the both in a table at the same time.

4

When describing things, can we please stick to their relevant names, e.g. “Publishes” for Particle.publish() or “variables” for Particle.variable(), otherwise thug will get very confusing.

So to recap, you’d like to be able to show multiple publishes on one page/table? If they’re coming from the same device, I’d recommend putting them in one publish, and parsing them in the receiving end. If not, you’re likely to run into the publish limit of 1p/s.

The example above filters out events on their eventname, so you can show multiple events with the same name from different devices. You should be able to adapt that to fit your own eventnames.

5

Ahh okay sorry @Moors7 I understand the confusion now! Yeah I am talking about publishes. I shall put the them in one singular publish and then change the code on the receiving end. Do you know of any sample code doing this? Does it involve using console.log?

6

After putting them in the same publish I can read both at the same time but they are still only one item. I’d ideally like some code that seperates the two items. @Moors7

7

Alright, I’ve made some changes to @bko’s code. I’m using published data in a JSON format, since that’s easy to parse on the JavaScript side.

On the Particle, that looks something like this:

Tempp = DHT.readTemperature();
Humii = DHT.readHumidity();
  
sprintf(pubstring,"{\"t\":%0.2lf,\"h\":%0.2lf}", Tempp, Humii);         
Spark.publish("pubdata",pubstring);

Any other methog is okay as well, as long as you get a JSON format.

Then on the HTML side, I’ve got this:

<!DOCTYPE html>
<html>
<head>
  <title>
  </title>
</head>

<body>
  <p>Event name:<input id="evText" name="eventNameBox" type="text"><br>
  <br></p>


  <table border="2" id="dataTable" width="500px">
    <tr>
      <td>Core ID</td>

      <td>Temperature</td>
      
      <td>Humidity</td>

      <td>Timestamp</td>
    </tr>
  </table>
  <br>
  <br>
  <button id="connectbutton" onclick="start()">Connect</button> 
  
  <script type="text/javascript">

    function start(objButton) {
      document.getElementById("connectbutton").innerHTML = "Running";
      
      var accessToken = "<<access_token here>>";
      var requestURL = "https://api.spark.io/v1/events/?access_token=" + accessToken;
      var eventName = document.getElementById('evText').value;
      var eventSource = new EventSource(requestURL);
      
      var dt = document.getElementById("dataTable");
      var rows = dt.rows.length;
      
      eventSource.addEventListener('open', function(e) {
        console.log("Opened!"); },false);

      eventSource.addEventListener('error', function(e) {
        console.log("Errored!"); },false);

      eventSource.addEventListener(eventName, function(e) {
        var parsedData = JSON.parse(e.data);
        var jsonData = JSON.parse(parsedData.data);
        console.log(jsonData.t);
        
        var newRow = dt.insertRow(rows);
        var cell1 = newRow.insertCell(0);
        var cell2 = newRow.insertCell(1);
        var cell3 = newRow.insertCell(2); 
        var cell4 = newRow.insertCell(3);           
        cell1.innerHTML = parsedData.coreid;
        // the letters below should match the ones from your JSON
        cell2.innerHTML = jsonData.t; // <- change this
        cell3.innerHTML = jsonData.h; // <- change this too
        cell4.innerHTML = parsedData.published_at;
        

      }, false);
    }
  </script>
</body>
</html>
3 Likes
8

This is awesome @Moors7 ! Thanks so much for your help! It’s a great start towards what I’m finally after. Cheers!