Topology with icons

aaikepae · ‎07-14-2015

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

aaikepae · ‎07-14-2015

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

mleske · ‎07-14-2015

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>

</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

aaikepae · ‎07-17-2015

Hi Mike,

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

Abu

mleske · ‎07-20-2015

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 · ‎07-23-2015

I got it working now.