cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
1979
Views
1
Helpful
5
Replies

Topology with icons

aaikepae
Cisco Employee
Cisco Employee

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

5 Replies 5

aaikepae
Cisco Employee
Cisco Employee

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

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

Hi Mike,

You should use 'dom.ready' to attach topo instance. I made a demo for your reference.

Abu

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

mleske
Cisco Employee
Cisco Employee

I got it working now.