diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-27 12:42:48 -0400 |
| commit | 210e8feae2fb4842bfb2de38666e6c41671fef3c (patch) | |
| tree | cbdafa34b1a6260bb20236d7e9de9eb1b690a1c5 /www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html | |
| parent | e7e7baeaad90229ccb3e0f45f4ebd77be7d79b14 (diff) | |
removed lib
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, 0 insertions, 216 deletions
diff --git a/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html b/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html deleted file mode 100644 index b31bfd48..00000000 --- a/www/lib/vis/examples/network/data/dotLanguage/dotPlayground.html +++ /dev/null @@ -1,216 +0,0 @@ -<!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> |
