122 lines
2.6 KiB
JavaScript
122 lines
2.6 KiB
JavaScript
// create an array with nodes
|
|
//var nodes = new vis.DataSet([
|
|
//{ id: 1, label: "Node 1" },
|
|
//{ id: 2, label: "Node 2" },
|
|
//{ id: 3, label: "Node 3" },
|
|
//{ id: 4, label: "Node 4" },
|
|
//{ id: 5, label: "Node 5" }
|
|
//]);
|
|
//
|
|
//// create an array with edges
|
|
//var edges = new vis.DataSet([
|
|
//{ from: 1, to: 3 },
|
|
//{ from: 1, to: 2 },
|
|
//{ from: 2, to: 4 },
|
|
//{ from: 2, to: 5 },
|
|
//{ from: 3, to: 3 }
|
|
//]);
|
|
|
|
// create a network
|
|
//var container = document.getElementById("mynetwork");
|
|
//var data = {
|
|
//nodes: nodes,
|
|
//edges: edges
|
|
//};
|
|
//var options = {
|
|
//height: '100%',
|
|
//width: '100%',
|
|
//};
|
|
//var network = new vis.Network(container, data, options);
|
|
var network;
|
|
var simulationData;
|
|
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:{
|
|
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
|
|
//}
|
|
//});
|
|
//});
|
|
|
|
//console.log(network.selectNodes([0]));
|
|
n = network.body.nodes[0];
|
|
n.setOptions({
|
|
color:{
|
|
background: "#ffffff",
|
|
}
|
|
})
|
|
}
|
|
|
|
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",
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function getSimulation(){
|
|
fetch("http://localhost/simulate")
|
|
.then(response => response.json())
|
|
.then(response =>{
|
|
simulationData = response;
|
|
createGraphFromDot(simulationData.dotGraph);
|
|
//kelvin to celsius
|
|
//let temp = Math.ceil(response.main.temp - 273.15);
|
|
//document.getElementById("weather").innerHTML = temp + "ºC";
|
|
//console.log(response.dotGraph)
|
|
});
|
|
}
|
|
|
|
getSimulation()
|