Welcome to VORTO IOT-Device-modeler, This application will facilitate to you to diagrammatically plan IOT models for your requirements.
Project name : VORTO Iot-Device modeler
Project details : Google summer of code 2016 project under the Eclipse Foundation.
Implemented by : Tharindu Madushanka Peiris (Linkedin : )
Mentored by :
Opensource project. Source code available on :github
System implementation minimized the requested system specifications and it's a low weight portable system. This system doesn't request any pre installation. It will more compatible with servers but you can run it with your personal computers. Download or fork the github repository and open index.html file using your modern browser.
Note : In the application deployment request a chrome/firfox or any other modern web browser with HTML5 compatibility.
github repository : github
System configuration file : resources/device_mapping.js
var device_catlog = [
{device_category:1, device:"Accelerometer", image:"Accelerometer.png",inputs:0,outputs:1},
{device_category:1, device:"Barometer", image:"barometer.png",inputs:1,outputs:2},
......
......
Input parameter represent the index of input array including number of inputs. Output parameter represent the index of output array including number of outputs.
var device_category_arr = [
{device_category:1, category_name:"Measuring equipments"},
{device_category:2, category_name:"Lighting Equipment"}
......
......
var inputs_ports =[
{inputs:[] },
{inputs:['in'] },
{inputs:['in','in1'] },
......
......
var outputs_ports =[
{outputs:[] },
{outputs:['out'] },
{outputs:['out','out1'] },
......
......
To add new device, you had to update the configuration file including a new element to the "device_catlog" array and add icon image (84px*84px)to the resource folder.
To remove a device, you had to update the configuration file excluding that array element and remove the icon image (84px*84px) from the resource folder.
following function generate the pallette view. ( /jointjs/palate.js )
function palate_devices(category,i) {
var device_cat = document.getElementById("device_cat"+category);
var nw_elmnt = document.createElement('div');
nw_elmnt.setAttribute("class", "col-lg-3 col-md-4 col-xs-6");
var device_img = document.createElement('img');
device_img.setAttribute("class","device_img");
device_img.setAttribute("src","./resources/"+device_catlog[i].image);
device_img.setAttribute("title",device_catlog[i].device);
device_img.setAttribute("value",i);
nw_elmnt.appendChild(device_img);
device_cat.appendChild(nw_elmnt);
}
following function generate the pallette accordian. ( /jointjs/palate.js )
function palate_catogories (category_name,i){
var side_menu = document.getElementById("side-menu");
var li_elmnt = document.createElement('li');
var a_elmnt = document.createElement('a');
a_elmnt.setAttribute("href", "#");
var i_elmnt = document.createElement('i');
i_elmnt.setAttribute("class", "glyphicon glyphicon-hdd");
var t = document.createTextNode(" "+category_name);
var span_elmnt = document.createElement('span');
span_elmnt.setAttribute("class", "fa arrow");
var ul_elmnt = document.createElement('ul');
ul_elmnt.setAttribute("class", "nav nav-second-level");
var div_elmnt = document.createElement('div');
div_elmnt.setAttribute("id","device_cat"+(i+1));
side_menu.appendChild(li_elmnt);
li_elmnt.appendChild(a_elmnt);
a_elmnt.appendChild(i_elmnt);
a_elmnt.appendChild(t);
a_elmnt.appendChild(span_elmnt);
li_elmnt.appendChild(ul_elmnt);
ul_elmnt.appendChild(div_elmnt);
}
Folowing functions enable the drag&drop and click actions for the canvas. (/index.html)
$(".device_img").draggable({
helper : 'clone',
stop:function(event, ui){
click_Icon(this.src,this.title,this.value);
}
});
$(".device_img").click(function(event, ui){
click_Icon(this.src,this.title,this.value);
});
Create new IOT device in canvas. ( /devices/devices.js)
function create_deviceNew(X,Y,W,H,inport,outport,txt,img,graph) {
var indx,numberOfInputs,numberOfOutputs;
for (var i = 0; i < device_catlog.length; i++) {
if(device_catlog[i].device == txt){
indx = i;
break;
}
}
numberOfInputs = device_catlog[indx].inputs;
numberOfOutputs = device_catlog[indx].outputs;
var el3 = new joint.shapes.html.Element({
position: { x: X, y: Y },
size: { width: W, height: H },
inPorts: inputs_ports[numberOfInputs].inputs,
outPorts: outputs_ports[numberOfOutputs].outputs,
textarea: txt,
img_src : img
});
graph.addCell(el3);
}
This function for save your diagram. ( /jointjs/export.js)
function export_graph(a){
var myWindow = window.open();
myWindow.document.getElementById("jsonExport")
.innerHTML = JSON.stringify(a.toJSON(), undefined, 2);
}
Following function export the metadata diagam.
function export_sementic(a) {
var myWindow = window.open();
var exp_grp = a.toJSON();
exp_grp = JSON.parse(JSON.stringify(exp_grp).split('"textarea":').join('"node":'));
for (var i = 0; i < exp_grp.cells.length; i++) {
delete exp_grp.cells[i].angle;
delete exp_grp.cells[i].position;
delete exp_grp.cells[i].size;
delete exp_grp.cells[i].img_src;
delete exp_grp.cells[i].z;
delete exp_grp.cells[i].attrs;
delete exp_grp.cells[i].type;
delete exp_grp.cells[i].embeds;
}
myWindow.document.getElementById("jsonExport").innerHTML = JSON.stringify(exp_grp, undefined, 2);
}
Following function import diagam to the canvas.
function import_graph(graph,result) {
graph.clear();
graph.fromJSON(JSON.parse(result));
}