add a progressbar for communities calculation

parent d1d7b5c8
......@@ -10,7 +10,7 @@ h2, h3{font-variant: small-caps;}
h3{margin: 5px;}
input[type=range] {width: 160px;}
#nodeInfos{background: white;padding: 10px;z-index: 150;}
#modal header{border-radius: 8px 8px 0 0;}
#modal header, #loader header{border-radius: 8px 8px 0 0;}
#nodeInfos .w3-button,#modal .w3-button{border-radius: 0 8px 0 0;}
#pubkey{font-size: 0.9em;font-style: italic;margin-bottom: 20px;display:block;text-decoration:none;}
a#pubkey:hover{font-weight: bold;color: black;text-decoration:underline;}
......
......@@ -21,6 +21,19 @@
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="loader" class="w3-modal">
<div class="w3-modal-content w3-round-large w3-card-4 w3-animate-zoom">
<header class="w3-container w3-teal">
<h2>Veuillez patienter</h2>
</header>
<div class="w3-container" style="padding-bottom:15px;">
<p>Le calcul de la position des noeuds est en cours...</p>
<div class="w3-light-grey w3-round">
<div id="myBar2" class="w3-container w3-green" style="border-radius:4px 0 0 4px;height:24px;width:0%">0%</div>
</div>
</div>
</div>
</div>
<div id="myProgress">
<div style="color:white;">Chargement des avatars</div>
<div class="w3-light-grey w3-round">
......@@ -55,10 +68,9 @@
<div id="menu" class="w3-bar w3-border w3-card-4 w3-light-grey w3-large">
<div>
<div class="w3-bar-item w3-border-right"><h5 style="margin:0">Wotmap</h5></div>
<div id="toggle-layout" class="w3-bar-item w3-button w3-border-right"><span class="fa fa-pause-circle"></span>&nbsp;<span>Pause</span></div>
<div class="w3-dropdown-hover w3-border-right">
<button class="w3-button">Filtres&nbsp;<i class="fa fa-caret-down"></i></button>
<div id="menufilters" class="w3-dropdown-content w3-bar-block w3-card-4 w3-small">
<div class="w3-dropdown-content w3-bar-block w3-card-4 w3-small">
<div class="w3-bar-item w3-button w3-border-bottom">
<input id="referentsFilter" type="checkbox">
<label for="referentsFilter">Membres référents</label>
......@@ -78,11 +90,6 @@
<button class="w3-button">Affichage&nbsp;<i class="fa fa-caret-down"></i></button>
<div id="affichage" class="w3-dropdown-content w3-bar-block w3-card-4 w3-small">
<a id="reset-btn-cam" href="#" class="w3-bar-item w3-button w3-border-bottom">Recentrer la caméra</a>
<div id="communities">
<a id="run-btn" href="#" class="w3-bar-item w3-button w3-border-bottom w3-disabled">
<i id="spinner" class="fa fa-spinner fa-spin"></i>&nbsp;Afficher les communautés
</a>
</div>
<div class="w3-bar-item w3-button w3-border-bottom">
<input id="displayAvatars" type="checkbox">
<label for="displayAvatars">Afficher les avatars</label>
......@@ -101,6 +108,16 @@
</div>
</div>
</div>
<div class="w3-dropdown-hover w3-border-right">
<button class="w3-button">Communautés&nbsp;<i class="fa fa-caret-down"></i></button>
<div id="filterCommunities" class="w3-dropdown-content w3-bar-block w3-card-4 w3-small">
<div id="communities">
<a id="run-btn" href="#" class="w3-bar-item w3-button w3-border-bottom w3-disabled">
<i id="spinner" class="fa fa-spinner fa-spin"></i>&nbsp;Afficher les communautés
</a>
</div>
</div>
</div>
<a id="export" href="#" class="w3-bar-item w3-button w3-border-right">Capture</a>
<a href="#" class="w3-bar-item w3-button w3-border-right" style="padding: 5px 16px;" onclick="document.getElementById('modal').style.display='block';">
<i class="fa fa-info-circle" style="font-size:30px;"></i>
......@@ -194,8 +211,9 @@
<!-- Affichage personnalisé des noeuds -->
<script src="js/custom/sigma.renderers.img.js"></script>
<!-- Gestion du force layout -->
<script src="js/sigmajs/plugins/sigma.layout.forceAtlas2/worker.js"></script>
<script src="js/sigmajs/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
<script src="js/sigmajs/plugins/sigma.plugins.animate/sigma.plugins.animate.js"></script>
<script src="js/sigmajs/plugins/sigma.layout.forceLink/worker.js"></script>
<script src="js/sigmajs/plugins/sigma.layout.forceLink/supervisor.js"></script>
<script src="js/sigmajs/plugins/sigma.parsers.json/sigma.parsers.json.js"></script>
<!-- Filters -->
<script src="js/sigmajs/plugins/sigma.plugins.filter/sigma.plugins.filter.js"></script>
......
......@@ -24,6 +24,7 @@ function displayGraph(s){
tabIdentities.push(tabnode);
tabNodes.push(node.id);
});
s.refresh();
// Using a worker allows to launch the communities calculation without freezing the screen
if (window.Worker) {
......@@ -33,7 +34,7 @@ function displayGraph(s){
// When the calculation is finished
myWorker.onmessage = function(e) {
var nbCommunities = 0,
divfilters = _.$('menufilters');
divfilters = _.$('filterCommunities');
// Attribute the community numbers to nodes
s.graph.nodes().forEach(function(node) {
......@@ -41,12 +42,13 @@ function displayGraph(s){
nbCommunities = nbCommunities < (e.data[node.id]+1) ? (e.data[node.id]+1) : nbCommunities;
});
colors = colorScale(nbCommunities);
// Update the HCI
colors = colorScale(nbCommunities);
_.$('run-btn').classList.remove("w3-disabled");
_.$('spinner').style.display = 'none';
_.$('run-btn').addEventListener("click", displayCommunities);
displayCommunities();
// Add filters
for (var i = 0; i < nbCommunities; i++) {
var checkCommunity = document.createElement("input"),
......@@ -82,18 +84,29 @@ function displayGraph(s){
.apply();
});
}
_.$('run-btn').addEventListener("click", displayCommunities);
}
}else{alert('Votre navigateur ne supporte pas les workers javascript. La détection de communautés ne pourra pas se faire.');}
// Launch the forces
s.startForceAtlas2({outboundAttractionDistribution:true,startingIterations:1,iterationsPerRender:5});
var fa = sigma.layouts.configForceLink(s, {
outboundAttractionDistribution : true,
worker: true,
autoStop: true,
background: true,
easing: 'cubicInOut'
});
// Bind the events:
fa.bind('start ', function(e) {
_.$('loader').style.display='block';
});
fa.bind('stop ', function(e) {
_.$('loader').style.display='none';
});
// Start the ForceLink algorithm:
sigma.layouts.startForceLink();
// Display the graph
s.settings('drawNodes',true);
s.settings('drawLabels',false);
// Initialize the controls
_.$('displayEdges').checked = false;
_.$('displayAvatars').checked = false;
......@@ -143,15 +156,6 @@ function displayGraph(s){
_.$('noreferentsFilter').addEventListener("click", applyCategoryFilter);
_.$('reset-btn-filters').addEventListener("click", resetFilters);
_.$('reset-btn-cam').addEventListener("click", centerCamera);
_.$('toggle-layout').addEventListener('click', function() {
if ((s.supervisor || {}).running) {
s.stopForceAtlas2();
_.$('toggle-layout').innerHTML = '<span class="fa fa-play-circle"></span>&nbsp;<span>Lecture</span>';
} else {
s.startForceAtlas2({worker: true});
_.$('toggle-layout').innerHTML = '<span class="fa fa-pause-circle"></span>&nbsp;<span>Pause</span>';
}
});
s.bind('clickNode', isolateNodeOnClick);
s.bind('overNode', function(e) {_.$("graph-container").style.cursor = "pointer";});
s.bind('outNode', function(e) {_.$("graph-container").style.cursor = "move";});
......@@ -236,7 +240,7 @@ function displayGraph(s){
var loaded = 0;
if (!avatarsLoaded){
var elem = document.getElementById("myBar");
var elem = _.$("myBar");
_.$('myProgress').style.display = bool ? 'initial' : 'none';
......@@ -417,5 +421,5 @@ function displayGraph(s){
// Function to manage history
window.onpopstate = function(event) {
if (!event.state){resetFilters();centerCamera();}else{isolateNode(event.state.node)};
};
};
}
\ No newline at end of file
......@@ -25,7 +25,7 @@ var tab_urls = [],
defaultEdgeColor: "rgba(20,25,28,1)",
defaultEdgeType: "curvedArrow",
hideEdgesOnMove:true,
drawNodes:false,
drawNodes:true,
drawLabels: false,
drawEdges:false,
minArrowSize: 8,
......@@ -33,6 +33,7 @@ var tab_urls = [],
labelSize: "proportional",
labelSizeRatio: 0.6,
defaultLabelColor: "rgba(255,255,255,1)",
animationsTime: 3500,
zoomingRatio: 1.5
},
json_url = 'data/wot.json';
......
......@@ -52,6 +52,7 @@
this.runOnBackground = null;
this.easing = null;
this.randomize = null;
this.iterations = 0;
this.configure(options);
......@@ -216,6 +217,10 @@
// Worker message receiver
this.msgName = (this.worker) ? 'message' : 'newCoords';
this.listener = function(e) {
// Update progressive bar
var elem = _.$("myBar2");
elem.style.width = e.data.avancement + '%';
elem.innerHTML = e.data.avancement + '%';
// Retrieving data
_this.nodesByteArray = new Float32Array(e.data.nodes);
......
......@@ -42,6 +42,7 @@
maxForce: 10,
iterations: 0,
converged: false,
avancement: 0,
// Possible to change through config
settings: {
......@@ -1202,6 +1203,7 @@
// Counting one more iteration
W.iterations++;
W.avancement = Math.round(W.iterations/W.settings.maxIterations*100);
// Auto stop.
// The greater the ratio nb nodes / nb edges,
......@@ -1400,7 +1402,8 @@
self.postMessage(
{
nodes: NodeMatrix.buffer,
converged: W.converged
converged: W.converged,
avancement : W.avancement
},
[NodeMatrix.buffer]
);
......
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