Skip to content

CiscoDevNet/NeXt

NeXt UI Framework

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 : 0.9

Key Features

  • Large complex network topologies
  • Aggregated network nodes
  • Traffic/path/tunnel/group visualizations
  • Different layout algorithms
  • Map overlays
  • Preset user-friendly interactions

File structure

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

Quick start

  1. 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>
  1. 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);
  1. Open html file with Chrome

Tutorials and Sample code

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

Build instructions from source code

Git : https://git.opendaylight.org/gerrit/p/next

Environment requirements

Node

build process

  • npm install
  • grunt

Who's Using NeXt

  • Cisco
  • Verizon
  • AT&T (DIRECTV)

Are you NeXt?

Bugs

Open Bugs

Team

About

Mirror of the OpenDaylight NeXt UI Toolkit gerrit project

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Packages

No packages published