Backtestground 0.4: Context Extraction Automated

Thanks to a contribution by Sergey Davidoff, there’s now an automated version of extract-background-context with the very inspired and not at all longish name extract-background-context-gnome. 🙂

Provided it’s run from within a GNOME session, it takes care of changing and restoring the desktop background and taking the required screenshots.

If you know how to do the same in other environments, I’m all ears.

Though, even better than all of this would be a low level approach that gets the code responsible to draw all the stuff seen on top of the background to do so for various resolutions and to save that in image files right away.

• PPA
• Tarball
• GIMP and Inkscape Templates
• Project page

Backtestground Explained

The following walk-through will explain the idea behind and the use of the 4 command line tools from the Backtestground collection.

Background Contexts

An image that may contain panels, docks, icons and windows, all on a transparent background in place of a wallpaper, is what I call a background context. These can be used to layer them on top of wallpapers, to evaluate wallpapers in another context than your current environment.

Extraction

Create the setup you want regarding what is and isn’t visible on the screen.

Change the background to white. On Ubuntu/GNOME, you can just right-click any empty dektop space and choose Change Desktop Background. Doing so on another workspace allows you to keep the Appearance Preferences window open while maintaining the desired setup on the initial workspace.

Take a screenshot, name it on_white.png. For this guide, lets say you save it in bg_test in your home directory.

Change the background to black, make another screenshot, call it on_black.png.

Edit both screenshots to remove differences such as the mouse pointer (remove it entirely or make sure it’s in the same position) and the time of day (copy that part of the panel from one image to the other).

Open a terminal (Applications: Accessories: Terminal) and enter:
cd bg_test
extract-background-context on_white.png on_black.png

The result will be called context.png.

Context in several resolutions

But what if you need to combine the context with wallpapers in other resolutions?
context-to-common-resolutions context.png

the results will be saved in a new directory context_resolutions. On Ubuntu/GNOME, you can have a quick look with
eog context_resolutions/
and use the arrow keys to move through the images.

Wallpaper in several resolutions

Have a wallpaper and need it in other resolutions, scaled and cropped to the varying aspect ratios?
to-common-resolutions background.png

Results will be saved in a new directory background_resolutions.

This way you can simulate the outcome of the Style: Zoom setting in Appearance Preferences, Background tab on systems running at one of the resolutions (though the interpolation and thus the image quality might be different).

Combinations

Now we have all those separate context and wallpaper images in several resolution, but need them layered:
combine-per-resolution background_resolutions/ context_resolutions/

Results will be saved in a new directory background_resolutions_under_context_resolutions.

Resolutions

to-common-resolutions and context-to-common-resolutions use the same configuration file: ~/.config/backtestground_resolutions (or ~/.backtestground_resolutions, if there’s no .config directory. Executing one of them will create the file if necessary, filled with a list of the 14 default resolutions. Resolutions are specified in width, height order. Formatting doesn’t matter and all text will be ignored.

Backtestground 0.2

I’m happy to announce that I finally wrestled my way through actually making a release with a tarball and a PPA of my extended and improved Backtestground collection of templates and command line tools for designing and evaluating wallpapers 🙂

There are even man pages now, created from docbook xml sources!

UPDATE January 17: Fixed an issue with PPA and tarball that led to incomplete installations (Now it’s actually 0.3)
Ubuntu 10.10 PPA
Tarball

extract-background-context

Expects one screenshot with white, and one with shadow-color (usually black), background as input. Puts out a PNG image with transparent desktop. This is useful for evaluating wallpapers that should go well with panels
and themes other than the one you are currently using.

to-common-resolutions

Expects an image as input and crops/resizes it to several common screen resolutions. The resolutions are now specified in a configuration file.

context-to-common-resolutions

Expects an image with transparent background, that may contain panels, icons and windows (like extract-background-context produces) and crop/resizes it to several common screen resolutions, while doing something hopefully sensible with the content.

combine-per-resolution

Combine pairs of images of matching resolution. Expects 2 paths, either to a single image file, or a directory containing images. Each image found at, or within, the first path will be combined with all images of matching resolution found at, or within, the second path. The first path will be used for the lower layer, the second path for the upper layer, when compositing.

GIMP XCF and Inkscape SVG templates

These are not included in the package, as it’s not possible to install files to the user’s Templates folder that way. The setup script in the tarball does install them, if there is a Templates folder.

• GIMP XCF background template
• Inkscape SVG background template

Both have a 2560 x 1600 pixel canvas to use the largest commonly offered resolution, currently. Passepartout layers allow to see how things will look when this space is cropped to conform to other common aspect ratios.

This simulates the effect the Style: Zoom setting in Appearance Preferences: Background will have: the image is scaled up or down such that it fills the screen without distorting it. If the aspect ratio of the image is wider than that of the screen, it will be scaled to the same height and the areas on the side will be cropped. If the aspect ratio of the image is taller than that of the screen, it will be scaled to the same width and the areas on top and bottom will be cropped.

For Ubuntu and Gnome users: Putting them into your Templates folder makes them available in Nautilus or on the desktop by right-click, Create Document.

The Inkscape SVG file supports batch export to 14 screen resolutions.

Howto:

• Bring up the Layers panel (Keyboard shortcut: Shift-Ctrl-L)
• lock all but the targets layer
• Select all in the targets layer (Ctrl-A)
• Bring up the Export Bitmap dialog (Shift-Ctrl-E)
• Check Batch export 14 selected objects
• Hit Export

This will create 14 files with names like size_1024x0768.png in the same folder as the opened file. The size_ part is an easy target for a search-and-replace on the SVG file, if you want a specific prefix or target path.

You might want to remove the rectangles in the targets layer matching unwanted resolutions. Repeatedly Alt-clicking allows to cycle through stacked objects in Inkscape (your window manager might be configured to intercept Alt-clicks, though).

Designing wallpapers for Edubuntu and Xubuntu

For this cycle, we discussed that the Ubuntu Artwork Team should do more for the community. The misconception that the team has anything to do with Ubuntu-the-product’s visual design and default theme has to die. I lean towards the same for the hope this could change.

The Ubuntu flavours Edubuntu and Xubuntu need wallpapers for the upcoming 11.04 release. Members of the Artwork Team talked with representatives of the projects to develop specifications for wallpapers.

• For Edubuntu
• For Xubuntu

Art and design are about communication. A distribution not only can say something with the default wallpaper, it will say something. It’s better to take control of it, otherwise it will look like a lack of care and understanding.

That’s why the specifications are about a desired message. Focusing on trying match the user’s tastes is unlikely to work out. Especially if you don’t have a well defined audience. Attempts to please everyone easily end up with something that just barely manages to step on no one’s feet.

Many users like to change the wallpaper just to make the desktop their own. So the default wallpaper may as well be about the identity of the project, as it surely won’t be about the identity or taste of a particular user.

Everyone is welcome to contribute. Any technique and medium goes, as long as you end up with a wallpaper of the right size. Feel free to build on the work of others and to collaborate, as this is not a contest. Spread the word, if you support this effort.

Backtestground

Backtestground is a project collecting a few tools to aid in designing wallpapers.

GIMP XCF and Inkscape SVG templates

• GIMP XCF background template
• Inkscape SVG background template

Both have a 2560 x 1600 pixel canvas to use the largest commonly offered resolution, currently. Passepartout layers allow to see how things will look when this space is cropped to conform to other common aspect ratios.

This simulates the effect the Style: Zoom setting in Appearance Preferences: Background will have: the image is scaled up or down such that it fills the screen without distorting it. If the aspect ratio of the image is wider than that of the screen, it will be scaled to the same height and the areas on the side will be cropped. If the aspect ratio of the image is taller than that of the screen, it will be scaled to the same width and the areas on top and bottom will be cropped.

For Ubuntu and Gnome users: Putting them into your Templates folder makes them available in Nautilus or on the desktop by right-click, Create Document.

The Inkscape SVG file supports batch export to 14 screen resolutions.

Howto:

• Bring up the Layers panel (Keyboard shortcut: Shift-Ctrl-L)
• lock all but the targets layer
• Select all in the targets layer (Ctrl-A)
• Bring up the Export Bitmap dialog (Shift-Ctrl-E)
• Check Batch export 14 selected objects
• Hit Export

This will create 14 files with names like size_1024x0768.png in the same folder as the opened file. The size_ part is an easy target for a search-and-replace on the SVG file, if you want a specific prefix or target path.

You might want to remove the rectangles in the targets layer matching unwanted resolutions. Repeatedly Alt-clicking allows to cycle through stacked objects in Inkscape (your window manager might be configured to intercept Alt-clicks, though).

bgce – Background Context Extractor

bgce command-line tool (Python script). Put it in /usr/local/bin and make sure permissions allow execution.

Expects two screenshots as input:

• with white desktop background
• with shadow-color (usually black) desktop background

It creates a PNG image with transparent desktop.

This is useful for evaluating wallpapers that should go well with panels and themes other than the one you are currently using.

Usage:

• bgce on_white.png on_shadow.png will create a context.png in the working directory.
• bgce on_white.png on_shadow.png -o some-existing-dir will create context context.png within some-existing-dir
• bgce on_white.png on_shadow.png -o custom.png will create custom.png instead of context.png
• bgce on_white.png on_shadow.png -o custom will create custom.png (given that custom is not a directory).

What still needs to be solved: creating such context images for several resolutions without lots of manual work. Maybe some kind of slicing script, taking several separate images and/or some coordinates as input.

sizes

sizes command-line tool (Python script). Put it in /usr/local/bin and make sure permissions allow execution.

Expects an image as input and crops/resizes it to 14 screen resolutions (except the one the image conforms to, if any).

Usage:

• sizes input.png creates 13 or 14 files with names like 1024x0768.png.
• sizes input.png -o some-existing-dir will create the files in some-existing-dir.

Currently you have to edit the definition of resolutions in line 50, if you want fewer or different resolutions.

Packaging

Developing these has been fun and straightforward thanks to Python and the Imaging and argparse libraries. Until I looked into installation and packaging. Ran into some interesting issues with setuptools, where I would end up with generated scripts in /usr/local/lib, that would fail because the modules were not in /usr/lib/python2.6/dist-packages/ but
/usr/local/lib/python2.6/dist-packages/. No issue if I just don’t use entry_points. I managed to build a deb after wading trough horrifying amounts of documentation, but I did not manage to build a source deb that I can upload to my PPA. The process fails silently, Launchpad doesn’t tell me what’s wrong. Known issue, filed a support request.

The template files should end up in the users’s Templates folder. Doable with setup.py, even if discouraged. Not possible from a package.

I realise huge amounts of thought and hard work went into all the infrastructure and documentation, so I don’t want to complain too much. But this is why I simply link to a few files that can be used as they are, actually, for now.

Theming Buttons

It would be great to have a theming engine that exposes basic drawing operations to theme authors. Instead of having a number of options per widget, you would deal with primitives like lines, rectangles and gradient fills.

Let me just say that I know of 2 developers who are on it 🙂

Now if you want to draw a button that way, it appears to be simple enough. Just a usually rounded rectangle with one or several outlines (stroked rectangles), with gradient fills per outline and one for the body. If you assume light straight from top, vertical gradient fills with 4 stops for the outlines are sufficient for a somewhat realistic look.

Not so if you assume lighting from the top left. What I would like to have for such a case is one gradient per outline, with 8 stops placed exactly between the segments (= curves in the corners and straight lines on the sides). Extra points for the ability to add stops between the 8 fixed ones.

In Inkscape, you have to take the rectangles apart to get to that level of control, making it rather laborious and inflexible, as you can’t change the corner radius in a single step anymore, afterwards.

Example construction of a button:

1. Outlines. It would be most comfortable to define the corner radius once, for the outermost rectangle. It should be possible to add up to at least 4 outlines, defaulting to 1 px strokes and inset.
2. For each outline, there should be the option to have 8 gradient stops between the segments. The implementation could treat the segments separately, each with a simple linear gradient, just like I had to construct it in Inkscape here.
3. Just a vertical linear gradient fill for the body.
4. Plus a horizontal fill with 34 % opacity. It should be possible to layer linear and radial fills, with alpha per gradient stop.
5. A shadow. This button doesn’t gain much from it, but it illustrates that drawing and layering rectangles with offsets would be useful.
6. A plain black label.
7. Gradient fill for the label. This can reduce legibility, but if handled with care, it makes button and label appear more like a whole.
8. Luxury feature: sunken or raised (see 9.) look for the label. I used a crude approach with stroked and offset duplicates here, which works only on small scale. A clever implementation would take the angle of the character stroke and the lighting direction into account to render a smooth surrounding.