Monthly Archives: November 2009

Wish List: Decent SVG Network Elements

Nmap 5 has a really cool feature: you can scan a network and dump its map to SVG. Inkscape is turning out to be a really nice vector drawing program.

A really useful workflow would be to combine the two:

  1. Map your network using Nmap.
  2. Tweak that map to your liking using Inkscape.
  3. Have a cool map.

Unfortunately this is a harsh, cruel world we live in. The workflow we currently have is:

  1. Map your network using Nmap.
  2. Load the map Inkscape.
  3. Search the interwebs for decent SVG network elements until you have to explain the foul language and crying to your wife.

This is something Visio is famous for (network art, not the foul language and crying). Search for “visio stencils” and you’ll be bombarded with all sorts of network shapes, from major equipment manufacturers to ones that look like crayon art. Where are all the cool SVG network elements? Quantum Bits made a nice start, but we need a lot more than that.

Chrome OS

Today I followed the announcement of the new Chrome OS from Google and the acclaiming response it received. Am I the only one thinking: very simple, maybe TOO simple?

Since the beginning of the “browser as an OS” idea, I always wondered how I am supposed to run my favorite program, Wireshark, in a browser. Wireshark, of course, is an example, but many people do things with computers that don’t translate well into the cloud paradigm. Will they just be dismissed by OS manufacturers as a “nerdy minority”? Or will they need to stick with old uncool OSes to do their things? I’d like to be cool too, Google, but I’d still like to run Wireshark.

Another thing I feel weird about: Google is telling me not to worry about data loss, because from now on all my documents will be online. Nothing will need to be saved locally.
Actually, I like that my documents stay in my computer. Am I really the only one in the world? I’m not only talking about personal stuff like the love letters to my wife or the drunk pictures at the party last week. What about the trace files that I get all the time from customers? Will they have to go online too? Hmm, I’m sure my customers will love having them on Google’s server.

I can already hear the objection: “this OS is for netbooks, and netbooks are only used for simple things like going online, so this is perfect for them”. Actually, I love using Wireshark on a netbook! Together with an Airpcap adapter, it’s the perfect portable wireless troubleshooting station.
Why does small need to mean “limited”? Personally, I’d actually love to run Wireshark on my wireless-enabled IPod Touch! Ok, maybe I’m going too far…

http://googleblog.blogspot.com/2009/07/introducing-google-chrome-os.html

New Document Icons

Thanks to Elliott Aldrich the next release of Wireshark will have great-looking document icons. Here’s a preview:

New document icons

It's a trace file, not a commentary on PayPal.

Thanks Elliott!

Javascript Background Animation

The Windows 7 taskbar does this nifty little background animation when you mouse over an open application’s icon. I wanted to see if the effect could be duplicated on a web page.

Suppose we have a couple of inline elements:

<div>
  <img class="bgmove" src="wsbadge-empty.png">
</div>

<h1>
  <span class="bgmove">Packets!</span>
</h1>

The image is mostly transparent:

wsbadge-empty

We have a background that’s slightly larger than our elements, which lets us position it using negative offsets:

wsbadge-bg

.bgmove {
  background-image: url('wsbadge-bg.png');
  background-repeat: no-repeat;
  background-position: -50px -20px;
}

jQuery lets us do two important things: track mouse motion and determine an element’s dimensions. This lets us shift the backround around when we mouse over each element:

$(document).ready(function(){
  $("div img.bgmove").pngFix();
    $(".bgmove").mousemove(function(e){
    var elWidth = $(e.target).outerWidth();
    var elHeight = $(e.target).outerHeight();
    var bgWidth = 279;
    var bgHeight = 95;
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    //var offX = -1 * (x * (bgWidth - elWidth) / elWidth);  // Against the mouse
    var offX = (x * (bgWidth - elWidth) / elWidth) - (bgWidth - elWidth);  // With the mouse
    var offY = -1 * (y * (bgHeight - elHeight) / elHeight); // Against the mouse
    //var offY = (y * (bgHeight - elHeight) / elHeight) - (bgHeight - elHeight);  // With the mouse
    bgPos = offX + 'px ' + offY + 'px';
    this.style.backgroundPosition = bgPos;
    });
})

You can see it all in action on the demo page. Combining this with jQuery animation is left as an exercise for the reader. The effect works in Firefox, Safari, Chrome, and IE 7+. IE 6 has trouble with the transparent PNG.