NeXt UI toolkit is an HTML5/JavaScript based toolkit for network web application. It provides a network centric topology UI component featuring high performance and rich functionality. NeXt can display large complex network topologies, aggregated network nodes, traffic/path/tunnel/group visualizations and it includes different layout algorithms, map overlays, and preset user friendly interactions. NeXt can work together with DLUX to build ODL apps.
Homepage : https://wiki.opendaylight.org/view/NeXt:Main
UI Toolkit Quicklook : https://www.youtube.com/watch?v=gBsUDu8aucs
Current version : 1.0.0
- Large complex network topologies
- Aggregated network nodes
- Traffic/path/tunnel/group visualizations
- Different layout algorithms
- Map overlays
- Preset user-friendly interactions
next/
|- css/
| |- next.css // next stylesheet file
| |- next.min.css // minimized stylesheet file
| |- next-componentized.css
| |- next-componentized.min.css
|- js
| |- next.js // next js library
| |- next.min.js // minimized js library
|- fonts/ // font resources foler
| doc/ //APi manual
|- README.md
- Create a HTML file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/next.css">
<script src="js/next.js"></script>
</head>
<body>
<script type="text/javascript">
//next code
</script>
</body>
</html>- Edit next code
// Initialize a topology component
var topo = new nx.graphic.Topology({
});
// Create new app
var app = new nx.ui.Application();
// Attach topo to app
topo.attach(app);- Open html file with Chrome
Tutorials : https://wiki.opendaylight.org/view/NeXt:Main
Opendaylight sample code intergrate DLUX with NeXt: https://github.com/CiscoDevNet/opendaylight-sample-apps
BIERMAN : https://github.com/zverevalexei/bierman-gui
Git : https://git.opendaylight.org/gerrit/p/next
In order to build NeXt from sources, you must have Node.js installed.
After that, make sure to have Grunt installed. To do so, run:
npm install grunt
npm installto install npm modulesgruntto build from sources
You should only update Bower if the build is stable, or a major issue has been fixed.
To do so, type in the command line:
node update-bower.js -u {{GITHUB USERNAME}} -p {{GITHUB PASSWORD}} -v {{VERSION NUMBER}}
Make sure to turn {{GITHUB USERNAME}}, {{GITHUB PASSWORD}} and {{NEW VERSION}} into appropriate values.
Example:
node update-bower.js -u gituser -p 123456 -v 0.1.0
Leave the terminal window open until you see Done! message.
Here we feature a few customers who choose NeXt framework as their topology visualization tool and use it in their products.
Are you next?
- Aikepaer Abuduweili (aaikepae@cisco.com)
- Kang Li (lkang2@cisco.com)
- Alexei Zverev (alzverev@cisco.com)
- Xu Yangyang(yangyxu@cisco.com)