Help with BLE variable resistor example

[waltk]

Hi all,

I’ve been playing around with the example for arduino ble and am struggling to figure some things out.

The walkthrough here (http://evothings.com/arduino-ble-quick-walk-through/) references the section of code that recieves the info from the arduino and converts it to a 16 bit integer.

What I am having trouble with is that I would like to display the received values in text format below the line graph and potentially store the received values in an array, but I’m not sure what to reference when doing so.

Would I get this from app.drawLines or DataView(data).getUint16(0, true)? If anyone could point me in the right direction it would be greatly appreciated. I’ve have been trying a lot of things, but still can’t figure this out.

Below is the section of the walkthrough I was reading and the drawLines section from the js file.

“For receiving information from the Arduino, the application configures a notification handler to process information as it is received from the BLE communications channel by converting two bytes into a 16-bit integer to obtain the values between 0 and 1023 that was originally sent from the Arduino.

// Start reading notifications.
evothings.ble.enableNotification(
deviceHandle,
app.characteristicRead,
function(data)
{
app.drawLines([new DataView(data).getUint16(0, true)]);
},
function(errorCode)
{
console.log('enableNotification error: ' + errorCode);
});


With a bit of JavaScript and Canvas 2D code a buffer of data points (as they are collected) are plotted to the mobile display in real time. As the user rotates the potentiometer the graph updates to reflect the current analog value obtained from the Arduino.”

drawLines: function(dataArray)
{
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var dataPoints = app.dataPoints;


dataPoints.push(dataArray);
if (dataPoints.length > canvas.width)
{
dataPoints.splice(0, (dataPoints.length - canvas.width));
}

var magnitude = 1024;

function calcY(i)
{
return (i * canvas.height) / magnitude;

}

function drawLine(offset, color)
{
context.strokeStyle = color;
context.beginPath();
context.moveTo(0, calcY(dataPoints[dataPoints.length-1][offset]));
var x = 1;
for (var i = dataPoints.length - 2; i >= 0; i--)
{
var y = calcY(dataPoints[i][offset]);
context.lineTo(x, y);
x++;
}
context.stroke();

}

context.clearRect(0, 0, canvas.width, canvas.height);
drawLine(0, '#f00');


Thanks!

[Fredrik]

The received values are already stored in an array: app.dataPoints. You can use that.