Sticker Book

By Paul Kienzle and Tanya Riseman (stickers@seul.org).

Sticker Book is a program which lets you place images on a background scene. Every parent surely knows how much fun kids have with these. Indeed, they are a must for any long plane or car ride. Our program is even better than the paper version (assuming you have a laptop) since you can resize, recolour and reorient the stickers that you use, and since you never need run out of stickers. You can even paint with them!

The program is intended for the 3-7 year old crowd, but it got a little out of hand, and now its even fun for adults (well, for us anyway). It is flexible enough to make sophisticated pictures without being as complex as drawing/painting program. The features which make it great for the three year old are:

  1. we confine the mouse pointer to the window so your toddler can't damage the system
  2. we use large buttons so coordination is less critical
  3. we use a big, ugly mouse pointer so that it is easy to find
  4. we don't use any words so reading is not required
  5. we provide keyboard controls so less coordination is required
  6. we give lots of visual feedback
  7. we allow lots of time for press/release so key repeat isn't a burden

Status

Version 0.1.5

Bug fixes. New scenes.

See the ChangeLog for details.

Requirements

We're running Debian GNU/Linux 2.2 on a P166MMX with 100Mb of memory, and it is fast enough. The program uses about 5-7 Mb of memory, plus however much you are willing to give the X server for an undo stack. The processor load is pretty light until you start rotating resizing or recolouring stickers. Then it very quickly saturates our computer. We run in 16 bbp 1024x768, but it works fine in 8 bbp 640x480. You may want to add more colours to /etc/im/im_palette.pal but we have no idea which ones. Imlib 1.3-3 crashed with 24 bpp.

We compiled with the following:

That's not to say you need these particular versions of the library, but they work fine for me.

Download

Source: stickers-0.1.5.tar.gz

Extra scenes may be available.

This HTML file is included in the distribution, so don't bother to download it separately.

See the INSTALL file for installation instructions.

Disclaimer

We are of course not responsible for anything that results from using this program. We can't promise that it won't damage your system. We can't promise that it will work as described. Use at your own risk. See the COPYING file for details of the GNU Public License. The images included in this distribution are also subject to the GNU Public License in as much as that makes sense. That is, they are not public domain, but they may be freely redistributed as long as they are also available in electronic form.

Report bugs, suggestions, or comments to stickers@seul.org. We would really like to know that someone else in the world is using it! Be sure to put STICKERS in the subject line so we know its not a spam.

Usage

Warning: This section is an amalgam of what is, what was and what may be.

The initial display shows you all the sticker scenes available. Click on the scene you want to edit. If there is a pair of scenes together, the first button shows an example of what can be created with the scene and the second button loads your latest copy of the scene with all the stickers in place and available for editting. Click the stop button or press to exit. Press the exclamation mark ! to load the configuration window. This allows you to change various settings for the program.

If your initial scene list shows the message

No scenes available. Please restart stickers using
$ cd stickers; ./stickers scenes
or type make install and run stickers directly.
then you are probably trying to run stickers without having first installed it. As root users, type make install in the stickers directory to install and make uninstall to remove stickers. Then you should just be able to run stickers from the command line directly. Type ! to enter the configuration window and see what directories stickers is trying to use.

After selecting a scene, you will see a canvas, some sticker controls down the left, some scene controls down the right and some stickers across the bottom. Pick a sticker, modify it with the sticker controls, move it onto the canvas and stick it there. Use the scene controls to unstick the most recent ("oops"), clear the scene ("sponge") or save and exit the scene ("stop"). After exiting the scene you will be back to the initial display with your newly editted scene displayed in the bottom half of the box.

The stickers across the bottom come in related sets. If you click on an unselected sticker, it will become the selected sticker and you can then paste it into your scene. If you then click on the selected sticker, it will change to the next sticker in the set. On the sticker controls (grow, shrink, rotate, mirror, hue, saturation, and colour), click and hold the mouse button for continuous change, or click and release quickly for a single step. The spin onset delay and rate are controlled from the config window. Hold down the shift key to reverse the direction of change, the control key for finer changes or the alt key to restore the original value.

These controls are available directly from the keyboard as well. This allows you to for example change the colour of a line on the keyboard as you are drawing with the mouse. Our son's favourite is to press the rotate and hue keys while we are driving car stickers around the screen with the arrow keys (and suitable sound effects of course!) Again, the Shift, Control and Alt modifiers work with the keyboard commands. Someday we will paste the the controlling letter on the top left surface of the control so that you don't have to memorize them, but for now see the table below. Click the boomerang or press the Home key to restore the original sticker.

The colour controls require some explanation. The brightness controls the degree of shading, from completely black to completely coloured. The saturation controls the amount of colour, from grayscale, through earth tones and into primary colours. The hue rotates the colours around the rainbow. Since many of our stickers are drawn in a single colour plus grayscale outline and shading, rotating the hue works beautifully. For the rainbow, it is just weird. For example, starting with the red car on the street scene, you can make a blue car by rotating the hue to blue, a white car by removing all the saturation, a gray car by removing all saturation and lowering the brightness or a brown car by rotating the hue to orange, reducing the saturation and reducing the brightness. We haven't figured out how to make a black car though.

Sticker control icons (on left hand side)

IconKeyfunction
Grow PgUp increase size of sticker by 10%
Shrink PgDn decrease size of sticker by 10%
Rotate r rotate the current sticker
Mirror m make a mirror image
Hue h change the "hue" (color)
Brightness b change the "brightness" (make it black/nonblack)
Saturation s change the "saturation" (make it white/nonwhite)
Restore Home Go back to the current sticker's original size, color, etc.

Scene control icons (on right hand side)

IconKeyfunction
Undo Delete remove last sticker
Clear End remove all stickers
Paint/Stamp toggle between paint and stamp mode
Exit esc exit scene
Print # print scene (requires configuration)
Configure ! go to configure window

Mousey controls

MouseKeyfunction
move mouse on canvas Arrows move sticker
click on canvas Insert paste the current sticker
click and drag on canvas Insert+Arrows paint current sticker (if enabled)
click on selected sticker [,]select next sticker in set
click on unselected sticker P,pselect new sticker set

Control modifiers

Modifier function Example
(none) step r: rotate by 15 degrees
Shift reverse step R: rotate by -15 degrees
Control fine step ^r: rotate by 1 degree
Control Shift reverse fine step ^R: rotate by -1 degree
Alt restore original Alt-r: return to upright

Saving and Printing

Whenever you exit a non-empty scene, Sticker Book creates a scene file, a thumbnail image and a complete screen image. For example, if your base scene was name Mountain.scene, your working directory would contain Mountain.scene (a background image plus a list of all the stickers that were placed), Mountain.scene.png (a 100x100 pixmap) and Mountain.jpeg (the full-sized image of the editted scene). It is a good habit to clear unsuccessful scenes before editting so that only the pretty ones will show up on the scene selection window.

You can control the format of the saved image by setting saved image file name in the config window %s.xxx. The scene name will be substituted for %s. The extension determines the format of the image. If your imlib library is properly set up, it should handle the most common image formats. You can save a bit of hard disk space by eliminating the %s from the saved image file name (e.g., lastscene.png). This will force all scenes to save to the same file. Note that only the most recently editted image will be saved (even if it isn't actually modified!)

After you have a scene saved, you can use The Gimp or some such to print the scene. Hopefully it will do the appropriate anti-aliasing to make your image come out okay on paper. Using apsfilter, I can print images directly with the lp command. E.g., lp -Pcolor last_scene.jpeg Once you know how to print from the shell, you can set up stickers with a print button. The configure window has a print command box in which you can enter the same command you would type to the shell, but replacing the filename with %s. E.g., the previous example would be: lp -Pcolor %s Finally, you need to enable the print control on the scene window by toggling the print control button in the configuration window. The print control will not show up on the current scene, but you will be able to print by typing #. The next time you edit a scene, the print button should be available.

Each image has a signature stamp in the bottom right hand corner. You can set the content of the stamp using the signature field in the configure dialog. This will be formatted with the function strftime, so you can use the appropriate magic codes to plug in the date as well. E.g., "Jay %d-%m-%Y" says the artist is Jay and pastes the day-month-year beside his name. See the strftime man page for a complete description. If you don't want the signature, leave the box empty. You can set the font to use for the signature in the configure dialog.

There is only one editted scene allowed for each original (so you don't suddenly find that your toddler has used all your disk space). You can keep particularly good ones by renaming them, though the next time they are editted they will be destroyed. You could also rename them and copy them back to /usr/local/share/stickers so they will act like new base scene icons. Alternatively, you could create a separate "good scenes" directory, copy all the .scene and .scene.png files from /usr/local/share/stickers, and move all the good scenes into this directory. Use the configure window to point to the this scene directory instead of the default one.

You can control the size of the saved scene file by adjusting the max stickers saved value in the config window. Some explanation: displaying the initial scene involves displaying the background, then pasting some initial stickers. Sticker placement time is strictly a function of sticker size --- the bigger the sticker, the longer it will take. Since the stickers are not all the same size, simply saving a fixed number of stickers would result in vastly different initial scene rendering times. Instead we use the measure of megabytes which you get by multiplying the sticker dimensions by three for the size of the rendered rgb images, and include as the initial scene all those most recently added stickers whose sum of sizes is less than the value you specify. Note that this does not literally save megabytes of stickers in your file, but only pointers to stickers which add up to megabytes when stuck together. This parameter is largely dependent on the speed of your machine and your patience at startup. Though if you are using a lot of very small stickers, the file can get very large. Note that if you have too many stickers, the oldest ones will be dropped first. Either way your scene won't look right when you reedit it.

Bugs

See the TODO file for a list of missing and broken features.

Note: if your keyboard autorepeat is off when this program exits (it shouldn't be), you can turn it back on again with the command xset r.

Configure Window

The Sticker Configure dialog allows you to control various settings in your program. To enter this dialog, type an exclamation mark from the main window or from the current scene. Click continue to return to where you left off. Position the mouse pointer over the individual settings and a text box describing the setting will pop up.

Adding New Scenes

You can add new stickers to scenes by creating them in The Gimp or some such, moving them to the sticker directory (/usr/local/share/stickers), and adding them to the @stickers section of the scene file. The image should be stored in a format readable by imlib (e.g., PPM, PGM, TIFF, PNG, XPM, JPEG and EIM).

You can create new scenes by painting a background in The Gimp or some some such, moving it to the scene directory (/usr/local/share/stickers) and write the file Myscene.scene containing the following:


	@background myscene.png
	@stickers A1.xpm A2.png A3.png
	@stickers B1.xpm B2.png
	...
	@stickers X.jpeg

Once you've created the scene file, start stickers and click on the word Myscene (it won't have a thumbnail), create a sample scene and exit. Copy Myscene.scene.png from your working directory to the scene directory. The next time the scene list is reloaded, the new scene will display as a thumbnail rather than a name.

Note that for really small stickers, it is better to draw them large and then specify a scaling factor in the scene file. That way, the stickers are the `right size' for the scene, by if you decide that you want a larger one, it will still look good when scaled up. E.g.,


	@background Farm.png
	@stickers cow.png
	@stickers chicken.png : 0.35
	...
This scales the chicken sticker down to 35% of its drawn size.

Please send us links to scenes and sticker sets which are GPL'd so we can link them to this page (you will retain copyright). Make a tarball containing the scene file, the thumbnail, the background and all stickers that you use. The tarball should unpack to the current directory (so it can be easily installed into /usr/local/share/stickers or even into stickers-0.1.5/scenes if they are really cool). Try to pick a unique name (e.g. stickers.seul.org-myscene.tar.gz) so someone can grab a whole bunch at once without them overwriting each other. If you use layers in The Gimp, include the src/*.xcf files for your image so that others can more easily edit them. We have a bit of space available on our site if you have none left.

You can test a newly downloaded scene by untarring into test/ and starting stickers with stickers test/ Some possible scenes are kitchen, store, beach, bedroom, zoo, farm, boating, construction site. It would be nice to have some component-based scenes as well, such as various car parts with which you can design your own car or various animal parts with which you can design your own animal. A "dress-up" scene with figures and clothing would also be nice.

See Also

Linux Letters and Numbers is suitable for even younger children.
Last update: June 26, 2001.