Permalink
Browse files

Make BerryNet dashboard to be based on official Freeboard.

Signed-off-by: Bofu Chen (bafu) <bafuchen@gmail.com>
  • Loading branch information...
bafu committed Dec 7, 2018
1 parent a280ade commit fee3c799380e97941d5ebd52aeff180d5676a696
@@ -0,0 +1,71 @@
{
"version": 1,
"allow_edit": true,
"plugins": [],
"panes": [
{
"title": "Camera Snapshot",
"width": 1,
"row": {
"2": 1,
"3": 1,
"4": 1
},
"col": {
"2": 2,
"3": 1,
"4": 3
},
"col_width": 1,
"widgets": [
{
"type": "html",
"settings": {
"html": "imgstr = datasources[\"Detection Result\"][\"msg\"][\"bytes\"]\ns = \"<img src=\\\"data:image/jpeg;base64,\" + imgstr + \"\\\" width=100% height=100%>\"\nreturn s",
"height": 4
}
}
]
},
{
"title": "Inference Result",
"width": 1,
"row": {
"2": 1,
"3": 1
},
"col": {
"2": 1,
"3": 2
},
"col_width": 1,
"widgets": [
{
"type": "html",
"settings": {
"html": "s = datasources[\"Detection Result\"][\"msg\"][\"annotations\"].map(function(r) {\n return (r[\"label\"] + \": \" + r[\"confidence\"] + \"<br />\")\n}).join().replace(/,/g, \"\")\nconsole.log(s)\nreturn s\n",
"height": 4
}
}
]
}
],
"datasources": [
{
"name": "Detection Result",
"type": "paho_mqtt",
"settings": {
"server": "localhost",
"port": 3000,
"use_ssl": false,
"client_id": "freeboard_darknetres",
"username": "",
"password": "",
"topic": "berrynet/engine/darknet/result",
"json_data": true,
"name": "Detection Result"
}
}
],
"columns": 3
}
@@ -0,0 +1,28 @@
diff --git a/index.html b/index.html
index b5877e9..196aaba 100755
--- a/index.html
+++ b/index.html
@@ -8,9 +8,12 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content = "width = device-width, initial-scale = 1, user-scalable = no" />
<link href="css/freeboard.min.css" rel="stylesheet" />
+ <link href="css/berrynet.css" rel="stylesheet" />
<script src="js/freeboard.thirdparty.min.js"></script>
<script type="text/javascript">
head.js("js/freeboard_plugins.min.js",
+ "plugins/thirdparty/ibm.iotfoundation.plugin.js",
+ "plugins/thirdparty/paho.mqtt.plugin.js",
// *** Load more plugins here ***
function(){
$(function()
@@ -42,7 +45,9 @@
<div id="admin-bar">
<div id="admin-menu">
<div id="board-tools">
- <h1 id="board-logo" class="title bordered">freeboard</h1>
+ <div>
+ <img src="img/berrynet-logo.png" width="50%" height="50%">
+ </div>
<div id="board-actions">
<ul class="board-toolbar vertical">
<li data-bind="click: loadDashboardFromLocalFile"><i id="full-screen-icon" class="icon-folder-open icon-white"></i><label id="full-screen">Load Freeboard</label></li>
@@ -0,0 +1,25 @@
/* BerryNet Style Guideline v1.0
*
* https://github.com/DT42/BerryNet/files/2651722/Berrynet_color_palette_20181014.pdf
*
* Primary color palette
*
* deep red: #8c3837
* pink red: #c55754
* white: #ffffff
*
* Secondary color palette
*
* deep blue: #19242c
* blue: #23435e
* light blue: #aaaaaa
* light white: #fafae5
*/

#admin-bar {
background-color: #f3f7f4;
}

#datasources h2 {
color: #0f254b;
}
Binary file not shown.
@@ -0,0 +1,127 @@
// # A Freeboard Plugin for IBM's IoT Foundation service; https://internetofthings.ibmcloud.com/

(function()
{
// ### Datasource Definition
//
// -------------------
freeboard.loadDatasourcePlugin({
"type_name" : "ibm_iotf",
"display_name": "IBM IoT Foundation",
"description" : "Receive data from your devices in IBM IoT Foundation.",
"external_scripts" : [
"<full address of the paho mqtt javascript client>"
],
"settings" : [
{
"name" : "org_id",
"display_name" : "Organisation",
"type" : "text",
"description" : "Your IoT Foundation organisation.",
"required" : true
},
{
"name" : "device_id",
"display_name": "Device",
"type" : "text",
"description" : "The device id to read data from.\nIf left empty data will be read for all devices in your organisation.",
"required" : false
},
{
"name" : "api_key",
"display_name": "API Key",
"description" : "An IoT Foundation API key for your organisation",
"type" : "text",
"required" : true
},
{
"name" : "api_auth_token",
"display_name": "API Auth Token",
"description" : "The Auth Token to match the API key",
"type" : "text",
"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)
{
newInstanceCallback(new iotfDatasourcePlugin(settings, updateCallback));
}
});


// ### Datasource Implementation
//
// -------------------
var iotfDatasourcePlugin = function(settings, updateCallback)
{
var self = this;
var data = {};

var currentSettings = settings;

function onConnect() {
console.log("Connected");
var topic;
if (currentSettings.device_id === undefined) {
topic = 'iot-2/type/+/id/+/evt/+/fmt/json';
} else {
topic = 'iot-2/type/+/id/' + currentSettings.device_id + '/evt/+/fmt/json';
}
console.log(topic);
client.subscribe(topic);
};

function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0)
console.log("onConnectionLost:"+responseObject.errorMessage);
};

function onMessageArrived(message) {
var device = message.destinationName.split('/')[4];
var msg = JSON.parse(message.payloadString);
data[device] = msg;
updateCallback(data);
};

// **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)
{
client.disconnect();
data = {};
currentSettings = newSettings;
client.connect({onSuccess:onConnect,
userName: currentSettings.api_key,
password: currentSettings.api_auth_token,
useSSL: true});
}

// **updateNow()** (required) : A public function we must implement that will be called when the user wants to manually refresh the datasource
self.updateNow = function()
{
// Don't need to do anything here, can't pull an update from MQTT.
}

// **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()
{
if (client.isConnected()) {
client.disconnect();
}
client = {};
}

console.log((new Date().getTime()).toString());
var client = new Paho.MQTT.Client(currentSettings.org_id + '.messaging.internetofthings.ibmcloud.com',
8883, currentSettings.api_key + (new Date().getTime()).toString());
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
client.connect({onSuccess:onConnect,
userName: currentSettings.api_key,
password: currentSettings.api_auth_token,
useSSL: true});
}
}());
Oops, something went wrong.

0 comments on commit fee3c79

Please sign in to comment.