@ -15,16 +15,44 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
color: #4d4d4d; color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
} }
#frame {
width: 100%;
height: 99%;
}
#frame td {
#header {
margin: 0;
padding: 10px; padding: 10px;
box-sizing: border-box;
}
#contents {
height: 100%; height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
} }
#left, #right {
position: absolute;
width: 50%;
height: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
#left {
top: 0;
left: 0;
}
#right {
top: 0;
right: 0;
}
#error { #error {
color: red; color: red;
} }
@ -33,73 +61,65 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #d3d3d3; border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
} }
#mynetwork { #mynetwork {
float: left;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #d3d3d3; border: 1px solid #d3d3d3;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
}
textarea.example {
display: none;
} }
< / style > < / style >
< script src = "../../../../googleAnalytics.js" > < / script > < script src = "../../../../googleAnalytics.js" > < / script >
< / head > < / head >
< body > < body >
< table id = "frame" >
< col width = "50%" >
< col width = "50%" >
< tr >
< td colspan = "2" style = "height: 50px;" >
< h1 > DOT language playground< / h1 >
< p id = "warning" style = "color: red; display: none;" >
Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.
< / p >
< script >
if (location.href.substr(0, 5) == 'file:') {
$('#warning').show();
}
< / script >
< p >
Play around with the DOT language in the textarea below, or select one of the following examples:
< / p >
< p style = "margin-left: 30px;" >
< a href = "#" class = "example" data-url = "data/simple.gv.txt" > simple< / a > ,
< a href = "#" class = "example" data-url = "data/computer_network.gv.txt" > computer network< / a > ,
< a href = "#" class = "example" data-url = "data/cellular_automata.gv.txt" > cellular automata< / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/fsm.gv.txt" > fsm *< / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/hello.gv.txt" > hello *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/process.gv.txt" > process *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/siblings.gv.txt" > siblings *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/softmaint.gv.txt" > softmaint *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/traffic_lights.gv.txt" > traffic lights *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/transparency.gv.txt" > transparency *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/twopi2.gv.txt" > twopi2 *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/unix.gv.txt" > unix *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/world.gv.txt" > world *< / sup > < / a >
< / p >
< p >
The examples marked with a star (*) come straight from the < a href = "http://www.graphviz.org/Gallery.php" > gallery of GraphViz< / a > .
< / p >
< div >
< br >
< button id = "draw" > Draw< / button >
< span id = "error" > < / span >
< / div >
< / td >
< / tr >
< tr >
< td >
< textarea id = "data" >
< div id = "header" >
< h1 > DOT language playground< / h1 >
< p id = "warning" style = "color: red; display: none;" >
Error: Cannot fetch the example data because of security restrictions in JavaScript. Run the example from a server instead of as a local file to resolve this problem. Alternatively, you can copy/paste the data of DOT graphs manually in the textarea below.
< / p >
< script >
if (location.href.substr(0, 5) == 'file:') {
$('#warning').show();
}
< / script >
< p >
Play around with the DOT language in the textarea below, or select one of the following examples:
< / p >
< p style = "margin-left: 30px;" >
< a href = "#" class = "example" data-url = "data/simple.gv.txt" > simple< / a > ,
< a href = "#" class = "example" data-url = "data/computer_network.gv.txt" > computer network< / a > ,
< a href = "#" class = "example" data-url = "data/cellular_automata.gv.txt" > cellular automata< / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/fsm.gv.txt" > fsm *< / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/hello.gv.txt" > hello *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/process.gv.txt" > process *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/siblings.gv.txt" > siblings *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/softmaint.gv.txt" > softmaint *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/traffic_lights.gv.txt" > traffic lights *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/transparency.gv.txt" > transparency *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/twopi2.gv.txt" > twopi2 *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/unix.gv.txt" > unix *< / sup > < / a > ,
< a href = "#" class = "example" data-url = "graphvizGallery/world.gv.txt" > world *< / sup > < / a >
< / p >
< p >
The examples marked with a star (*) come straight from the < a href = "http://www.graphviz.org/Gallery.php" > gallery of GraphViz< / a > .
< / p >
< div >
< br >
< button id = "draw" > Draw< / button >
< span id = "error" > < / span >
< / div >
< / div >
< div id = "contents" >
< div id = "left" >
< textarea id = "data" >
digraph { digraph {
node [shape=circle fontsize=16] node [shape=circle fontsize=16]
edge [length=100, color=gray, fontcolor=black] edge [length=100, color=gray, fontcolor=black]
@ -115,43 +135,14 @@ digraph {
color=red, color=red,
] ]
} }
< / textarea >
< / td >
< td >
< div id = "mynetwork" > < / div >
< / td >
< / tr >
< / table >
< / textarea >
< / div >
< div id = "right" >
< div id = "mynetwork" > < / div >
< / div >
< / div >
< script type = "text/javascript" > < script type = "text/javascript" >
var btnDraw = document.getElementById('draw');
var txtData = document.getElementById('data');
var txtError = document.getElementById('error');
btnDraw.onclick = draw;
// resize the network when window resizes
window.onresize = function () {
network.redraw()
};
$('button.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url).done(function(dotData) {
txtData.value = dotData;
draw();
});
});
$('a.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url).done(function(dotData) {
txtData.value = dotData;
draw();
});
});
$(window).load(draw);
// create a network // create a network
var container = document.getElementById('mynetwork'); var container = document.getElementById('mynetwork');
var options = { var options = {
@ -165,13 +156,32 @@ digraph {
var data = {}; var data = {};
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
// parse and draw the data
$('#draw').click(draw);
$('a.example').click(function (event) {
var url = $(event.target).data('url');
$.get(url).done(function(dotData) {
$('#data').val(dotData);
draw();
});
});
$(window).resize(resize);
$(window).load(function () {
resize();
draw();
});
function resize() {
$('#contents').height($('body').height() - $('#header').height() - 30);
}
function draw () { function draw () {
try { try {
txtError.innerHTML = '';
$('#error').html('') ;
// Provide a string with data in DOT language // Provide a string with data in DOT language
data = vis.network.convertDot(txtData.value);
data = vis.network.convertDot($('#data').val() );
network.setData(data); network.setData(data);
} }
@ -180,14 +190,15 @@ digraph {
var match = /\(char (.*)\)/.exec(err); var match = /\(char (.*)\)/.exec(err);
if (match) { if (match) {
var pos = Number(match[1]); var pos = Number(match[1]);
if(txtData.setSelectionRange) {
txtData.focus();
txtData.setSelectionRange(pos, pos);
var textarea = $('#data')[0];
if(textarea.setSelectionRange) {
textarea.focus();
textarea.setSelectionRange(pos, pos);
} }
} }
// show an error message // show an error message
txtError.innerHTML = err.toString( );
$('#error').html(err.toString() );
} }
} }
< / script > < / script >
jos
9 years ago