Hi all,
I’m new to Javascript and Plotly so apologies if this is a schoolboy error.
I have a webpage requesting 5 floats from a Bluetooth Low Energy device (Arduino Nano BLE 33 Sense), which are received. I then proceed to parse the floats, update the 5 data arrays and call Plotly.react. The floats are correctly parsed and the buffers updated (verified on the console.log). I have incremented the datarevision property in the layout information (which applies to all 5 graphs) but only graphs 1 and 3 are updated.
The browser is Chrome (for BLE support), in case that makes a difference. The URL is the local file:/// path. Can someone please advise what I’m doing wrong?
Jason
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Temperature monitor</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<button id="connectBtn">Connect</button>
<div id="temp0"></div>
<div id="temp1"></div>
<div id="temp2"></div>
<div id="temp3"></div>
<div id="temp4"></div>
<div id="temp5"></div>
<script>
const connectBtn = document.getElementById("connectBtn");
const MAX_BUFFER_LENGTH = 64;
const temp1 = [];
const temp2 = [];
const temp3 = [];
const temp4 = [];
const temp5 = [];
var temp1Data =
{
y: temp1,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
};
var temp2Data =
[{
y: temp2,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
}];
var temp3Data =
{
y: temp3,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
};
var temp4Data =
[{
y: temp4,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
}];
var temp5Data =
[{
y: temp5,
mode: "lines",
type: "scatter",
name: "Temp",
width: 1,
line: {width: 1}
}];
var allTempLayout =
{
plot_bgcolor: '#111111',
paper_bgcolor: '#111111',
margin: {l:8,r:8,b:18,t:18},
showlegend: false,
datarevision: 0,
yaxis:
{
'range': [0,120],
'showticklabels':false
},
xaxis:
{
'range': [0,64],
'showticklabels':false,
'autorange': false,
'showgrid': true,
'zeroline': true,
tickfont: {size: 8}
}
}
async function connectSensors()
{
const device = await navigator.bluetooth.requestDevice
(
{
optionalServices:
[
'6fbe1da7-0000-44de-92c4-bb6e04fb0212',
'6fbe1da7-4031-44de-92c4-bb6e04fb0212'
],
acceptAllDevices: true,
}
);
let deviceName = device.gatt.device.name;
const server = await device.gatt.connect();
console.log("Connected to " + deviceName);
const baseService = await server.getPrimaryService('6fbe1da7-0000-44de-92c4-bb6e04fb0212');
console.log("Base service read");
const allTempsCharacteristic = await baseService.getCharacteristic("6fbe1da7-4031-44de-92c4-bb6e04fb0212");
console.log("AllTemps characterisitc read");
setInterval(async function() {
const tempValues = await allTempsCharacteristic.readValue()
.then(tempValues => {
if(temp1.length === MAX_BUFFER_LENGTH)
{
temp1.shift();
temp2.shift();
temp3.shift();
temp4.shift();
temp5.shift();
}
temp1.push(tempValues.getFloat32(0, true));
temp2.push(tempValues.getFloat32(4, true));
temp3.push(tempValues.getFloat32(8, true));
temp4.push(tempValues.getFloat32(12, true));
temp5.push(tempValues.getFloat32(16, true));
allTempLayout.datarevision++;
Plotly.react("temp1", [temp1Data], allTempLayout);
Plotly.react("temp2", [temp2Data], allTempLayout);
Plotly.react("temp3", [temp3Data], allTempLayout);
Plotly.react("temp4", [temp4Data], allTempLayout);
Plotly.react("temp5", [temp5Data], allTempLayout);
});
}
, 500);
}
connectBtn.addEventListener ( "click", async () => {
try { connectSensors(); }
catch (err) {
console.log(err);
alert("An error occured while fetching device details");
}
});
Plotly.newPlot("temp1", [temp1Data], allTempLayout);
Plotly.newPlot("temp2", [temp2Data], allTempLayout);
Plotly.newPlot("temp3", [temp3Data], allTempLayout);
Plotly.newPlot("temp4", [temp4Data], allTempLayout);
Plotly.newPlot("temp5", [temp5Data], allTempLayout);
</script>
</body>
</html>