@Moors7
Firstly, the original code worked for me, and I can see the stream of my data of a specified event. For the number of the devices, I have four spark core devices. At the first, I wanted to display two events side by side in the same page instead of displaying one event in the page as the example does. Now, instead of that, I’d like to concatenate the data from four devices together and display them as one stream. As I mentioned in the previous post, The final displayed data will be (Event1’s Data+Event2’s Data+Event3’s Data+Event4’s Data) as a one stream. I understood the example, and here is what it does through the execution step by step:
<!DOCTYPE HTML>
<html>
<body>
// This line is to insert the Event name that we would like to get it's data on the cloud
<P>Event name:<input type="text" name="eventNameBox" id="evText" >
// This line is to create the table of the CoreID, Data, and Timestamp
<table id="dataTable" width="300px" border="2">
// This line shows the content of the header of the table
<td> Core ID </td>
<td> Data </td>
<td> Timestamp </td>
</tr>
</table>
<br><br>
// This line is to create a button called Connect and it has id of connectbutton, and when we click on it, it will execute the start fuction
<button id="connectbutton" onclick="start()">Connect</button>
// This line is to show that we are using JS within the html language
<script type="text/javascript">
// This function will execute when we click on the Connect button
function start(objButton) {
// This line is to get the data of the element by it's id which is connectbutton here, and after that change the name of the button from Connect to Running
document.getElementById("connectbutton").innerHTML = "Running";
// These three lines are to get and save in variables the name of the event that we inserted previously, to save the access token, and to request the data of the events that is related with this token from the particle cloud
var eventName = document.getElementById('evText').value;
var accessToken = "0000000000000000000000000000000000000";
var requestURL = "https://api.spark.io/v1/events/?access_token=" + accessToken;
// This line is to get the source of the event from the cloud website
var eventSource = new EventSource(requestURL);
// This line is to add listener to the specified event that we entered at the beginning to continue get it's data whenever there is data
eventSource.addEventListener('open', function(e) {
console.log("Opened!"); },false);
// This line is to show when there is an error with reading the event's data from the cloud
eventSource.addEventListener('error', function(e) {
console.log("Errored!"); },false);
// This function will execute when we listen to the event on the cloud to get it's data
> eventSource.addEventListener(eventName, function(e) {
// This line is to parae the data of the event, and save it in a variable e
var parsedData = JSON.parse(e.data);
// This line is to get and save data of the table, and save it in a variable dt
var dt = document.getElementById("dataTable");
// This line is to calculate the length of the table's rows, and save it in a variable rows
var rows = dt.rows.length;
// This line is to initialize the var foundIt as a boolean expression and give it false value
var foundIt = false;
// This for loop is to increase the number of the rows in the table each time there is a new data from the event
for(var i=0;i<rows;i++) {
// This line is to create a new variable, rowN, and put the table data in each rows inside the table
var rowN = dt.rows[i];
// This line is to check when the foundIt expression is still false and put the parsed CoreId data in the first cell of the first row in the table
if (false==foundIt && rowN.cells[0].innerHTML==parsedData.coreid) {
// This line is to check when the foundIt expression becomes true, so start insert the data of the event in the second cell of the first row and put the data's published timestamp in the third cell of the first row
foundIt = true;
rowN.cells[1].innerHTML = parsedData.data;
rowN.cells[2].innerHTML = parsedData.published_at;
}
}
// This line is to maintain the data in the second line instead of replacing the coming data with the current data
//if (false == foundIt) {
// These four lines are to create new row whenever there is new data and insert three cells inside it
var newRow = dt.insertRow(rows);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
// These three lines are to put the data of coreid, event's data, and published timestamp of each new data
cell1.innerHTML = parsedData.coreid;
cell2.innerHTML = parsedData.data;
cell3.innerHTML = parsedData.published_at;
//}
}, false);
}
</script>
</body>
</html>