07-14-2015 04:05 PM
Mike Leske
Hello,
I’ve recently discovered neXt UI in Cisco DevNet and find it a very nice tool.
IMHO it could be milestone for AS to produce consistent network drawings for project documentation.
I’m currently trying to figure out how I can set icons in a topology.
https://developer.cisco.com/media/neXt-site/example.html#Basic/icons here is an example, but where exactly would I need to reuse this code? In the Shell.js or some additional file ?
If you could share with me a full icon example in terms of .html and .js files, that would be a huge help.
Regards
Mike
07-14-2015 04:06 PM
Hi Mike,
Thanks for you interest. I made a demo on jsfiddle about how to set icon to node.
http://jsfiddle.net/nextsupport/7zvmbwqx/
This is main part, you can return icon name at this function. (And you can find icon’s name at here https://developer.cisco.com/media/neXt-site/example.html#Basic/icons)
iconType:function(vertex) {
var id = vertex.get("id");
if (id > 2) {
return 'router'
} else {
return 'camera'
}
}
Abu
07-14-2015 11:33 PM
Hi Aikepaer,
many thanks for the pointer to jsfiddle.
I still seem to have troubles in setting this icon example up on my side.
The following I did:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../next/dest/css/next.css">
<script src="../next/dest/js/next.js"></script>
<script src="Data.js"></script>
</head>
<body>
</body>
</html>
Data.js contains the nx data that is shown on the left side of your demo.
When opening the html file in chrome the page remains empty.
Mike
07-17-2015 11:56 AM
07-20-2015 02:23 PM
Ah, many thanks.
I still seem to have some general knowledge gap how to correctly use the tool - my apologizes.
I now wanted to add paths and tried it with the different ways documented without success:
- nx.define('Path.Base'...
- topo.on('topologyGenerated', function ()...
I hope a last hint will help me understanding how to use it correctly.
Many thanks in advance.
Mike
07-23-2015 12:36 PM
I got it working now.
Discover and save your favorite ideas. Come back to expert answers, step-by-step guides, recent topics, and more.
New here? Get started with these tips. How to use Community New member guide