Difference between revisions of "Team:Greece/Collaborations"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.js"></script>
+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.js"></script>
 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css" rel="stylesheet" type="text/css" />
 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css" rel="stylesheet" type="text/css" />
 +
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
 +
  
 
     <style type="text/css">
 
     <style type="text/css">
 
         #mynetwork {
 
         #mynetwork {
−
             width: 1500px;
+
             width: 64.5%;
−
             height: 700px;
+
             height: 750px;
−
            border: 1px solid lightgray;
+
 
         }
 
         }
 +
 +
#details_box{
 +
float: right;
 +
width: 35%;
 +
height: 750px;
 +
text-align: center;
 +
}
 +
 +
.twoChildren {
 +
position: relative;
 +
display: inline-block;
 +
border: 1px solid #000000;
 +
}
 +
 +
div, span{ border: 1px solid #ddd; }
 
     </style>
 
     </style>
 
</head>
 
</head>
 
<body>
 
<body>
−
<div id="mynetwork"></div>
+
<div id='main_box'>
 +
 
 +
<div class='twoChildren' id="mynetwork"></div>
 +
 
 +
<div class='twoChildren' id='details_box'>
 +
<span id='title' style='position:relative; display:block; padding:0px 0px 25px 0px; height:50px;' ><h1></h1></span>
 +
<span id='details' style='position:relative; display:block; padding:5px 0px 0px 0px; height:650px;' ></span>
 +
</div>
 +
 
 +
</div>
 +
<pre id="eventSpan"></pre>
 +
<input type='hidden' id='Node_1' value='This is NODE 1' name='Title for node 1'/>
 +
<input type='hidden' id='Node_2' value='This is NODE 2' name='Title for node 2'/>
 +
<input type='hidden' id='Node_3' value='This is NODE 3' name='Title for node 3'/>
 +
<input type='hidden' id='Node_4' value='This is NODE 4' name='Title for node 4'/>
 +
<input type='hidden' id='Node_5' value='This is NODE 5' name='Title for node 5'/>
 +
<input type='hidden' id='Node_6' value='This is NODE 6' name='Title for node 6'/>
 +
<input type='hidden' id='Node_7' value='This is NODE 7' name='Title for node 7'/>
 +
<input type='hidden' id='Node_8' value='This is NODE 8' name='Title for node 8'/>
 +
<input type='hidden' id='Node_9' value='This is NODE 9' name='Title for node 9'/>
 +
<input type='hidden' id='Node_10' value='This is NODE 10' name='Title for node 10'/>
 +
<input type='hidden' id='Node_11' value='This is NODE 11' name='Title for node 11'/>
 +
<input type='hidden' id='Node_12' value='This is NODE 12' name='Title for node 12'/>
  
 
<script type="text/javascript">
 
<script type="text/javascript">
 
     // create an array with nodes
 
     // create an array with nodes
 
     var nodes = new vis.DataSet([
 
     var nodes = new vis.DataSet([
−
         {id: 1, label: 'Node 1'},
+
         {id: 1, label: 'Node 1', group: 'groupA', image: 'https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb'},
−
         {id: 2, label: 'Node 2'},
+
         {id: 2, label: 'Node 2', group: 'groupA'},
−
         {id: 3, label: 'Node 3'},
+
         {id: 3, label: 'Node 3', group: 'groupA'},
−
         {id: 4, label: 'Node 4'},
+
         {id: 4, label: 'Node 4', group: 'groupA'},
−
         {id: 5, label: 'Node 5'}
+
         {id: 5, label: 'Node 5', group: 'groupB'},
 +
        {id: 6, label: 'Node 6', group: 'groupB'},
 +
        {id: 7, label: 'Node 7', group: 'groupB'},
 +
        {id: 8, label: 'Node 8', group: 'groupC'},
 +
        {id: 9, label: 'Node 9', group: 'groupC'},
 +
        {id: 10, label: 'Node 10', group: 'groupC'},
 +
        {id: 11, label: 'Node 11', group: 'groupD'},
 +
        {id: 12, label: 'Node 12', group: 'groupD'}
 
     ]);
 
     ]);
  
Line 30: Line 75:
 
         {from: 1, to: 2},
 
         {from: 1, to: 2},
 
         {from: 2, to: 4},
 
         {from: 2, to: 4},
−
         {from: 2, to: 5}
+
         {from: 2, to: 5},
 +
{from: 6, to: 2},
 +
{from: 6, to: 8},
 +
{from: 6, to: 9},
 +
{from: 8, to: 11},
 +
{from: 11, to: 7},
 +
{from: 8, to: 10},
 +
{from: 8, to: 12}
 
     ]);
 
     ]);
  
Line 159: Line 211:
 
widthConstraint: false
 
widthConstraint: false
 
  },
 
  },
−
                  interaction: {
+
  interaction: {
−
                    hover: true
+
hover: true,
−
                  }
+
selectConnectedEdges: false,
 +
zoomView: false
 +
  },
 +
groups: {
 +
'groupA': {
 +
color: '#FF9900' // orange
 +
},
 +
'groupB': {
 +
color: "#2B7CE9" // blue
 +
},
 +
'groupC': {
 +
color: "#5A1E5C" // purple
 +
},
 +
'groupD': {
 +
color: "#ffffff" // red
 +
}
 +
}
 
};
 
};
  
 
     // initialize your network!
 
     // initialize your network!
 
     var network = new vis.Network(container, data, options);
 
     var network = new vis.Network(container, data, options);
−
console.log(typeof(network))
+
−
console.log(network)
+
    network.on("click", function (properties) {
 +
        properties.event = "[original event]";
 +
        //document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(properties, null, 4); //JSON.stringify(obj, replacer, white_space_for_readability_purposes)
 +
        console.log('click event, getNodeAt returns: ' + this.getNodeAt(properties.pointer.DOM));
 +
 +
displayDetails(properties.nodes);
 +
    });
 +
//On mouse over
 +
network.on("hoverNode", function (properties) {
 +
properties.event = "[original event]";
 +
if( !([3,4,6].includes(('' + properties.node)*1 )) ){
 +
network.canvas.body.container.style.cursor = 'pointer';
 +
}
 +
});
 +
//On mouse leave
 +
network.on("blurNode", function (properties) {
 +
properties.event = "[original event]";
 +
if( !([3,4,6].includes((''+properties.node)*1 )) ){
 +
network.canvas.body.container.style.cursor = 'default';
 +
}
 +
    });
 +
</script>
 +
<script>
 +
function displayDetails(nodeId){
 +
 +
if( !([3,4,6].includes((''+nodeId)*1 )) ){
 +
 +
$('#title').html( '<h1>' + document.getElementById('Node_' + nodeId).name + '</h1>' );
 +
$('#details').html( document.getElementById('Node_' + nodeId).value );
 +
}
 +
}
 
</script>
 
</script>
  

Revision as of 20:47, 8 September 2017