Commit 0d00bf5b authored by GROSS-AMBLARD David's avatar GROSS-AMBLARD David
Browse files

Merge branch 'Projet-M2-VIZ' into 'master'

merge-proj-viz-into-master: fin du projet

See merge request druid/headwork!70
parents 76917b69 7ec4f8ab
......@@ -146,7 +146,7 @@ class AjaxManager
}
// Edges from Artifact nodes to User nodes
$stmt = $this->db->prepare("SELECT DISTINCT answer.artifact, answer.user, artifactclass.description, artifact.state FROM answered JOIN answer ON answered.modified = answer.modified JOIN artifact ON answer.artifact = artifact.id JOIN artifactclass ON artifact.classid = artifactclass.id;");
$stmt = $this->db->prepare("SELECT DISTINCT Answer.artifact, Answer.user, ArtifactClass.description, Artifact.state FROM Answered JOIN Answer ON Answered.modified = Answer.modified JOIN Artifact ON Answer.artifact = Artifact.id JOIN ArtifactClass ON Artifact.classid = ArtifactClass.id;");
$stmt->execute();
$result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
......
......@@ -40,9 +40,9 @@
<li><a href="https://www.linkedin.com/in/adrien-wacquet-321729185?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_contact_details%3B3MisevnYRhyUXreTwAzlzA%3D%3D"> Adrien Wacquet (Irisa, ISTIC, Rennes 1): task user interface, chat, feedbacks, forum, Ajax</a></li>
</ul>
<h2>Dev Movie (from start to 05-2021)</h2>
<h2>Dev Movie (from start to 06-2021)</h2>
<center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/O-SCYRvR1R0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iWMyBqHh9do" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</center>
<h2>Powered by</h2>
......
......@@ -19,9 +19,10 @@
z-index: 999;
background: #000;
}
.__________cytoscape_container{
margin : 8% 0% 10% 1.5%;
.__________cytoscape_container {
margin: 8% 0% 10% 1.5%;
}
</style>
......@@ -31,8 +32,9 @@
/**
* get_cyto_nodes
*
* Returns cytoscape nodes objects.
* Retrieves cytoscape nodes objects using AJAX POST request.
*
* @see AjaxManager::getNodesData()
* @returns cytoscape nodes objects
*/
function get_cyto_nodes() {
......@@ -65,8 +67,9 @@
/**
* get_cyto_edges
*
* Returns cytoscape edges objects.
* Retrieves cytoscape edges objects using AJAX POST request.
*
* @see AjaxManager::getEdgesData()
* @returns cytoscape edges objects
*/
function get_cyto_edges() {
......@@ -220,35 +223,6 @@
}
}
/**
* Set nodes animations.
*
* @param nodes array of nodes
*/
function set_node_animation(nodes) {
nodes.forEach(n => {
n.animate({
style: {
opacity: 0
},
duration: 600,
easing: 'ease-in-sine'
}).delay(200).animate({
style: {
opacity: 0.33
},
duration: 600,
easing: 'ease-in-sine'
}).delay(0).animate({
style: {
opacity: 1
},
duration: 600,
easing: 'ease-in-sine'
});
});
}
/**
* add_nodes_to_graph
*
......@@ -268,8 +242,8 @@
type: n.data.type
},
position: {
x: 200,
y: 200
x: 0,
y: 0
}
});
} catch (error) {
......@@ -305,6 +279,68 @@
});
}
/**
* center_nodes
*
* Center recently added nodes.
*
* @param nodes array of nodes
*/
function center_nodes(nodes) {
try {
// Retrieving new nodes, ie nodes recently added to position : x = 0, y = 0
var newNodes = nodes.filter(n => n.position('x') === 0 && n.position('y') === 0);
newNodes.forEach(n => {
var connectedEdge;
(n.data('type') == 'user') ? connectedEdge = cy.edges().filter(e => e.data('target') === n.data('id')):
connectedEdge = cy.edges().filter(e => e.data('source') === n.data('id'));
if (connectedEdge.length > 0) {
var closetNode;
(n.data('type') == 'user') ? closestNode = cy.getElementById(connectedEdge[0].data('source')):
closestNode = cy.getElementById(connectedEdge[0].data('target'));
// Move node 'n' closer to 'closestNode'
cy.clearQueue(); // Clear animations queue
n.animation({
position: {
x: closestNode.position('x') - 50,
y: closestNode.position('y') - 50
},
duration: 800,
easing: 'cubic-bezier(.91,.1,.97,.39)'
}).play();
}
});
} catch (error) {
console.debug("Error while centering nodes:" + error);
}
}
/**
* nodes_floating_animation
*
* Nodes floating animation using promise and reverse() Cytoscape function.
* @see https://js.cytoscape.org/#ani.reverse
*/
function nodes_floating_animation() {
cy.nodes().filter(n => n.data('type') === 'user').forEach(n => {
if (n.data('type') == 'user') {
var left = n.animation({
position: {
x: n.position('x') - 20
},
duration: 1500,
queue: true,
easing: 'cubic-bezier(.48,.55,.9,.9)'
});
left.play().promise('completed').then(function() {
// Start again : back to the right
left.reverse().rewind().play();
});
}
});
}
/**
* play_sound
*
......@@ -359,6 +395,8 @@
});
console.debug(edgesToAdd.length + " edge(s) will be added.")
add_edges_to_graph(cy, edgesToAdd);
// Center nodes
center_nodes(cy.nodes());
}
}).catch(function(err) {
console.error("refreshGraph edges error: " + err);
......@@ -397,7 +435,7 @@
name: 'cola',
refresh: 2,
edgeLength: 100,
nodeSpacing: 20,
nodeSpacing: 80,
fit: true
},
......@@ -435,11 +473,11 @@
'content': 'data(label)',
'min-zoomed-font-size': '12',
'font-size': '8',
'text-margin-y': '8px',
'color': '#fff',
'line-color': '#E6E6FA',
'width': '2',
'opacity': '0.5',
// Bezier edges
'curve-style': 'bezier',
'control-point-step-size': '50'
}
......@@ -455,13 +493,13 @@
// Colors & animations
set_node_color(cy.nodes());
set_edge_color(cy.edges());
set_node_animation(cy.nodes());
// Refresh graph every 10 seconds
const interval = setInterval(function() {
// Refresh graph every 5 seconds
const refresh_interval = setInterval(function() {
refresh_graph();
}, 10000);
//clearInterval(interval); // Comment this line to enable auto refresh
nodes_floating_animation(); // Trigger floating user nodes animation
}, 5000);
//clearInterval(refresh_interval); // Comment this line to enable auto refresh
}
});
</script>
......
//For the first use of this test page, you must first have Node.js (https://nodejs.org/en/).
//Once installed, you must type this command :
//npm install --global mocha
//Then you just have to launch the tests with the command :
//mocha testblockly.js
//at the root of the headwork project.
const { Workspace, Block, Toolbox, ToolboxCategory } = require('blockly');
var Blockly = require('blockly');
var num = 0;
......
......@@ -8,7 +8,7 @@ function workflowdesign($conn){
<div class="container">
<div class="row">
<div class="col bg-secondary text-white">
<div id="hw-artefact-info">Send a question of your workflow
<div id="hw-artefact-info">Enter your workflow
</div>
</div>
</div>
......@@ -18,9 +18,9 @@ function workflowdesign($conn){
<!--Création de l'html nécessaire à l'injection de blockly-->
<div id="blocklyArea" style="height: 480px; width: 600px;"></div>
<div id="blocklyArea" style="height: 700px; width: 1150px;"></div>
<div id="blocklyDiv" style="position: absolute"></div>
<textarea id="textarea" style="height: 480px; width: 600px;"></textarea>
<textarea id="textarea" style="height: 700px; width: 1150px;"></textarea>
<!--Récupération des scripts de node_modules utiles pour blockly-->
<script type ="module", src="node_modules">import Blockly from 'blockly';</script>
......@@ -79,7 +79,7 @@ function workflowdesign($conn){
var res = statements_com.replaceAll("\"","'")
}
// TODO: Assemble JavaScript into code variable.
var json = " Do Awaiting " + number_reponse + " answers " + res
var json = " Do " + res + " Awaiting " + number_reponse + " answers "
var code = JSON.stringify(json, null, '\t');
return code;
};
......@@ -173,7 +173,7 @@ Blockly.JavaScript['task_has_reached'] = function(block) {
if(statements_name != null) {
var res = statements_name.replaceAll("\"","'")
}
var json = " Do Task has reached absolute majority out of " + number_name + " " + res
var json = " Do" + res +" Task has reached absolute majority out of " + number_name
var code = JSON.stringify(json, null, '\t');
return code;
};
......@@ -201,7 +201,7 @@ Blockly.JavaScript['task_has_consensus'] = function(block) {
if(statements_name != null) {
var res = statements_name.replaceAll("\"","'")
}
var json = "Do Task has reached consensus out of " + number_name + " " + res
var json = "Do" + res + " Task has reached consensus out of " + number_name
var code = JSON.stringify(json, null, '\t');
return code;
};
......@@ -273,7 +273,12 @@ workspace.addChangeListener(myUpdateFunction);
<script>
function getValue() {
var input = document.getElementById("textarea").value;
alert(input);
var tb_str = input.split('\'');
if(tb_str[2] != null) {
var res = tb_str[2].replaceAll("\"","")
}
var json = {"1":{"2":{ "guard": "none", "actions": [ tb_str[1] ]} }, "2": { "3": { "guard": res , "actions": "" } }, "3": {} } ;
alert(JSON.stringify(json, null, ' '));
}
</script>
</br>
......
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