WebPainter Documentation

Introduction :

This is my Master of Engineering project at Cornell. It is basically a java applet which users can directly download in the web browser. When a user download the applet, it makes a connection with a central server. One can see other people's drawing and also draws his own through this "shared drawing" applet. I choose "WebPainter" as my MEng project for several reasons :

Internet: Internet is so hot today that everything will appear on it in the near future. The navigator is the heart of the internet. Building some useful application embedded in the web browser seems to be the most important thing to do right now. This "shared drawing" application is the best example to demonstrate the power of the internet. One can just open a Netscape on his or her desktop and then communicate with friends far away not only by words, but also all kinds of drawing to unveil ideas.
Application: I think this application can be very easily incorporated into some important applications on the internet. Teleconferencing is the best example. Meeting with people at different places on internet is now feasible and may replace the traditional style of conference. To simulate a real conference, the audience not only want to see a speaker, listen to him, but also want to know, for example, what he or her draws on a whiteboard. The point here is that we need a duplex communication in a conference instead of one-way communication. This "Sharded drawing" application is the best example of this property.
Features: There are so many different features in this application. And Java is the best language for those features. In the library of Java, it supports socket connection for a client-server model. Java also has Abstract Window Toolkit package which can do platform-independent Graphical user interface. As far as language feature is concerned, Object-oriented programming inherited from C++ is good for this kind of medium-sized and extendible application. And the most important of all, java is the language designed for Internet programming, which is the essence of this application.

There are six sections in this documentation. An on-line "live" tutorial which tells users how to use is in the section 2. Section 3 introduces some important features of this application. Section 4 gives some implementation details. And the section 4 and 5 are some suggestions and the related future work.

Tutorial :

Features :

Multiuser: One can decide the number of members, say N, in one session when he or she runs the server (drawserver). Every player has to wait for other (N-1) members to start the game. At any time, if any one player quits the game, others still continue. On session is over until all the N members quit. The server will then wait for the N members of next session.
User-friendly: The application is designed for all the different levels of people on the internet. It has to be very user-friendly. The goal is achieved by having a prompt bar at the bottom of the application. It tells everything of the status of the application right now, such as what happens for your last action, what to do next or , most importantly, warnings if you have done something wrong. One can easily learn how to use WebPainter on-line no matter what kind of background he or she has.
Object & painting mode: One very special feature of this application is that it has two different modesm, object mode and painting mode. When drawing in the painting mode, it is basically a free hand-drawing style. For example, one can sketch a nice portrait in this mode just like using a pen and a piece of paper. However, one can not draw something accurate by hand. We have to use some tool like a ruler to draw something accurate in the real world, for example, a straight line. One is able to do such kind of job in the object mode of this application. There are 4 commonly-used geometries in this mode, line, rectangle, circel and triangle. The user can draw one of them by choosing it and set points on the canvas. The object mode greatly enhances the functionality of this application in the sense that it now can be used to do serious communications in addition to informal ones because of the accuracy.
Text & graphics mode: The most effective way of communication is by words. Webpainter also supports the text communication. One can just write something in the text field and then tells Webpainter where to put it on the canvas. Other members can see the text on his own canvas immediately just like drawings. I decide to put the text on the canvas instead of a seperate text field because I think in this way it has less limitation in terms of communication . For example, the user may want to write something just near by his drawing to explaint it.
Show-right-away & show-until-finish: This is another very special feature of this application. Sometimes it may be the case that one wants to show something as a whole instead of piece by piece. There is a private canvas at the bottom left which allows users to do so. The basic idea is that the things one draws on the private canvas is not shown immediately until he or she presses the SHOW button. This feature makes "Shared drawing" much more fun than it was.
Move & fill: Once the object is created in the object mode, it can be moved to somewhere else or filled with some color. That's why it is an object instead of a ordinary drawing. All a user has to do is choose an object and press the MOVE button or the FILL button. All the actions in this application are mouse-driven. If you want to choose an object, just click the mouse at the center of it. I think that's the most straight-forward way to do the object identification on the canvas. Every action in this application is mouse-clicking.
Lines & colors: There is something more to become a complete drawing environment. Users of WebPainter is able to adjust the line to four different widths. They can also choose one color among eight different colors on the color bar. One can think of different ways to use their cominations. For instance, a thick line in black can serve as an eraser.
Erase & undo: There are two buttons for recovery. ERASE just kills everything both on the public and the private canvas, including all the objects created before. UNDO, on the other hand, is for action recovery. If one changes his mind after he presses the MOVE button, he can just undo it instead of continuing the moving action.

Implementation :

Suggestion :

user-level synchronization

Future work :