From c30e820443b12b4db52097c25d49d615933751ac Mon Sep 17 00:00:00 2001
From: Tasio Mendez <tasio.mendez.ayerbe@alumnos.upm.es>
Date: Mon, 16 Apr 2018 11:56:01 +0200
Subject: [PATCH] Filter background

---
 TerroristNetworkModel.yml     | 2 ++
 templates/js/socket.js        | 5 ++++-
 templates/js/visualization.js | 9 +++++++--
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/TerroristNetworkModel.yml b/TerroristNetworkModel.yml
index 4874b62..702fc20 100644
--- a/TerroristNetworkModel.yml
+++ b/TerroristNetworkModel.yml
@@ -58,3 +58,5 @@ visualization_params:
     - attr_id: 2
       color: '#c16a6a'
   background_image: 'map_4800x2860.jpg'
+  background_opacity: '0.9'
+  background_filter_color: 'blue'
diff --git a/templates/js/socket.js b/templates/js/socket.js
index a12a185..94e0005 100755
--- a/templates/js/socket.js
+++ b/templates/js/socket.js
@@ -71,7 +71,7 @@ ws.onmessage = function(message) {
                 //               .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 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;
 
@@ -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 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 > 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);
     });
diff --git a/templates/js/visualization.js b/templates/js/visualization.js
index e482780..b975a71 100644
--- a/templates/js/visualization.js
+++ b/templates/js/visualization.js
@@ -34,6 +34,8 @@
       glinks,
       gnodes,
       background_image,
+      background_opacity,
+      background_filter_color,
       data_node,          // Actual node data for the graph
       data_link,          // Actual link data for the graph
 
@@ -229,7 +231,8 @@
 
     // Set background
     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');
       glinks = graph_wrapper.append('g')  .attr('id', 'links');
       gnodes = graph_wrapper.append('g')  .attr('id', 'nodes');
@@ -475,8 +478,10 @@
    *
    * @param   {object}    image         Path to image.
    */
-  function set_background(image) {
+  function set_background(image, set_opacity, set_color) {
     background = image;
+    background_opacity = set_opacity || 0.8;
+    background_filter_color = set_color || 'white';
   }
 
   /**