mega changes, including updates and X

author: Pliable Pixels <pliablepixels@gmail.com> 2017-09-21 12:49:18 -0400
committer: Pliable Pixels <pliablepixels@gmail.com> 2017-09-21 12:49:18 -0400
commit: b28028ac4082842143b0f528d6bc539da6ccb419 (patch)
tree: 1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/vis/examples/network/nodeStyles
parent: 676270d21beed31d767a06c89522198c77d5d865 (diff)
11 files changed, 1139 insertions, 0 deletions
diff --git a/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html b/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html
new file mode 100644
index 00000000..e80590b7
--- /dev/null
+++ b/www/lib/vis/examples/network/nodeStyles/HTMLInNodes.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | HTML in nodex</title>
+
+    <style type="text/css">
+        body {
+            font: 10pt arial;
+        }
+        #mynetwork {
+            width: 600px;
+            height: 600px;
+            border: 1px solid lightgray;
+            background-color:#eeeeee;
+        }
+
+    </style>
+
+    <script type="text/javascript" src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var network = null;
+
+        var DIR = 'img/refresh-cl/';
+        var LENGTH_MAIN = 150;
+        var LENGTH_SUB = 50;
+
+
+        var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="390" height="65">' +
+            '<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' +
+            '<foreignObject x="15" y="10" width="100%" height="100%">' +
+            '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
+            ' <em>I</em> am' +
+            '<span style="color:white; text-shadow:0 0 20px #000000;">' +
+            ' HTML in SVG!</span>' +
+            '</div>' +
+            '</foreignObject>' +
+            '</svg>';
+
+
+        var url = "data:image/svg+xml;charset=utf-8,"+ encodeURIComponent(svg);
+
+        // Called when the Visualization API is loaded.
+        function draw() {
+            // Create a data table with nodes.
+            nodes = [];
+
+            // Create a data table with links.
+            edges = [];
+
+            nodes.push({id: 1, label: 'Get HTML', image: url, shape: 'image'});
+            nodes.push({id: 2, label: 'Using SVG', image: url, shape: 'image'});
+            edges.push({from: 1, to: 2, length: 300});
+
+            // create a network
+            var container = document.getElementById('mynetwork');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {
+                physics: {stabilization: false},
+                edges: {smooth: false}
+            };
+            network = new vis.Network(container, data, options);
+        }
+    </script>
+    <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body onload="draw()">
+<p>
+    This example demonstrates showing custom HTML in Nodes, by using an SVG image.
+</p>
+<p style="color: red;">
+    WARNING: this is currently not supported by all browsers.
+</p>
+<div id="mynetwork"></div>
+</body>
+</html>
diff --git a/www/lib/vis/examples/network/nodeStyles/circularImages.html b/www/lib/vis/examples/network/nodeStyles/circularImages.html
new file mode 100644
index 00000000..b0f144c5
--- /dev/null
+++ b/www/lib/vis/examples/network/nodeStyles/circularImages.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Circular images</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+    }
+    #mynetwork {
+      width: 800px;
+      height: 800px;
+      border: 1px solid lightgray;
+      background-color:#333333;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript"> 
+    var DIR = 'img/soft-scraps-icons/';
+
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    // Called when the Visualization API is loaded.
+    function draw() {
+      // create people.
+      // value corresponds with the age of the person
+      var DIR = '../img/indonesia/';
+      nodes = [
+        {id: 1,  shape: 'circularImage', image: DIR + '1.png'},
+        {id: 2,  shape: 'circularImage', image: DIR + '2.png'},
+        {id: 3,  shape: 'circularImage', image: DIR + '3.png'},
+        {id: 4,  shape: 'circularImage', image: DIR + '4.png', label:"pictures by this guy!"},
+        {id: 5,  shape: 'circularImage', image: DIR + '5.png'},
+        {id: 6,  shape: 'circularImage', image: DIR + '6.png'},
+        {id: 7,  shape: 'circularImage', image: DIR + '7.png'},
+        {id: 8,  shape: 'circularImage', image: DIR + '8.png'},
+        {id: 9,  shape: 'circularImage', image: DIR + '9.png'},
+        {id: 10, shape: 'circularImage', image: DIR + '10.png'},
+        {id: 11, shape: 'circularImage', image: DIR + '11.png'},
+        {id: 12, shape: 'circularImage', image: DIR + '12.png'},
+        {id: 13, shape: 'circularImage', image: DIR + '13.png'},
+        {id: 14, shape: 'circularImage', image: DIR + '14.png'},
+        {id: 15, shape: 'circularImage', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"},
+        {id: 16, shape: 'circularImage', image: DIR + 'anotherMissing.png', brokenImage: DIR + '9.png', label:"fallback image in action"}
+      ];
+
+      // create connections between people
+      // value corresponds with the amount of contact between two people
+      edges = [
+        {from: 1, to: 2},
+        {from: 2, to: 3},
+        {from: 2, to: 4},
+        {from: 4, to: 5},
+        {from: 4, to: 10},
+        {from: 4, to: 6},
+        {from: 6, to: 7},
+        {from: 7, to: 8},
+        {from: 8, to: 9},
+        {from: 8, to: 10},
+        {from: 10, to: 11},
+        {from: 11, to: 12},
+        {from: 12, to: 13},
+        {from: 13, to: 14},
+        {from: 9, to: 16}
+      ];
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        nodes: {
+          borderWidth:4,
+          size:30,
+	      color: {
+            border: '#222222',
+            background: '#666666'
+          },
+          font:{color:'#eeeeee'}
+        },
+        edges: {
+          color: 'lightgray'
+        }
+      };
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body onload="draw()">
+
+<div id="mynetwork"></div>
+</body>
+</html>
diff --git a/www/lib/vis/examples/network/nodeStyles/colors.html b/www/lib/vis/examples/network/nodeStyles/colors.html
new file mode 100644
index 00000000..05bae1dd
--- /dev/null
+++ b/www/lib/vis/examples/network/nodeStyles/colors.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Basic usage</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+
+    p {
+      max-width:700px;
+    }
+  </style>
+</head>
+<body>
+
+<p>
+  Nodes can be all kinds of colors. This example shows all possible ways of defining colors. If you supply an object, the undefined fields will assume the default colors.
+  When supplying a hex or rgb format color, it will be parsed and variations will be created for highlight and hover. Edges with inheritColor take the border colors.
+</p>
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([
+    {id: 1, label:'html color', color: 'lime'},
+    {id: 2, label:'rgb color', color: 'rgb(255,168,7)'},
+    {id: 3, label:'hex color', color: '#7BE141'},
+    {id: 4, label:'rgba color', color: 'rgba(97,195,238,0.5)'},
+    {id: 5, label:'colorObject', color: {background:'pink', border:'purple'}},
+    {id: 6, label:'colorObject + highlight', color: {background:'#F03967', border:'#713E7F',highlight:{background:'red',border:'black'}}},
+    {id: 7, label:'colorObject + highlight + hover', color: {background:'cyan', border:'blue',highlight:{background:'red',border:'blue'},hover:{background:'white',border:'red'}}}
+  ])
+
+  // create an array with edges
+  var edges = new vis.DataSet([
+    {from: 1, to: 3},
+    {from: 1, to: 2},
+    {from: 2, to: 4},
+    {from: 2, to: 5},
+    {from: 2, to: 6},
+    {from: 4, to: 7},
+  ]);
+
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+    nodes: {borderWidth: 2},
+    interaction: {hover: true}
+  }
+  var network = new vis.Network(container, data, options);
+</script>
+
+<script src="../../googleAnalytics.js"></script>
+</body>
+</html>
diff --git a/www/lib/vis/examples/network/nodeStyles/customGroups.html b/www/lib/vis/examples/network/nodeStyles/customGroups.html
new file mode 100644
index 00000000..5c4b11c9
--- /dev/null
+++ b/www/lib/vis/examples/network/nodeStyles/customGroups.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Custom Groups</title>
+
+    <style>
+        body {
+            color: #d3d3d3;
+            font: 12pt arial;
+            background-color: #222222;
+        }
+
+        #mynetwork {
+            width: 800px;
+            height: 800px;
+            border: 1px solid #444444;
+            background-color: #222222;
+        }
+    </style>
+
+    <script type="text/javascript" src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
+    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+
+    <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+<i class="fa fa-flag"></i> We use an icon once in the DOM so the CSS for fontAwesome is loaded.</h2>
+<div id="mynetwork"></div>
+<script type="text/javascript">
+    var nodes = [
+        {id: 0, label: "0", group: 'source'},
+        {id: 1, label: "1", group: 'icons'},
+        {id: 2, label: "2", group: 'icons'},
+        {id: 3, label: "3", group: 'icons'},
+        {id: 4, label: "4", group: 'icons'},
+        {id: 5, label: "5", group: 'icons'},
+        {id: 6, label: "6", group: 'icons'},
+        {id: 7, label: "7", group: 'icons'},
+        {id: 8, label: "8", group: 'icons'},
+        {id: 9, label: "9", group: 'icons'},
+        {id: 10, label: "10", group: 'mints'},
+        {id: 11, label: "11", group: 'mints'},
+        {id: 12, label: "12", group: 'mints'},
+        {id: 13, label: "13", group: 'mints'},
+        {id: 14, label: "14", group: 'mints'},
+        {id: 15, group: 'dotsWithLabel'},
+        {id: 16, group: 'dotsWithLabel'},
+        {id: 17, group: 'dotsWithLabel'},
+        {id: 18, group: 'dotsWithLabel'},
+        {id: 19, group: 'dotsWithLabel'},
+        {id: 20, label: "diamonds", group: 'diamonds'},
+        {id: 21, label: "diamonds", group: 'diamonds'},
+        {id: 22, label: "diamonds", group: 'diamonds'},
+        {id: 23, label: "diamonds", group: 'diamonds'},
+    ];
+    var edges = [
+        {from: 1, to: 0},
+        {from: 2, to: 0},
+        {from: 4, to: 3},
+        {from: 5, to: 4},
+        {from: 4, to: 0},
+        {from: 7, to: 6},
+        {from: 8, to: 7},
+        {from: 7, to: 0},
+        {from: 10, to: 9},
+        {from: 11, to: 10},
+        {from: 10, to: 4},
+        {from: 13, to: 12},
+        {from: 14, to: 13},
+        {from: 13, to: 0},
+        {from: 16, to: 15},
+        {from: 17, to: 15},
+        {from: 15, to: 10},
+        {from: 19, to: 18},
+        {from: 20, to: 19},
+        {from: 19, to: 4},
+        {from: 22, to: 21},
+        {from: 23, to: 22},
+        {from: 23, to: 0},
+    ]
+
+    // create a network
+    var container = document.getElementById('mynetwork');
+    var data = {
+        nodes: nodes,
+        edges: edges
+    };
+    var options = {
+        nodes: {
+            shape: 'dot',
+            size: 20,
+            font: {
+                size: 15,
+                color: '#ffffff'
+            },
+            borderWidth: 2
+        },
+        edges: {
+            width: 2
+        },
+        groups: {
+            diamonds: {
+                color: {background:'red',border:'white'},
+                shape: 'diamond'
+            },
+            dotsWithLabel: {
+                label: "I'm a dot!",
+                shape: 'dot',
+                color: 'cyan'
+            },
+            mints: {color:'rgb(0,255,140)'},
+            icons: {
+                shape: 'icon',
+                icon: {
+                    face: 'FontAwesome',
+                    code: '\uf0c0',
+                    size: 50,
+                    color: 'orange'
+                }
+            },
+            source: {
+                color:{border:'white'}
+            }
+        }
+    };
+    var network = new vis.Network(container, data, options);
+
+</script>
+</body>
+</html>
diff --git a/www/lib/vis/examples/network/nodeStyles/groups.html b/www/lib/vis/examples/network/nodeStyles/groups.html
new file mode 100644
index 00000000..148ffa64
--- /dev/null
+++ b/www/lib/vis/examples/network/nodeStyles/groups.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Groups</title>
+
+    <style>
+        body {
+            color: #d3d3d3;
+            font: 12pt arial;
+            background-color: #222222;
+        }
+
+        #mynetwork {
+            width: 800px;
+            height: 800px;
+            border: 1px solid #444444;
+            background-color: #222222;
+        }
+    </style>
+
+    <script type="text/javascript" src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
+
+    <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<div id="mynetwork"></div>
+<script type="text/javascript">
+    var color = 'gray';
+    var len = undefined;
+
+    var nodes = [{id: 0, label: "0", group: 0},
+        {id: 1, label: "1", group: 0},
+        {id: 2, label: "2", group: 0},
+        {id: 3, label: "3", group: 1},
+        {id: 4, label: "4", group: 1},
+        {id: 5, label: "5", group: 1},
+        {id: 6, label: "6", group: 2},
+        {id: 7, label: "7", group: 2},
+        {id: 8, label: "8", group: 2},
+        {id: 9, label: "9", group: 3},
+        {id: 10, label: "10", group: 3},
+        {id: 11, label: "11", group: 3},
+        {id: 12, label: "12", group: 4},
+        {id: 13, label: "13", group: 4},
+        {id: 14, label: "14", group: 4},
+        {id: 15, label: "15", group: 5},
+        {id: 16, label: "16", group: 5},
+        {id: 17, label: "17", group: 5},
+        {id: 18, label: "18", group: 6},
+        {id: 19, label: "19", group: 6},
+        {id: 20, label: "20", group: 6},
+        {id: 21, label: "21", group: 7},
+        {id: 22, label: "22", group: 7},
+        {id: 23, label: "23", group: 7},
+        {id: 24, label: "24", group: 8},
+        {id: 25, label: "25", group: 8},
+        {id: 26, label: "26", group: 8},
+        {id: 27, label: "27", group: 9},
+        {id: 28, label: "28", group: 9},
+        {id: 29, label: "29", group: 9}
+    ];
+    var edges = [{from: 1, to: 0},
+        {from: 2, to: 0},
+        {from: 4, to: 3},
+        {from: 5, to: 4},
+        {from: 4, to: 0},
+        {from: 7, to: 6},
+        {from: 8, to: 7},
+        {from: 7, to: 0},
+        {from: 10, to: 9},
+        {from: 11, to: 10},
+        {from: 10, to: 4},
+        {from: 13, to: 12},
+        {from: 14, to: 13},
+        {from: 13, to: 0},
+        {from: 16, to: 15},
+        {from: 17, to: 15},
+        {from: 15, to: 10},
+        {from: 19, to: 18},
+        {from: 20, to: 19},
+        {from: 19, to: 4},
+        {from: 22, to: 21},
+        {from: 23, to: 22},
+        {from: 22, to: 13},
+        {from: 25, to: 24},
+        {from: 26, to: 25},
+        {from: 25, to: 7},
+        {from: 28, to: 27},
+        {from: 29, to: 28},
+        {from: 28, to: 0}
+    ]
+
+    // create a network
+    var container = document.getElementById('mynetwork');
+    var data = {
+        nodes: nodes,
+        edges: edges
+    };
+    var options = {
+        nodes: {
+            shape: 'dot',
+            size: 30,
+            font: {
+                size: 32,
+                color: '#ffffff'
+            },
+            borderWidth: 2
+        },
+        edges: {
+            width: 2
+        }
+    };
+    network = new vis.Network(container, data, options);
+</script>
+</body>
+</html>
diff --git a/www/lib/vis/examples/network/nodeStyles/icons.html b/www/lib/vis/examples/network/nodeStyles/icons.html
new file mode 100644
index 00000000..859fc065
--- /dev/null
+++ b/www/lib/vis/examples/network/nodeStyles/icons.html
@@ -0,0 +1,196 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Network | node as icon</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+
+  <style>
+    #mynetworkFA,
+    #mynetworkIO {
+      height: 300px;
+      width: 700px;
+      border:1px solid lightgrey;
+    }
+
+    p {
+      max-width:700px;
+    }
+  </style>
+
+  <script language="JavaScript">
+    function draw() {
+      /*
+       * Example for FontAwesome
+       */
+      var optionsFA = {
+        groups: {
+          usergroups: {
+            shape: 'icon',
+            icon: {
+              face: 'FontAwesome',
+              code: '\uf0c0',
+              size: 50,
+              color: '#57169a'
+            }
+          },
+          users: {
+            shape: 'icon',
+            icon: {
+              face: 'FontAwesome',
+              code: '\uf007',
+              size: 50,
+              color: '#aa00ff'
+            }
+          }
+        }
+      };
+
+      // create an array with nodes
+      var nodesFA = [{
+        id: 1,
+        label: 'User 1',
+        group: 'users'
+      }, {
+        id: 2,
+        label: 'User 2',
+        group: 'users'
+      }, {
+        id: 3,
+        label: 'Usergroup 1',
+        group: 'usergroups'
+      }, {
+        id: 4,
+        label: 'Usergroup 2',
+        group: 'usergroups'
+      }, {
+        id: 5,
+        label: 'Organisation 1',
+        shape: 'icon',
+        icon: {
+          face: 'FontAwesome',
+          code: '\uf1ad',
+          size: 50,
+          color: '#f0a30a'
+        }
+      }];
+
+      // create an array with edges
+      var edges = [{
+        from: 1,
+        to: 3
+      }, {
+        from: 1,
+        to: 4
+      }, {
+        from: 2,
+        to: 4
+      }, {
+        from: 3,
+        to: 5
+      }, {
+        from: 4,
+        to: 5
+      }];
+
+      // create a network
+      var containerFA = document.getElementById('mynetworkFA');
+      var dataFA = {
+        nodes: nodesFA,
+        edges: edges
+      };
+
+      var networkFA = new vis.Network(containerFA, dataFA, optionsFA);
+
+      /*
+       * Example for Ionicons
+       */
+      var optionsIO = {
+        groups: {
+          usergroups: {
+            shape: 'icon',
+            icon: {
+              face: 'Ionicons',
+              code: '\uf47c',
+              size: 50,
+              color: '#57169a'
+            }
+          },
+          users: {
+            shape: 'icon',
+            icon: {
+              face: 'Ionicons',
+              code: '\uf47e',
+              size: 50,
+              color: '#aa00ff'
+            }
+          }
+        }
+      };
+
+      // create an array with nodes
+      var nodesIO = [{
+        id: 1,
+        label: 'User 1',
+        group: 'users'
+      }, {
+        id: 2,
+        label: 'User 2',
+        group: 'users'
+      }, {
+        id: 3,
+        label: 'Usergroup 1',
+        group: 'usergroups'
+      }, {
+        id: 4,
+        label: 'Usergroup 2',
+        group: 'usergroups'
+      }, {
+        id: 5,
+        label: 'Organisation 1',
+        shape: 'icon',
+        icon: {
+          face: 'Ionicons',
+          code: '\uf276',
+          size: 50,
+          color: '#f0a30a'
+        }
+      }];
+
+
+      // create a network
+      var containerIO = document.getElementById('mynetworkIO');
+      var dataIO = {
+        nodes: nodesIO,
+        edges: edges
+      };
+
+      var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
+    }
+  </script>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+<body onload="draw()">
+<p>
+Icons can be used for nodes as well. This example shows Icons from fontAwesome and Ionicons but it should work with similar packages as well.
+  It uses unicode and css to define the icons.<br><br> <b>Remember! Unicode in javascript is done like this: \uf274 for the unicode f274.</b>
+  <br> If a node is shown as a rectangle, it means the css is not loaded (or not yet loaded). A redraw will fix that.
+
+</p>
+
+<h2>
+  <i class="fa fa-flag"></i> Use FontAwesome-icons for nodes</h2>
+<div id="mynetworkFA"></div>
+<h2>
+  <i class="ion ion-ionic"></i> Use Ionicons-icons for nodes</h2>
+<div id="mynetworkIO"></div>
+
+</body>
+
+</html>
diff --git a/www/lib/vis/examples/network/nodeStyles/images.html b/www/lib/vis/examples/network/nodeStyles/images.html
new file mode 100644
index 00000000..78810181
--- /dev/null
+++ b/www/lib/vis/examples/network/nodeStyles/images.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Images</title>
+
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    var DIR = '../img/refresh-cl/';
+    var EDGE_LENGTH_MAIN = 150;
+    var EDGE_LENGTH_SUB = 50;
+
+    // Called when the Visualization API is loaded.
+    function draw() {
+      // Create a data table with nodes.
+      nodes = [];
+
+      // Create a data table with links.
+      edges = [];
+
+      nodes.push({id: 1, label: 'Main', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
+      nodes.push({id: 2, label: 'Office', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
+      nodes.push({id: 3, label: 'Wireless', image: DIR + 'Network-Pipe-icon.png', shape: 'image'});
+      edges.push({from: 1, to: 2, length: EDGE_LENGTH_MAIN});
+      edges.push({from: 1, to: 3, length: EDGE_LENGTH_MAIN});
+
+      for (var i = 4; i <= 7; i++) {
+        nodes.push({id: i, label: 'Computer', image: DIR + 'Hardware-My-Computer-3-icon.png', shape: 'image'});
+        edges.push({from: 2, to: i, length: EDGE_LENGTH_SUB});
+      }
+
+      nodes.push({id: 101, label: 'Printer', image: DIR + 'Hardware-Printer-Blue-icon.png', shape: 'image'});
+      edges.push({from: 2, to: 101, length: EDGE_LENGTH_SUB});
+
+      nodes.push({id: 102, label: 'Laptop', image: DIR + 'Hardware-Laptop-1-icon.png', shape: 'image'});
+      edges.push({from: 3, to: 102, length: EDGE_LENGTH_SUB});
+
+      nodes.push({id: 103, label: 'network drive', image: DIR + 'Network-Drive-icon.png', shape: 'image'});
+      edges.push({from: 1, to: 103, length: EDGE_LENGTH_SUB});
+
+      nodes.push({id: 104, label: 'Internet', image: DIR + 'System-Firewall-2-icon.png', shape: 'image'});
+      edges.push({from: 1, to: 104, length: EDGE_LENGTH_SUB});
+
+      for (var i = 200; i <= 201; i++ ) {
+        nodes.push({id: i, label: 'Smartphone', image: DIR + 'Hardware-My-PDA-02-icon.png', shape: 'image'});
+        edges.push({from: 3, to: i, length: EDGE_LENGTH_SUB});
+      }
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {};
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+  <script src="../../googleAnalytics.js"></script>
+
+<body onload="draw()">
+
+<p>
+  Display nodes as images.
+</p>
+<div id="mynetwork"></div>
+
+</body>
+</html>
diff --git a/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html b/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html
new file mode 100644
index 00000000..7c65cee6
--- /dev/null
+++ b/www/lib/vis/examples/network/nodeStyles/imagesWithBorders.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Images With Borders</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+    }
+    #mynetwork {
+      width: 800px;
+      height: 800px;
+      border: 1px solid lightgray;
+      background-color:#333333;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript"> 
+    var DIR = 'img/soft-scraps-icons/';
+
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    // Called when the Visualization API is loaded.
+    function draw() {
+      // create people.
+      // value corresponds with the age of the person
+      var DIR = '../img/indonesia/';
+      nodes = [
+        {id: 1,  shape: 'image', image: DIR + '1.png'},
+        {id: 2,  shape: 'image', image: DIR + '2.png'},
+        {id: 3,  shape: 'image', image: DIR + '3.png'},
+        {id: 4,  shape: 'image', image: DIR + '4.png', label:"pictures by this guy!"},
+        {id: 5,  shape: 'image', image: DIR + '5.png'},
+        {id: 6,  shape: 'image', image: DIR + '6.png'},
+        {id: 7,  shape: 'image', image: DIR + '7.png'},
+        {id: 8,  shape: 'image', image: DIR + '8.png'},
+        {id: 9,  shape: 'image', image: DIR + '9.png'},
+        {id: 10, shape: 'image', image: DIR + '10.png'},
+        {id: 11, shape: 'image', image: DIR + '11.png'},
+        {id: 12, shape: 'image', image: DIR + '12.png'},
+        {id: 13, shape: 'image', image: DIR + '13.png'},
+        {id: 14, shape: 'image', image: DIR + '14.png'},
+        {id: 15, shape: 'image', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"},
+        {id: 16, shape: 'image', image: DIR + 'anotherMissing.png', brokenImage: DIR + '9.png', label:"fallback image in action"}
+      ];
+
+      // create connections between people
+      // value corresponds with the amount of contact between two people
+      edges = [
+        {from: 1, to: 2},
+        {from: 2, to: 3},
+        {from: 2, to: 4},
+        {from: 4, to: 5},
+        {from: 4, to: 10},
+        {from: 4, to: 6},
+        {from: 6, to: 7},
+        {from: 7, to: 8},
+        {from: 8, to: 9},
+        {from: 8, to: 10},
+        {from: 10, to: 11},
+        {from: 11, to: 12},
+        {from: 12, to: 13},
+        {from: 13, to: 14},
+        {from: 9, to: 16}
+      ];
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        nodes: {
+          borderWidth:4,
+          size:30,
+	      color: {
+            border: '#406897',
+            background: '#6AAFFF'
+          },
+          font:{color:'#eeeeee'},
+          shapeProperties: {
+            useBorderWithImage:true
+          }
+        },
+        edges: {
+          color: 'lightgray'
+        }
+      };
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body onload="draw()">
+
+<div id="mynetwork"></div>
+</body>
+</html>
diff --git a/www/lib/vis/examples/network/nodeStyles/shadows.html b/www/lib/vis/examples/network/nodeStyles/shadows.html
new file mode 100644
index 00000000..277b8b00
--- /dev/null
+++ b/www/lib/vis/examples/network/nodeStyles/shadows.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Groups</title>
+
+    <style>
+        body {
+            color: #d3d3d3;
+            font: 12pt arial;
+            background-color: #ffffff;
+        }
+
+        #mynetwork {
+            width: 800px;
+            height: 800px;
+            border: 1px solid #444444;
+            background-color: #dddddd;
+        }
+    </style>
+
+    <script type="text/javascript" src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css"/>
+
+    <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<div id="mynetwork"></div>
+<script type="text/javascript">
+    var len = undefined;
+
+    var nodes = [{id: 0, label: "0", group: 0},
+        {id: 1, label: "1", group: 0},
+        {id: 2, label: "2", group: 0},
+        {id: 3, label: "3", group: 1},
+        {id: 4, label: "4", group: 1},
+        {id: 5, label: "5", group: 1},
+        {id: 6, label: "6", group: 2},
+        {id: 7, label: "7", group: 2},
+        {id: 8, label: "8", group: 2},
+        {id: 9, label: "9", group: 3},
+        {id: 10, label: "10", group: 3},
+        {id: 11, label: "11", group: 3},
+        {id: 12, label: "12", group: 4},
+        {id: 13, label: "13", group: 4},
+        {id: 14, label: "14", group: 4},
+        {id: 15, label: "15", group: 5},
+        {id: 16, label: "16", group: 5},
+        {id: 17, label: "17", group: 5},
+        {id: 18, label: "18", group: 6},
+        {id: 19, label: "19", group: 6},
+        {id: 20, label: "20", group: 6},
+        {id: 21, label: "21", group: 7},
+        {id: 22, label: "22", group: 7},
+        {id: 23, label: "23", group: 7},
+        {id: 24, label: "24", group: 8},
+        {id: 25, label: "25", group: 8},
+        {id: 26, label: "26", group: 8},
+        {id: 27, label: "27", group: 9},
+        {id: 28, label: "28", group: 9},
+        {id: 29, label: "29", group: 9}
+    ];
+    var edges = [{from: 1, to: 0},
+        {from: 2, to: 0},
+        {from: 4, to: 3},
+        {from: 5, to: 4},
+        {from: 4, to: 0},
+        {from: 7, to: 6},
+        {from: 8, to: 7},
+        {from: 7, to: 0},
+        {from: 10, to: 9},
+        {from: 11, to: 10},
+        {from: 10, to: 4},
+        {from: 13, to: 12},
+        {from: 14, to: 13},
+        {from: 13, to: 0},
+        {from: 16, to: 15},
+        {from: 17, to: 15},
+        {from: 15, to: 10},
+        {from: 19, to: 18},
+        {from: 20, to: 19},
+        {from: 19, to: 4},
+        {from: 22, to: 21},
+        {from: 23, to: 22},
+        {from: 22, to: 13},
+        {from: 25, to: 24},
+        {from: 26, to: 25},
+        {from: 25, to: 7},
+        {from: 28, to: 27, shadow:{color:'rgb(0,255,0)'}},
+        {from: 29, to: 28},
+        {from: 28, to: 0}
+    ]
+
+    // create a network
+    var container = document.getElementById('mynetwork');
+    var data = {
+        nodes: nodes,
+        edges: edges
+    };
+    var options = {
+        nodes: {
+            shape: 'dot',
+            size: 30,
+            font: {
+                size: 32
+            },
+            borderWidth: 2,
+            shadow:true
+        },
+        edges: {
+            width: 2,
+            shadow:true
+        }
+    };
+    network = new vis.Network(container, data, options);
+</script>
+</body>
+</html>
diff --git a/www/lib/vis/examples/network/nodeStyles/shapes.html b/www/lib/vis/examples/network/nodeStyles/shapes.html
new file mode 100644
index 00000000..26625301
--- /dev/null
+++ b/www/lib/vis/examples/network/nodeStyles/shapes.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Shapes</title>
+
+  <style type="text/css">
+    #mynetwork {
+      width: 1000px;
+      height: 800px;
+      border: 1px solid lightgray;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    function draw() {
+      nodes = [
+        {id: 1,  label: 'circle',  shape: 'circle' },
+        {id: 2,  label: 'ellipse', shape: 'ellipse'},
+        {id: 3,  label: 'database',shape: 'database'},
+        {id: 4,  label: 'box',     shape: 'box'    },
+        {id: 5,  label: 'diamond', shape: 'diamond'},
+        {id: 6,  label: 'dot',     shape: 'dot'},
+        {id: 7,  label: 'square',  shape: 'square'},
+        {id: 8,  label: 'triangle',shape: 'triangle'},
+        {id: 9,  label: 'triangleDown', shape: 'triangleDown'},
+        {id: 10, label: 'text',    shape: 'text'},
+        {id: 11, label: 'star',    shape: 'star'},
+        {id: 21, font:{size:30},          label: 'big circle',  shape: 'circle' },
+        {id: 22, font:{size:30},          label: 'big ellipse', shape: 'ellipse'},
+        {id: 23, font:{size:30},          label: 'ellipse with a long label text', shape: 'ellipse'},
+        {id: 24, font:{size:30},          label: 'big database',shape: 'database'},
+        {id: 25, font:{size:30},          label: 'big box',     shape: 'box'    },
+        {id: 26, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond'},
+        {id: 27, font:{size:30}, size:40, label: 'big dot',     shape: 'dot'},
+        {id: 28, font:{size:30}, size:40, label: 'big square',  shape: 'square'},
+        {id: 29, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'},
+        {id: 30, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'},
+        {id: 31, font:{size:30},          label: 'big text',    shape: 'text'},
+        {id: 32, font:{size:30}, size:40, label: 'big star',    shape: 'star'}
+      ];
+
+      edges = [
+      ];
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+  <script src="../../googleAnalytics.js"></script>
+
+<body onload="draw()">
+
+<p>
+  Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
+</p>
+<div id="mynetwork"></div>
+
+<div id="info"></div>
+</body>
+</html>
diff --git a/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html b/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html
new file mode 100644
index 00000000..a2d65aed
--- /dev/null
+++ b/www/lib/vis/examples/network/nodeStyles/shapesWithDashedBorders.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Shapes</title>
+
+  <style type="text/css">
+    #mynetwork {
+      width: 1000px;
+      height: 800px;
+      border: 1px solid lightgray;
+    }
+  </style>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+
+    function draw() {
+      nodes = [
+        {id: 1, font:{size:30},          label: 'circle',  shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
+        {id: 2, font:{size:30},          label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
+        {id: 3, font:{size:30},          label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
+        {id: 4, font:{size:30},          label: 'box',     shape: 'box'    , shapeProperties:{borderDashes:[5,5]}},
+        {id: 5, font:{size:30}, size:40, label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
+        {id: 6, font:{size:30}, size:40, label: 'dot',     shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
+        {id: 7, font:{size:30}, size:40, label: 'square',  shape: 'square', shapeProperties:{borderDashes:[5,5]}},
+        {id: 8, font:{size:30}, size:40, label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
+        {id: 9, font:{size:30}, size:40, label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
+        {id: 10, font:{size:30}, size:40, label: 'star',    shape: 'star', shapeProperties:{borderDashes:true}},
+        {id: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
+      ];
+
+      edges = [
+      ];
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+  <script src="../../googleAnalytics.js"></script>
+
+<body onload="draw()">
+
+<p>
+  Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
+</p>
+<div id="mynetwork"></div>
+
+<div id="info"></div>
+</body>
+</html>
author	Pliable Pixels <pliablepixels@gmail.com>	2017-09-21 12:49:18 -0400
committer	Pliable Pixels <pliablepixels@gmail.com>	2017-09-21 12:49:18 -0400
commit	b28028ac4082842143b0f528d6bc539da6ccb419 (patch)
tree	1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/vis/examples/network/nodeStyles
parent	676270d21beed31d767a06c89522198c77d5d865 (diff)