jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Released v4.15.1

gh-pages
jos 8 years ago
parent
3703b4ecbf
commit
0d630218fb
10 changed files with 12684 additions and 12123 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +12573
    -12091
      dist/vis.js
  2. +1
    -1
      dist/vis.map
  3. +22
    -22
      dist/vis.min.js
  4. +8
    -1
      docs/network/nodes.html
  5. BIN
      download/vis.zip
  6. +67
    -0
      examples/network/exampleApplications/disassemblerExample.html
  7. +7
    -3
      examples/network/labels/labelAlignment.html
  8. BIN
      images/exampleScreenshots/network/exampleApplications/disassemblerExample.png
  9. +5
    -5
      index.html
  10. +1
    -0
      network_examples.html

+ 12573
- 12091
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 22
- 22
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 8
- 1
docs/network/nodes.html View File

@ -133,7 +133,7 @@ var options = {
background: 'none', background: 'none',
strokeWidth: 0, // px strokeWidth: 0, // px
strokeColor: '#ffffff', strokeColor: '#ffffff',
align: 'horizontal'
align: 'center'
}, },
group: undefined, group: undefined,
hidden: false, hidden: false,
@ -374,6 +374,13 @@ network.setOptions(options);
<td><code>'#ffffff'</code></td> <td><code>'#ffffff'</code></td>
<td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td> <td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td>
</tr> </tr>
<tr parent="font" class="hidden">
<td class="indent">font.align</td>
<td>String</td>
<td><code>'center'</code></td>
<td>This can be set to 'left' to make the label left-aligned. Otherwise,
defaults to 'center'.</td>
</tr>
<tr> <tr>
<td>group</td> <td>group</td>
<td>String</td> <td>String</td>

BIN
download/vis.zip View File


+ 67
- 0
examples/network/exampleApplications/disassemblerExample.html View File

@ -0,0 +1,67 @@
<html>
<head>
<style type="text/css">
#mynetwork {
width: 900px;
height: 850px;
border: 1px solid lightgray;
}
</style>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
</head>
<body>
<p>Use VisJS to diagram the Control-Flow-Graph (CFG) of a function from
a program you wish to analyze.</p>
<p><div id="mynetwork"></div><br /></p>
<script type="text/javascript">
var opts = {
manipulation: false,
height: '90%',
layout: {
hierarchical: {
enabled: true,
levelSeparation: 300
}
},
physics: {
hierarchicalRepulsion: {
nodeDistance: 300
}
}
};
nodes = [
{'id': 'cfg_0x00405a2e', 'size': 150, 'label': "0x00405a2e:\nmov DWORD PTR ss:[esp + 0x000000b0], 0x00000002\nmov DWORD PTR ss:[ebp + 0x00], esi\ntest bl, 0x02\nje 0x00405a49<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a49', 'size': 150, 'label': "0x00405a49:\ntest bl, 0x01\nje 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a55', 'size': 150, 'label': "0x00405a55:\nmov ecx, DWORD PTR ss:[esp + 0x1c]\npush ecx\ncall 0x004095c6<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a62', 'size': 150, 'label': "0x00405a62:\nmov eax, 0x00000002\nmov ecx, DWORD PTR ss:[esp + 0x000000a8]\nmov DWORD PTR fs:[0x00000000], ecx\npop ecx\npop esi\npop ebp\npop ebx\nadd esp, 0x000000a4\nret\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x004095c6', 'size': 150, 'label': "0x004095c6:\nmov edi, edi\npush ebp\nmov ebp, esp\npop ebp\njmp 0x00417563<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a39', 'size': 150, 'label': "0x00405a39:\nand ebx, 0xfd<-0x03>\nlea ecx, [esp + 0x34]\nmov DWORD PTR ss:[esp + 0x10], ebx\ncall 0x00403450<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00403450', 'size': 150, 'label': "0x00403450:\npush 0xff<-0x01>\npush 0x0042fa64\nmov eax, DWORD PTR fs:[0x00000000]\npush eax\npush ecx\npush ebx\npush ebp\npush esi\npush edi\nmov eax, DWORD PTR ds:[0x0043dff0<.data+0x0ff0>]\nxor eax, esp\npush eax\nlea eax, [esp + 0x18]\nmov DWORD PTR fs:[0x00000000], eax\nmov esi, ecx\nmov DWORD PTR ss:[esp + 0x14], esi\npush esi\nmov DWORD PTR ss:[esp + 0x24], 0x00000004\ncall 0x0042f03f<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a4e', 'size': 150, 'label': "0x00405a4e:\ncmp DWORD PTR ss:[esp + 0x30], 0x10\njb 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a5f', 'size': 150, 'label': "0x00405a5f:\nadd esp, 0x04\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
]
edges = [
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a39", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a4e", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x00405a5f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x004095c6", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x004095c6", 'to': "cfg_0x00417563", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00403450", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x00403489", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x0042f03f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a55", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a5f", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
]
var container = document.getElementById('mynetwork');
var data = {'nodes': nodes, 'edges': edges}
var gph = new vis.Network(container, data, opts);
</script>
</body>
</html>

+ 7
- 3
examples/network/labels/labelAlignment.html View File

@ -21,7 +21,10 @@
<body> <body>
<p>Labels of edges can be aligned to edges in various ways. <br>Label alignment for nodes (top, bottom, left, right, inside) is planned but not in vis yet.</p>
<p>Labels of edges can be aligned to edges in various ways.</p>
<p>Text-alignment within node labels can be 'left' or 'center', other font alignments not implemented.</p>
<p>Label alignment (placement of label &quot;box&quot;) for nodes (top, bottom, left, right, inside) is
planned but not in vis yet.</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
@ -30,9 +33,10 @@
var nodes = [ var nodes = [
{id: 1, label: 'Node 1'}, {id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'}, {id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 3, label: 'Node 3:\nLeft-Aligned', font: {'face': 'Monospace', align: 'left'}},
{id: 4, label: 'Node 4'}, {id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
{id: 5, label: 'Node 5\nLeft-Aligned box', shape: 'box',
font: {'face': 'Monospace', align: 'left'}}
]; ];
// create an array with edges // create an array with edges

BIN
images/exampleScreenshots/network/exampleApplications/disassemblerExample.png View File

Before After
Width: 120  |  Height: 120  |  Size: 4.7 KiB

+ 5
- 5
index.html View File

@ -28,7 +28,7 @@
<script src="./js/smooth-scroll.min.js"></script> <script src="./js/smooth-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.1/vis.min.js"></script>
<script language="JavaScript"> <script language="JavaScript">
smoothScroll.init(); smoothScroll.init();
@ -36,7 +36,7 @@
function evalLinks() { function evalLinks() {
if (typeof vis === 'undefined') { if (typeof vis === 'undefined') {
console.log(document.getElementById("linkStatus")); console.log(document.getElementById("linkStatus"));
document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.15.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.15.1) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
document.getElementById("cdn_vis").style.color = "rgb(150,150,150)"; document.getElementById("cdn_vis").style.color = "rgb(150,150,150)";
document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)"; document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)";
} }
@ -210,13 +210,13 @@
<pre class="prettyprint">bower install vis</pre> <pre class="prettyprint">bower install vis</pre>
<h3>link from cdnjs.com</h3> <h3>link from cdnjs.com</h3>
<p> <p>
<a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.min.js" target="_blank">vis.min.js</a> <br>
<a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.min.css" target="_blank">vis.min.css</a> <br>
<a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.1/vis.min.js" target="_blank">vis.min.js</a> <br>
<a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.1/vis.min.css" target="_blank">vis.min.css</a> <br>
<span id="linkStatus"></span> <span id="linkStatus"></span>
</p> </p>
<h3>download</h3> <h3>download</h3>
<p> <p>
<a href="download/vis.zip">vis.zip (version <span class="version">4.15.0</span>)</a>
<a href="download/vis.zip">vis.zip (version <span class="version">4.15.1</span>)</a>
</p> </p>
</div> </div>
</div> </div>

+ 1
- 0
network_examples.html View File

@ -137,6 +137,7 @@
<a class='exampleLink' href="examples/network/other/navigation.html">navigation buttons and keyboard shortcuts</a><br /> <a class='exampleLink' href="examples/network/other/navigation.html">navigation buttons and keyboard shortcuts</a><br />
<h3>example applications</h3> <h3>example applications</h3>
<a class='exampleLink' href="examples/network/exampleApplications/disassemblerExample.html">disassembler example</a><br />
<a class='exampleLink' href="examples/network/exampleApplications/lesMiserables.html">les miserables cast</a><br /> <a class='exampleLink' href="examples/network/exampleApplications/lesMiserables.html">les miserables cast</a><br />
<a class='exampleLink' href="examples/network/exampleApplications/loadingBar.html">loading bar during stabilization</a><br /> <a class='exampleLink' href="examples/network/exampleApplications/loadingBar.html">loading bar during stabilization</a><br />
<a class='exampleLink' href="examples/network/exampleApplications/neighbourhoodHighlight.html">neighbourhood heighlight</a><br /> <a class='exampleLink' href="examples/network/exampleApplications/neighbourhoodHighlight.html">neighbourhood heighlight</a><br />

Write Preview
Loading…
Cancel
Save