Commit 2f9b6219 authored by vpodpecan's avatar vpodpecan

new functionalities

parent 50e67f24
<div id="widgetvisualization-{{ widget.pk }}" rel="{{ widget.pk }}" <div id="widgetvisualization-{{ widget.pk }}" rel="{{ widget.pk }}"
class="widgetvisualizationdialog" title="{{ widget.name }} visualization" width="800" height="600"> class="widgetvisualizationdialog" title="{{ widget.name }} visualization" width="800" height="600">
<div id="controls">
<button id="freezeBtn" class='controlElement' type="button"></button>
<label for="etype">edge type</label>
<select name="etype" id="etypeSelect" class='controlElement'>
<option selected="selected">continuous</option>
<option>dynamic</option>
<option>straight</option>
</select>
</div>
<div id="networkvis"> <div id="networkvis">
</div> </div>
</div> </div>
...@@ -10,7 +21,22 @@ ...@@ -10,7 +21,22 @@
#networkvis{ #networkvis{
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
float: right;
/* display: block;*/
}
#controls {
width: 85px;
text-align:center;
padding-top: 11px;
float: left;
/* display: block;*/
font-size: 80%;
}
.controlElement {
/* margin: 0 auto;*/
margin-bottom: 5px;
} }
</style> </style>
<script> <script>
...@@ -18,18 +44,80 @@ ...@@ -18,18 +44,80 @@
$("#widgetvisualization-{{ widget.pk }}").bind("dialogresize", function (event, ui) { $("#widgetvisualization-{{ widget.pk }}").bind("dialogresize", function (event, ui) {
$('#networkvis').height($('#networkvis').parent().height()); $('#networkvis').height($('#networkvis').parent().height());
$('#networkvis').width($('#networkvis').parent().width()); $('#networkvis').width($('#networkvis').parent().width()-100);
});
$('#freezeBtn').button({
label: 'freeze'
}); });
$('#redrawBtn').button({
label: 'redraw'
});
// $('#etypeSelect').selectmenu();
</script> </script>
<script> <script>
$.getScript('https://cdn.rawgit.com/ryanve/verge/master/verge.min.js', function () { $.getScript('https://cdn.rawgit.com/ryanve/verge/master/verge.min.js', function () {
$('#networkvis').height($('#networkvis').parent().height()); $('#networkvis').height($('#networkvis').parent().height());
$('#networkvis').width($('#networkvis').parent().width()); $('#networkvis').width($('#networkvis').parent().width()-100);
$.getScript("https://cdn.rawgit.com/almende/vis/v4.9.0/dist/vis.min.js", function () { $.getScript("https://cdn.rawgit.com/almende/vis/v4.9.0/dist/vis.min.js", function () {
function onDragStart(obj) {
if (obj.hasOwnProperty('nodes') && obj.nodes.length==1) {
var nid = obj.nodes[0];
nodes.update({id: nid, fixed: false});
}
}
function onDragEnd(obj) {
if (isFrozen==false)
return
var nid = obj.nodes;
if (obj.hasOwnProperty('nodes') && obj.nodes.length==1) {
var nid = obj.nodes[0];
nodes.update({id: nid, fixed: true});
}
}
function freezeNodes(state){
nodes.forEach(function(node, id){
nodes.update({id: id, fixed: state});
});
}
$('#freezeBtn').on('click', function () {
if ($(this).find('span').text()=='release'){
isFrozen = false;
freezeNodes(false);
$(this).find('span').text('freeze');
}
else {
isFrozen = true;
freezeNodes(true);
$(this).find('span').text('release');
}
});
$("#etypeSelect").change(function() {
var t = $(this).val();
if (t=='continuous') {
network.setOptions({edges: {smooth: {type: 'continuous'}}});
}
else if (t=='dynamic') {
network.setOptions({edges: {smooth: {type: 'dynamic'}}})
}
else if (t=='straight') {
network.setOptions({edges: {smooth: false}})
}
});
var network = null; var network = null;
var nodes = new vis.DataSet(); var nodes = new vis.DataSet();
var edges = new vis.DataSet(); var edges = new vis.DataSet();
var isFrozen = false;
nodes.add({{ nodes|safe }}); nodes.add({{ nodes|safe }});
edges.add({{ edges|safe }}); edges.add({{ edges|safe }});
...@@ -42,8 +130,8 @@ ...@@ -42,8 +130,8 @@
autoResize: true, autoResize: true,
edges: { edges: {
smooth: { smooth: {
type: 'dynamic' // type: 'dynamic'
// type: 'continuous' type: 'continuous'
} }
}, },
nodes: { nodes: {
...@@ -55,7 +143,8 @@ ...@@ -55,7 +143,8 @@
} }
}, },
interaction: { interaction: {
hover: true hover: true,
navigationButtons: true
}, },
manipulation: { manipulation: {
enabled: true, enabled: true,
...@@ -77,12 +166,14 @@ ...@@ -77,12 +166,14 @@
}, },
layout: { layout: {
randomSeed: undefined, randomSeed: undefined,
improvedLayout:true, improvedLayout: true
} }
}; };
var container = document.getElementById('networkvis'); var container = document.getElementById('networkvis');
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
network.on('dragStart', onDragStart);
network.on('dragEnd', onDragEnd);
}).fail(function( jqxhr, settings, exception ) { }).fail(function( jqxhr, settings, exception ) {
alert("Network error: cannot load verge JS library!"); alert("Network error: cannot load verge JS library!");
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment