sbosse/jam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mon 21 Jul 22:43:21 CEST 2025

Browse Source
This commit is contained in:
sbosse 2025-07-21 22:59:01 +02:00
parent 87ee3b4ff0
commit f951c7ea3a
1 changed files with 196 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
js/dos/ext/vis/examples/network/nodeStyles/icons.html Normal file
View File

@ -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.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>