Inessential Graphics on Athena^{∗}

/final/location/when/i/find/out/what/it/is/iGraphics.dvi

(Revision: Alpha)

BLEED ON ME

The Student Information Processing Board

            Omri Schwarz (ocschwar @mit.edu)

Christopher A Mceniry (cmceniry@mit.edu)

            Richard Tibbetts (tibbetts@mit.edu)

June 6, 2004

∗Copyright \begin{matrix}c \\ ◯ \end{matrix} 1987–1995 Student Information Processing Board of the Massachusetts Institute of Technology

Contents

1 Introduction  3
2 Pointerville - Where the Programs Live  3
2.1 Quick Glances . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.2 Quick Sketches . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3 Screen and Window Grabs . . . . . . . . . . . . . . . . . . . . 4
2.4 Quick Editing . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.5 Quick Schematic drawings . . . . . . . . . . . . . . . . . . . . 4
2.6 From the Command Line . . . . . . . . . . . . . . . . . . . . 5
2.7 Serious Graphics Work . . . . . . . . . . . . . . . . . . . . . . 5
3 Available Image Editors  6
3.1 xpaint, CorelDRAW and CorelPAINT . . . . . . . . . . . . . 6
3.2 xfig . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.3 xv . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.4 The Gimp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.5 dia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.6 tgif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.7 Applix Graphics and Star Office . . . . . . . . . . . . . . . . 10
3.8 bitmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4 Command Line Utilities  11
4.1 Format conversions . . . . . . . . . . . . . . . . . . . . . . . . 11
4.2 Transparent images for the Web. . . . . . . . . . . . . . . . . 11
5 That Lab Report  11
6 Appendix  13
6.1 Measurement . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
6.2 File extensions . . . . . . . . . . . . . . . . . . . . . . . . . . 13
7 Computer Graphics Formats  13
7.1 Raster (Pixel) Graphics . . . . . . . . . . . . . . . . . . . . . 13
7.2 Vector (Line) Graphics . . . . . . . . . . . . . . . . . . . . . . 14
7.3 Vector/Raster Conversion . . . . . . . . . . . . . . . . . . . . 14
8 Scanners and Drawing Tablets  15
9 The New Media Center  15

1 Introduction

The purpose of this document is twofold. It will list the programs Athena makes available for graphics work and references to outside documentation on them, and it will give brief introductions on how to produce a simple rough image, how to make a schematic for a class paper, how to convert among the image file formats Athena understands, how to do basic editing tasks on them, and how to do major image manipulation. If you have graphics experience, just find what you want in the next section, Pointerville, and knock yourself out. If you’re a novice, look at the further sections to see how these things work.

The sections after Pointerville do contain some jargon, which is why there is a glossary at the end.

If you’re a novice, here’s some important information you need to know to get started. You will likely need to create graphics for several purposes: a doodle for a poster, or a web page, a diagram or a graph for a lab report, or a major work for the MIT museum. Who knows? You should know the right format for the work. If it’s a photograph, or a scan of a paper drawing, the JPEG format is what you need. For almost all other application, GIF and PNG are the formats you will wind up using. If you’re doing serious graphic editing, and want a format that will preserve your layers, and alpha channels and whatnot, you should know about the XCF format.

If you’re creating a schematic or figure, save your work in the format native for the program you’re using. That will let your edit your work most conveniently. If you make a graph from Matlab or Mathematica, save both the figures and the data in the native format, for the same reason.

Most likely, you will wind up having to write a paper in L^{A}TEX^{1} and importing graphics into it. Some of the programs described here will generate the L^{A}TEX code to import directly into your paper. That is very convenient for manual adjustments afterwards. Barring that, you will need to generate Encapsulated PostScript (EPS) files in order to import them in your paper.

2 Pointerville - Where the Programs Live

I already know this stuff. Where do I find the programs?

If you want to cut to the chase, here’s the list. All of these programs live in the graphics locker (add graphics;) unless we say otherwise.

1more info on L^{A}TEX is available in the SIPB guide Innesential L^{A}TEX, from http://www.mit.edu/sipb/docs.html

2.1 Quick Glances

To have a brief gander at a graphics file, the utilities xv, xloadimage, and display are available to you. You can also use the Athena Web browser. For large image files (over 1000 by 1000), gimp is the best tool because it can read them while only using memory for the pixels that will be displayed.

2.2 Quick Sketches

To make a quick sketch for a poster or Web page, run xpaint. If for some reason you cannot use xpaint, thes two tricks might do in a pinch: You can use the graphics components of Applix or Star Office (add applix; applix& or add soffice; soffice & respectively). Applix is the better choice (the graphics option is in the star menu, by the way) because it lets you save your work in a useful format, while Star Office requires a screen grab (see below).

2.3 Screen and Window Grabs

If you run the sawfish window manager, (the default Athena window manager as of September 2003), just press the PrintScreen button on your keyboard and a menu will come up offering to make a PNG file out of what is on your screen. You can then edit and crop the screen grab as need be. Right now this is the best available way to deal. You can also type add graphics; convert x: screenshot.png for the same purpose. Other utilities that will do a window grab for you from their user interfaces are xv and the gimp. (On both, see below.)

2.4 Quick Editing

To resize an image, crop it, or correct its color balance, there is xv. Open the image by typing add graphics; xv filename and the image will appear in a window. Right-click on the window and the xv menu will appear, offering ways to do the operations above and also add a quick text message, smooth it, sharpen it, despeckle it, and more. The color editor window is excellent for quick color corrections. The same window also has the very handy Grab button for screen shots. xv will also do file format conversions for you (just save as another format).

2.5 Quick Schematic drawings

If you need to make a diagram or schematic drawing of some sort, you can use xfig, tgif (in the sipb locker) dia (in its own dia locker), or xcircuit (in the xcircuit locker) Of these, xfig is the fastest one to learn. One should just remember to use the Export button to save the image in a useable format. (Remember to save in the native format for future editing, though.) dia is also fairly easy for novices.

2.6 From the Command Line

convert, or imconvert in some platforms, will not only convert to and from most file formats but also resize, manipulate colors, tile images together, change the color depth, add text, and concatenate images into an animation.

If it doesn’t do what you want, and you have, for example, a TIFF file, type tif and then hit the TAB key. A list of utilities should come up for you. One might be what you need. The same applies to almost any graphics file format you’re dealing with. Finally, to make animations, you have also a utility called gifsicle.

2.7 Serious Graphics Work

Type add graphics; gimp &. Godspeed and victory, my friend.

3 Available Image Editors

3.1 xpaint, CorelDRAW and CorelPAINT

Figure 1: An xpaint doodle. These programs need little in the way of introduction. They have roughly the same sets of tools with which to create or modify an image file. You have ellipses, squares, lines, curves, speckling, painting, et cetera. But you should know one thing: these programs do not keep track of the different steps you make, so if you take that JPEG of your family and add a text to make a card for grandma, you should save it under a different filename, since you cannot undo the text overlay when it’s time to send a different card to your great aunt Thelma. (The Corel programs, by the way, live in the corel locker, as coreldraw

and corelpaint.)

3.2 xfig

Xfig lives in the SIPB locker together with its detailed manpage. To start it up, type add sipb; xfig &. The window that pops up will look quite Spartan, but don’t let that intimidate you. To have a better look at what you’re doing, click on “Grid Mode” and select a comfortable grid setting. Now you’re ready to start laying down elements.

Xfig’s user interface comes a from different religious tradition compared to other graphics programs, as you’ll soon see. Click on the rectangle button in the Drawing Modes section and put your mouse in the main area. On the top right corner is an area marked “mouse buttons.” The left mouse button is marked “corner point.” When you click on the first corner point, the button is changed to mark “final point,” and the right button is marked as “cancel.” That is what it means. Xfig does not use mouse dragging for input.

Note that for the Polyline drawing tool, the left button is labelled “first point,” the middle as “freehand,” and the right is “single point.”

That means that to draw your zig zag, you mark the points in order with the left button, until the last point, which you mark with the middle. The third acts as your cancel. Play around with each of the drawing modes

Figure 2: Detail from the Xfig interface - the mouse button descriptor

[figure: P]

Figure 3: A typical figure from Xfig.

until you get the hang of it. Be sure to play with the Picture button some. Then it’ll be time to look at the editing modes. After you’ve played around enough, you have several objects on the canvas, each of which is a labeled collection of points. If you click on “move”, you can move entire objects. You select one with the left or middle buttons, and then place it with the middle. (Selecting with the middle button means you can only

move the object vertically or horizontally, a useful restriction if your hand isn’t steady).

Next to the “move” button is its point analogue. It lets you move a single point of an object, leaving the other points where they are. Now play some with the editing tools. They will come in handy.

Now you’re ready to save. To leave Xfig and save a figure for later editing, you can save it as a .fig file. Warning: Xfig’s File dialog can mistakenly reload an image you just modified if you press “return” there thoughtlessly. There are two buttons in the dialog, marked “load” and “save.” Click on the one you mean. To use the figure for another context, you will need the Export menu. Your format options are listed under the “Language” item. To make an image L^{A}TEX will like, you can make an encapsulated postscript object, or you can use the Latex picture settings. These will let you save a set of Latex commands that might look foreboding but can actually be edited by hand. By saving as L^{A}TEX you can do such things as putting Greek lettering or other L^{A}TEX oddities in your figure.

For example, the figure above comes looking like this when exported to L^{A}TEX:

\setlength{\unitlength}{947sp}
\begingroup\makeatletter\ifx\SetFigFont\undefined%
\gdef\SetFigFont#1#2#3#4#5{%
  \reset@font\fontsize{#1}{#2pt}%
  \fontfamily{#3}\fontseries{#4}\fontshape{#5}%

[figure: ϕ]

Figure 4: A typical figure from Xfig.

  \selectfont}%
\fi\endgroup%
\begin{picture}(3462,3849)(1276,-3748)
\thinlines
\put(3151,-2386){\oval(1500,1650)}
\put(1651,-3736){\framebox(3075,2700){}}
\put(1651,-1036){\line( 5, 6){952.869}}
\put(876,-1036){\makebox(0,0)[lb]{\smash{\SetFigFont{29}
{34.8}{\rmdefault}{\mddefault}{\updefault}P}}}
\end{picture}}

A look through the code one can easily find the places where the elements are set and adjust them by hand to make a diagram look just right, or to add L^{A}TEX-isms like mathematical symbols to the text elements you created with Xfig. By looking for the “updefault” command in the code and replacing the text that comes after it with a \phi, we can make a drawing looking like figure 3.2.

3.3 xv

xv is where you go just to have a brief look at an image, or to rescale it, crop it or correct the colors. It does not need much of an introduction further than that given in the previous section. I will just point to any beginner that he should at some point open an image with xv and open the color editor window and play some. xv makes for a good poor man’s photo color correction laboratory.

3.4 The Gimp

The GIMP is a full featured image creation and manipulation program, close to Adobe Photoshop in its capabilities. It is also well-documented both in its help files and on the Web.^{2} There is a book Grokking the GIMP available

2http://www.gimp.org

Figure 5: A very minor GIMP demo.

in stores and online,^{3} as well as many tutorials^{4} and plenty more^{5} out there that is only a Google search away. Typing add graphics; gimp & is all you have to do to get started.

The GIMP’s simplest tool is the crop tool, which lets you cut out arbitrarily shaped elements of an image and paste or manipulate them. It is a good starting point for playing with this versatile program. The most complicated tool is the embedded scripting langiage, which allows you to automate arbitrary image manipulations with relative ease.

3.5 dia

dia lives in the dia locker, and is a very full featured diagram editor, written and maintained in Sweden by the fellows at the Lysator site.^{6} It contains premade symbols for many of the contexts in which you might have to make one of these, including electronic circuits, civil engineering plans, flow charts, UML plans, and more. Click on “chronogram” to see the alternatives available. It has its own formats for saving work, but also saves in the Xfig format, (see above) and in a Tex related format. After you lay some elements on your dia canvas, you can move the points that define them in order to connect the elements together. The program will then let you move elements around while keeping hold of the topology you connected together.

3http://gimp-savvy.com/BOOK/index.html

4http://empyrean.lib.ndsu.nodak.edu/~nem/gimp/tuts/

5http://gug.sunsite.dk/?page=tutorials

6http://www.lysator.liu.se/~alla/dia/

Figure 6: A small dia demo.

3.6 tgif

tgif is another vector drawing utility, maintained at USC^{7} with heterodox ideas on how to write a user interface. It is also not actively maintained^{8}. Nevertheless, you may find it to your liking, partly because it is the most convenient tool for combining schematic drawing with free-hand elements. It lives in the sipb locker.

3.7 Applix Graphics and Star Office

Sometime you might find yourself unable to use the programs above and need to improvise. Hence this section. When you start Applix, from the Athena menu or by typing add applix; applix & you can go to the graphics tool from the star menu. This program is slightly idiosyncratic, and it is meant for making slides, mostly, but it will serve in a pinch. The stroke button is what you use for freehand sketching. You can save the image as Jpeg, GIF, or PNG, among others.

Star Office, on the other hand, is much nicer to draw with, but then doesn’t give you an easy way to save your work. That is where the PrintScreen button rushes to the rescue. Again, if no other tools are available, you can draw a graphic in star office, hit PrintScreen, and later crop the screen dump with xv.

3.8 bitmap

bitmap is a utility for editing XBM (X Bit Map) files for writers of X Windows applications. You probably won’t need if for anything.

7http://bourbon.usc.edu:8001/tgif/

8Internal SIPB note: this needs to change

4 Command Line Utilities

4.1 Format conversions

Athena has a wide array of utilities to manipulate images and translate from any to any of the image file formats in use out there. The first one to know about is the convert utility, which may be known as imconvert where you are logged in. This program convert to and from a truly huge list of file formats, which you can see by reading the Image Magick manual page (add

graphics; man ImageMagick). Take note that convert is currently the

best tool on Athena for generating EPS files out of other image file formats. Also, convert performs many image manipulations from the command line. It’s a real Swiss army knife.

It is plausible that you might find the image produced by convert to be an unsatisfactory version of the input image. In that case, you should also try the variety of other conversion utilities available. For making PNMs into TIFFs, there’s pnmtotiff, and so on and so forth. Type the acronym for your input file format into your Athena prompt, and press the Tab key. Something useful may pop up. The entire package of utilities is called NetPBM, and also includes programs for cutting, cropping, rescaling, masking, and otherwise mangling and altering images from the command line. The pbm manpage (man pbm) is a good start, as are the pgm, pnm, and ppm manpages, in the graphics locker.

4.2 Transparent images for the Web.

The best way to make a transparent image is in the GIMP, where you have full control of the exact layers info is under your control. But, there are also utilities you can use from the Athena prompt. Typing transgif -rgb ff ff ff filename.gif will add a tag in the file to mark the color white as transparent. The three numbers are hexadecimal, so you can mark other colors the same way to the file. The convert utility has the -transparent option that works the same way (for file formats that allow it, i.e. GIF and PNG).

4.3 Animations

For making animated image files, there is always The GIMP, but there is also the gifsicle utility in the graphics locker.

5 That Lab Report

Here are a few things to keep in mind when you’re writing a lab report or paper and are working on some figures for it. Quite likely, you’ve generated the figure in Matlab, and exported it to EPS for your report. If you expect to make edits or corrections in your paper, save the figure in Matlab’s native format (.fig, which is not the same as Xfig’s .fig), so if your editor, advisor, lab partner, or spiritual guru think the axes shold be changed, you can do so with relative ease. Matlab’s properties editor will change anything in your figure that needs changing, no matter how pedantic the demand.

It’s also worth mentioning here a set of books by Yale Professor Edward Tufte^{9}, whose books Visual Explanations, Envisioning Information, and The Visual Display of Quantitative Information are an excellent way to learn the proper way to make a figure for any technical report.

9http://www.edwardtufte.com

6 Appendix

6.1 Measurement

Within the graphic arts world there are a great many measurement standards. Here are some of the more common ones.

inch 2.54 cm, customary measure of length. Many printing standards are based on the inch.

point Unit of measure commonly used for fonts. 1 point = 1/72 of an inch

pica 12 points (6 picas = 1 inch)

pixel The smallest unit of measure in raster graphics

6.2 File extensions

GIF Graphics Interchange Format JPEG Joint Photographic Experts Group XCF eXperimental Computing Facility (Berkeley) XPM X Pix Map EPS Encapsulated PostScript PNG Portable Network Graphics

7 Computer Graphics Formats

Graphics on a computer are stored in a variety of different “file formats.” A file format is a way of structuring graphics information on a disk, so that it can be saved and displayed or edited later. An editing or drawing program is often limited in the number of file formats it can read and write, and there are some industry standard file formats which are more common. In general file formats are either Raster or Vector formats.

7.1 Raster (Pixel) Graphics

A raster graphic is made up of a large number of very small colored dots, similar to a television screen or a monitor. This is the most common computer graphics format, especially on the World Wide Web. Raster graphics are good for photographs, for images that will only be displayed on a computer screen, and for images in which print quality is not of paramount concern. The majority of “paint” programs generate raster graphics. Also, scanners generate raster images.

Raster graphics come compressed and uncompressed. Uncompressed raster files, such as Windows bitmaps (.bmp), or X-windows pixmaps (.xpm), or netPBM pixmaps, are very large, but they display very quickly, with little computation. This makes them good for such things as backgrounds.

In a bitmap a great many pixels are probably of the same color. Instead of listing the definition of that color 4000 times inside the image file, the computer can call that color “2”, list its definition once at the begining of the file, and thereafter refer to it as “2.” This is the basic idea behind graphics file compression. By using this simple technique file size can be greatly reduced, and only minimal computation is required to display the file. Examples of this “loss-less” compression are GIFs (.gif), TIFs (.tif), and PNGs.

The most efficient way of storing a raster file is a complex technique known as “lossy” compression, because some of the detail in the image is lost during compression. In theory (it usually works this way) lossy compression only removes details to small for the human eye to perceive. In practice lossy compression is great for photographs, but not for line drawings, because it leaves artifacts along sharp edges. It is also best used for images which will only be viewed on a computer, and not for images that will be professionally reproduced. The best known lossy graphics format is JPEG (.jpg/.jpe/.jpeg) which is used for many graphics on the Web. The JPEG 2000 (.jp2) format was recently standardized, but as yet not many tools are available for it. It uses wavelet based compression and offers higher quality than JPEG.

7.2 Vector (Line) Graphics

Vector formats are different in that they store images as a group of mathematically defined curves and shapes. Vector formats retain their quality when they are rotated, resized, and printed. Vector graphics are the correct format for images with sharp lines and text, and with a relatively low number of colors, for example engineering or mathematical diagrams, charts and graphs.

The other nice thing about vector graphics is that they are more editable than raster graphics. In raster graphics programs drawing a line or a circle is in reality just setting the color of a bunch of pixels. In vector graphics the program remembers drawing a line, and after drawing it you can pick it up, resize it, stretch it, change its color, and a great many other things not possible in raster graphics. On a side note, most vector graphics formats will allow you to include a raster graphic as just another element, so putting a photograph or a graphic from the web into your diagram is feasible. PostScript is the most famous vector graphics format. It does also deal with raster graphic components.

7.3 Vector/Raster Conversion

So, if graphics are in such distinct subsets, how do we move between them?

It is very possible to convert a vector image into a raster image, through a process known as “rasterizing.” This is used to draw vector images in the computer screen, and to print them. Many vector graphics applications will have a “rasterize” or “export” function, where you can turn the vector graphic into your favorite format for publication on the web. Just remember that this new file will not have the same editability that the vector file did.

Conversion from raster to vector is much more difficult. There exist some programs to asist, but in general this is a tedious “by hand” process. It is often easier to recreate the image from scratch. The most popular technique is to trace over the image with a drawing tablet and Adobe Illustrator. The SIPB office has a tablet on its iMac.

8 Cameras, Scanners and Drawing Tablets

To get your pictures and videos off your digital camera and onto your Athena directories, there is the gphoto2 in the outland locker. gphoto2 -P -R will download your photos from the camera and onto the current working directory, and gphoto -D -R will delete them fromt he camera’s memory.

The SIPB office has two flatbed scanners, a film scanner, and a drawing tablet, should you need them for graphical work. Just drop by at the office, W20-575, any time it is open.

9 The New Media Center

Quoting its web page:^{10} “ The New Media Center’s lab is a Macintosh cluster located in 26-139. This facility is dual purpose, serving both as a classroom for hands on instruction and as a lab for students who are required to use specific media based software for academic or course-related projects. When a class is not using the cluster, it is open to use by all MIT students, faculty, and staff. NMC staff will also be present at scheduled hours to help those with questions about programs, etc.”

The NMC has Macintosh computers with the standard gamut of commercial editing programs. Enjoy.

10http://web.mit.edu/nmc/home.html