Commit f23d3115 authored by VIGNET Pierre's avatar VIGNET Pierre
Browse files

Add WebGL example

parent a1bb9fba
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VivaGraphs WebGL DOM Label</title>
<script src="vivagraph.min.js"></script>
<script>
function loadFile() {
var input, file, fr;
if (typeof window.FileReader !== 'function') {
alert("The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('fileinput');
if (!input) {
alert("Um, couldn't find the fileinput element.");
} else if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
} else {
file = input.files[0];
fr = new FileReader();
fr.onload = receivedText;
fr.readAsText(file);
}
function receivedText(e) {
// Parse JSON file
let json_data = JSON.parse(e.target.result);
// Build graph
build_graph(json_data);
}
}
function generateLabels(json_data, container) {
// NOTE: If your graph changes over time you will need to
// monitor graph changes and update DOM elements accordingly
// this will map node id into DOM element
let labels = {};
let fragment = document.createDocumentFragment();
let label;
for (let node of json_data.nodes) {
if (node.color == 'blue')
continue;
label = document.createElement('span');
// Use classList.add for modern html5 browser
// className erases all previous classes
label.className = 'node-label';
label.innerText = node.label;
labels[node.id] = label;
fragment.appendChild(label);
}
container.appendChild(fragment);
return labels;
}
function build_graph(json_data) {
var color_map = {
'red': 0xff3300ff,
'grey': 0xd9d9d9ff,
'blue': 0x0099ccff,
'green': 0x00cc66ff,
'white': 0xffffffff,
};
var container = document.getElementById('graph');
var graph = Viva.Graph.graph();
//var graphGenerator = Viva.Graph.generator();
//var graph = graphGenerator.grid(100, 100);
// add nodes
// ES2017 Entries: avoids having to look up each value in the original objec
// Object.entries(json_data.nodes).forEach(
// ([key, value]) => {
// });
/*
json_data.nodes.forEach((value) => {
graph.addNode(value.id, {label: value.label, color: value.color});
}
);
*/
for (let node of json_data.nodes) {
graph.addNode(node.id, {label: node.label, color: node.color});
}
// add edges
for (let edge of json_data.edges) {
// default color: white
graph.addLink(edge.source, edge.target, {label: edge.label, color: !edge.color ? 'white' : edge.color});
}
// we generate DOM label for each graph node. Be cautious
// here, since for large graphs with more than 1k nodes, this will
// become a bottleneck.
var labels = generateLabels(json_data, container);
// Graph settings
// This is webgl renderer, Labels are rendered as DOM nodes
var graphics = Viva.Graph.View.webglGraphics();
// Render Nodes
graphics.node(function(node){
return Viva.Graph.View.webglSquare(10, color_map[node.data.color]);
});
// Render Edges
graphics.link(function(link) {
return Viva.Graph.View.webglLine(color_map[link.data.color]);
});
// Layout
var layout = Viva.Graph.Layout.forceDirected(graph, {
springLength : 100,
springCoeff : 0.0008,
dragCoeff : 0.02,
gravity : -4.2
});
var renderer = Viva.Graph.View.renderer(graph,
{
layout : layout,
graphics : graphics,
container : container,
//renderLinks : true,
//prerender : true
});
// Draw the graph
renderer.run();
// Display nodes later
setTimeout(function(){
// Stop rendering
renderer.pause();
graphics.placeNode(function(ui, pos) {
// This callback is called by the renderer before it updates
// node coordinate. We can use it to update corresponding DOM
// label position;
let node_id = ui.node.id;
if (!(node_id in labels))
return;
// we create a copy of layout position
let domPos = {
x: pos.x,
y: pos.y
};
// And ask graphics to transform it to DOM coordinates:
graphics.transformGraphToClientCoordinates(domPos);
// then move corresponding dom label to its own position:
let labelStyle = labels[node_id].style;
labelStyle.left = domPos.x + 'px';
labelStyle.top = domPos.y + 'px';
});
}, 120000); // 2minutes
}
</script>
<style type='text/css'>
body, html, canvas {
top: 0;
left:0;
height: 100%;
width: 100%;
position: absolute;
margin:0;
overflow: hidden;
background-color: black;
}
fieldset {
color: white;
}
.node-label {
font-size: 0.6em;
position: absolute;
/*pointer-events: none;*/
color: white;
z-index: 10;
top: -100px;
left: -100px;
}
#graph{
position: absolute;
width: 100%;
height: 100%;
}
#jsonFile {
position: absolute;
z-index: 15;
}
</style>
</head>
<body>
<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">
<fieldset>
<legend>Choose and load a graph.json file</legend>
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
</fieldset>
</form>
<div id='graph'></div>
</body>
</html>
This diff is collapsed.
Supports Markdown
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