balkian/soil
1
0
Fork 0
mirror of https://github.com/gsi-upm/soil synced 2024-11-14 23:42:29 +00:00
Code Issues Releases Wiki Activity

Filter background

Browse Source
This commit is contained in:
Tasio Mendez 2018-04-16 11:56:01 +02:00
parent 6548254fe1
commit c30e820443
3 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
TerroristNetworkModel.yml
View File

@ -58,3 +58,5 @@ visualization_params:
- attr_id: 2 - attr_id: 2
color: '#c16a6a' color: '#c16a6a'
background_image: 'map_4800x2860.jpg' background_image: 'map_4800x2860.jpg'
background_opacity: '0.9'
background_filter_color: 'blue'

5
templates/js/socket.js
View File

@ -71,7 +71,7 @@ ws.onmessage = function(message) {
// .css('background-size', '130%').css('background-position', '5% 30%').css('background-repeat', 'no-repeat'); // .css('background-size', '130%').css('background-position', '5% 30%').css('background-repeat', 'no-repeat');
$('<style>').text('svg line.link { stroke: white !important; stroke-width: 1.5px !important; }').appendTo($('html > head')); $('<style>').text('svg line.link { stroke: white !important; stroke-width: 1.5px !important; }').appendTo($('html > head'));
$('<style>').text('svg circle.node { stroke-width: 2.5px !important; }').appendTo($('html > head')); $('<style>').text('svg circle.node { stroke-width: 2.5px !important; }').appendTo($('html > head'));
self.GraphVisualization.set_background('img/background/' + msg['data']['background_image']); self.GraphVisualization.set_background('img/background/' + msg['data']['background_image'], msg['data']['background_opacity'], msg['data']['background_filter_color']);
} }
break; break;
@ -267,6 +267,9 @@ var set_timeline = function(graph) {
var dx = d3.select('#graph-wrapper').node().getBBox().width - d3.select('svg #root > image').node().getBBox().width; var dx = d3.select('#graph-wrapper').node().getBBox().width - d3.select('svg #root > image').node().getBBox().width;
var dy = d3.select('#graph-wrapper').node().getBBox().height - d3.select('svg #root > image').node().getBBox().height; var dy = d3.select('#graph-wrapper').node().getBBox().height - d3.select('svg #root > image').node().getBBox().height;
$('svg #root > image').attr('transform', 'translate(' + (dx / 2) + ',' + (dy / 2) + ')'); $('svg #root > image').attr('transform', 'translate(' + (dx / 2) + ',' + (dy / 2) + ')');
$('svg #root > rect').attr('transform', 'translate(' + (dx / 2) + ',' + (dy / 2) + ')')
.attr('width', d3.select('svg #root > image').node().getBBox().width)
.attr('height', d3.select('svg #root > image').node().getBBox().height);
} }
}, 500); }, 500);
}); });

9
templates/js/visualization.js
View File

@ -34,6 +34,8 @@
glinks, glinks,
gnodes, gnodes,
background_image, background_image,
background_opacity,
background_filter_color,
data_node, // Actual node data for the graph data_node, // Actual node data for the graph
data_link, // Actual link data for the graph data_link, // Actual link data for the graph
@ -229,7 +231,8 @@
// Set background // Set background
if ( background !== undefined ) { if ( background !== undefined ) {
background_image = groot.append('image').attr('href', background).style('opacity', '0.8'); var rect = groot.append('rect').attr('fill', background_filter_color);
background_image = groot.append('image').attr('href', background).style('opacity', background_opacity);
graph_wrapper = groot.append('g') .attr('id', 'graph-wrapper'); graph_wrapper = groot.append('g') .attr('id', 'graph-wrapper');
glinks = graph_wrapper.append('g') .attr('id', 'links'); glinks = graph_wrapper.append('g') .attr('id', 'links');
gnodes = graph_wrapper.append('g') .attr('id', 'nodes'); gnodes = graph_wrapper.append('g') .attr('id', 'nodes');
@ -475,8 +478,10 @@
* *
* @param {object} image Path to image. * @param {object} image Path to image.
*/ */
function set_background(image) { function set_background(image, set_opacity, set_color) {
background = image; background = image;
background_opacity = set_opacity || 0.8;
background_filter_color = set_color || 'white';
} }
/** /**