Baable

Baadlands, LLC

November 2009

• Make it easy to take a quick snapshot, trim out what’s not needed, add text bubbles/clipart/parts of other pictures/etc., and send it, save it, post it, or make it the phone wallpaper.  The goal is to make picture messaging more fun and more successful.Provide an easy to learn set of picture editing features for the person who wants to spend more time creating more sophisticated pictures. 
• Provide something creative to do on the train with a phone for people tired of shooting at aliens.

Baable 1.3 can be downloaded here.   This is a demo version which requires purchase at Handango for full function.  It is also available at Ovi, Handango, MySymbian, and Softpedia . 

Baable 1.4 adds a distort tool which provides a flexible and powerfule way to distort all or part of an image.

A new version of Baable (Touch Baable) for touch screens is now available. For more information go to here. 

Basic use case

In the basic use case, Joe is out on Friday night and wants to send a picture to some friends to get them to come over. He takes a picture while dancing with his girlfriend Jane, adds some text and sends it. The basic use case is shown in the following 4 screens:

The first screen shows the picture Joe took on the canvas. In Baable, the “canvas” is the area where you can compose a picture for sending or saving.  Joe uses the “Add text bubble” option to enter the text (screen 2), choose the bubble type/text size/etc. (screen 3), and pastes the text on to the picture.  After that, Joe can either do more editing, or use the “Send” option to pick recipients and send the picture message.

Slightly harder use case

In the second use case Joe wants to send something to Jane the next morning to make up for playing with his camera phone when he should have been dancing. He goes out to the garden, takes a picture of a flower, does some editing and sends it:

The first screen shows the native camera application which can be used if desired.  Photos can be taken from the native phone camera application or the built in camera interface in Baable.  Joe takes the picture, launches Baable, and loads the picture into the image editor.  The image editor is used to create/edit images that can be used later to paste on to a canvas.  Images, unlike canvases, can have transparent areas.  In the second screen, Joe is using the crop tool to eliminate most of the picture. In the third screen, Joe is using the area selector tool to get rid of the leaves in the background. The area selector is very useful as long as there is a good contrast between what you want to keep and what you want to erase. There are other ways to cut out irregular sections of an image using the eraser tool when the contrast isn’t as good,.  In this picture, the contrast is good, so the 4^th screen shows the flower in the image editor with the background erased. Joe saves the image, and goes in to the canvas editor. He uses the color palate (screen 5) and the fill tool (screen 6) to paint the canvas, than uses drawing tools to create a simple frame and a circle to put the flower in. Joe pastes the image in to the circle (screen 7) resizing it to make it fit, and adds a text bubble and heart image from clipart (screen 8).  After that, Joe can either do more editing, or use the “Send” option to pick recipients and send the picture message.

Additional examples

In the following, the ellipse and eraser tools are used to select a face from a large image for later pasting. The original picture was copied from the web using the phones browser. Note that the image is larger than the phone screen, Baable supports editing canvases/images much larger than the physical screen.

The next example shows one of the image manipulation tools (posterize).  The posterize tool merges color zones to make the image look more like a painting or poster. The level of posterization can be increased to make the image more abstract, as in the screens below where the first screen is the original picture and the remaining screens are posterized at different levels (128 levels are supported).

Baable key features:

• Designed from the ground up to be intuitive and easy to use on devices with a mobile camera phone form factor (small screen, four-way navigator).
• Build in camera interface with support for both portrait and landscape modes where available  (even if the native camera interface doesn’t support both modes, e.g. on the Nokia N75).
• Built in interface to send, save, and save images as wallpaper
• Easy posting of images with text to Twitter through twitpic.com and yfrog.com.
• Ability to use images created from scratch, created with native phone camera interface, created with Baable camera tool, and copied from external sources (e.g., web, PC).
• Basic drawing functions (free draw, line, rectangle, oval, fill…)
• Basic picture editing functions (crop, resize, stretch, erase, …) and more sophisticated image manipulation tools (posterize, tint, …)
• Area selector tool useful for picking out parts of images (e.g. a face) for later pasting.
• Built in clipart and tools for creating/saving additional clip art
• Text bubble creation tool which multiple cartoon bubble types (e.g. speech and thought) that automatically change size to fit the text. The text can be entered using t9 or predictive text entry with selectable font size and color.
• Context sensitive help always available
• Undo option to remove up to 16 prior changes.
• Current image backup in phone memory so that the user doesn’t lose current work in case Baable is terminated (e.g. when the battery is exhausted).

Baable has context sensitive help throughout.  Following are the three main help screens, the introduction screen, the main canvas help and the image editor help:

Introduction help screen:

Welcome to Baable

General information.

Baable is designed to make it easy and fun to create and send photos and other images from your camera phone. Images are created and edited on a canvas from scratch, from the camera, or from a saved image. You can draw on the canvas, paste on it, save it and send it. Use the down and up navigator buttons to page through this and other help information.

Typical uses

A common use of camera phones is to send a picture with a text message.  With Baable, you can edit the picture, add clip art if you want, and add the text as part of the picture in cartoon-like text bubbles.

Most canvases are created directly from photos, but the drawing and pasting tools in Baable can also be used to create canvases from scratch, for example you may want to create a canvas from sections of multiple photos by using the image editing tools to capture/crop/edit the different photos and pasting the results on to a canvas.

Getting started:

The most common use of Baable is taking a picture, adding one or more text bubbles, and possibly some clipart, and sending it. To get started, hit 'Go to Canvas', go to 'Options>Load/Clear Canvas/Load from Camera' from camera and take a picture. Once you have a picture, use 'Options/Paste on Canvas/Paste text bubble' to create a cartoon-like text bubble. You can always hit '1' for context sensitive help.

Note, the first time you go to the main screen, there may be a delay while Baable builds thumbnail images.

Happy baabling!

Main canvas help screen:

Canvas screen

General information.

This is the main canvas edit screen. The canvas can be created from scratch, from using the camera or from a saved image. You can draw on the canvas, paste on it, save it and send it.

Typical uses

A common use of camera phones is to send a picture with a text message.  With Baable, you can edit the picture, add clip art if you want, and add the text as part of the picture in cartoon-like text bubbles.

Most canvases are created directly from photos, but the drawing and pasting tools in Baable can also be used to create canvases from scratch, for example you may want to create a canvas from sections of multiple photos by using the image editing tools to capture/crop/edit the different photos and pasting the results on to a canvas.

Hot keys:

Several hot keys are available in most screens:

1 Display context sensitive help.

3 Dim/undim cursor useful while editing.

5 Same as the enter button, except that in many cases, Baable stays in the current state so that the function can be easily repeated, e.g. if you want to paste the same image multiple times, or if you want to fill multiple areas with the same color quickly.

* Zoom out.

# Zoom in.

Canvas menu:

Load/Clear Canvas - opens the canvas load/clear submenu.

Load/Clear Canvas>Load from memory - loads the canvas from phone memory (note that Baable will shrink the photo if necessary to the configured maximum.)

Load/Clear Canvas>Load from camera - creates canvas from camera shrinking it to fit the configured maximum if necessary.

Load/Clear Canvas>Clear - clears canvas.

Load/Clear Canvas>From current image - loads canvas from current image on top of a white background shrinking it to fit the configured maximum if necessary.

Paste on Canvas - Display Paste sub-menu

Paste on Canvas>Paste text bubble - invokes tool for the creation of a text bubble.

Paste on Canvas>Paste current image - Paste currently loaded image (note that you can use the navigation buttons to control where to paste the image after selecting Paste image.

Paste on Canvas>Paste clipart - Open the clipart selector and opens pasting tool for clipart you select.

Save/Send/Post - Opens save/send sub-menu

Save/Send/Post>Send - invokes messaging client to send current canvas over email, mms, or bluetooth.

Save/Send/Post>Post on Twitter - prompts for message and posts canvas to Twitter.

Save/Send/Post>Save canvas - saves canvas in phone memory along with other images.

Save/Send/Post>Save as wallpaper - saves canvas along with other images and makes it the current idle screen wallpaper.

Change canvas size - Crop, enlarge or scale the canvas.

Rotate/Flip - Rotate or flip the canvas.

Special effects - Enter special effects submenu.

Special effects>Posterize - Posterize canvas.

Special effects>Brightness - Adjust canvas brightness level.

Special effects>Contrast - Adjust canvas contrast level.

Special effects>Tint - Tint canvas with current color.

Special effects>Distort - Distort all or part of a canvas.

Drawing Tools - Open drawing tools sub-menu.

Drawing Tools>Pick color from xxx - Allows you to pick the current color from a color palette or somewhere on the current canvas.

Drawing Tools>Pick pen size - Used to change the width of the drawing pen.

Drawing Tools>Draw - Do free drawing using the navigation buttons.

Drawing Tools>Draw line - Draw line(s).

Drawing Tools>Draw ellipse - Draw oval(s)/circle(s).

Drawing Tools>Draw rectangle - Draw rectangle(s).

Drawing Tools>Fill Color - Fill contiguous area of the same or similar color(s) with the same color.

Draw Tools>Fill to color - Fill contiguous space up to the same color (e.g. can be used to fill in an oval no matter what is inside).

View - Display View sub-menu

View>Landscape - switch to landscape mode (if available)

View>Portrait - switch to portrait mode (if available).

View>Zoom - Zoom canvas view in or out.

Undo - Undoes the last change if any

Configuration - Edit configuration options.

Help - Displays help for the current activity (Note that you can generally use the '1' key to display/close context sensitive help as well.)

Exit - Exits Baable

Have fun!"

Image edit help screen:

Image screen

General information.

This is the main image edit screen. Images are primarily used to paste on to a canvas, but they can be edited without being used in a canvas. There are two major differences between editing images and editing a canvas.  First, images have transparent areas which can be created with an eraser, so you can, for example, take a person's image from one photo, crop out everything but the head, and paste it on to another person in the canvas. The second major difference is thatimages don't have a fixed size, they automatically adjust as you draw/erase/crop/etc.

In image edit, the paste size of the image (width x height) is displayed in the status area. The paste size is the size of the resulting image if it is pasted on the canvas. The paste size can be different than the real size of the image which is shown after the paste size in parens if they are different. When you resize the image, the real size is not changed so that information isn't lost. However, you need to make them the same if you want to draw on the image (see Manipulate image in the menu picks.)

Hot keys:

Several hot keys are available in most screens:

Image menu:

Load>Clear Image -Enter image load/clear sub-menu. Note, if you load a new image from clipart, memory or camera, you may want to save your current image first.

Load>Load from clipart - Load image from clipart folder for editing/pasting.

Load>Load from camera - Take a photo and make it the current image.

Load>Load from memory - Load image from phone memory.

Load>From current canvas - Copy current canvas to image editor.

Load>Clear - Clear current image.

Resave image - Resave image (if saved before or loaded from memory).

Save image - Save a new copy on the phone or memory card (if available). You will be given a list of supported image types to save the image in unless the image has transparent areas.

Paste image - Paste current image on canvas.

Drawing functions - Opens drawing tools sub-menu

Draw>Pick color from xxx - Allows you to pick the current drawing color from a palette or from a spot on the current image.

Draw>Pick pen size - Used to change the width of the drawing pen.

Draw>Make pen eraser - Makes the pen an eraser so that any drawing operations erase part of the image. Use Pick color or Clear eraser to change back to an ordinary pen.

Draw>Draw - Do free drawing using the navigation buttons.

Draw>Draw line - Draw line(s).

Draw>Draw ellipse - Draw oval(s)/circle(s).

Draw>Draw rectangle - Draw rectangle(s).

Draw>Fill>Color - Fill contiguous space of the same color.

Draw>Fill>To color - Fill contiguous space up to the same color (e.g. can be used to fill in an oval no matter what is inside). Fill/To color can also be used to do a non-rectangular crop. Simply, use the eraser tool to surround the area you want to keep (e.g. with the oval tool or drawing lines), than move the cursor outside the surrounded area and use Fill/To color with the pen set to an eraser. It will clear everything up to the erased area.

Crop - Crop image using a rectangle.

Open area selector - A powerful but tricky to use tool for selecting sections of an image for editing (for example extracting a flower from a garden picture).

Rotate/Flip>Flip horizontal - Flip the image around a horizontal axis.

Rotate/Flip>Flip vertical - Flip the image around a vertical axis.

Rotate/Flip>Flip horizontal - Flip the image around a horizontal axis.

Rotate/Flip>Rotate xxx - Rotates the image xxx degrees clockwise.

Change paste size>Resize proportional - Allows you to change the size of the image keeping the same proportions.

Change paste size>Resize free - Allows you to change the size of the image without keeping the same proportions.

Change paste size>Set paste size to real size - Change the paste size to be the same as the real size of the image.

Change paste size>Set real size to paste size - Sets the real image size to the current paste size, required for drawing on the image.  Warning, this can cause a loss of resolution.

Special effects>Posterize - Invokes posterize tool to make image more poster-like.

Special effects>Brightness - Allows you to change the brightness of the image.

Special effects>Contrast - Allows you to change the contrast of the image.

Special effects>Tint - Allows you to tint the image with the current color.

Undo - Undoes last change to image.

View>Landscape - switch to landscape mode (if available).

View>Portrait - switch to portrait mode (if available).

View>Zoom - Zoom image view in or out.

Help - Displays help for the current activity (Note that you can generally use the '1' key to display/close context sensitive help as well.)

Technical Data

Baable was developed and tested using Nokia Series 60 3^rd and 5th edition phones (N75, N97s and E71x).  It should work well on any similar phone.

Internationalization is supported through text resources.

Contact                                 

For further information on this game or an evaluation copy, please contact paul@baadlands.com. 

Baable, its features and graphics, this document, and all associated files are copyright 2009 BaadLands, LLC.