Skip to content
This repository has been archived by the owner on Mar 1, 2024. It is now read-only.

pxosys/NeXtUI

 
 

Repository files navigation

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

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

Build process

  • npm install to install npm modules
  • grunt to build from sources

Who's Using NeXt

Here we feature a few customers who choose NeXt framework as their topology visualization tool and use it in their products.

Are you next?

Bugs

Open Bugs

Team

About

Mirror of the OpenDaylight next gerrit project

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 65.1%
  • HTML 19.7%
  • CSS 14.9%
  • Makefile 0.3%