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/nodeStyles/icons.html | |
| parent | e7e7baeaad90229ccb3e0f45f4ebd77be7d79b14 (diff) | |
removed lib
Diffstat (limited to 'www/lib/vis/examples/network/nodeStyles/icons.html')
| -rw-r--r-- | www/lib/vis/examples/network/nodeStyles/icons.html | 196 |
1 files changed, 0 insertions, 196 deletions
diff --git a/www/lib/vis/examples/network/nodeStyles/icons.html b/www/lib/vis/examples/network/nodeStyles/icons.html deleted file mode 100644 index 859fc065..00000000 --- a/www/lib/vis/examples/network/nodeStyles/icons.html +++ /dev/null @@ -1,196 +0,0 @@ -<!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> |