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:
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¶
TemperatureChartWidget class¶
BatteryChargeWidget class¶
BatteryChargeChartWidget class¶
BatteryVoltageWidget class¶
BatteryVoltageChartWidget class¶
-
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.