Category Archives: Blender

Midtown Wifi – the internals.

In the next few days, I’ll be upgrading my north facing access point from Engenius to Ubiquiti. The firmware is already written, and I have most everything prepped for the rooftop mount. Before I post about working with the (hidden) Ubiquiti 5.3 SDK, I thought I’d give a quick tour of my system so far.

With Midtown Wifi I had the following goals:

  1. Work more in the C language.
  2. Build a stable and (mostly) embedded captive portal system with a minimal ToS acceptance screen.
  3. Let the surrounding neighborhood use the Internet for free in exchange for helping me build and test the system.
  4. Use the system as a way to introduce neighbors, let them post local interest items (missing pets, crime reports, events, etc).
  5. Provide maps of recently reported crimes via the Harrisburg, PA online Police Blotter.

Over the years I’ve accomplished all of this, to one degree or another. Harrisburg, PA is in the midst of some serious financial problems, so their online police blotter has gone away  – preventing me from easily obtaining local crime information. People are what they are, and as Google+, MySpace, and any other Social Site knows — getting people to truly use your social portal is a trick that requires sheer genius. Getting them to log into it and push a “Free Wifi” button however, is easy.

The Midtown Wifi Login Screen (as of Feb 15, 2012)

How it works:

After connecting to one of the open access points, the end user is redirected (courtesy of a patched NoDogSplash) to a captive web portal. The web portal is based off Elgg, a fairly easy to use Social Network Engine written in PHP. I’ve made a few modifications to the base system, adding a more recent JQuery and JQueryUI (so that I can create interactive Dialogs), and writing a few plugins to handle Netflow display, wireless signal strength reports (per user), user speed tests, and to verify that they have a picture set before allowing them to use the Free Wifi.

By nature, people won’t set a profile picture when all they want is Free Wifi. I had to enforce a profile picture (“it doesn’t have to be you, it can be anything non-offensive”) to make the site NOT appear like a barren wasteland.

I eventually limited account creation strictly to the access points as registrations from outside those IPs were mostly just spam.

After a user creates an account and logs in, they are directed to the “Dashboard”, which is a listing of recent posts from any of the users. Most are quick “Hey you!”, but sometimes people post something more substantive. When my rear car window was broken, I used the system as a venting forum.

All the names and 1 dirty word have been removed.

I’ve consolidated most of my customizations relative to the wireless users into a single Elgg plugin I named “TSA Patdown”. Initially TSA Patdown only verified that a user had a profile image set, but now it does quite a bit more. Every 30 seconds I export Received Signal Strength Indication (RSSI) for each client from the  Engenius equipment. I collect this information, as well as information from a Javascript based speedtest widget I wrote to get an idea as to what kind of online experience each user is having.

I represent this information to myself on the following menu, with signal bars that I created using Blender:

Signal Strengths, Login times, MAC addresses and more.

I can further delve into information on a per-user basis by simply clicking on a name. I can also pull a full neighborhood report, graphing each clients RSSI values as well as their recent speedtest results.

The Javascript Speedtest Widget

Being implemented in Javascript, the speedtest results aren’t the same as you’d see when visiting a Flash based speedtest. The standard web method of performing such a test is to have the end-user download an image file or two (oftentimes two images simultaneously)- and at random intervals determine how much of the image has been downloaded by that timeframe.  With a single image download, it can perform multiple measurements at various intervals and determine available bandwidth much more accurately. Since there’s additional overhead in the underlying TCP/IP layers, it appears most tests also add padding to their calculation to make things more accurate.

Speakeasy Flash based speedtest

Flash has methods that will allow for such periodic sampling, Javascript however does not. This makes my Javascript implementation an overall average – so a report of 900Kbit/sec can easily represent 1.5Mbit/sec. (My results are much more akin to what Wireshark will report as throughput). I do plan to write a Flash based speedtest in the near future.

Wireshark measures throughput how I do: Bandwidth / (endtime - starttime)

In this example, the capture in Wireshark measures the throughput as 21.22Mbit/sec, nowhere near the 52.37Mbit/sec rating given by Speakeasy. The recent throughput information is all displayed in the signal screen:

Can you hear me now? How fast can I talk?

The Netflow section of my TSA Patdown plugin details the current traffic flow on the network. This screen updates dynamically as users surf the internet. (I’ll reiterate my past posts here: The netflow data is only packet endpoints… basically “this person called this person at this time”, but not the actual content of those conversations). I’ve also added a small port-based protocol disector that colorizes the flows and provides protocol information depending upon the packet you select. If you choose a NetBIOS packet, you’ll get something similar to this:

Flying by at the speed of light: PACKETS

The system monitors for NetBIOS names as well as DHCP hostnames that appear on Midtown Wifi. All of this information comes together to paint an accurate view of the network.

Clicking a Protocol Name (in this instance NetBIOS) will direct you to a Wikipedia article on the protocol and how it works. Unclassified protocols can be classified and colorized with a simple click. You can also specify the URL to load when the protocol name is clicked.

Pick a transport, a color, a name, a URL - and you've defined a protocol

The pie charts, RSSI graphs, and throughput graphs are all handled using the PHP JPGraph libraries. In the future, I intend to improve the graphs (there are tendencies for my labels to bleed off-screen or over each other).

The access points share their own ADSL line for bandwidth but maintain individual PPPoE sessions. The wiring in my home needs improvement (the house was built in the 1800’s, the Cat5 running through the house is obviously not that old but does have some serious issues) . Most of the exterior walls appear to be metal, which does hinder re-running the DSL line a bit.

I recently migrated my home network graphing from NetMRG to Cacti, and I’m using Cacti‘s (albeit poor) FTP export function to offload graphs pertaining to MidTown Wifi to the captive portal.

Graphs that have been imported from Cacti.

As you can see in the graphs, the system currently has 175 subscribers. I have deleted the bogus accounts that weren’t created through the APs. The high number of subscribers is largely the result of transient users (my home is on a major bus line, rental homes in the area turn over somewhat frequently, the local college is blocks away,  etc). A couple of users have duplicate accounts having apparently lost their credentials (as is evidenced by a few repeat MAC addresses).

To put the large number into proper perspective:  in the last 7 days there were 157 logins by 18 unique users. Unlike myself, most of the users don’t spend every waking moment on the Internet.

I’ve covered the access points and the firmware images in a number of previous posts, so I’ll let them speak for themselves. In the next few days (hopefully not weeks), I’ll be introducing my first Ubiquiti access point to the system with full details posted then. If you have any thoughts or input, by all means reach me in the comments section.


Video Game Creation using Blender, Gimp, and Allegro

I had an enjoyable assignment in a college course on the C language the other day – using the Allegro libraries, write a game of your choosing.

The assignment coincided with my recent discovery of Blender, the 3D mesh animation and design tool. Out of boredom on a recent weekend afternoon, I found Blender in a series of random Google searches… and dedicated the better part of 3 weeks teaching myself the ins and outs. (Surprisingly EVERYONE I know already knew about it, I’m not sure how Blender eluded my radar).

The entire movie Big Buck Bunny was created in Blender

So many people are familar with Blender  in fact, that there are hundreds of YouTube videos (and even  DVDs) covering practically anything you’re looking to do.

My first job was to model an alien – one similar to one of the enemies in a great game from my childhood – Commander Keen. (Side note: I first got the game from one of the many mail-order shareware companies that were popular before the Internet was in practically every home.)

Simple enough, the Alien is basically 3 spheres and 2 cylinders. After 30 or so iterations, I finally had one I liked.

My inspiration (from Commander Keen)
My Tribute to Commander Keen

Learning to paint took about 2 days of watching video after video trying to figure things out. Part of that time was devoted to me hunting down the cause of  a “bug”, which I later learned was a default setting in vertex paint.

This is not a boog.
With the Painting Mask enabled (the 'F' key)

The freenode #blender channel had plenty of knowledgeable users that convinced me that I wasn’t dealing with a bug in my install

Probably the best thing about Blender is that even I (having no real graphical talents), was able to create a decent looking object with a small amount of effort. And  I could then animate it, using armatures and a tutorial by Ira Krakow.

Citronella is Evil: The Action Editor and Timeline

After creating a few other random objects (some of which looked just plain pathetic), I ended up with a small stable of characters – and thankfully an assignment where they could live.

The Allegro programming library is a well documented, easy to use programming library that handles the tough parts of graphics programming – getting objects onto the screen. As with everything – where does one start?

Having two weeks to start and finish a game, I decided another childhood staple would be the perfect game to write – Jetpack.

Just a fun game.

Jetpack had a lot of great things going for it – fun game, re-playable (especially since it had a built in level editor) , and one of my favorite things – a jetpack. Jetpack could easily be thought of as Lode Runner with the ability to fly.

XScavenger is a fun Linux port of Lode Runner

While digging through Allegro’s online manual and chatting with other users on freenode (trying to  figure out how I could write this thing), my storyline inspiration played on my Last.FM stream – “Let’s save Tony Orlando’s House“, a great song by Yo La Tengo about Frankie Valli setting fire to  Tony Orlando’s house after a dispute over backup singers. The song is so subtle (it could easily be played in an elevator) that I had probably heard it a dozen times before actually realizing this soft song was all about a pretty amusing instance of arson.

So, I had a storyline, I had a borrowed game idea- and I had little time.  My first tasks basically drilled down to these items:

How do I make the background of a bitmap image transparent?

Set the transparent portion of the bitmap to #FF00FF (pink), and use masked_blit() or draw_sprite()

Hmm, Allegro didn’t remove all the pink background?

Make sure to disable anti-aliasing, you’re blending #FF00FF with nearby colors

How do I easily generate animations?

Design the models in Blender, use armatures and timelines to create the motion, save them as individual bitmaps (with OSA disabled and with the camera’s background color set to #FF00FF)

What’s the shortcut to add bitmaps to a datfile? Grabber would take forever!

Use the command line interface to datfiles – “dat”. Trust me on this one, I could archive 300 images in a few seconds, doing it by hand would be masochistic, taking hours.

How do I prevent choppiness in animations and movement?

There’s system bitmaps, video bitmaps, and memory bitmaps. Look into them, and the example code that comes with Allegro (especially exupdate) for ideas and examples.

How can I fade in/out?

One method is to place a semi-transparent black rectangle over the screen. Look at set_trans_blender(), drawing_mode(), and rectfill().

With the answers to those questions in tow, I had a decent demo ready in under two weeks; one that supported smooth screen scrolling, had some limited game-physics, and an even more limited level editor.

In the end, I pieced together level backgrounds using GIMP and a few photos from The game physics could be better, I’ll attribute their current state to my inexperience and the pending deadline. In the end – I think the project turned out fairly well.

GIMP and the first level background

Part of the Title Sequence to the game. Tony Orlando image used without his consent.

I took the following screen capture of the game using Taksi, an open-source, and free capture program in the same vein as Fraps (although Fraps is limited to 30 seconds of capture in the trial version). The screen-capture doesn’t have sound (the game does) and the actual game runs much smoother than the screen-capture..

So basically, you’re a mosquito with no wings (thank you Mr. Orlando) fighting to survive, collecting blood IV’s and gascans to fuel your jetpack. Now, I’ve got another project to dedicate free time to – all made possible with Blender, Allegro, GIMP,  and a little programming.