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.
Find answers to your questions by entering keywords or phrases in the Search bar above. New here? Use these resources to familiarize yourself with the community: