diff options
Diffstat (limited to 'www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html')
| -rw-r--r-- | www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html | 216 |
1 files changed, 216 insertions, 0 deletions
diff --git a/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html b/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html new file mode 100644 index 00000000..b31bfd48 --- /dev/null +++ b/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html @@ -0,0 +1,216 @@ +<!doctype html> +<html> +<head> + <title>Network | DOT language playground</title> + + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> + <script src="../../../../dist/vis.js"></script> + <link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + body, html { + font: 10pt sans; + line-height: 1.5em;; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + color: #4d4d4d; + box-sizing: border-box; + overflow: hidden; + } + + #header { + margin: 0; + padding: 10px; + box-sizing: border-box; + } + + #contents { + 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 { + color: red; + } + + #data { + width: 100%; + height: 100%; + border: 1px solid #d3d3d3; + box-sizing: border-box; + resize: none; + } + + #draw { + padding: 5px 15px; + } + + #mynetwork { + width: 100%; + height: 100%; + border: 1px solid #d3d3d3; + box-sizing: border-box; + } + + a:hover { + color: red; + } + + </style> + <script src="../../../googleAnalytics.js"></script> +</head> +<body> + +<div id="header"> + <h1>DOT language playground</h1> + + <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 *</a>, + <a href="#" class="example" data-url="graphvizGallery/process.gv.txt">process *</a>, + <a href="#" class="example" data-url="graphvizGallery/siblings.gv.txt">siblings *</a>, + <a href="#" class="example" data-url="graphvizGallery/softmaint.gv.txt">softmaint *</a>, + <a href="#" class="example" data-url="graphvizGallery/traffic_lights.gv.txt">traffic lights *</a>, + <a href="#" class="example" data-url="graphvizGallery/transparency.gv.txt">transparency *</a>, + <a href="#" class="example" data-url="graphvizGallery/twopi2.gv.txt">twopi2 *</a>, + <a href="#" class="example" data-url="graphvizGallery/unix.gv.txt">unix *</a>, + <a href="#" class="example" data-url="graphvizGallery/world.gv.txt">world *</a> + </p> + <p> + The examples marked with a star (*) come straight from the <a href="http://www.graphviz.org/Gallery.php">GraphViz gallery</a>. + </p> + <div> + <button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button> + <span id="error"></span> + </div> +</div> + +<div id="contents"> + <div id="left"> + <textarea id="data"> +digraph { + node [shape=circle fontsize=16] + edge [length=100, color=gray, fontcolor=black] + + A -> A[label=0.5]; + B -> B[label=1.2] -> C[label=0.7] -- A; + B -> D; + D -> {B; C} + D -> E[label=0.2]; + F -> F; + A [ + fontcolor=white, + color=red, + ] +} + </textarea> + </div> + <div id="right"> + <div id="mynetwork"></div> + </div> +</div> + +<script type="text/javascript"> + // create a network + var container = document.getElementById('mynetwork'); + var options = { + physics: { + stabilization: false, + barnesHut: { + springLength: 200 + } + } + }; + var data = {}; + var network = new vis.Network(container, data, options); + + $('#draw').click(draw); + + $('a.example').click(function (event) { + var url = $(event.target).data('url'); + $.get(url) + .done(function(dotData) { + $('#data').val(dotData); + draw(); + }) + .fail(function () { + $('#error').html('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.'); + resize(); + }); + }); + + $(window).resize(resize); + $(window).load(draw); + + $('#data').keydown(function (event) { + if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter + draw(); + event.stopPropagation(); + event.preventDefault(); + } + }); + + function resize() { + $('#contents').height($('body').height() - $('#header').height() - 30); + } + + function draw () { + try { + resize(); + $('#error').html(''); + + // Provide a string with data in DOT language + data = vis.network.convertDot($('#data').val()); + + network.setData(data); + } + catch (err) { + // set the cursor at the position where the error occurred + var match = /\(char (.*)\)/.exec(err); + if (match) { + var pos = Number(match[1]); + var textarea = $('#data')[0]; + if(textarea.setSelectionRange) { + textarea.focus(); + textarea.setSelectionRange(pos, pos); + } + } + + // show an error message + $('#error').html(err.toString()); + } + } +</script> +</body> +</html> |