<!doctype html>
<html>
<head>
<title>HTML Overlay</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.js"></script>
<style type="text/css">
#network {
width: 600px;
height: 600px;
border: 1px solid lightgray;
}
p {
max-width: 600px;
}
h4 {
margin-bottom: 3px;
}
.overlay {
position: absolute;
pointer-events: none;
}
#html2 {
font-family: sans-serif;
color: #cccccc;
background-color: #0000aa;
}
#html2 img {
width: 100px
}
</style>
</head>
<body>
<div id="network"></div>
<div id='html2' draggable='true' class='overlay'>
<table><tr><td>
<img src="http://www.rd.com/wp-content/uploads/sites/2/2016/02/03-train-cat-come-on-command.jpg">
</td><td>
Luke Warm<br>
Title: VP Marketing/Sales<br>
ID: 2 Boss: 1
</tr></table>
</div>
</body>
</html>
<script type="text/javascript" src="data.js"></script>
// options
var optionsSEV = {
groups: {
// sev items - person, location, vehicle, telephone etc.
item_person: {
shape: 'ellipse',
color: 'gold'
},
item_location: {
shape: 'ellipse',
color: '#aaaaff'
},
// references - crime, custody, intel etc.
reference_crime: {
shape: 'box',
color: '#aa0000'
},
reference_custody: {
shape: 'box',
color: '#bb0000'
},
reference_intel: {
shape: 'box',
color: '#cc0000'
},
// associations
association_crime_offender: {
label: 'Crime Offender'
},
association_crime_victim: {
label: 'Crime Victim'
},
association_custody: {
label: 'Custody'
},
association_intel_subject: {
label: 'Intel Subject'
}
},
edges: {
"smooth": {
"forceDirection": "none"
}
}
};
var nodesSEV = new vis.DataSet([
{id: 'item_person_123', label: 'Person\nJohn Smith', shape: 'image', image: 'http://www.rd.com/wp-content/uploads/sites/2/2016/02/03-train-cat-come-on-command.jpg'},
{id: 'item_person_234', label: 'Person\nGeorge Michael', group: 'item_person'},
{id: 'item_person_567', label: 'Person\nRichard Jones', group: 'item_person'},
{id: 'item_person_890', label: 'Person\nBob Builder', group: 'item_person'},
{id: 'item_location_1001', label: 'Location\n1 High Street', group: 'item_location'},
{id: 'reference_crime_ABC123', label: 'Crime\nABC123', group: 'reference_crime'},
{id: 'reference_custody_DEF123', label: 'Custody\nDEF123', group: 'reference_custody'},
{id: 'reference_intel_GHI123', label: 'Intel\nGHI123', group: 'reference_intel'},
{id: 'reference_crime_XXX999', label: 'Crime\nXXX999', group: 'reference_crime'}
]);
// edges / connections
var edgesSEV = new vis.DataSet([
{from: 'item_person_123', to: 'reference_crime_ABC123',arrows: 'to', group: 'association_crime_offender'},
{from: 'item_person_123', to: 'reference_custody_DEF123', arrows: 'to' , group: 'association_custody'},
{from: 'item_person_123', to: 'reference_intel_GHI123', arrows: 'to' , group: 'association_intel_subject'},
{from: 'reference_crime_ABC123', to: 'item_person_234', arrows: 'to' , group: 'association_crime_offender'},
{from: 'reference_crime_ABC123', to: 'item_person_567', arrows: 'to' , group: 'association_crime_victim'},
{from: 'reference_crime_ABC123', to: 'item_location_1001', arrows: 'to' , group: 'association_crime_victim'},
{from: 'reference_custody_DEF123', to: 'item_location_1001', arrows: 'to' , group: 'association_custody'},
{from: 'reference_intel_GHI123', to: 'item_person_567', arrows: 'to' , group: 'association_intel_subject'},
{from: 'item_person_567', to: 'reference_crime_XXX999', arrows: 'to' , group: 'association_intel_subject'},
{from: 'reference_crime_XXX999', to: 'item_person_890', arrows: 'to' , group: 'association_crime_offender'}
]);
// create a network
var containerSEV = document.getElementById('mynetworkFA');
var dataSEV = {
nodes: nodesSEV,
edges: edgesSEV
};
var networkSEV = new vis.Network(containerSEV, dataSEV, optionsSEV);
/* Styles go here */
#mynetworkFA {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
p {
max-width:800px;
}
var img = 'bartender-icon.png';
var container = document.getElementById('network');
var nodes = [
{id: 1},
{id: 2},
{id: 3},
{id: 4}
];
var edges = [
{from: 1, to: 3},
{from: 1, to: 2},
{from: 1, to: 4},
];
var data = {
nodes: nodes,
edges: edges
};
var options = {
/*
interaction: {
zoomView:false,
dragNodes:false,
dragView: false
},
*/
nodes: {
borderWidth: 2,
size: 24,
shapeProperties: {
useBorderWithImage: false
},
scaling: {
min: 10,
max: 30
},
fixed: {
x: false,
y: false
}
// clickToUse: false
},
edges: {
length: 400,
color: '#3598DC',
},
layout: {
randomSeed: 1,
/*
hierarchical: {
levelSeparation: 200,
direction: "LR"
}
*/
},
physics: {
enabled: true
}
};
function getNode(nodeId) {
var item;
for (var n in data.nodes) {
var tmp = data.nodes[n];
if (tmp.id === nodeId) {
item = tmp;
break;
}
}
return item;
}
function hideNode(nodeId) {
var item = getNode(nodeId);
if (item === undefined) return;
// Make the actual node invisible
item.color = {
border: 'RGBA(0,0,0,0)',
background: 'RGBA(0,0,0,0)',
highlight: {
border: 'RGBA(0,0,0,0)',
background: 'RGBA(0,0,0,0)'
},
}
}
function initSizes(elementId, nodeId) {
var element = document.getElementById(elementId);
var item = getNode(nodeId);
if (item === undefined) return;
item.widthConstraint = element.clientWidth;
item.heightConstraint = element.clientHeight;
hideNode(nodeId);
}
// TODO: add image centering
function placeOverlay(elementId, nodeId) {
var pos = network.getPositions([nodeId]);
var dom_coords = network.canvasToDOM({x:pos[nodeId].x,y:pos[nodeId].y});
var element = document.getElementById(elementId);
element.style.left = '' + (dom_coords.x - element.clientWidth/2 ) + 'px';
element.style.top = '' + (dom_coords.y - element.clientHeight/2) + 'px';
}
initSizes('html2', 4);
var network = new vis.Network(container, data, options);
network.on("afterDrawing", function (ctx) {
placeOverlay('html2', 4);
});