152 lines
3.8 KiB
JavaScript
152 lines
3.8 KiB
JavaScript
var network;
|
|
var simulationData;
|
|
animationPlaying = false;
|
|
currentAnimationStep = 0;
|
|
var animationInterval;
|
|
var animationLen = 10;
|
|
const stepSlider = document.querySelector('#stepRange');
|
|
const stepField = document.querySelector('#stepField');
|
|
const animationDurationSlider = document.querySelector('#animationDurationRange');
|
|
const animationDurationField = document.querySelector('#animationDurationField');
|
|
function createGraphFromDot(dotString){
|
|
var parsedData = vis.parseDOTNetwork(dotString);
|
|
// create a network
|
|
var container = document.getElementById("mynetwork");
|
|
var data = {
|
|
nodes: parsedData.nodes,
|
|
edges: parsedData.edges
|
|
};
|
|
var options = {
|
|
height: '100%',
|
|
width: '100%',
|
|
autoResize: true,
|
|
nodes:{
|
|
shape: 'dot',
|
|
size: 40,
|
|
borderWidth: 0,
|
|
chosen: false,
|
|
font:{
|
|
size:0
|
|
},
|
|
},
|
|
layout: {
|
|
randomSeed: undefined,
|
|
improvedLayout:true,
|
|
clusterThreshold: 150,
|
|
hierarchical: {
|
|
enabled:false,
|
|
levelSeparation: 150,
|
|
nodeSpacing: 100,
|
|
treeSpacing: 200,
|
|
blockShifting: true,
|
|
edgeMinimization: true,
|
|
parentCentralization: true,
|
|
direction: 'UD', // UD, DU, LR, RL
|
|
sortMethod: 'hubsize', // hubsize, directed
|
|
shakeTowards: 'leaves' // roots, leaves
|
|
}
|
|
},
|
|
};
|
|
network = new vis.Network(container, data, options);
|
|
//network.on("selectNode", function (params) {
|
|
//var selectedNodeId = params.nodes[0];
|
|
//var node = network.body.nodes[selectedNodeId];
|
|
//node.setOptions({
|
|
//font: {
|
|
//size: 20
|
|
//}
|
|
//});
|
|
//});
|
|
}
|
|
|
|
function visualizeOneStep(step){
|
|
for(i = 0; i < step.length; i++){
|
|
n = network.body.nodes[i];
|
|
//console.log(step[i])
|
|
if(step[i][0] == 0){
|
|
n.setOptions({
|
|
color:{
|
|
background: "#0000ff",
|
|
}
|
|
});
|
|
}else{
|
|
n.setOptions({
|
|
color:{
|
|
background: "#ff0000",
|
|
}
|
|
});
|
|
}
|
|
}
|
|
network.redraw();
|
|
}
|
|
|
|
|
|
function getSimulation(){
|
|
fetch("http://localhost/simulate")
|
|
.then(response => response.json())
|
|
.then(response =>{
|
|
simulationData = response;
|
|
stepSlider.max = simulationData.steps - 1;
|
|
createGraphFromDot(simulationData.dotGraph);
|
|
visualizeOneStep(simulationData.states[0]);
|
|
//kelvin to celsius
|
|
//let temp = Math.ceil(response.main.temp - 273.15);
|
|
//document.getElementById("weather").innerHTML = temp + "ºC";
|
|
//console.log(response.dotGraph)
|
|
});
|
|
}
|
|
|
|
function playAnimation(){
|
|
if(!animationPlaying){
|
|
currentAnimationStep = 0;
|
|
//Play the animation
|
|
animationInterval = setInterval(function(){
|
|
//This is the animation routine
|
|
if(currentAnimationStep == simulationData.steps){
|
|
//At the end of animation
|
|
clearInterval(animationInterval);
|
|
animationPlaying = false;
|
|
return;
|
|
}
|
|
visualizeOneStep(simulationData.states[currentAnimationStep]);
|
|
currentAnimationStep ++;
|
|
stepSlider.value = currentAnimationStep;
|
|
stepField.value = currentAnimationStep;
|
|
}, animationLen * 1000 / simulationData.steps);
|
|
|
|
}else{
|
|
//stop the animation
|
|
clearInterval(animationInterval);
|
|
currentAnimationStep = 0;
|
|
}
|
|
//switch boolean
|
|
animationPlaying = !animationPlaying;
|
|
}
|
|
|
|
stepField.value = 0;
|
|
stepSlider.min = 0;
|
|
stepSlider.max = 0;
|
|
stepSlider.addEventListener('input', function(){
|
|
stepField.value = stepSlider.value;
|
|
visualizeOneStep(simulationData.states[stepSlider.value]);
|
|
//console.log(stepSlider.value);
|
|
});
|
|
stepField.addEventListener('input', function(){
|
|
stepSlider.value = stepField.value;
|
|
visualizeOneStep(simulationData.states[stepField.value]);
|
|
//console.log(stepSlider.value);
|
|
});
|
|
|
|
animationDurationField.value = 10;
|
|
animationDurationSlider.value = 10;
|
|
animationDurationSlider.addEventListener('input', function(){
|
|
animationLen = animationDurationSlider.value;
|
|
animationDurationField.value = animationLen;
|
|
});
|
|
animationDurationField.addEventListener('input', function(){
|
|
animationLen = animationDurationField.value;
|
|
animationDurationSlider.value = animationLen;
|
|
});
|
|
|
|
getSimulation()
|