Browsed by
Category: Releases

slidePicker – A jQuery Plugin

slidePicker – A jQuery Plugin

I was thinking of ways to visualize data in my WLC_AP_Load application and the thought occurred to me that a interface similar to what you would find in Google Analytics or the Netwitness Investigator interface would be nice.

My current master class is covering HTML5 technologies. The first week was discussing canvas tags. I knew of canvas tags and used libraries that created graphs with them for a long time. However, I hadn’t really gotten dirty with canvas tags and manually drawing before. So Wednesday I decided to try my hand at creating a graphing function that would create a canvas element on the screen. After about three lines of code I thought “This should be a jQuery plugin”. I did some Google searching around got the basic jist of creating a plugin. It was a little rough at first. I’m still not sure if the way i structured my plugin is correct but it works. I hope that I will discover better ways to create jQuery plugins in the future. But hey, gotta start somewhere right?

Three days later I present you with slidePicker.

I had it finished Wednesday before work was over. However, like many of my projects I let feature creep get the best of me and added a TON of options that allow you to really customize the plugin. The screenshot above is a standard graph generated with no options. You can get real crazy with it resulting in something like this.

Here is a screenshot of the reason I developed this plugin. It is showing the number of clients connected to an access point over the timespan of about 3 weeks.

Once I get some time I will get around to creating some docs. If you use this in a dashboard or something awesome that I haven’t thought of let me know. I’d love to see it.

You can grab a copy of the code at my github. 

Here is a page showing a demo and what is possible.

// lance

WLC Load

WLC Load

During a meeting one day me and a coworker were speculating on how many people were connected to a given access point. We were trying to decide which access point was being used the most in an effort to beef up the wireless coverage in buildings that were being used the most around campus. After a min or two I decided that speculation just wasn’t going to cut it.

After a bit of googe’n I was able to use some of the base SNMP classes in PacketStorm to harvest data from our Cisco Wireless LAN Controller. After I was able to begin gathering the number of clients connected to each access point (AP) I made a graph. Shortly after that I decided to group the access points together so that entire buildings could be correlated together to get a better understanding which buildings were being used.

This was pretty much all we needed. It only provides a current snapshot view of the number of clients connected to wireless network.I plan on adding the ability to view data over a time period with later releases.

The graphs were cool but I wanted some extra flare. So I decided to see if I could take it a bit further. I ended up adding the ability to place the groups of APs on a map using latitude and longitude. It was pretty cool to see which buildings were being used the most just by glancing at a map. One side effect that was not originally planned is that you can actually watch the student population migrate around campus. For example, when it gets close to lunch time you see the connections in the dorm rooms get smaller and the connections in the dining commons grow.


Here is a screen shot taken during the day. The students are pretty much evenly spread throughout campus.


At night though they have mostly moved to the dorm rooms that can been seen in this screen shot.

All in all this was a pretty cool little project. With only a day or two invested in it I’m pleased with the result. You can grab a copy of the code over at my gitHub account.

// lance







Ok so recently I’ve been motivated to post up some of the work that I’ve been doing in my spare time.

First up is a small python script that I wrote. It is ugly and one day i will go back and clean it up. It was literally my “Hello World” into python. So it is kinda cob’d together.

Basically, I wanted something that would alert me when a switch went down or there was an unusual amount of traffic between two switches. So I set out to remotely monitor bandwidth utilization in my switches. After a bit of google’n I stumbled upon SNMP. After a bit of research I figured I could make that work.

Now that I was able to pull in the bandwidth utilization. I started building the code to look at all the switches. About three switches into the config file that I was creating I thought this isn’t nearly cool enough. So, I ended up working a bit and made a SNMP spider. It uses Cisco discovery protocol to find each switch’s neighbor. End the end all you have to do is fire up the script and point it to any of your switches. It will spider through the entire network and save the switch information as it discovers it.

What good is having all this sweet information without have some ability to display it in a killer manner. In comes a library called CherryPy. With CherryPy I was able to display all the switch information. From there I wanted to show some sort of link information at a glance. Using jsPlumb i was able to draw connections between the switches and show the utilization. I also added the ability to drag and drop the switches around so you can look at the entire topology however you like.

Here is a short video showing the interface.

You can find the code in my github account.

// lance