Javascript SDK’s Widgets documentation!¶

How to use Widgets¶

Getting Started¶

This is documentation on Javascript SDK Widgets for http://sensorlab.io/

You can use these widgets as default ones along with Javascript SDK in your Javascript project.

Installation¶

Install with npm:

$ npm i --save https://github.com/sensorlabio/sensorlabio-javascript-sdk
$ npm i --save https://github.com/sensorlabio/sensorlabio-javascript-sdk-widgets

React example¶

Initialize inside your js code

import {SensorlabApi} from "sensorlabio-javascript-sdk";
import {SensorlabWidgets} from "sensorlabio-javascript-sdk-widgets";
let api = new SensorlabApi();
let widgets = new SensorlabWidgets(api);

Use with browsers¶

Download latest master release:

https://github.com/sensorlabio/sensorlabio-javascript-sdk-widgets/archive/master.zip

Unzip:

builds/index.min.js

builds/css/index.min.css

Use them inside your html code:

<link href="build/css/index.min.css" rel="stylesheet">
<script src="build/index.min.js"></script>

And inside your JS code:

<script type="text/javascript">
    var sdk = SensorlabSDK;
    var api = new sdk.SensorlabApi();
    var widgets = new SensorlabWidgets.SensorlabWidgets(api);
</script>

Widgets¶

Thermometer Widget¶

Code:

widgets.thermometer(dom_id, sensor_id):

First parameter is DOM ID in your html and second is Sensor ID to get data from.

Example:

<link href="build/css/index.min.css" rel="stylesheet">
<script src="build/index.min.js"></script>

<div id="ThermometerWidget">
</div>

<script type="text/javascript">
    var widgets = new SensorlabWidgets.SensorlabWidgets(api);
    widgets.thermometer('ThermometerWidget', '5b4359a204b4c425d80c3718'):
</script>

It will look like this:

Temperature Chart Widget¶

Code:

widgets.temperature_chart(dom_id, sensor_id):

First parameter is DOM ID in your html and second is Sensor ID to get data from.

Example:

<link href="build/css/index.min.css" rel="stylesheet">
<script src="build/index.min.js"></script>

<div id="TemperatureChartWidget">
</div>

<script type="text/javascript">
    var widgets = new SensorlabWidgets.SensorlabWidgets(api);
    widgets.temperature_chart('TemperatureChartWidget', '5b4359a204b4c425d80c3718'):
</script>

It will look like this:

Battery Charge Widget¶

Code:

widgets.battery_charge(dom_id, sensor_id):

First parameter is DOM ID in your html and second is Sensor ID to get data from.

Example:

<link href="build/css/index.min.css" rel="stylesheet">
<script src="build/index.min.js"></script>

<div id="BatteryChargeWidget">
</div>

<script type="text/javascript">
    var widgets = new SensorlabWidgets.SensorlabWidgets(api);
    widgets.battery_charge('BatteryChargeWidget', '5b4359a204b4c425d80c3718'):
</script>

It will look like this:

Battery Charge Chart Widget¶

Code:

widgets.battery_charge_chart(dom_id, sensor_id):

First parameter is DOM ID in your html and second is Sensor ID to get data from.

Example:

<link href="build/css/index.min.css" rel="stylesheet">
<script src="build/index.min.js"></script>

<div id="BatteryChargeChartWidget">
</div>

<script type="text/javascript">
    var widgets = new SensorlabWidgets.SensorlabWidgets(api);
    widgets.battery_charge_chart('BatteryChargeChartWidget', '5b4359a204b4c425d80c3718'):
</script>

It will look like this:

Battery Voltage Widget¶

Code:

widgets.battery_voltage(dom_id, sensor_id):

First parameter is DOM ID in your html and second is Sensor ID to get data from.

Example:

<link href="build/css/index.min.css" rel="stylesheet">
<script src="build/index.min.js"></script>

<div id="BatteryVoltageWidget">
</div>

<script type="text/javascript">
    var widgets = new SensorlabWidgets.SensorlabWidgets(api);
    widgets.battery_voltage('BatteryVoltageWidget', '5b4359a204b4c425d80c3718'):
</script>

It will look like this:

Battery Voltage Chart Widget¶

Code:

widgets.battery_voltage_chart(dom_id, sensor_id):

First parameter is DOM ID in your html and second is Sensor ID to get data from.

Example:

<link href="build/css/index.min.css" rel="stylesheet">
<script src="build/index.min.js"></script>

<div id="BatteryVoltageChartWidget">
</div>

<script type="text/javascript">
    var widgets = new SensorlabWidgets.SensorlabWidgets(api);
    widgets.battery_voltage_chart('BatteryVoltageChartWidget', '5b4359a204b4c425d80c3718'):
</script>

It will look like this:

Map Widget¶

Note

This widget uses Google Maps API. You must include this API in your html page.

Code:

widgets.map(dom_id, sensor_id):

First parameter is DOM ID in your html and second is Sensor ID to get data from.

Example:

<script src="https://maps.googleapis.com/maps/api/js?key=%YOUR_API_KEY%"></script>
<link href="build/css/index.min.css" rel="stylesheet">
<script src="build/index.min.js"></script>

<div id="MapWidget">
</div>

<script type="text/javascript">
    var widgets = new SensorlabWidgets.SensorlabWidgets(api);
    widgets.map('MapWidget', '5b4359a204b4c425d80c3718'):
</script>

It will look like this:

Specifications¶

Widgets classes¶

ThermometerWidget class¶

class ThermometerWidget(api, ws)¶

Arguments:	api – SensorlabApi ws – SensorlabWebsocket

ThermometerWidget.render¶: Render widget.

TemperatureChartWidget class¶

class TemperatureChartWidget(api, ws)¶

Arguments:	api – SensorlabApi ws – SensorlabWebsocket

TemperatureChartWidget.render¶: Render widget.

BatteryChargeWidget class¶

class BatteryChargeWidget(api, ws)¶

Arguments:	api – SensorlabApi ws – SensorlabWebsocket

BatteryChargeWidget.render¶: Render widget.

BatteryChargeChartWidget class¶

class BatteryChargeChartWidget(api, ws)¶

Arguments:	api – SensorlabApi ws – SensorlabWebsocket

BatteryChargeChartWidget.render¶: Render widget.

BatteryVoltageWidget class¶

class BatteryVoltageWidget(api, ws)¶

Arguments:	api – SensorlabApi ws – SensorlabWebsocket

BatteryVoltageWidget.render¶: Render widget.

BatteryVoltageChartWidget class¶

class BatteryVoltageChartWidget(api, ws)¶

Arguments:	api – SensorlabApi ws – SensorlabWebsocket

BatteryVoltageChartWidget.render¶: Render widget.

MapWidget class¶

class MapWidget(api, ws)¶

Arguments:	api – SensorlabApi ws – SensorlabWebsocket

MapWidget.render¶: Render widget.

class Widgets(api)¶

Arguments:	api – SensorlabApi

Widgets.thermometer¶

type: ThermometerWidget

Thermometer widget.

Widgets.temperature_chart¶

type: TemperatureChartWidget

Temperature chart widget.

Widgets.battery_charge¶

type: BatteryChargeWidget

Battery charge widget.

Widgets.battery_charge_chart¶

type: BatteryChargeChartWidget

Battery charge chart widget.

Widgets.battery_voltage¶

type: BatteryVoltageWidget

Battery voltage widget.

Widgets.battery_voltage_chart¶

type: BatteryVoltageChartWidget

Battery voltagew chart widget.

Widgets.map¶

type: MapWidget

Map widgets.