freeboard-leaflet-realtime
Version:
Freeboard plugin for real time Leaflet web maps
654 lines (570 loc) • 21.1 kB
JavaScript
// ┌────────────────────────────────────────────────────────────────────┐ \\
// │ F R E E B O A R D │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Copyright © 2013 Jim Heising (https://github.com/jheising) │ \\
// │ Copyright © 2013 Bug Labs, Inc. (http://buglabs.net) │ \\
// ├────────────────────────────────────────────────────────────────────┤ \\
// │ Licensed under the MIT license. │ \\
// └────────────────────────────────────────────────────────────────────┘ \\
(function () {
var jsonDatasource = function (settings, updateCallback) {
var self = this;
var updateTimer = null;
var currentSettings = settings;
var errorStage = 0; // 0 = try standard request
// 1 = try JSONP
// 2 = try thingproxy.freeboard.io
var lockErrorStage = false;
function updateRefresh(refreshTime) {
if (updateTimer) {
clearInterval(updateTimer);
}
updateTimer = setInterval(function () {
self.updateNow();
}, refreshTime);
}
updateRefresh(currentSettings.refresh * 1000);
this.updateNow = function () {
if ((errorStage > 1 && !currentSettings.use_thingproxy) || errorStage > 2) // We've tried everything, let's quit
{
return; // TODO: Report an error
}
var requestURL = currentSettings.url;
if (errorStage == 2 && currentSettings.use_thingproxy) {
requestURL = (location.protocol == "https:" ? "https:" : "http:") + "//thingproxy.freeboard.io/fetch/" + encodeURI(currentSettings.url);
}
var body = currentSettings.body;
// Can the body be converted to JSON?
if (body) {
try {
body = JSON.parse(body);
}
catch (e) {
}
}
$.ajax({
url: requestURL,
dataType: (errorStage == 1) ? "JSONP" : "JSON",
type: currentSettings.method || "GET",
data: body,
beforeSend: function (xhr) {
try {
_.each(currentSettings.headers, function (header) {
var name = header.name;
var value = header.value;
if (!_.isUndefined(name) && !_.isUndefined(value)) {
xhr.setRequestHeader(name, value);
}
});
}
catch (e) {
}
},
success: function (data) {
lockErrorStage = true;
updateCallback(data);
},
error: function (xhr, status, error) {
if (!lockErrorStage) {
// TODO: Figure out a way to intercept CORS errors only. The error message for CORS errors seems to be a standard 404.
errorStage++;
self.updateNow();
}
}
});
}
this.onDispose = function () {
clearInterval(updateTimer);
updateTimer = null;
}
this.onSettingsChanged = function (newSettings) {
lockErrorStage = false;
errorStage = 0;
currentSettings = newSettings;
updateRefresh(currentSettings.refresh * 1000);
self.updateNow();
}
};
freeboard.loadDatasourcePlugin({
type_name: "JSON",
settings: [
{
name: "url",
display_name: "URL",
type: "text"
},
{
name: "use_thingproxy",
display_name: "Try thingproxy",
description: 'A direct JSON connection will be tried first, if that fails, a JSONP connection will be tried. If that fails, you can use thingproxy, which can solve many connection problems to APIs. <a href="https://github.com/Freeboard/thingproxy" target="_blank">More information</a>.',
type: "boolean",
default_value: true
},
{
name: "refresh",
display_name: "Refresh Every",
type: "number",
suffix: "seconds",
default_value: 5
},
{
name: "method",
display_name: "Method",
type: "option",
options: [
{
name: "GET",
value: "GET"
},
{
name: "POST",
value: "POST"
},
{
name: "PUT",
value: "PUT"
},
{
name: "DELETE",
value: "DELETE"
}
]
},
{
name: "body",
display_name: "Body",
type: "text",
description: "The body of the request. Normally only used if method is POST"
},
{
name: "headers",
display_name: "Headers",
type: "array",
settings: [
{
name: "name",
display_name: "Name",
type: "text"
},
{
name: "value",
display_name: "Value",
type: "text"
}
]
}
],
newInstance: function (settings, newInstanceCallback, updateCallback) {
newInstanceCallback(new jsonDatasource(settings, updateCallback));
}
});
var openWeatherMapDatasource = function (settings, updateCallback) {
var self = this;
var updateTimer = null;
var currentSettings = settings;
function updateRefresh(refreshTime) {
if (updateTimer) {
clearInterval(updateTimer);
}
updateTimer = setInterval(function () {
self.updateNow();
}, refreshTime);
}
function toTitleCase(str) {
return str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
updateRefresh(currentSettings.refresh * 1000);
this.updateNow = function () {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?APPID="+currentSettings.api_key+"&q=" + encodeURIComponent(currentSettings.location) + "&units=" + currentSettings.units,
dataType: "JSONP",
success: function (data) {
// Rejigger our data into something easier to understand
var newData = {
place_name: data.name,
sunrise: (new Date(data.sys.sunrise * 1000)).toLocaleTimeString(),
sunset: (new Date(data.sys.sunset * 1000)).toLocaleTimeString(),
conditions: toTitleCase(data.weather[0].description),
current_temp: data.main.temp,
high_temp: data.main.temp_max,
low_temp: data.main.temp_min,
pressure: data.main.pressure,
humidity: data.main.humidity,
wind_speed: data.wind.speed,
wind_direction: data.wind.deg
};
updateCallback(newData);
},
error: function (xhr, status, error) {
}
});
}
this.onDispose = function () {
clearInterval(updateTimer);
updateTimer = null;
}
this.onSettingsChanged = function (newSettings) {
currentSettings = newSettings;
self.updateNow();
updateRefresh(currentSettings.refresh * 1000);
}
};
freeboard.loadDatasourcePlugin({
type_name: "openweathermap",
display_name: "Open Weather Map API",
settings: [
{
name: "api_key",
display_name: "API Key",
type: "text",
description: "Your personal API Key from Open Weather Map"
},
{
name: "location",
display_name: "Location",
type: "text",
description: "Example: London, UK"
},
{
name: "units",
display_name: "Units",
type: "option",
default: "imperial",
options: [
{
name: "Imperial",
value: "imperial"
},
{
name: "Metric",
value: "metric"
}
]
},
{
name: "refresh",
display_name: "Refresh Every",
type: "number",
suffix: "seconds",
default_value: 5
}
],
newInstance: function (settings, newInstanceCallback, updateCallback) {
newInstanceCallback(new openWeatherMapDatasource(settings, updateCallback));
}
});
var dweetioDatasource = function (settings, updateCallback) {
var self = this;
var currentSettings = settings;
function onNewDweet(dweet) {
updateCallback(dweet);
}
this.updateNow = function () {
dweetio.get_latest_dweet_for(currentSettings.thing_id, function (err, dweet) {
if (err) {
//onNewDweet({});
}
else {
onNewDweet(dweet[0].content);
}
});
}
this.onDispose = function () {
}
this.onSettingsChanged = function (newSettings) {
dweetio.stop_listening_for(currentSettings.thing_id);
currentSettings = newSettings;
dweetio.listen_for(currentSettings.thing_id, function (dweet) {
onNewDweet(dweet.content);
});
}
self.onSettingsChanged(settings);
};
freeboard.loadDatasourcePlugin({
"type_name": "dweet_io",
"display_name": "Dweet.io",
"external_scripts": [
"http://dweet.io/client/dweet.io.min.js"
],
"settings": [
{
name: "thing_id",
display_name: "Thing Name",
"description": "Example: salty-dog-1",
type: "text"
}
],
newInstance: function (settings, newInstanceCallback, updateCallback) {
newInstanceCallback(new dweetioDatasource(settings, updateCallback));
}
});
var playbackDatasource = function (settings, updateCallback) {
var self = this;
var currentSettings = settings;
var currentDataset = [];
var currentIndex = 0;
var currentTimeout;
function moveNext() {
if (currentDataset.length > 0) {
if (currentIndex < currentDataset.length) {
updateCallback(currentDataset[currentIndex]);
currentIndex++;
}
if (currentIndex >= currentDataset.length && currentSettings.loop) {
currentIndex = 0;
}
if (currentIndex < currentDataset.length) {
currentTimeout = setTimeout(moveNext, currentSettings.refresh * 1000);
}
}
else {
updateCallback({});
}
}
function stopTimeout() {
currentDataset = [];
currentIndex = 0;
if (currentTimeout) {
clearTimeout(currentTimeout);
currentTimeout = null;
}
}
this.updateNow = function () {
stopTimeout();
$.ajax({
url: currentSettings.datafile,
dataType: (currentSettings.is_jsonp) ? "JSONP" : "JSON",
success: function (data) {
if (_.isArray(data)) {
currentDataset = data;
}
else {
currentDataset = [];
}
currentIndex = 0;
moveNext();
},
error: function (xhr, status, error) {
}
});
}
this.onDispose = function () {
stopTimeout();
}
this.onSettingsChanged = function (newSettings) {
currentSettings = newSettings;
self.updateNow();
}
};
freeboard.loadDatasourcePlugin({
"type_name": "playback",
"display_name": "Playback",
"settings": [
{
"name": "datafile",
"display_name": "Data File URL",
"type": "text",
"description": "A link to a JSON array of data."
},
{
name: "is_jsonp",
display_name: "Is JSONP",
type: "boolean"
},
{
"name": "loop",
"display_name": "Loop",
"type": "boolean",
"description": "Rewind and loop when finished"
},
{
"name": "refresh",
"display_name": "Refresh Every",
"type": "number",
"suffix": "seconds",
"default_value": 5
}
],
newInstance: function (settings, newInstanceCallback, updateCallback) {
newInstanceCallback(new playbackDatasource(settings, updateCallback));
}
});
var clockDatasource = function (settings, updateCallback) {
var self = this;
var currentSettings = settings;
var timer;
function stopTimer() {
if (timer) {
clearTimeout(timer);
timer = null;
}
}
function updateTimer() {
stopTimer();
timer = setInterval(self.updateNow, currentSettings.refresh * 1000);
}
this.updateNow = function () {
var date = new Date();
var data = {
numeric_value: date.getTime(),
full_string_value: date.toLocaleString(),
date_string_value: date.toLocaleDateString(),
time_string_value: date.toLocaleTimeString(),
date_object: date
};
updateCallback(data);
}
this.onDispose = function () {
stopTimer();
}
this.onSettingsChanged = function (newSettings) {
currentSettings = newSettings;
updateTimer();
}
updateTimer();
};
freeboard.loadDatasourcePlugin({
"type_name": "clock",
"display_name": "Clock",
"settings": [
{
"name": "refresh",
"display_name": "Refresh Every",
"type": "number",
"suffix": "seconds",
"default_value": 1
}
],
newInstance: function (settings, newInstanceCallback, updateCallback) {
newInstanceCallback(new clockDatasource(settings, updateCallback));
}
});
freeboard.loadDatasourcePlugin({
// **type_name** (required) : A unique name for this plugin. This name should be as unique as possible to avoid collisions with other plugins, and should follow naming conventions for javascript variable and function declarations.
"type_name" : "meshblu",
// **display_name** : The pretty name that will be used for display purposes for this plugin. If the name is not defined, type_name will be used instead.
"display_name": "Octoblu",
// **description** : A description of the plugin. This description will be displayed when the plugin is selected or within search results (in the future). The description may contain HTML if needed.
"description" : "app.octoblu.com",
// **external_scripts** : Any external scripts that should be loaded before the plugin instance is created.
"external_scripts" : [
"http://meshblu.octoblu.com/js/meshblu.js"
],
// **settings** : An array of settings that will be displayed for this plugin when the user adds it.
"settings" : [
{
// **name** (required) : The name of the setting. This value will be used in your code to retrieve the value specified by the user. This should follow naming conventions for javascript variable and function declarations.
"name" : "uuid",
// **display_name** : The pretty name that will be shown to the user when they adjust this setting.
"display_name" : "UUID",
// **type** (required) : The type of input expected for this setting. "text" will display a single text box input. Examples of other types will follow in this documentation.
"type" : "text",
// **default_value** : A default value for this setting.
"default_value": "device uuid",
// **description** : Text that will be displayed below the setting to give the user any extra information.
"description" : "your device UUID",
// **required** : Set to true if this setting is required for the datasource to be created.
"required" : true
},
{
// **name** (required) : The name of the setting. This value will be used in your code to retrieve the value specified by the user. This should follow naming conventions for javascript variable and function declarations.
"name" : "token",
// **display_name** : The pretty name that will be shown to the user when they adjust this setting.
"display_name" : "Token",
// **type** (required) : The type of input expected for this setting. "text" will display a single text box input. Examples of other types will follow in this documentation.
"type" : "text",
// **default_value** : A default value for this setting.
"default_value": "device token",
// **description** : Text that will be displayed below the setting to give the user any extra information.
"description" : "your device TOKEN",
// **required** : Set to true if this setting is required for the datasource to be created.
"required" : true
},
{
// **name** (required) : The name of the setting. This value will be used in your code to retrieve the value specified by the user. This should follow naming conventions for javascript variable and function declarations.
"name" : "server",
// **display_name** : The pretty name that will be shown to the user when they adjust this setting.
"display_name" : "Server",
// **type** (required) : The type of input expected for this setting. "text" will display a single text box input. Examples of other types will follow in this documentation.
"type" : "text",
// **default_value** : A default value for this setting.
"default_value": "meshblu.octoblu.com",
// **description** : Text that will be displayed below the setting to give the user any extra information.
"description" : "your server",
// **required** : Set to true if this setting is required for the datasource to be created.
"required" : true
},
{
// **name** (required) : The name of the setting. This value will be used in your code to retrieve the value specified by the user. This should follow naming conventions for javascript variable and function declarations.
"name" : "port",
// **display_name** : The pretty name that will be shown to the user when they adjust this setting.
"display_name" : "Port",
// **type** (required) : The type of input expected for this setting. "text" will display a single text box input. Examples of other types will follow in this documentation.
"type" : "number",
// **default_value** : A default value for this setting.
"default_value": 80,
// **description** : Text that will be displayed below the setting to give the user any extra information.
"description" : "server port",
// **required** : Set to true if this setting is required for the datasource to be created.
"required" : true
}
],
// **newInstance(settings, newInstanceCallback, updateCallback)** (required) : A function that will be called when a new instance of this plugin is requested.
// * **settings** : A javascript object with the initial settings set by the user. The names of the properties in the object will correspond to the setting names defined above.
// * **newInstanceCallback** : A callback function that you'll call when the new instance of the plugin is ready. This function expects a single argument, which is the new instance of your plugin object.
// * **updateCallback** : A callback function that you'll call if and when your datasource has an update for freeboard to recalculate. This function expects a single parameter which is a javascript object with the new, updated data. You should hold on to this reference and call it when needed.
newInstance : function(settings, newInstanceCallback, updateCallback)
{
// myDatasourcePlugin is defined below.
newInstanceCallback(new meshbluSource(settings, updateCallback));
}
});
// ### Datasource Implementation
//
// -------------------
// Here we implement the actual datasource plugin. We pass in the settings and updateCallback.
var meshbluSource = function(settings, updateCallback)
{
// Always a good idea...
var self = this;
// Good idea to create a variable to hold on to our settings, because they might change in the future. See below.
var currentSettings = settings;
/* This is some function where I'll get my data from somewhere */
function getData()
{
var conn = skynet.createConnection({
"uuid": currentSettings.uuid,
"token": currentSettings.token,
"server": currentSettings.server,
"port": currentSettings.port
});
conn.on('ready', function(data){
conn.on('message', function(message){
var newData = message;
updateCallback(newData);
});
});
}
// **onSettingsChanged(newSettings)** (required) : A public function we must implement that will be called when a user makes a change to the settings.
self.onSettingsChanged = function(newSettings)
{
// Here we update our current settings with the variable that is passed in.
currentSettings = newSettings;
}
// **updateNow()** (required) : A public function we must implement that will be called when the user wants to manually refresh the datasource
self.updateNow = function()
{
// Most likely I'll just call getData() here.
getData();
}
// **onDispose()** (required) : A public function we must implement that will be called when this instance of this plugin is no longer needed. Do anything you need to cleanup after yourself here.
self.onDispose = function()
{
//conn.close();
}
// Here we call createRefreshTimer with our current settings, to kick things off, initially. Notice how we make use of one of the user defined settings that we setup earlier.
// createRefreshTimer(currentSettings.refresh_time);
}
}());