01-20-2016 06:21 AM
I am using data and shell model when creating diagrams.
This is my shell.js
. It is standard one, taken from Cisco NeXt UI examples.
The data is comming from topologyData
dictionary.
How do I change the icon of a network device inside shell.js? i.e. how do I interact with it withing nx.define?
(function (nx) { /** * define application */ var Shell = nx.define(nx.ui.Application, { methods: { start: function () { //your application main entry // initialize a topology var topo = new nx.graphic.Topology({ // set the topology view's with and height width: 1500, height: 850, // node config nodeConfig: { // label display name from of node's model, could change to 'model.id' to show id label: 'model.name' }, // link config linkConfig: { // multiple link type is curve, could change to 'parallel' to use parallel link linkType: 'curve' }, // show node's icon, could change to false to show dot showIcon: true }); //set data to topology topo.data(topologyData); //attach topology to document topo.attach(this); } } }); /** * create application instance */ var shell = new Shell(); /** * invoke start method */ shell.start(); })(nx);
02-10-2016 03:56 PM
You can add 'iconType' attribute under 'nodeConfig', here is an demo you can reference.
Base - Set node's label and icon
Abu
02-11-2016 10:20 AM
Aikepaer Abuduweili, that is different.
`data.js` has:
nodes: [ {"id": 0, "x": -250, "y": 350, "name": "RTR01", "icon": "router"}, {"id": 1, "x": -250, "y": 1100, "name": "RTR02", "icon": "router"}, {"id": 2, "x": -1000, "y": 700, "name": "RTR03", "icon": "router"},
then, in `shell.js` I have:
nodeConfig: { // label display name from of node's model, could change to 'model.id' to show id label: 'model.name', iconType: 'model.icon' },
02-15-2016 02:16 PM
I made an example for you reference. maybe you can see the differences.
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