LTE Beacon: Estimote IDE Data Preview

This article explains how to use the Data Preview interface. 

What’s ahead (aka Table of Contents)

What are data Preview Apps?

Data Preview Apps are simple apps that let you visualize data incoming from your LTE Beacons via BLE in real-time. By default, you can choose between two ready-made apps in the IDE: Line Chart and Table. 

This is what they look like:


How to use Data Preview

To get your app going, you’ll need to:

  • connect your device via Web Bluetooth
  • choose the Data Preview app you want to use  

    Note: Data Preview uses data carried over BLE. This means that you won’t be able to see any data in your app, unless your device is connected to the IDE via Web Bluetooth. If you’re new to our Web IDE, check out this tutorial.

Generating Data for Data Preview

To generate your data, use the preview() function in your Micro-app code:

timers.repeat('500ms', () => {
 preview({ x: sensors.imu.get().x, y: sensors.imu.get().y });
});

The above example will generate gyroscope rotation data around the x and y axes and feed it to your Data Preview. 

Creating custom Data Preview Apps

As an alternative to using our default apps, you can create your own using the Estimote IDE. To do so, pick Custom Preview App in the Data Preview Mode selection window. A new IDE tab will appear next to the Micro-app Code tab. 

Styling your App

The Custom Preview tab allows you to style the Data Preview using standard CSS. Here’s an example:

setStyle(`
     body { 
          background: goldenrod;
          margin: auto;
     }
`);

Exported Function

You’ll need to export a rendering function with the following singature:

function (data: Array<PreviewData>, mostRecent: PreviewData): Promise<any>

Here’s what it looks like in action:

module.exports = async function (_, mostRecent) {
	document.body.innerHTML = `
	<div class="container">
		${mostRecent.data.x}
	</div>
	`;
};

The exported function is executed every time the IDE receives data from the Beacon using the preview() function.

Here’s a breakdown of the structure of the data:

PreviewData

{
  data: PlainObject // formatted as a flat object
  timestamp: Date , // timestamp indicating when the data was received
  ms:  Number, // JS timestamp
}

Available Libraries

Data Preview uses two libraries:

  • Two.js (Available as Two global variable)
  • d3.js (Available as d3 global variable)

Additional requirements

To use Data Preview, make sure that your LTE Beacon is running firmware version 0.1.10 or newer.