Network Visualization Tool

A dynamic visualization tool using the Martello API that allows users to monitor their network.

Comment

Inspiration

We wanted to create something useful and web-based. When looking at the company challenges, this one caught our eye.

What it does

Once per minute, the system updates it's information from the server which contains information about several devices connected to a home network. This information is then presented to the user in an intuitive way. It shows what devices are connected to the network as well as specific information on each device. The user can also check the "Problems" page to see if packets being lost is an issue and if suspicious devices are connected to the network.

How we built it

There are 5 pages are coded in HTML and styled using CSS. Upon loading the website, information is read from the Martello API server that provides information on various devices all connected to a single home network. The first page the user sees is a vis.js diagram that shows all of the devices that are connected to the router. Under Summary, the user can see each device, the type of device (through an image), the name of the device and the description of the device. Clicking on these devices will bring you to the individual device page. These pages can also be accessed through the navigation under Devices. The Problems page shows the user if any devices have significant packet loss or if there are suspicious devices connected to the network. Lastly, the History page shows the device with the highest average bytes received, the highest average packets sent in the last 10 minutes and the highest average packets lost in the last 10 minutes.

The entire application was built using NodeJS and run on a local server. The Martello API gives us information that we send to the server to process and send back to the client as readable information which we then display to the user in various forms.

Challenges we ran into

⦁ Deciding which information went on the server side, and which information went on the client side. ⦁ How to properly modularize page loading (original thought PHP, decided on Javascript).

Accomplishments that we're proud of

⦁ Organizing the data in an efficient way allowing ease of use. ⦁ Simple, yet effective UI. ⦁ Dynamic display system.

What we learned

⦁ Learned to poll the server effectively. ⦁ Learned to use GitBash.

What's next for Network Visualization Tool

⦁ Implement settings.

Built With

Share this project:

Updates