From 7b3fc2fd2cb5ca987e9be5df33b942fda3b78254 Mon Sep 17 00:00:00 2001
From: Rene Heindl <Rene.Heindl@goeg.at>
Date: Mon, 16 Feb 2015 14:00:47 +0100
Subject: [PATCH] Updated Examples

---
 examples/network/38_node_as_icon.html | 263 ++++++++++++++++----------
 1 file changed, 159 insertions(+), 104 deletions(-)
diff --git a/examples/network/38_node_as_icon.html b/examples/network/38_node_as_icon.html
index 5cbbb2aa..9c117651 100644
--- a/examples/network/38_node_as_icon.html
+++ b/examples/network/38_node_as_icon.html
@@ -1,113 +1,168 @@
-<!doctype html>
+﻿<!doctype html>
 <html lang="en">
-<header>
-<meta charset="UTF-8">
-<title>Network | node as icon</title>
 
-  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
-  <script type="text/javascript" src="../../dist/vis.js"></script>
-  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+<head>
+    <meta charset="UTF-8">
+    <title>Network | node as icon</title>
 
-   <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">
-</header>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
+    <script type="text/javascript" src="../../dist/vis.js"></script>
+    <link href="../../dist/vis.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">
+</head>
 
 <body>
-<h2><i class="fa fa-flag"></i> Use FontAwesome-icons for node</h1>
-	<div id="mynetworkFA"></div>
-  <h2><i class="ion ion-ionic"></i> Use Ionicons-icons for node</h1>
-  <div id="mynetworkIO"></div>
-
-<script type="text/javascript">
-  $(function(){
-	var optionsFA = {
-        height: '300px',
-        groups: {
-            usergroups: {
-                shape: 'icon',
-                iconFontFace: 'FontAwesome',
-                icon: '\uf0c0',
-                iconSize: 50,
-                iconColor: '#57169a'
-            },
-            users: {
-                shape: 'icon',
-                iconFontFace: 'FontAwesome',
-                icon: '\uf007',
-                iconSize: 50,
-                iconColor: '#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', iconFontFace: 'FontAwesome', icon: '\uf1ad', iconSize: 50, iconColor: '#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);
-  
-
-  var optionsIO = {
-        height: '300px',
-        groups: {
-            usergroups: {
-                shape: 'icon',
-                iconFontFace: 'Ionicons',
-                icon: '\uf47c',
-                iconSize: 50,
-                iconColor: '#57169a'
+    <h2>
+        <i class="fa fa-flag"></i> Use FontAwesome-icons for node</h2>
+    <div id="mynetworkFA"></div>
+    <h2>
+            <i class="ion ion-ionic"></i> Use Ionicons-icons for node</h2>
+    <div id="mynetworkIO"></div>
+
+    <script type="text/javascript">
+    $(function() {
+
+        /*
+         * Example for FontAwesome
+         */
+        var optionsFA = {
+            height: '300px',
+            groups: {
+                usergroups: {
+                    shape: 'icon',
+                    iconFontFace: 'FontAwesome',
+                    icon: '\uf0c0',
+                    iconSize: 50,
+                    iconColor: '#57169a'
+                },
+                users: {
+                    shape: 'icon',
+                    iconFontFace: 'FontAwesome',
+                    icon: '\uf007',
+                    iconSize: 50,
+                    iconColor: '#aa00ff'
+                },
             },
-            users: {
-                shape: 'icon',
-                iconFontFace: 'Ionicons',
-                icon: '\uf47e',
-                iconSize: 50,
-                iconColor: '#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',
+            iconFontFace: 'FontAwesome',
+            icon: '\uf1ad',
+            iconSize: 50,
+            iconColor: '#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 = {
+            height: '300px',
+            groups: {
+                usergroups: {
+                    shape: 'icon',
+                    iconFontFace: 'Ionicons',
+                    icon: '\uf47c',
+                    iconSize: 50,
+                    iconColor: '#57169a'
+                },
+                users: {
+                    shape: 'icon',
+                    iconFontFace: 'Ionicons',
+                    icon: '\uf47e',
+                    iconSize: 50,
+                    iconColor: '#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', iconFontFace: 'Ionicons', icon: '\uf276', iconSize: 50, iconColor: '#f0a30a' }
-  ];
-
-
-  // create a network
-  var containerIO = document.getElementById('mynetworkIO');
-  var dataIO = {
-    nodes: nodesIO,
-    edges: edges
-  };
-
-  var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
-  })
-</script>
+        };
+
+        // 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',
+            iconFontFace: 'Ionicons',
+            icon: '\uf276',
+            iconSize: 50,
+            iconColor: '#f0a30a'
+        }];
 
+
+        // create a network
+        var containerIO = document.getElementById('mynetworkIO');
+        var dataIO = {
+            nodes: nodesIO,
+            edges: edges
+        };
+
+        var networkIO = new vis.Network(containerIO, dataIO, optionsIO);
+    })
+    </script>
 </body>
-</html>
\ No newline at end of file
+
+</html>
