188 lines
6.7 KiB
JavaScript
188 lines
6.7 KiB
JavaScript
// Put the real domain here
|
|
var baseUrl = "http://localhost"
|
|
|
|
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');
|
|
|
|
var selectedGraph;
|
|
var horizon;
|
|
var states;
|
|
var initial_distribution;
|
|
var rules;
|
|
var colors;
|
|
|
|
// Debuging
|
|
//selectedGraph = "strict graph GraphHello {\n0 -- 1;\n1 -- 2;\n1 -- 3;\n}";
|
|
//selectedGraph = "strict graph Default {\n0 -- 1;\n1 -- 2;\n2 -- 3;\n3 -- 4;\n4 -- 5;\n0 -- 5;\n0 -- 3;\n0 -- 4;\n0 -- 2;\n1 -- 4;\n1 -- 5;\n1 -- 6;\n3 -- 5;\n3 -- 6;\n3 -- 4;\n}"
|
|
|
|
selectedGraph = "strict graph Default {\n0 -- 10;\n0 -- 1;\n1 -- 11;\n1 -- 2;\n2 -- 12;\n2 -- 3;\n3 -- 13;\n3 -- 4;\n4 -- 14;\n4 -- 5;\n5 -- 15;\n5 -- 6;\n6 -- 16;\n6 -- 7;\n7 -- 17;\n7 -- 8;\n8 -- 18;\n8 -- 9;\n9 -- 19;\n10 -- 20;\n10 -- 11;\n11 -- 21;\n11 -- 12;\n12 -- 22;\n12 -- 13;\n13 -- 23;\n13 -- 14;\n14 -- 24;\n14 -- 15;\n15 -- 25;\n15 -- 16;\n16 -- 26;\n16 -- 17;\n17 -- 27;\n17 -- 18;\n18 -- 28;\n18 -- 19;\n19 -- 29;\n20 -- 30;\n20 -- 21;\n21 -- 31;\n21 -- 22;\n22 -- 32;\n22 -- 23;\n23 -- 33;\n23 -- 24;\n24 -- 34;\n24 -- 25;\n25 -- 35;\n25 -- 26;\n26 -- 36;\n26 -- 27;\n27 -- 37;\n27 -- 28;\n28 -- 38;\n28 -- 29;\n29 -- 39;\n30 -- 40;\n30 -- 31;\n31 -- 41;\n31 -- 32;\n32 -- 42;\n32 -- 33;\n33 -- 43;\n33 -- 34;\n34 -- 44;\n34 -- 35;\n35 -- 45;\n35 -- 36;\n36 -- 46;\n36 -- 37;\n37 -- 47;\n37 -- 38;\n38 -- 48;\n38 -- 39;\n39 -- 49;\n40 -- 50;\n40 -- 41;\n41 -- 51;\n41 -- 42;\n42 -- 52;\n42 -- 43;\n43 -- 53;\n43 -- 44;\n44 -- 54;\n44 -- 45;\n45 -- 55;\n45 -- 46;\n46 -- 56;\n46 -- 47;\n47 -- 57;\n47 -- 48;\n48 -- 58;\n48 -- 49;\n49 -- 59;\n50 -- 60;\n50 -- 51;\n51 -- 61;\n51 -- 52;\n52 -- 62;\n52 -- 53;\n53 -- 63;\n53 -- 54;\n54 -- 64;\n54 -- 55;\n55 -- 65;\n55 -- 56;\n56 -- 66;\n56 -- 57;\n57 -- 67;\n57 -- 58;\n58 -- 68;\n58 -- 59;\n59 -- 69;\n60 -- 70;\n60 -- 61;\n61 -- 71;\n61 -- 62;\n62 -- 72;\n62 -- 63;\n63 -- 73;\n63 -- 64;\n64 -- 74;\n64 -- 65;\n65 -- 75;\n65 -- 66;\n66 -- 76;\n66 -- 67;\n67 -- 77;\n67 -- 68;\n68 -- 78;\n68 -- 69;\n69 -- 79;\n70 -- 80;\n70 -- 71;\n71 -- 81;\n71 -- 72;\n72 -- 82;\n72 -- 73;\n73 -- 83;\n73 -- 74;\n74 -- 84;\n74 -- 75;\n75 -- 85;\n75 -- 76;\n76 -- 86;\n76 -- 77;\n77 -- 87;\n77 -- 78;\n78 -- 88;\n78 -- 79;\n79 -- 89;\n80 -- 90;\n80 -- 81;\n81 -- 91;\n81 -- 82;\n82 -- 92;\n82 -- 83;\n83 -- 93;\n83 -- 84;\n84 -- 94;\n84 -- 85;\n85 -- 95;\n85 -- 86;\n86 -- 96;\n86 -- 87;\n87 -- 97;\n87 -- 88;\n88 -- 98;\n88 -- 89;\n89 -- 99;\n90 -- 91;\n91 -- 92;\n92 -- 93;\n93 -- 94;\n94 -- 95;\n95 -- 96;\n96 -- 97;\n97 -- 98;\n98 -- 99;}"
|
|
|
|
horizon = 20.0;
|
|
//states = ["S", "I", "R"];
|
|
states = ["N", "I", "V"];
|
|
//initial_distribution = [0.5, 0.5, 0];
|
|
initial_distribution = [0.9, 0.1, 0];
|
|
//rules = "I R 1.0 R S 0.7 I S I I I I 0.8";
|
|
rules = "N V 0.1 I N I I 0.5 I I N I I I 0.9 I N 0.2";
|
|
// S I R
|
|
colors = {
|
|
"N" : "#000000",
|
|
"I" : "#ffffff",
|
|
"V" : "#75c44c"
|
|
}
|
|
|
|
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];
|
|
n.setOptions({
|
|
color:{
|
|
background: colors[step[i]]
|
|
}
|
|
});
|
|
}
|
|
network.redraw();
|
|
}
|
|
|
|
|
|
function getSimulation(){
|
|
//prepare the json data
|
|
json = {
|
|
graph: selectedGraph,
|
|
horizon: horizon,
|
|
states: states,
|
|
initial_distribution : initial_distribution,
|
|
rules : rules
|
|
}
|
|
|
|
//combine url
|
|
url = baseUrl + "/simulate?data=" + JSON.stringify(json);
|
|
|
|
fetch(url)
|
|
.then(response => response.json())
|
|
.then(response =>{
|
|
console.log(response)
|
|
simulationData = response;
|
|
stepSlider.max = simulationData.states.length - 1;
|
|
//createGraphFromDot(simulationData.dotGraph);
|
|
createGraphFromDot(json.graph);
|
|
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.states.length - 1){
|
|
//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()
|