I’m trying to use the example “Sensor Page” from the datasheet AN032 Calling API from Webpage. I’m able to get the example to work, however instead of viewing the data from a progress bar I’d like to also have a readout of the data (data inside sensorValue). The progress bar updates w/ each new data set, but I cannot figure out how to make the sensorValue update each time as well (without adding new rows to the table). I’ve looked at @bkoTutorial: Spark Variable and Function on One Web Page and a few other examples, but can’t seem to tie it together.
How do I get the text data to also update with the progress bar? Basically, how can I update the data inside of a table? Here is the code snippet from the “showsensor” function:
function showSensor(eventData) {
// eventData.coreid = Device ID
const deviceId = eventData.coreid;
// We retrieved the device list at startup to validate the access token
// and also to be able to map device IDs to device names.
const deviceName = deviceIdToName[deviceId] || deviceId;
// eventData.data = event payload
//const sensorValue = parseInt(eventData.data);
const sensorValue = parseFloat(eventData.data);
// console.log('deviceName=' + deviceName + ' sensorValue=' + sensorValue);
if ($('#prog' + deviceId).length == 0) {
// Add a row
// let html = '<tr><td>' + deviceName + '</td><td><progress id="prog' + deviceId + '" value="0" max="100"></progress></td></tr>'; //original line of code
// let html = '<tr><td>' + deviceName + '</td><td>' + sensorValue + '</td><td><progress id="prog' + deviceId + '" value="0" max="110"></progress></td></tr>'; //works, but doens't update sensorValue
// let html = '<tr><td>' + deviceName + '</td><td><var>' + sensorValue + '</var></td><td><progress id="prog' + deviceId + '" value="0" max="110"></progress></td></tr>';
// let html = '<tr><td>' + deviceName + '</td><td><var id="sensUpd' +deviceId + '"</var></td><td><progress id="prog' + deviceId + '" value="0" max="110"></progress></td></tr>';
let html = '<tr><td>' + deviceName + '</td><td><span id="sensUpd' + deviceId + '"></span></td><td><progress id="prog' + deviceId + '" value="0" max="100"></progress></td></tr>';
$('#sensorTable > tbody').append(html);
}
$('#prog' + deviceId).val(sensorValue);
// $(deviceId).val(sensorValue);
$('#sensUpd' + deviceId).val(sensorValue);
}
I have some old HTML/Javascript that builds a table dynamically, adding new row for each device it sees with the given event name. When you get a new event, you scan the existing entries for the deviceID (formerly called coreID in the old days. This might help (you can hardwire the event name and connect button–I did that for Temperature in this version). Also I can’t seem to make the code indent stuff in the forum work right today–sorry.
<!DOCTYPE HTML>
<html>
<body>
<P>Event name:<input type="text" name="eventNameBox" id="evText" >
<br><br>
<table id="dataTable" width="500px" border="2">
<tr>
<td> Core ID </td>
<td> Data </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 eventName = document.getElementById('evText').value;
var accessToken = "<<magic number here>>";
var requestURL = "https://api.particle.io/v1/events/Temperature/?access_token=" + accessToken;
var eventSource = new EventSource(requestURL);
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 dt = document.getElementById("dataTable");
var rows = dt.rows.length;
var foundIt = false;
for(var i=0;i<rows;i++) {
var rowN = dt.rows[i];
if (false==foundIt && rowN.cells[0].innerHTML==parsedData.coreid) {
foundIt = true;
rowN.cells[1].innerHTML = parsedData.data;
rowN.cells[2].innerHTML = parsedData.published_at;
}
}
if (false == foundIt) {
var newRow = dt.insertRow(rows);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
cell1.innerHTML = parsedData.coreid;
cell2.innerHTML = parsedData.data;
cell3.innerHTML = parsedData.published_at;
}
}, false);
}
</script>
</body>
</html>