jrtechs
/
jrtechs-SteamFriendsGraph
mirror of https://github.com/jrtechs/SteamFriendsGraph.git
1
0
Fork 0
Code Issues 0 Releases 0 Wiki Activity
Browse Source

Update the gaph to hide other nodes that are not their friends when you click on a node.

pull/8/head
jxr8142 6 years ago
parent
b4b87c42bb
commit
52cd39dba9
1 changed files with 100 additions and 15 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +100
    -15
      website/graph.html

+ 100
- 15
website/graph.html View File

@ -56,6 +56,12 @@
<script src="src/misc/sigma.misc.drawHovers.js"></script> <script src="src/misc/sigma.misc.drawHovers.js"></script>
<script src="src/plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js"></script>
<script src="src/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
<script src="src/plugins/sigma.layout.forceAtlas2/worker.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary"> <div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
@ -88,12 +94,27 @@
<div id="container"> <div id="container">
<style> <style>
#graph-container { #graph-container {
top: 5%;
top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 0;
position: absolute; position: absolute;
/*background-color: #455660;*/
}
.sigma-edge {
/*stroke: #14191C;*/
}
.sigma-node {
/*fill: green;*/
/*stroke: #14191C;*/
/*stroke-width: 2px;*/
}
.sigma-node:hover {
fill: blue;
}
.muted {
fill-opacity: 0.1;
stroke-opacity: 0.1;
} }
</style> </style>
<div id="graph-container" style="width:100%; height:100%"></div> <div id="graph-container" style="width:100%; height:100%"></div>
@ -102,7 +123,6 @@
<script> <script>
var s, var s,
r,
g = { g = {
nodes: [], nodes: [],
edges: [] edges: []
@ -114,28 +134,28 @@
'#b956af' '#b956af'
]; ];
// Instantiate sigma:
s = new sigma({ s = new sigma({
graph: g, graph: g,
renderer: {
container: document.getElementById('graph-container'),
type: 'canvas'
},
settings: { settings: {
minNodeSize: 8,
maxNodeSize: 16,
enableHovering: false
} }
}); });
s.addRenderer({
id: 'main',
type: 'svg',
container: document.getElementById('graph-container'),
freeStyle: true
});
getData = getUrlVars(); getData = getUrlVars();
connection = new WebSocket('ws://jrtechs.student.rit.edu:4444');
connection = new WebSocket('ws://localhost:4444');
connection.onopen = function () connection.onopen = function ()
{ {
console.log('Connected!'); console.log('Connected!');
console.log(r);
if(getData["id"] != undefined && getData["id"] != "") if(getData["id"] != undefined && getData["id"] != "")
{ {
connection.send("{id:'" + getData["id"] + "', graph:" + getData["graph"] + "}"); connection.send("{id:'" + getData["id"] + "', graph:" + getData["graph"] + "}");
@ -206,6 +226,73 @@
} }
}; };
//jquery stuff for hiding and displaying users when clicked
s.bind('clickNode doubleClickNode rightClickNode', function(e)
{
console.log(e.type, e);
$('.sigma-node, .sigma-edge').each(function()
{
mute(this);
});
var neighbors = s.graph.neighborhood(e.data.node.id);
neighbors.nodes.forEach(function(node)
{
unmute($('[data-node-id="' + node.id + '"]')[0]);
});
neighbors.edges.forEach(function(edge) {
unmute($('[data-edge-id="' + edge.id + '"]')[0]);
});
});
// Binding silly interactions
function mute(node)
{
if (!~node.getAttribute('class').search(/muted/))
node.setAttributeNS(null, 'class', node.getAttribute('class') + ' muted');
}
function unmute(node)
{
node.setAttributeNS(null, 'class', node.getAttribute('class').replace(/(\s|^)muted(\s|$)/g, '$2'));
}
$('.sigma-node').click(function()
{
console.log("click");
$('.sigma-node, .sigma-edge').each(function()
{
mute(this);
});
// Unmuting neighbors
var neighbors = s.graph.neighborhood($(this).attr('data-node-id'));
neighbors.nodes.forEach(function(node)
{
unmute($('[data-node-id="' + node.id + '"]')[0]);
});
neighbors.edges.forEach(function(edge)
{
unmute($('[data-edge-id="' + edge.id + '"]')[0]);
});
});
s.bind('clickStage', function()
{
$('.sigma-node, .sigma-edge').each(function()
{
unmute(this);
});
});
</script> </script>
@ -235,8 +322,6 @@ https://github.com/jrtechs
--> -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body> </body>

Write Preview
Loading…
Cancel
Save