søndag 28. oktober 2007

Grabbing the complete picture

One of the goals of my project is to make the process of making HTML+CSS code from a designers sketch picture test driven.

To do this, I need to strip out the margins and headers of the various images I get from browsershots.org (my preferred way right now of getting pictures of websites).

This isn't easy, but I am working on different approaches starting of by trying to segment on the color of the surrounding element. My goal is to use as little information as possible about the image to extract what I want.
A problem with the current images is that each image includes the whole browser window including scrollbars, addressbars and other browser specific stuff. It is a goal to be able to remove as much of this clutter as possible. We want a clean image of just the rendered page.
As a test, I started with four images from four different browsers, firefox 1.5, firefox 2.0, safari and opera. Somehow I forgot to include IE in the dataset.

You can find the images here:
http://folk.uio.no/tarjeih/matlab/

For now I've done removal of horizontal components in the image. To do this, I used matlab to get the variance of each horizontal line in the image. Then I set a cutoff point wrt to variance and also cutoff points that I was only interested in lines 120 or 50 pixels from the top or bottom respectively.

For each picture I got two sets of lines, one for the lines on top with variance bellow the set cutoff point and one for the lines close to the bottom.

I then used the line closest to the center for each of these sets as the line where I thought the webpage started.

The images in the directory show the results.

The file .png is the original image and the file cut-.png shows the image with red lines drawn where I found lines with variance bellow the cutoff point.

Files named figure-.png.eps shows the two images side by
side.

Relevant matlab code is also in the directory:
- cutPic.m is the function that finds the cut off points.
- getCutPicLines.m is the script that goes through the images and
crops them.
- colorLines is a script to color the relevant lines in the image.
- tmp_rmLines .m is a starting attempt at making the script work in
both dimensions.

Questions/Problems/Ideas/Comments:
* It is fairly obvious that this approach works best at the top and bottom.
* I'm wondering if I should use information about which browser this is when cropping the image. I was hoping I didn't have to, but I seem to be wrong.
* I will need an approach to deciding if there is stuff surrounding the image, esp if there is a scrollbar in the image.

onsdag 17. oktober 2007

Browserbeaten - what's in a name?

Why browserbeaten? Because nitwit, bit, imtest and a host of other names on blogspot were taken.

Browserbeaten also refers to the state of many web developers today. We make cool and jazzy AJAX based sites with lots of nice CSS and then the whole shebang collapses as the boss says "Why doesn't this work with Safari?" and you have to work double overtime to fix browserbugs just before release . The browser beat you.

In my view, browsers is the new portability challenge for developers. Therefore we need to find ways to test our products across a lot of browsers fast. I'm a great fan (if not always a perfect practitioner) of Test driven development (TDD).

Right now I am working on a masters thesis that tries to combine techniques from computer vision with ideas from test driven development to see if it is possible to make a tool that tests the design of a web page in different browsers.

This blog is my dumping ground for ideas, links and that I will use to develop my masters thesis.