Measure Twice, Code Once (or How To Make Your GUI Pixel Perfect with GIMP)

GIMP logo
GIMP logo.

Several of the projects I’m currently managing, like MockupData and MockupScreens, have complex graphical user interfaces. I have noticed that it’s hard to make this kind of program pixel perfect just by trying to measure the sizes and distances by eye, especially if you have an old/bad/small screen, so here is a small tutorial showing why GIMP should be another of your development tools.

1. Download and install GIMP.

GIMP (acronym of GNU Image Manipulation Program) is open source and completely free. It runs on several platforms, including Windows, Mac OS and Linux. Installation is pretty straightforward: just download and run the installer for your platform in Windows and Mac OS. In Linux, it’s probably already installed; if not you should be able to install it using your favorite software package management utility from your distribution.

2. Take a screenshot of your GUI.

Focus the window you want to capture and then press Alt+Print Screen in windows or Control+Command+Shift+3 in Mac OS. For Linux  you can check this site, which also contains more options for Windows and Mac OS. Then, open GIMP and select Edit → Paste as → New Image.

Alternatively, drag and drop an existing screenshot image file into the GIMP title bar, or use the File menu item to open an existing disk file or an image URL.

3. Use the GIMP measuring tool.

Take a look at the following icons. Are these of the same size?

Original buttons
Original buttons.

Let’s use the GIMP measuring tool. First use the zoom so you get a big image on the screen, and then click on the Measure icon in the toolbox, and then make sure the Use Info window checkbox is enabled. Next, left click on the starting point and drag with the mouse to the ending one, then release the mouse button. The distance between the two points will be displayed on the screen:

Measuring the left button with GIMP
Measuring the left button with GIMP. Click to enlarge.

Now let’s measure the second one.

Measuring the right button with GIMP
Measuring the right button with GIMP. Click to enlarge.

There is a 5 pixel difference. We asked our developer to fix this and make some other changes to the buttons:

  • Making  them smaller, as they looked so big compared to other items in our app. We resized them from 35*26px (left) and 30*26px (right), to 28*22px (both).
  • Adding 2 pixels between the icons.
  • Make the font a bit smaller.
  • Place the plus and minus signs just under the shadow line (this is the line where the background color of the icon changes, thus giving a 3D effect).

Here is the result. You can download and zoom it with GIMP if you want to check the changes:

Fixed buttons
Fixed buttons.

4. Use the GIMP color picker.

Now let’s look at the following toolbar:

Original toolbar
Original toolbar.

Are all buttons of the same color? Let’s check it with the color picker tool. Click on the pointed icon in the toolbox, and then check that the Show info window option is enabled. Click on the background of the Go Screen button.

Using the GIMP color picker on one of the correct buttons
Using the GIMP color picker on one of the correct buttons. Click to enlarge.

We get a color value of  eae8ed. Let’s check the Toggle Comments one.

Using the GIMP color picker on the incorrect button
Using the GIMP color picker on the incorrect button. Click to Enlarge.

Now we get f6f6f2, so the colors are actually different. We also fixed it, and here is how it looks now:

Fixed toolbar
Fixed toolbar.

5. Conclusion.

The appearance of your product is as important as its functionality. With similar features and functionality, a user will choose the one with better appearance, and even if you can’t notice them in your old laptop, people with modern monitors will be able to see them. GIMP allows you to make sure that your GUI elements will look homogeneous to every user with little time and effort, while being completely free software.

Agile management project: Python / wxPython based realistic test data generator for databases (III): selecting developers

Note: this post was previewed and approved by the customer.

In order to post a bid on behalf of the employer in vWorker (adquired by Freelancer on November 2012), he must give me subaccount permissions in his control panel. This is pretty straightforward, and the employer has control over the permissions I will have in his account. To do this, the employer needs to log in to vWorker, go to My account → My subaccounts, click on Add new sub-account and then follow the instructions there.

Once this is done, I can log in to the employer’s subaccount. I use several browsers, one with my main account and others with different subaccounts, so I don’t need to switch the account constantly.

Now it’s time to post a new project by clicking on the Post a new project link at the top left of the page. It’s important to be clear and concise about what you need. On freelance sites like vWorker, a developer needs to place a lot of bids to win a single project, so it’s better to write a small specification on the bid page, and put a full specification in an attachment. Here is a screenshot of the new project page:

vWorker New Project Page
Full page screenshot of the vWorker new project page. Click to enlarge.

From four interested candidates, we selected two developers who were in a nearby timezone, communicated well, offered us a reasonable price, and had demonstrable experience with wxPython development.

We started with a small test (fixing a minor bug) using pay for deliverables. In this way the developer has a good idea of what the work will involve and we can know more about his work before starting the bulk of the project. These tests were successful, so we switched to pay for time, as we consider it better suited to agile development than pay for deliverables.

Agile management project: Python / wxPython based realistic test data generator for databases (II): defining an infrastructure

Note: this post was previewed and approved by the customer.

an infrastruture
An infrastructure (Soo Locks, source: http://en.wikipedia.org/wiki/Soo_Locks)

The customer already provided a complete high level project specification, so I will begin defining lower level requirements. First I will define an infrastructure for the project. This is a desktop application, which means defining infrastructure for it is usually simpler than it would be for a server application. We will use:

We divided this project into several iterations. In the first one we will use just two developers, so I will use just a few agile techniques (no product / sprint backlog and agile metrics for now).

I have found that many developers dislike the idea of using a heavyweight integrated development environment and prefer lightweight editors like notepad++, vi or emacs. But after many years as developer, I have found that a fully featured IDE saves a lot of time with features like code autocompletion, refactoring or the ability to show errors without having to compile the application.

Coding conventions are used to standardize the code structure and for improving code quality. Many developers prefer to do the coding “their own way”, but sometimes that is not an option when working in a team.

Basecamp will be useful for discussing high level features and milestones, as it provides a lot of collaborative tools customized to distributed software development: white boards, forums, project schedulers and trackers…

Low level development tasks will be managed via Trac, as it integrates pretty well a version control software (which allows to share the source code and see what each developer changed), a bug tracking system (where the issues and low level task are managed) and a wiki (what is useful for writing both internal and external documentation collaboratively). In the next articles I will explain more in detail how these work, and how I will use them in this project.

We will also use vWorker for selecting developers, and we will initially pay for deliverables, so we have a fixed cost. If the developers does a good work in the initial part we will consider using pay for time, as it give us more flexibility and it’s better suited for agile development.

Agile management project: Python / wxPython based realistic test data generator for databases (I)

Note: this post was previewed and approved by the customer.

I was recently hired as a manager via vWorker (adquired by Freelancer on November 2012) for improving a realistic test data generator for databases written in Python / wxPython. We already have a working prototype, and we are going to convert it into a commercial application.

A partial screenshot of the initial prototype
A partial screenshot of the initial prototype

After asking permission from the customer, I will describe here the steps and techniques that I will use to manage this project. I’m new to Python and wxPython, but the existing code is clear, so I don’t have any substantial trouble following it.

So, if you are curious about how a project is managed in vWorker using agile techniques, and you want to follow a real case, don’t forget to use one of the subscribe links in the right menu. Feel free to ask any questions or post a comment.

vWorker invites me to the new Tech Sherpa program

The vWorker.com site logo
vWorker logo

…and this is really great as they just invited 4 people for this new feature. So, what is a Tech Sherpa? From the vWorker latest news blog:

A Tech Sherpa™ is a cross-discipline expert with years of success both “climbing” (doing technical work) as well as “guiding” (managing others who do that work). A Tech Sherpa™ can take over some or all aspects of managing your project, and free you to focus on more productive things. Prices range from $25-$95/hour, depending on their skills and location in the world.

So if you want somebody to manage your project, including writing specs, hiring people, managing them, and testing the work, now vWorker offers you everything of these plus a employer triple-point money-back guarantee and a workforce of more than 300.000 skilled people. You can create an account (completely free) here. And if you want to create a project just for me, just click here.

You can learn more about what a Tech Sherpa is and the new project management feature in the vWorker site.

Update December 1, 2012. Freelancer.com acquired vWorker on October 19, 2012. So if you want to contact me, click on this link.