#qname#





Citation
Lightweight internet-based applications for design

Material Information

Title:
Lightweight internet-based applications for design
Creator:
Qian, Dongqiu
Publication Date:
Language:
English
Physical Description:
ix, 85 leaves : ; 28 cm

Thesis/Dissertation Information

Degree:
Master's ( Master of Design Studies)
Degree Grantor:
University of Colorado Denver
Degree Divisions:
College of Arts and Media, CU Denver
Degree Disciplines:
Design studies

Subjects

Subjects / Keywords:
Computer-aided design ( lcsh )
CGI (Computer network protocol) ( lcsh )
Teams in the workplace -- Data processing ( lcsh )
Java (Computer program language) ( lcsh )
CGI (Computer network protocol) ( fast )
Computer-aided design ( fast )
Java (Computer program language) ( fast )
Teams in the workplace -- Data processing ( fast )
Genre:
bibliography ( marcgt )
theses ( marcgt )
non-fiction ( marcgt )

Notes

Bibliography:
Includes bibliographical references (leaves 84-85).
Statement of Responsibility:
by Dongqiu Qian.

Record Information

Source Institution:
University of Colorado Denver
Holding Location:
Auraria Library
Rights Management:
All applicable rights reserved by the source institution and holding location.
Resource Identifier:
44105465 ( OCLC )
ocm44105465
Classification:
LD1190.A74 1999m .Q53 ( lcc )

Full Text
LIGHTWEIGHT INTERNET-BASED APPLICATIONS FOR DESIGN
Dongqiu Qian
B.Sc. TongJi University, 1992
A thesis submitted to the
University of Colorado at Denver
in partial fulfillment
of the requirements for the degree of
Master of Design Studies
by
1999


This thesis for the Master of Design Studies
degree by
Dong Qiu Qian
has been approved
by
Bennett Neiman
Willem van Vliet
Z2.//5 hf
Date


Qian, Dongqiu (Master of Design Studies)
Lightweight Internet-based Applications for Design
Thesis directed by Professor Mark D. Gross
ABSTRACT
This is a study in lightweight Internet-based applications for design. Along with
the rapid development of personal computers, many software systems have been
developed to support design work. These systems are good for real problem solving,
but they are overweight for purpose like research prototyping or teaching. With the
recent development of Internet technologies, there is a need for Internet-based
design software systems. But at present the most-often-used off-the-shelf CAD
systems can only support single user. The Internet-based communications among
designers are limited by these systems. This paper presents two Internet-based
software toolkits, which can be used to build lightweight applications for design.
Four prototype systems based on these two toolkits will also be discussed.
This abstract accurately represents the contents of the candidates thesis. I
recommend its publication.
Signed
111


ACKNOWLEDGMENT
First, I would like to thank my advisor, Mark Gross, for his support and
encouragement during the past two years.
I would also like to thank the Design and Planning Ph.D. program and the NSF grant
IIS 96-19856, for providing me a wonderful learning opportunity.
Thanks also to Ellen Do, Ray MacCall and all other people from the Sundance
Research Lab, for their advice on my research.
Finally, I would like to thank my wife, Yan Chen, who always provides me with
much-needed support.


CONTENTS
Figures...........................................................viii
Chapter
1. Introduction.................................................. 1
1.1 Introduction .................................................. 1
1.2 Motivations.................................................... 2
1.3 Related Work................................................... 6
1.3.1 Collaborative CAD Toolkits .................................. 6
1.3.2 CGI Toolkits................................................. 7
1.4 Overview ...................................................... 9
1.4.1 The CAD Toolkit .............................................10
1.4.2 The CGI Toolkit..............................................12
2. Approach and Implementation of Toolkits........................16
2.1 Approach ......................................................16
2.2 Two Toolkits .................................................19
2.2.1 Java-based Collaborative CAD toolkit.........................20
2.2.2 Perl-based CGI Toolkit ......................................25
3. Implementation of Lightweight Applications.....................34
3.1 A collaborative drawing system NetDraw.......................34
V


3.1.1 Introduction
34
3.1.2 NetDraw Features.............................................35
3.1.3 Implementation...............................................41
3.2 A simple GIS system...........................................44
3.2.1 Introduction ................................................44
3.2.2 Implementation..............................................44
3.3 A web design database ........................................45
3.3.1 Introduction ................................................45
3.3.2 Implementation..............................................45
3.4 Interactive VRML viewer and manager...........................49
3.4.1 Introduction ............................................... 49
3.4.2 Functionality...............................................49
3.4.3 Implementation..............................................51
4. Conclusions and future work...................................54
4.1 Conclusion....................................................54
4.2 Future Work ..................................................54
4.2.1 The CAD Toolkit .............................................54
4.2.2 The CGI Toolkit.............................................55
vi


Appendix
A. Code for the CAD Toolkit.......................................57
B. Code for the CGI Toolkit.......................................71
References ........................................................84
vii


FIGURES
Figure
1.4.1 The text chat window ...........................................11
1.4.2 The NetDraw graphic screen ....................................11
1.4.3 Input screen ...................................................14
1.4.4 Search screen...................................................14
1.4.5 Search results list...........................................15
1.4.6 Search results detail.........................................15
2.1 Web client, server and CGI program................................17
2.2 Object model of CAD toolkit.......................................20
2.3 Events dispatching model..........................................23
2.4 Client-server architecture .......................................24
2.5 Data saving process ..............................................26
2.6 Data retrieving process...........................................26
2.7 Sample HTML form..................................................28
2.8 HTML sample, search the database..................................30
3.1.1 NetDraw interface ..............................................36
3.1.2 No constraint ..................................................38
3.1.3 With constraint ................................................38
viii


3.2 Link textual data to graphical data ..........................45
3.3 Case base input screen........................................46
3.4 Search the case base ..........................................47
3.5 Output template for the case base.............................47
3.6 3D-objects loaded from VRML files.............................50
3.7 Object hierarchy ..............................................51
3.8 Procedure of turning objects from VRML to 3D canvas...........53


1. Introduction and Motivations
1.1 Introduction
Today personal computers are widely used by designers. Many software
packages have been developed to support design activities in architecture and
planning. Most fall roughly into two categories: computer aided design (CAD)[1]
and geographic information systems (GIS) [2,3].
CAD (Computer Aided Design) enables designers to visualize and document
design solutions. The core of most CAD systems is a drafting tool with which
designers can develop and express their designs. Some CAD systems are general
purpose drafting tools, such as AutoDesk Incs AutoCAD[4]. Some are also
integrated with knowledge in specific domains, such as architecture design, circuit
design etc.; With this domain knowledge, users can quickly draw a domain object,
such as a door in architecture design or a resistor in circuit design. An example of
this kind of system that is customized for architectural design is Graphisofts
ArchiCAD[5], Other systems that lack drafting tools but provide various design
information can be considered as another kind of CAD system, such as the Archie
experimental case library for design, developed at Georgia Tech [6,7].
GIS (Geographic Information System) programs enable designers to efficiently
store, manipulate, analyze, and display all forms of geographically referenced
1


information. Geographic information systems also provide drafting tools with which
users can input graphic data, such as roads, buildings, rivers etc. They also provide
tools to link graphic data with other information. For example, after drawing a
house, you can add to it owners name, owners telephone numbers and other
information. What differentiates a CAD system from a GIS system is that GIS
provides spatial querying and analyzing tools. In GIS, you can pose a query such as:
how many people live within 100 feet along Broadway? The most widely used
GIS today is ESRIs arc/info [8]. Other popular systems include Maplnfo
Corporations Mapinfo [9], and Genasyss Genamap[10].
1.2 Motivations
Commercial products are useful for real problem solving, but they are also time
consuming to learn and unwieldy for rapid research prototyping and for teaching.
For example, the widely used GIS system Arc/info has more than 1500 commands.
It is difficult for users to remember most commands and for a purpose such as
teaching it is therefore overweight. According to the arc/info text Understanding
GIS: The Arc/info method, to go through all the exercises in the book will take an
experienced computer user 40 hours. All these exercises are around only one GIS
project, and they only cover about 250 commands. Furthermore, because they were
first designed and developed before the Web [11], it is impossible to run those
products directly inside a Web browser, although newer versions of the products
2


will be web aware. As the Web is widely used by designers, there is a need of Web-
enabled design applications.
Commercial CAD and GIS products are also unwieldy for rapid research
prototyping. Researchers develop prototypes to help them explore their research
targets, and to focus on specific problems in their research area. For example,
researchers working on sketch recognition focus on the recognition algorithms. They
may have already implemented a recognition algorithm, but without an interface for
sketching or drawing, they cannot test it. Although existing CAD products can
provide a drawing interface, it is hard or even impossible to integrate a new
recognition algorithm with those products. There are at least three reasons for this
problem: The first reason is lack of source code of those commercial products, or
lack of a proper interface to integrate the new algorithm. The second is, even if
researchers are provided with the source code, they may find that the source code is
too complicated. They find that redeveloping a simple drawing program to test their
algorithm is more efficient: redeveloping is quicker than understanding another
developers complicated source code. The third reason is those commercial
products are platform dependent. Sometimes researchers just cannot find the product
they want for the platform they are using. For example, although users can find
different versions of Arc/Info for UNIX and PC, Arc/Info is not available for the
Macintosh.
3


Although commercial products are appropriate vehicles for teaching when the
objective is for students to master practical problem solving using a particular
software package, like Arc/Info or AutoCAD, commercial CAD and GIS products
are unwieldy for teaching students the following things: the concept of what is
CAD or GIS, how CAD or GIS systems work, and how to build a CAD or GIS
system. There are several reasons: Commercial products are very large in size.
They usually require tens or even hundreds of megabytes of disk space. For
example, PC ARC/INFO requires 25 MB of storage, and AutoCAD 14 requires
50MB. It is not easy to set them up on users computers, and sometimes an
experienced system administrator must do the installation work. Commercial
products are also expensive. Using them merely to teach the concept of CAD of
GIS is not economical in both time and money.
Building prototypes can help students to understand how CAD or GIS systems
work. But building a whole prototype from scratch is time consuming too. The
commercial products wont help here: as mentioned above, either they are not
extensible or the extensible interface provided is too complex.
Since the introduction of the World Wide Web in 1991 [11], designers have
been exploring new ways to use Internet and web technologies in design. From the
earlier use of email communication and exchange of CAD or picture files, to the
more recent use of video conferencing systems, and collaborative drawing
4


whiteboard software, the Internet shows its great strength in knowledge sharing and
the potential of geographically distributed collaboration. Todays most popular and
widely used CAD systems, such as AutoCAD, although they have been improved to
provide more friendly interfaces, better 2D drafting and 3D modeling tools, fast and
better rendering or animation tools, however, they are still limited by their single-
user interface. They don't support simultaneous collaborative work. GIS systems
(such as Arc/Info) although they may support distributed databases, and allow two
or more users to query the database at the same time still do not allow two or more
users to work on a shared drawing surface simultaneously, for example to edit the
same coverage at the same time in Arc/Info. Given today's Web structure, there is no
way to run those commercial products inside a Web browser.
The Web also provides a unique way of sharing information. By putting
formatted information HTML files with links to images, audio, video etc. -- on the
Web, people from all around the world can share it. And best of all, with Web
browsers no other specific software is required. But HTML files and those links are
static: after they are created, Web clients can not change the content via their
browsers. That is, Web clients can only read the information, they cannot add their
ideas and critiques onto the page they are browsing. This static model of information
sharing limits the use of the WWW in design. Each designer has a unique set of
5


experiences and personal design knowledge, but its impossible to collect all their
knowledge into a pre-determined database.
These are the problems that my thesis aims to address.
1.3 Related Work
1.3.1 Collaborative CAD ToolKits
Many toolkits have been developed to support collaborative work. These toolkits
are also called CSCW (Computer Supported Collaborative Work) Toolkits. For
example, Groupkit[12] was developed by Mark Roseman and Saul Greenberg at the
university of Calgary. It is based on the Tcl/Tk language. It supports remote
procedure calls, session management and concurrency control.
Habanero[13] developed at NCSA (National Center for Supercomputing
Applications) is a collaborative framework and environment which contains a set of
applications written in Java. It provides tools for programmers to create
collaborative Java applications. It uses a server to host sessions and a client to
interact with the session. The client provides session information, user
identification, a notification mechanism, record and replay capabilities, a list of
users and tools, an address book and the capability to easily create session
definitions.
Jada[14] is a package for Java that allows distributed Java applications (or even
applets) to access a shared object space for coordination and data sharing purposes.
6


It uses shared tuple spaces for coordination among either concurrent threads or
distributed Java objects. By exchanging tuples through tuple spaces, Java programs
and applets can exchange data or synchronize their actions over the internet.
Como[15] is a java class library for developing collaborative applications
developed at the Friedrich Alexander University, Germany. It consists of a server
program and session starters(client side programs). When a client program starts, it
connects to the server and requests to join a specified session. All users
communicate with each other via the server.
The toolkits mentioned above are not suitable for developing lightweight
intemet-based applications. Some of them dont support web development directly,
such as Groupkit. Others, although are web capable, they are designed to support
much complicated web development, thus they themselves are complicate systems.
For lightweight design applications they are overweight.
1.3.2 CGI Toolkits
There are many tools which can be used to publish information on the World
Wide Web. Some of them are commercial products, some are freewares.
One example of those commercial products is Allaires ColdFusion[16]. Users
can use simple HTML style language called CFML (Cold Fusion Markup
Language) to store and retrieve data to/from the database. CFML extends HTML
by adding tags to read data from, and update date to, databases and tables. Cold
7


%
Fusion can connect to different database management systems, like Microsoft SQL
Server, Oracle etc. There are also some other commercial products, such as
Pervasives Tango[17].
A freeware example is WODA[18]. It is a Perl program that manages web-
oriented multimedia databases. It allows data to be maintained, added, modified and
queried through the WWW. WODA allows the database administrator to rapidly
define the whole database system without programming or defining individual
screens or forms. It supports several field types including TEXT, TEXTAREA,
HTMLAREA, OPTION, LINKOPTION, DATE, EMAIL, URL, FILE, USERFILE,
COMPUTE and BREAK. So it can store text-based information and not-text
information (through USERFILE). It also provides a query builder interface for
users to build complex searches.
The commercial products listed above require to be installed and configured by a
system administrator or who has the same knowledge. Without knowing how
operation system, Web server and CGI work, users may find the installation process
very tedious and hard to accomplish.
WODA is a Perl program, installing it is relatively simple. But users have to
define a database table before they can use it. It doesnt have the capability to
automatically define and adjust database tables according to the front-end HTML
pages.
8


1.4 Overview
In this study, two toolkits, a collaborative CAD toolkit and a CGI [21] toolkit,
were built to support the implementation of Intemet-based design applications. A
toolkit is a computer program or a set of computer programs. Those programs are
designed to be flexible and they can be used as components in many computer
software applications. Thats to say, those programs can be used to build various
applications for different tasks. A toolkit itself consists of computer programs
written in a specific computer language. It is usually designed for computer
programmers to quickly build applications. But a toolkit written in simple languages
can also be used by non-programmers. The CAD toolkit presented here is designed
for computer programmers. The CGI toolkit, on the other hand, is almost for every
one: it can be directly used after installation or it can be extended by programmers.
The next section gives an overview of what kind of applications can be built
upon the toolkits developed in this study.
9


1.4.1 The Collaborative CAD toolkit
The CAD toolkit is a JAVA [20] based collaborative drawing environment that
allows designers to create various shared drawing programs without the complexity
of programming from scratch.
An Internet-based shared drawing program NetDraw was built using the
toolkit. With NetDraw two or more people can draw on a shared drawing surface.
Everybody can immediately see whatever other people draw. NetDraw also provides
a text based chat facility so that people can exchange remarks in text.
Here is an example of how NetDraw might be used in a design teaching context.
Jonas, (a student working at home) has encountered a problem with his site plan: He
doesnt know how to deal with the circulation system. Jonas decides to discuss the
problem with his teacher (Karen) using NetDraw. (See figures 1.4.1 and 1.4.2).
Jonas and Karen connect their computers to the Internet. They start NetDraw client
systems on their computers and connect them to the NetDraw server. Jonas loads his
design draft, which he has saved or scanned in an image file, into NetDraw. The
image appears on Karens screen automatically so that both Jonas and Karen are
looking at the same design.
In the chat window, Karen types: Whats the problem? Jonas replies, I need
help on the entry and circulation system. Karen asks, Show me what you have in
10


mind. Jonas uses the rectangle tool to draw two rectangles representing two
buildings. The two rectangles appear on Karens screen as well. Karen says, "Your
entry is in a difficult place. Look at the flow of pedestrian traffic." Karen draws two
circles to indicate the entries. Then she draws an arrow on the screen to indicate the
pedestrian traffic flow. The gesture appears on Jonass screen, but because it is a
gesture, after a short period of time, it disappears. Jonas selects the two rectangles,
groups them, and moves them to a better position. Like this? he asks.
ponas: I need help on the entry and circulation system.
Karen: Show me your proposed entry.
Karen: Your entry is in a difficult place.
Karen: Please note the flow of pedestrian traffic,
ilonastlsee.
Figure 1.4.1. The text chat window displays the authors name with each comment.
Figure 1.4.2. The NetDraw graphics screen with a scanned image underlay, geometric
objects, and an ephemeral gesture (red arrow).
11


The CAD toolkit supports simultaneous information sharing. As we saw in the
example above, text-based and graphical information is shared among multiple
users. In the example above, text information is not directly linked with specific
graphical objects. But the toolkit can be extended to link the text information and
the. graphical objects, so a GIS system can also be built upon the CAD toolkit. This
is described in section 3.2.
1.4.2 the CGI toolkit
The CGI toolkit can be used to build online design information databases. Today
the World Wide Web has almost reached every comer of the world. Making design
information available on the Web can better support design information sharing. The
authoring language used to create documents on the Web HTML is easy to learn.
With the help of some authoring software tools, such as Microsoft FrontPage,
Microsoft Word etc., nearly everybody can create an HTML page. By putting those
HTML pages online, information can be shared. But this kind of sharing is one-way
publishing: the information can only go from the person who created the HTML
pages (the author) to all other people who visit the page (the users). Even if the
person who visits the page is an expert on the specific area, he/she cannot add
knowledge or critique to the existing HTML pages. Although he/she can create
HTML pages to share ideas with others, users may find that its difficult to find all
those distributed pages at once.
12


With CGI programming, the sharing becomes two-way. Not only the author can
add information to the database, but the other users can also. Furthermore, the
information is stored in the same place. So once a user finds the Web site, he/she
gets most of what he/she wants.
Here is an example of the use of the CGI toolkit building an Assisted Living
Case Base. Suppose Professor John, who is an expert in the design of assisted living
housing, wants to build an online case base on this topic. The database will store
information about design issues and solutions about assisted living cases. He has
some cases at hand and he wants to put them in the database. But he also knows that
other professors, architects, researchers will also have some valuable cases available
and they may want to put their cases into the database too. Professor John knows
that if he types in all the cases he has in Microsoft Word and saves the file as HTML
files, then puts the files online, the database will only contain his cases. So he
chooses to use the CGI toolkit. Instead of building the case base with only his own
cases, he designs the case base with two major functions: case input and case search.
With the case input function, he and other users can input assisted living cases into
the database; with the case search function, all users can search the case base and
retrieve information relevant to their needs.
13


Figure 1.4.3 shows the input screen. With this screen, users can enter into the
database the case name, location, design issue and solution, the URL of the case,
and the images, drawings, video, or audio used to illustrate the case.
Figure 1.4.4 shows the search screen used to search the case base. Users can
search the database by the case name, the location, keywords for the design issue or
the design solution.
Figure 1.4.3 Input Screen Figure 1.4.4 Search Screen
Figure 1.4.5 and Figure 1.4.6 show two different output formats of a search
action. Figure 1.4.5 lists all the cases in the database which meet the search criteria.
By clicking on the case name, users can get the details of the specific case, as shown
in Figure 1.4.6; By clicking on the design issue, users can get all the cases in the
data base which have the same design issue; By clicking on the keywords, users can
get all the cases in the data base which have the same keywords.
14


Figure 1.4.5 Search Results List Figure 1.4.6 Search Results Detail
The Assisted Living case base is one example of the sort of system that can be
built using the CGI toolkit. With the CGI toolkit, design information database can
be built so that users from all around the world can input their information into the
database and share it with others.
15


2. Approach and Implementation of Toolkits
2.1 Approach
The emergence of the programming language Java provides an opportunity to
directly run computer programs on the Web. Without Java, although the Web has a------
client-server structure, the underlying HTTP (HyperText Transfer Protocol)[19]
protocol limits its use for collaboration. One reason is that all HTTP actions are
initiated from clients, not from servers. Although the Web provides a way for
worldwide information sharing, because no direct links are supported by HTTP
among web clients, web clients cannot talk to each other. But using Java, links can
be made among Web clients, so they can talk to each other, and on that basis
collaborative CAD tools can be developed.
Java [20] is a programming language introduced by Sun Microsystems in 1995.
Unlike programs written in the languages C, C++, Lisp, etc., Java programs can be
distributed via the Web and run inside Web browsers. With this technique, there is
no need to install a program bn a clients machine before running it. This kind of
Java programs is called Java applet. To run a Java applet is as easy as to visit a
normal web page, which saves installation and maintenance time.
Java is also a platform independent and object-oriented language. No matter
what hardware system platform the developer used to create a Java program, the
16


program itself can run on any platform without any change. As a pure object-
oriented programming language, Java program has all the benefits inherited from
object-oriented methods, including that it is easy to maintain and easy to modify and
extend. Toolkits based on Java better support future use and extension.
CGI (Common Gateway Interface)[21] is a specification that defines how Web
servers execute other programs and incorporate the outputs of these programs into a
Web browser. Figure 2.1 shows how a Web server and a Web client interact with
each other. The most common language for writing GGIs is Perl [23], but other
languages can also be used.
Figure 2.1 Web Client, Server and CGI program
With CGI programming, the Web becomes more interactive: if needed, Web
clients can make changes to the page they are browsing. On the client side, users can
type in information inside their Web browsers and save the information in a shared
17


database on the server. On the server side, CGI programs can retrieve the
information and present it to users through Web pages. Compared to the stand-
alone database model, as for example the Archie program [6], this provides a new
way for building a design information database: build it online and make it
interactive with users. With the online database, designers from all around the world
can share their ideas, stories, questions and answers and other information with
others.
Every time a user types in a URL (Uniform Resource Locator)[22] or clicks on a
URL link in a Web browser, the browser contacts the server and tells the server
what it wants. If the URL points to static HTML or other files on the server, the
Web server then sends those files back to the browser and the browser displays
them. In this procedure, the files must exist before they are visited; otherwise an
error message will appear on the clients Web browser indicating that the requested
files were not found.
If the URL points to a CGI program, the Web server will start the CGI program
and pass it data from the Web browser. The CGI program then with the help of other
server side applications such as database etc. dynamically generates HTML or other
files. Finally the Web server sends back to the Web browser whatever data the CGI
program generated. In this procedure, users see dynamically generated files, not
static ones. Because a CGI program can access any data source, for example other
18


programs, it then can save users input into a database and generate HTML formal
outputs according to the data in the database. This makes the Web more interactive.
A user may not be able to tell whether what he or she is browsing is the output
from Java applets or CGI program, but there is a difference between Java applets
and CGI programs: Java programs run on the clients machine and CGI programs
run on the Web server. For the purpose such as building design information case
base, using a CGI to retrieve and generate outputs like HTML files is acceptable,
because normally Web surfing does not require an instant response. Waiting for a
few seconds after you click on a link is quite normal. But its not good to use CGI
technique to develop systems that require instant response, such as CAD systems.
Nobody will use a CAD system that imposes a 3 or 4 seconds delay to draw a line.
Two toolkits were built to support the further development of lightweight design
applications.
2.2 Two Toolkits
Commercial products that are most often used by designers, mainly deal with
two kinds of data: graphical data and textual data. For example, CAD systems
mainly deal with graphical data; design information databases mainly deal with
textual data; and hybrid systems, such as GIS systems, deal with both.
Two toolkits were built to deal with graphical data and textual data respectively.
They are a Java-based collaborative CAD toolkit and a CGI Perl [23] toolkit.
19


2.2.1 Java-based collaborative CAD toolkit
This toolkit can be used to build web-based collaborative CAD applications.
Users can build not only single-user CAD systems but also multi-user CAD systems.
The toolkit provides two kinds of fundamental functionality:
The first is a shared drawing canvas. This canvas is designed with a flexible
interface so that users can design their own graphical objects and put them on the
canvas. This makes this toolkit extensible. Although the basic drawing toolkit only
supports lines, users can design their own graphical objects, such as circles,
rectangles, or other objects, and integrate them into the toolkit easily. But all these
graphical objects must have the same superclass, which is GraphicsObject (Figure
2.2).
Figure 2.2 Object Model of CAD toolkit
20


Users can change the definition of the root object. Users can add more methods
to the definition. The following is an example for the definition of the root object
GraphicsObject.
class GraphicsObject extends Object {
private JPanel panel;
GraphicsObject() {
}
public void setPanel(JPanel p) { //set the parent panel for this object
panel = p;
}
//methods to deal with mouse events
public void mousePressed(MouseEvent e) { }
public void mouseReleased(MouseEvent e) { }
//how to paint the object
void paint(Graphics g) { }
)
The root graphical object defined above has different methods to deal with
initialization, mouse events, and painting. For other user-defined objects, users have
to implement those methods that they are interested in. For example, if a user wants
to define a new object UserLine, with which he can draw a line by clicking on the
canvas once to get the first point, then clicking it again to get the second point, the
root object can be extended as this:
class UserLine extends GraphicsObject { //extend the root object
private float xl,yl; // (x,y) coordinate for the first point
private float x2,y2; // (x,y) coordinate for the second point
private count;
UserLine() {
x ] =yl=x2=y2=count=0; //initialize
}
21


public void mousePressed(MouseEvent e) {
if(count==0) {
xl=(float)e.getX();
yl=(float)e.getY();
count =1;
} else {
x2=(float)e.getX();
y2=(float)e.getY();
count = 0;
repaint();//this will automatically call the paint function.
}
}
public void paint(Graphics g) {
g.drawLine(x 1 ,y 1 ,x2,y2):
}
}//end of definition of UserLine
This is a very simple example. Because the user doesnt care about the mouse-
release, mouse-dragging events etc., it is only implemented with a mousePressed
method.
The canvas object itself acts like an agent between users and graphical objects. It
provides two functions for graphical objects. One is to tell graphical objects where
to paint themselves. Another .function is in charge of object management and event
dispatching. There are two kinds of events: user-triggered events, such as mouse-
clicking; and graphical-object-triggered events. After an object is modified, it may
send an event to require repainting the canvas (Figure 2.3). After a user triggers a
canvas-related event, this event will be collected by Canvas object. Then the Canvas
object will dispatch this event to related objects. The results of this event will be
22


returned to the Canvas object if they are needed. For example, suppose a user uses
the select tool to try to add an object to the selection. After he clicks the mouse
button on the canvas, the Canvas object will get the mouse event and it will pass this
event to all the graphical objects on the canvas one by one. If one graphical object
returns information to say it is selected, then the Canvas object will stop passing the
event around and add the object to the selection.
*
........................................................
A
A...................
User Triggered Events
Object Triggered Events
Figure 2.3 Events Dispatching Model
The second function that the CAD toolkit provides is a multi-user network
information exchange and management system. This system includes two
subsystems: NetWorkServer and NetWorkClient. NetWorkServer is a dispatch
center: it passes information coming from one user to other users. When a user
needs to send out some information to others, he or she sends it to the server; and
then the server passes the information to others. The server doesnt care about what
kind of information it receives, it just echoes all the information to all other users.
23


So with NetWorkServer and NetWorkClient users can share all kinds of information
(Figure 2.4).
------- Information from A, Sending to B and C
....... Information from C, Sending to A and B
Figure 2.4 Client-Server Architecture
NetWorkServer is a multi-threaded Java program. After it is started, listens on a
specific TCP/IP port. Here is how to start NetWorkServer in an application:
NetWorkServer myserver = new NetWorkServer/8000); //listen on port 8000
myserver.start();
With NetWorkClient, two or more users can log on to the NetWorkServer. Then
they can use NetWorkClient to send/receive information to/from the server.
Internally NetWorkClient also makes TCP/IP connections to NetWorkServer. Here
is how to set up the connection:
NetWorkClient myclient = new NetWorkClient(URL, 8000, user name);
myclient.start();
24


Later when they want to send some information to the server, they use:
mycli ent. Wri teObj ectT oS erver((Object)j avaobj ect);
Here, the javaobject can be any Java object: String, Integer, user-defined object,
etc.
NetWorkClient also listens for any information coming from the server. This
part of the NetWorkClient also runs in its own thread, so users can do whatever they
want to do while the client can still accept the information from the server at the
same time. This listening part is defined in the method run().
public void run() {
Object receivedObject = null;
while(true) {
try {
if(objectis != null) {
receivedObject = objectis.readObject();
//users can add codes here to deal with the received information
}//if
}catch (Exception e) {
System.out.println(error);
}
} //while
}//end of method run
Users can change the implementation of this method to add the code to deal with the
information from the server.
2.2.2 Perl-based CGI toolkit
Building an interactive online design information database would require a
designer to write CGI programs. For most designers, this is difficult. A CGI toolkit
25


is built to enable designers who dont know programming to build interactive Web-
based databases. With this toolkit, an interactive design database can be built
without any CGI programming: the only thing designers need to learn is how to
write HTML files. The toolkit provides functions for online information saving,
searching and retrieving. All the controls used to save or retrieve data will be
directly embedded into HTML files. Users can save text, image, drawing and other
information onto the server through their web browsers.
The toolkits include two separate Perl files: wilduse.pl and wildsearch.pl.
Wilduse.pl is used to save information into the database; wildsearch.pl is used to
search the database and present the results to users. Figures 2.5 and 2.6 show how
this tool works.
Figure 2.5 data saving process Figure 2.6 data retrieving process
26


To use this toolkit, first users must put the two Perl files on the Web Server, in
the appropriate CGI program directories defined by the Web Server. Then users
must change a few lines in the file to tell the program:
Where to find the Perl interpreter.
Perl is an interpretive language, so running Perl programs requires that the
Perl language interpreter be installed on the server. Because the interpreter
(executable programs) can be placed in any directory on the machine, users have to
tell the CGI program where to find the interpreter.
Where to save the database file.
This is the directory name where users want to put their database files.
When wilduse.pl is invoked by the Web server, it will check the data it has
received. If the database specified in the HTML file already exists, wilduse.pl will
append the new data into the database; if the database is new, wilduse.pl will create
the database on the server automatically. Here is the HTML part used to control the
behavior of wilduse.pl:
METHOD="POST"
ENCTYPE='multipart/form-data'
ACTION="/cgi-bin/cgi-proxy/qiand/wilduse.pl" >
Name of design problem:

cINPUT TYPE="TEXT" NAME="qname" size=60>

One sentence summary of problem

cINPUT TYPE="TEXT" NAME="summary" Size=60>


Photoes or images to illustrate the problem:

27


File 1: cinput type=file name=imagelxbr>





cINPUT TYPE=hidden NAME=OUTOUTHTML
VALUE=submit.html>



This is how this form looks like in a web browser (figure 2.7):
j ] ifo ^ V .cjvo;iIqi Help J AdAosa
Name of design problem:
i
One sentence summary of problem or solution:
: 1
Photos or images to illustrate the problem: File 1: I Browse.. J
Sybmit | ; /Clear;!j
p-.: '.v.Vj.'.., .L,_j 1 j^MyCflnyuter-;
Figure 2.7 Sample HTML form
As you can see in this example, users can upload image, video, audio or other
kinds of files onto the server. The toolkit also supports file saving and retrieving
automatically.
Three other variables are defined here. The first one is ACTION, its value is
add. This command instructs the CGI program to add new data into the database.
The second variable is DEBUG. DEBUG is for debugging the CGI program. If
its value is 1, the CGI program will echo all the data it gets to the user, so users can
see what happens during the process. (If its value is not 1, then the toolkit will not
28


echo the information to users.) This variable is optional: its purpose is to help users
to find out whats wrong when something unexpected happens. The third one is
OUTPUTHTML. This is the HTML file presented to users after they click the
submit button.
The data retrieving process is also controlled by HTML files. Here is a sample
HTML file used to retrieve the data saved by the upper saving example:
METHOD-'POST"
ACTION="/cgi-bin/cgi-proxy/qiand/wildsearch.pl" >


Name of design problem:

cINPUT TYPE="TEXT" NAME="qname" size=60>


One sentence summary of problem:








VALUE="levelone.html">



29


Here is how it looks on the screen (Figure 2.8):
3 C:\MjiDocs\maslef\searchianiple.hlra! Microsoft Internet Erqjlofw i : rJH0i3
j £ L ?§) 2l .. tS If 2a O :
j v.zW'XC Slop Refresh Home i Search Favorites History
j Add/ett; C:VMyDocs\me$ler\search5ample.html
Name of design proble

One sentence summary of problem:
Submit | Clear |
__ __ __ ___________________________________ d'
| ; : | i J§j My Corr.puter .. ^
The first field has a name qname, indicating to search in the database field qname;
The second field has a name summary, indicating to search in the database field summary.
Figure 2.8 HTML Sample, Search the database
In the HTML file users also have to specify the following variables:
1) Database name
This tells the CGI programs which database to search from. Database name is
defined in the parameter DBNAME.
2) Field name
Because one database may have many fields, users can instruct the program in
which fields to search. This is implemented using the input field name. The CGI
30


program searches those words typed in an input field only in the database field that
has the same name as the input field in the HTML file.
3) An Action variable to indicate this is a search function.
4) A DEBUG variable to be used debugging the program.
5) An OUTPUTHTML variable to specify the ouput template html file.
For different tasks, users may want to present the search results in different
formats. In this toolkit it can be done by specifying different ouput templates. The
following is a typical ouput template:


put some introduction text here

Search Results:#count# found.





cTABLE width=300 border=l>
problem: #problem#
n ame:
summary: #summary#

31





put other information here, after the searching results.



This template is based on the HTML grammar. Users can put whatever they
want in this HTML template as long as they use the HTML language grammar.
During processing, the CGI program will use this template to present information to
the user. Two kinds of information can be embedded inside the template. One is the
information in standard HTML format, such as static text, image, audio or video etc.
The information is static. It wont change even if the database is changed or the
search criteria are changed. The other is dynamic information. This kind of
information comes from the database and changes according to the content in the
database and the search criteria.
In the template above, some variables are embedded between '# signs, such as
#summary#. This means that summary is a field in the database, and the CGI
program will replace the string #summary# with the corresponding value in the
database. The toolkit also provides a variable #count# to indicate how many records
in the database meet your search criteria.
Because there is usually more than one record in the database, two tags
and in the template distinguish the iterative
part from the non-iterative part. These two tags thus separate the template into three
32


parts. From the beginning to the and from the tag
to the end of the file are the non-iterative parts. The CGI program
only outputs these two parts once. The content between those two tags will be output
once for each record that meets your search criteria. For example, after you search
the database, if 5 records meet your criteria, the CGI program will output the content
between the tags and 5 times. At that time, the
CGI program will change those strings embedded in the # sign for every record.
The two toolkits described above are thin and simple, but they are powerful
enough to be used to build lightweight design applications.
33


3. Implementation of Lightweight Applications
This chapter introduces four lightweight applications based on the toolkit: a
collaborative drawing system NetDraw, a GIS system, a web based design
information database and a 3D-object view and management system.
3.1 A Collaborative Drawing System NetDraw
The first application is called NetDraw. It is a collaborative drawing program
which employs a client-server architecture to provide a shared environment for
collaborative design. With NetDraw, a group of designers can conduct a
simultaneous graphical conversation using their computers over the Internet, no
matter if they are in the same room or thousands of miles away.
3.1.1 Introduction
Design is teamwork. Architects and engineers work together to produce a
design, and at times the design team sits face-to-face, usually around a table,
drawing on a piece of paper or a whiteboard with a variety of colored pens. During
those meetings designers draw concurrently or serially to show their ideas to others
and they point to elements in the drawing as they discuss the design. One important
tool for synchronous distance collaboration in design is a shared drawing surface
where designers can discuss and mark up proposed designs. Although the Internet
34


makes it possible to cany on these graphical conversations at a distance, computer
support for this activity remains limited and primitive.
NetDraw is a synchronous collaborative drawing program built in Java to
support this kind of design collaboration.
3.1.2 NetDraw Features
NetDraw runs as both an application and an applet on any Java-enabled browser.
It has two parts: the NetDraw server and the NetDraw clients. With the NetDraw
client software any number of users can log in to the NetDraw server and use their
Web browsers to observe and participate in a graphical conversation. The server
echoes drawing and editing actions to all clients.
3.1.2.1 Drawing Features
NetDraw is an object-oriented drawing program. Designers can draw lines,
circles, rectangles and freehand sketches in different colors, and they can select,
move, resize, and delete those objects. Designers can access those drawing and
modifying tools quickly from a tool palette. Figure 3.1.1 displays NetDraws
drawing window. On the right is the shared surface where graphical objects are
drawn. Every change made to the drawing area is immediately echoed on all
designers displays. On the left is a snapshot area where designers can capture an
image of the current state of the session. By clicking on the saved snapshots,
designers can quickly review a previous state of the design history.
35


' * m"omiJUMi Mart, Mtai wav
i'MOV^tf!:;r )V V (of [&! 6 (m tr, ! *ic*ir^'£'jtr
Figure 3.1.1 NetDraw Interface
NetDraw can also use a graphical image as the background of the drawing
surface. The image may reside on the local machine or on any Web server. For
example, this image could be a topographic base map or a sketched design drawing
imported from another program. The designer can link objects with descriptive text.
The text may simply indicate the objects name, e.g. table, kitchen, or it may
provide information about the object. Each user also controls whether to display the
text associated with each object. Besides the normal graphical objects offered by
other drawing packages, NetDraw also provides a gesture object. A designer can
draw a gesture on the drawing surface; like other drawing objects, it will appear on
every other designers screen. However, unlike ordinary drawing objects, gesture
objects are temporary; they fade away over a short period of time. Designers can
draw attention to a specific area of the drawing surface with a gesture. A designer
36


can use a gesture object not only to draw attention, but also to discuss their design
concepts with others.
3.1.2.2 Groups and Constraints
NetDraw provides a Group command with which designers can combine two
or more graphical objects into a group. Instead of modifying every graphical object
in a group one by one, designers can apply modifying actions to the group. NetDraw
also provides geometric constraints that can be applied to groups. When a constraint
is applied to a group, the NetDraw assumes that the first object in the group is the
dominant object. For example, if a designer applies Top =Top (top alignment) to a
group of objects, NetDraw will change the Top coordinates of all other objects to
equal the value of the first (dominant) objects Top. Later, when a designer
modifies an object in the group, NetDraw will make this object the dominant object
and re-apply the constraints. For example, consider that objects A, B, C, and D are
grouped in the order A, C, B, D, showing in Figure 3.1.2 When a designer applies
Top=Bottom to make a vertical stack of the objects in the group, the system uses
the following assignments to satisfy the constraints:
Cs Top <- As Bottom
Bs Top <- Cs Bottom
Ds Top <- Bs Bottom
37


Figure 3.1.3 shows those objects after the constraint is satisfied.
B

A
C


D


A
C
B
D
Figure 3.1.2 No Constraint Figure 3.1.3 With Constraint
Later, when you modify object B, moving or stretching it, the system uses these
assignments to satisfy the constraints:
Cs Bottom Bs Top
As Bottom <- Cs Top
Ds Top Bs Bottom
Designers can add one or more constraints to a group. However, NetDraw
doesnt check for conflicts among the constraints. For example, if a designer first
applies Top=Top, and later adds Bottom=Bottom to the same group, constraint
satisfaction proceeds as follows:
1) satisfy Top=Top, to make all the objects in the group top-aligned.
2) satisfy Bottom=Bottom to make all the objects in the group bottom-aligned.
38


If all objects are not the same height, the Top=Top constraint will not be
maintained. In the geometric constraints satisfaction process, NetDraw only moves
objects; it will not resize them.
3.1.2.3 Concurrency Control
The NetDraw Server mediates and coordinates designers actions. Before
collaboration begins, one designer (the host) starts a NetDraw Server. Then all
designers, including the host, can connect to the server. Once these connections have
been made, the designers can begin their collaborative work. During the session, any
participant can join and leave at any time as long as the server is running. When a
new participant joins the session, the NetDraw server sends a message notifying all
other participants.
Its likely that two or more designers will try to manipulate the same object
simultaneously. NetDraw uses a locking synchronization mechanism to ensure that
no two designers can modify one object at the same time. Every NetDraw object is
issued a unique identifying number. A centra] server distributes those unique
numbers and conducts the object lock management. The NetDraw Server adopts a
first come, first served mechanism. When an instance of a NetDraw client starts, it
connects to the NetDraw server to join the current collaborative session. At that
time, the server assigns a number range to the NetDraw client. Then every time the
client creates a new object, NetDraw picks a number from the number range and
39


assigns it to that object. The NetDraw server maintains a list of currently locked
objects. Before a client can change an object, the object must be locked: the client
must ask the server for permission to modify the object. If another client has already
locked the object then the server will queue the request and send a notification
message back to the client. Once the object is unlocked, the server grants permission
to the first request in the queue. The designer who made the request is notified and
can start modifying the object. If the designer deletes an object, the server removes
all pending requests to access this object.
NetDraw uses colors to indicate an objects lock status: yellow, pink and green.
After the designer picks up a tool and selects an object to operate on, the object turns
yellow indicating that it has requested permission from the server to lock the object.
The designer cannot start the action until permission is granted. After the server
replies, the object will tum either green or pink. If the object turns green, the
designer was granted permission to modify, the object is locked, and the designer
can begin to operate on the object. If the object turns pink, it indicates that another
designer is editing the object right now, and the designer must wait. As the request is
queued, once the object is unlocked, its color will tum to green indicating that
modification can begin.
40


In addition, NetDraw provides a text based chat facility to augment the graphical
conversation. It can also communicate with AutoCAD via file transfer, and with
Cocktail Napkin [28] network clients.
3.1.3 Implementation
NetDraw system is based on the CAD toolkit. All graphical objects are inherited
from the root object: GraphicsObject. But here GraphicsObject itself has already
been extended. The reason is that in NetDraw every graphical object has to have
some new methods. For example, if a user triggers the save to file command, the
object should know how to save itself to disk; vice versa, if the user clicks on read
from disk, NetDraw has to know how to restore every object from the disk. But in
the toolkit itself, no method is defined to deal with file access.
Similar to other actions, such as move, delete, stretch etc., graphical
object itself must know how to deal with them. Therefore some other methods were
added. For example, here is the move method:
void moveObject(long id, int xdist, int ydist) {];
In the interface id is the unique identification number of the object; xdist
and ydist mean that moving objectsxdist units along X direction and ydist
along Y direction.
41


NetDraw supports some geometric constraints. The constraint satisfaction
process uses the boundary of related graphical objects. GraphicsObject was also
implemented with some boundary getting and changing methods:
int getLeft(long id) {return -1;};
int getRight(long id) {return -1;};
int getTop(long id) {return -1;};
int getBottomQong id) {return -1;};
void setLeftQong id, int left) {};
void setRight(long id,int right) {};
void setTopflong id,int top) {);
void setBottom(long id,int bottom) {};
All these methods will be re-implemented in the specific graphical object.
Although the getXXXQong id) functions return -1 here, in the implementation of an
object those functions will return the actual boundary of that object.
Although NetDraw has two parts NetWorkServer and NetWorkClient, these two
parts are different from those in the toolkit. NetWorkServer has been extended to
support the following functionality:
object identification distribution. At the beginning of a collaborative
session, when users log onto the NetWorkServer, NetWorkServer will
assign a number range to every user. Then the system can use any number in
the range as the unique object identification number. NetWorkServer thus
ensures that different user gets different number range. The number ranges
default size is 500,000. So the maximum object number is 500,000 for each
user.
42


object locking and management. NetWorkServer maintains two lists to
support concurrency control. One is LocklnfoList. It holds those objects that
are currently locked. Another list is the WaitingList. This list holds
information about users who have requested the modification right to an
/
object but the system has not yet granted the permission. This usually
happens when somebody else is modifying an object and you ask to edit it at
the same time.
NetWorkClient has been extended to support how to deal with the received
information from the NetWorkServer. For example, if one user deletes an object,
this delete action will be sent to the server. Then the server will echo the action to all
other users. When other users (copies of the NetWorkClient program) get the
information, they will pass the information to the canvas object, which in tum will
pass the information to the appropriate object. Finally the object will delete itself.
The canvas object in the CAD toolkit has also been extended to support the
added events, such as move, stretch etc., thus those events can be passed to
every graphical object. It was also implemented with a method to assign a unique
number to every new created object. This number is fetched from the number range
assigned by NetWorkServer.
43


3.2 A Simple GIS System
3.2.1 Introduction
The GIS system built here is very simple. Its not useful for real problem
solving, but its sufficient to show what a GIS is and how it works. With this GIS
system, users can draw points, lines, polygons on the drawing surface to represent
geographical objects, such as location, road and building. Then they can link those
graphical objects with a table, which contains other information related to those
graphical objects, such as the road width, the building height etc.
This system also provides two simple search functions: one is to search the
textual database, and then get the graphical object; the other is to identify an object
on the drawing surface and get its textual information.
3.2.2 Implementation
The GIS system can contain two kinds of information: geographical information
and textual information. It was based on the CAD toolkit and the NetDraw drawing
program. It directly uses the drawing canvas in NetDraw to generate the graphical
object which represent the geographical information. The textual information is
stored in a 2-dimensional table. On this table, every row corresponds to one
graphical object. The linkage between the textual information and the graphical
object is the unique identification number. Every table has a field called ObjectID
44


by default. The system uses this field to link every row in the table to every
graphical object on the drawing surface.(Figure 3.2)
Figure 3.2 Link textual data to graphical data
3.3 A web design database Assisted Living Case Base
3.3.1 Introduction
A web design database was built using HTML, JAVASCRIPT and the CGI
toolkit. The database also called the design case base is designed to store
assisted living housing cases. With the frond end HTML files displayed in the
web browsers users can input successful examples of buildings all around the
world. Users can input photographs, text, plans and section drawings into the
database. By putting the database online, users from all around the world can search
it and get the infomation they are interested in.
3.3.2 Implementation
This database is designed to help architects who are inexperienced with the
design of assisted living housing to make better designs, avoid known pitfalls, and
incoiporate appropriate design features.
45


The database stores the following information for each case: name, location,
specific design issue, solution to the issue, related URL of this case, and up to 3 files
to illustrate the problem or solution. Figure 3.3 shows the input screen.
Figure 3.3 Case Base Input Screen
There are some hidden tags inside the HTML file which you can not see on the
screen. Here is one that instructs the CGI program to save the data into which
database:
cINPUT TYPE="hidden" NAME="DBNAME" VALUE="asliving.db">
In this example, the database name is asliving.db. Another important tag is
OUTPUTHTML:
cINPUT TYPE="hidden" NAME="OUTPUTHTML" VALUE="submit.html">
This tag tells CGI program that after the data is saved to the database, to display
the file submit.html to the user.
Users can search the database by the words in the case name, location,
keywords, issue detail or solution. Figure 3.4 shows the search screen.
Two important hidden tags in the search engine are:
46


cINPUT TYPE="hidden" NAME="DBNAME" VALUE="asliving.db">

The first one DBNAME indicates which database is used by the search engine.
In this example, its asliving.db.
The second tag OUTPUTHTML defines the output format of the search
r
results. Here the format is defined in the file caselevelone.html. Figure 3.5 shows
how caselevelone.html appears in a web browser.
'Hi CAs(u4y\casebi)so\caselQvelone.h(inl Hiciosofl!^
£ilo ^ow.. i : fio/ ; Favorites 'Help 1 ~ ~
* I & 3 ; tS Wi
Back I rr;rw^?r Slop ^Refresh Home SeotcJ*!
Add;oes jfol C:\sludyVcasebase\caseleveIone.html Links
Search Re suits :#count# found.
Case Name: #casename#
Keywords iftssuekevwords# i
_ ____________________________________________________
: ...I r:;[TiS-[^:.MCpmputer,...... ;,^
Figure 3.5 Output Template for the Case Base
47


During processing, the CGI program will replace those variables embedded in #
sign with the actual search result. There are also URL links on #casename# and
#issuekeywords#. If users click on #casename#, the system will display all data in
the database with the case name #casename#; If users click on #issuekeywords#, the
system will display all cases with the same keywords.
Behind the scene, here is an example of how those links work:
#issuekeywords#
As you see, this kind of link also uses wildsearch.pl as the CGI program.
Here is how the program works:
DBNAME=asliving.db specifies the search database used by the CGI
program: asliving.db.
OUTPUTHTML=case]eve]two.html tells the CGI program to use
caseleveltwo.html as the template to present the search results to users. The
caseleveltwo.html works just like the previous one caselevelone.html.
issuekeywords=#issuekeywords#" tells the CGI program to search keywords
#issuekeywords# in the keywords field issuekeywords in the specified database.
48


3.4 Interactive VRML viewer and manager
3.4.1 Introduction
Today's online VRML[24] viewers, like SGIs Cosmo Player[25], can only be
used to view VRML files. They lack functions to support interaction with users. For
example, users can view 3D models (VRML files) with Cosmo Player, but they
cannot use it as a way to interact with the model and make modifications, such as
moving a specific object in the 3D scene. Like the static HTML pages, without users
interaction the 3D scene is also static. This limits the use of VRML as a useful
means for collaborative design: although designers can view the 3D model for a
specific building, they cannot make modifications online.
A simple, interactive VRML viewer 3DViewer~ was developed to support
interaction between designers and 3D models. This system uses JAVA3D[26]
technology.
3.4.2 Functionality
1) load geometry from VRML files
The viewer can load one or more VRML into a 3D scene. Although VRML
itself doesnt support interaction, its already widely used by designers to put 3D
models on the Web. Most 3D modeling software systems widely used by designers
can also export 3D models as VRML files, such as 3D Studio etc. Using VRML
49


source of 3D models, rather than other file formats, allows
le to use those 3D modeling software systems,
i in the 3D scene
pe, besides view the VRML model, the system will also support
a 3D scene.
:e two functions, designers can load two or more 3D models into
:n move those objects to construct a meaningful design plan,
lamp on an office desk. In this example, the desk itself is defined
ie lamp is defined in another VRML file. After they are loaded
;ach is treated as one object. Users can move either the lamp or
an not move any component of the lamp or the desk.
gure 3.6 3D-Objects loaded from VRML files
50


3.4.3 Implementation
The prototype adopts JAVA 3D APIs scene graph programming model. A scene
graph begins with a root object VirtualUniverse. Other objects, including 3D
graphical objects, modification actions, can be added to the root hierarchically.
Figure 3.7 shows a simplified diagram of how data is organized in this prototype.
Virtual Universe
BG: Branch Group
TG: Transform Group
Figure 3.7 Object Hierarchy
A scene graph looks like a tree. The root of that tree is the virtual universe
Object. BranchGroup objects are used to attach new branches to the root. Every
BranchGroup starts a subgroup or a branch of the whole tree. Other objects get
added to the tree by attaching themselves to BranchGroup objects. A
TransformGroup object is used to position, scale, or orient the 3D objects attached
to it.
51


3D objects are loaded from VRML files. The prototype uses the VRML loader
developed by the JAVA 3D and VRML Working Group [27]. Here is a simple
example of how to load VRML files:
VrmlLoader loader = new VrmlLoader();
Scene scene = loader.load(location); //location is a VRML file name
BranchGroup objectGroup= scene.getSceneGroupO;
Through these 3 steps, the program turns a VRML file into a JAVA3D
BranchGroup. This BranchGroup can be added to a scene graph, then the 3D objects
defined in the VRML file will be displayed on the 3D Canvas.
To allow users to select and move those objects on the 3D Canvas, every object
loaded from the VRML file is wrapped with an interface to deal with mouse events.
After a VRML file is loaded, a new BranchGroup and a new TransformGroup are
created. The TransformGroup is responsible for the mouse events processing. The
BranchGroup created from the VRML file is attached to the TransformGroup. So
when a mouse event comes, it will affect those objects attached below the
TransformGroup. The whole procedure is shown in Figure 3.8.
52


Figure 3.8 Procedure of turning objects from VRML to the 3D Canvas
53


4. Conclusion and Future Work
4.1 Conclusion
In this thesis, two software toolkits have been built to support building
lightweight Internet-based design applications. The CAD toolkit can be used to
build Internet-based collaborative design applications. It requires the designers have
the knowledge of Java programming. The CGI toolkit can be used to build online
design information database. It requires the designers know how to create HTML
pages.
Four lightweight applications have been built based on the toolkits to show how
these toolkits can be used by designers and programmers. This study also shows that
users can quickly create Intemet-based applications using the toolkits, as opposed to
program from scratch.
4.2 Future Work
4.2.1 The CAD Toolkit
I intend to continue developing the CAD toolkit to provide a very usable base for
Intemet-based design applications. Some specific areas need to be enhanced or
implemented:
UNDO function
54


Unlike the commercial CAD products, such as AutoCAD, right now there is no
UNDO function integrated in the toolkit. Designers can not undo what they have
done. They may find this inconvenient.
collaborative 3D canvas
Providing a 3D space for designers to collaborate online will help them to
explore the 3D model, then to help them understand and solve the design issues.
Graphical interface for building applications
Currently the CAD toolkit is written in Java. Although a Java programmer can
extend it easily, it is not so easy to use by general designers without programming
experience. Providing a graphical interface for designers to build design application
intuitively will help non-programmers build design applications easily.
4.2.2 The CGI Toolkit
The CGI toolkit can be directly used by designers, no matter they are
programmers or not. But there are still some limitations for the current version of
the toolkit. Here are some areas needed to be improved:
commercial database support
Right now the CGI toolkit uses simple text-based files as the database. When
the data get very large, the query functions may react slowly. Using commercial
database as the back-end support may improve the performance.
55


control language for the template
The toolkit uses HTML style template to send information back to users. But
what it does I to simply replace specific tags with the values stored in the database.
Right now, using the toolkit as it is, there is no way to do the task like this one: if the
value of one field in the database is app, then display it as apple. To add a
simple control language for the toolkit will be my next improvement for this toolkit.
56


Appendix A Source Code for the Collaborative CAD Toolkit
y***###*#****** NetWorkServer ********************/
importjava.net.*;
import java.io.*;
import java.awt.*;
import java.util. Vector;
import com.sun.java.swing.*;
import com.sun.java.swing.event.*;
import com.sun.java.swing.text.*;
import com.sun.java.swing.border.*;
import com.sun.j ava.accessibility. *;
class NetWorkServer extends Thread {
boolean DEBUG=false;
long startnumber = 5000;
long addnumber = 500000;
int userid = 1;
int serverport;
Vector serverlist = new Vector(); //all the sockets are in serverlist
Vector clientname = new Vector();
NetWorkServer(int port) {
serverport = port;
1
public void run() {
ServerSocket serverRSocket = null;
try 1
serverRSocket = new ServerSocket(serverport); //at port 8888
if(DEBUG) System.oui.prinlln("Server listening on port: "
+ serverRSocket.getLocalPort());
showInformation( "Server listening on port: "
+ serverRSocket.getLocalPort());
} catch (IOException e) {
if(DEBUG) System.err.println("Server could not create server socket.");
showMessage("Server could not create server socket.");
NetDraw.sharedlnstance().nelserver=nuIl;
this.stopO;
return;
}
57


while (true) (
//Connect to clients.
ServerEveryThread tst;
tst = connectToClient(serverRSocket); //waiting here,until new
// client is coming
if (tst != null) {
serverlist.addElement(tst);
if(serverlist.size()>2) {
cleanupserverlist();
writeToStream("You are no. '
tst.objectos);
}
}
+ serverlist.sizeQ +
if(serverlist.size() == 2) {
if (everythinglsOK(O) & everythinglsOK(l)) {
for (int i=0; i<2; i++) {
ServerEveryThread tmpt;
tmpt = (ServerEveryThread)serverlist.elementAt(i);
writeToStream("Now have 2 connections, start writing!",tmpt.objectos);
)
}
}
cleanupserverlistO;
if(DEBUG) System.out.println("has "+serverlist.size()+ connections);
try (
Thread.sleep(lOOO);
} catch (InterruptedException e) {
)
) //end while (true) loop
}//end of start
protected void cleanupserverlistO (
boolean haserror = true;
while(haserror == true) {
haserror = false;
int tmpsize = serverlist.size();
for(int i=0; i if (leverythinglsOK(i)) {
cleanup((ServerEveryThread)serverlist.elementAt(i));
ser verlisl.removeElement At(i);
haserror = true;
break;
}
58


} //end of for
} //end of while
}//end of cleanupserverlist
protected ServerEveryThread connectToClient(ServerSocket serverRSocket) {
DataOutputStream os = null;
Socket rendezvousSocket = null;
ServerEveryThread tst = null;
//Listen for client connection on the rendezvous socket,
try {
rendezvousSocket = serverRSocket.accept(); //waiting here
} catch (IOException e) {
System.err.println("Accept failed.");
e.printStackT race();
return null;
}
//Create a thread to handle this connection,
try {
tst = new ServerEveryThread(rendezvousSocket, this);
/*****Send object number to the user*******/
NumberRange numberobject = new
NumberRange(startnumber,startnumber+addnumber,userid);
if(DEBUG)
System.out.println("Sending start="+startnumber+ "
add="+addnumber);
startnumber+=addnumber;
userid++;
writeObjectToStream(numberobject,tst.objectos);
tst.start();
} catch (Exception e) {
System.err;println("CouIdn't create
ServerEveryThread:NetWorkServer.java);
e.printStackT race();
return null;
}
cleanupserverlist();
if(serverlist.size()<2) |
writeToStream("Successful connectionAn "
+ "Please wait for at least another user to connect...",
tst.objectos);
} else {
int tmpi = serverlist.size();
tmpi++;
writeToStream("have + tmpi + connections, You can begin to talk now!",
tst.objectos);
for (int b=0; b writeToStreamC'New user is coming, have + tmpi + connections now!",
59


((ServerEveryThread)(serverlist.elementAt(b))).objectos);
} //end of for
}
return tst;
}
boolean everythinglsOK(int tstNum) {
ServerEveryThread tst = (ServerEveryThread)serverlist.elementAt(tstNum);
if (tst == null) {
if (DEBUG) {
System.out.println("ServerEveryThread #" + tstNum
+ is null");
}
return false;
} else {
if (tst.os == null || tst.objectos == null) {
if (DEBUG) (
System.out.println("ServerEveryThread #" + tstNum
+ output stream is null.");
}
return false;
}
if (tst.is == null || tst.objectis == null) {
if (DEBUG) {
System.out.println("ServerEveryThread #" + tstNum
+ input stream is null.");
}
return false;
}
if (tst.socket == null) {
if (DEBUG) (
System.out.println("ServerEveryThread #" + tstNum
+ socket is null.");
return false;
}
}
return true;
60


void cIeanup(ServerEveryThread tst) {
if (tst != null) {
try {
if (tst.os != null) {
tst.os.closeO;
tst.os = null;
)
if(tst.objectos != null) {
tst.objectos.close();
tst.objectos = null;
}
} catch (Exception e) {} //Ignore errors
try (
if (tst.is != null) {
tst.is.close();
tst.is = null;
}
if (tst.objectis != null) {
tst.objectis.close();
tst.objectis = null;
}
} catch (Exception e) () //Ignore errors
try {
if (tst.socket != null) {
tst.socket.close();
tst.socket = null;
}
} catch (Exception e) {} //Ignore errors
tst.stopO;
}
)
public void forwardString(String string, ServerEveryThread requestor) {
ObjectOutputStream clientStream = null;
int kk=0;
kk=serverlist.size();
for( int i=0; i if(serverlist.elementAt(i) != requestor) 1
clientStream = ((ServerEveryThread)serverlist.elementAt(i) ).objectos;
if(clientStream!=null) writeToStream(string,clientStream);
)
} //end of for
) //end of forwardString
/* forwardObject functionibroadcasting to all except the sender ***/
61


public synchronized void forwardObject(Objecl sendobject, ServerEveryThread requestor) {
ObjectOutputStream clientStream = null;
int kk=server)ist.size();
for(int i=0; i if(serverlist.elementAt(i) != requestor) (
clientStream = ((ServerEveryThread)serverlist.elementAt(i) ).objectos;
if(clientStream!=null) writeObjectToStream(sendobject,clientStream);
}
} //end of forwardObject
public synchronized void forwardObjectToAll(Object sendobject) {
ObjectOutputStream clientStream = null;
int kk=serverlist.size();
for(int i=0; i clientStream = ((ServerEveryThread)serverlist.elementAt(i) ).objectos;
if(clientStream!=null) writeObjectToStream(sendobject,clientStream);
}
} //end of forwardObjectToAll
public void writeToStream(String str,ObjectOutputStream stream) {
writeObjectToStream((Object)str, stream);
}
public void writeObjectToStream(Object sendobject, ObjectOutputStream stream) {
try {
if(stream!=null) {
stream.writeObject(sendobject);
stream.flushO;
}
if (DEBUG) {
System.out.printlnO'NetWorkServer forwarded object.");
}
) catch (IOException e) (
System.err.println("NetWorkServer failed to forward object:");
e.printStackT race();
//cleanupO;
return;
) catch (NullPointerException e) {
System.err.println("NetWorkServer can't forward object"
+ "since output stream is null.");
//cleanupO;
return;
}
62


public void showMessage(String str) {
JOptionPane.showMessageDialog(NetDraw.sharedInslance(), sir,
"Error", JOptionPane.WARNING.MESSAGE);
public void showlnformation(String str) {
JOplionPane.showMessageDialog(NetDraw.sharedlnstance(),str);
)//class NetWorkServer
/*


import java.io.*;
importjava.net.*;
import java.util.*;
/* this class deal with each socket */
class ServerEveryThread extends Thread {
boolean DEBUG = false;
public Socket socket;
public DatalnputStream is;
public DataOutputStream os;
public ObjectlnputStream objectis;
public ObjectOutputStream objectos;
NetWorkServer server;
public String toStringO {
return "ServerEveryThread: socket = + socket
+ "; is = + is
+ ; os = + os;
ServerEveryThread(Socket socket, NetWorkServer server) throws lOException {
super("NetWorkServer");
is = new DatalnputStTeam(socket.getInputStTeam());
objectis = new ObjectlnputStream(is);
os = new DataOutputStream(socket.getOutputStreamO);
objectos= new ObjectOutputStream(os);
if (is == null) {
System.err.println("ServerEveryThread: Input stream seemed
+ "to be created successfully, but it's null.);
throw new IOException();
63


this.socket = socket;
this.server = server;
public void run() {
while (socket != null) {
try {
Object readobj=null;
if (objectis !=null)
readobj = objectis.readObject();
//Pass it on.
if (readobj != null) {
if(readobj instanceof String) server.forwardObject(readobj,this);
if(readobj instanceof ObjectNode) (
server.forwardObject(readobj,this);
server .forwardObjectToNapkin(readobj);
}
}//readobj !=null
} catch (EOFException e) ( //No more data on this socket...
server.forwardString("SERVER SAYS other applet disconnected",
this);
cleanup();
server.cleanupserverlist();
server.forwardStringC'now has "+ (server.serverlist).size() + connections",this);
return;
) catch (NullPointerException e) { //Socket doesn't exist...
server.forwardString("SERVER SAYS no socket to other applet",
this);
cleanup();
server.cleanupserverli st();
server.forwardStringCnow has "+ (server.serverlisi).size() + connections",this);
return;
} catch (IOException e) ( //Read problem..
server.forwardString("SERVER SAYS socket trouble with other applet",
this);
cleanup();
server.cleanupserverlist();
server.forwardStringC'now has "+ (server.serverlist).size() + connections",this);
return;
) catch (Exception e) { //Unknown exception. Complain and quit.
System.err.printlnC'Exception on is.readObject():");
e.printStackTrace();
cleanup();
64


return;
)
)
protected void finalize() {
cleanupO;
)
void cleanupO {
try {
if (is != null) (
is.closeO;
is = null;
)
if (objectis != null) {
objectis.close();
objectis = null;
)
} catch (Exception e) {} //Ignore errors,
try {
if (os != null) {
os.closeO;
os = null;
)
if ( objectos != null) {
objectos.close();
objectos = null;
)
} catch (Exception e) {] //Ignore errors,
try {
if (socket != null) {
socket.close();
socket = null;
)
} catch (Exception e) {} //Ignore errors.
this.stopO;
)
)
65


^********************** iient **************************/
import java.awt.*;
import java.awt.event.*;
import java.io.*;
importjava.net.*;
import java.util.*;
import java.awt.BorderLayout;
import com.sun.java.swing.*;
import com.sun.java.swing.event.*;
import com.sun.java.swing.text.*;
import com.sun.java.swing.border.*;
import com.sun.java.accessibility.*;
public class NetWorkClient extends Thread {
// public class NetWorkClient extends Thread {
boolean DEBUG = false;
Socket socket;
DataOutputStream os;
DatalnputStream is;
ObjectOutputStream objectos;
ObjectlnputStream objectis;
Thread receiveThread;
String ServerName;
int ServerPort;
boolean alreadyConnected;
String UserName;
Panel talkpanel;
Text Area display;
TextField portField,message;
NetWorkClient(String Server,int Port,String name) {
super("NetWorkClient");
ServerName = Server;
ServerPort = Port;
UserName = name;
alreadyConnected = false;
os = null;
is = null;
objectis = null;
objectos = null;
socket = null;
if(connectToServer(Server,Port)){
showInformation("Connected to server successfully!");
)
}
public void MyStopO {
receiveThread = null;
alreadyConnected = false;
66


NetDraw.sharedInstance().netcIient=nuIl;
try { //Close input stream,
if (is != null) {
is.close();
is = null;
if (objectis != null) {
objectis.close();
objectis = null;
}
} catch (Exception e) {} //Ignore exceptions.
try { //Close output stream,
if (os != null) {
os.close();
os = null;
if (objectos != null) {
objectos.close();
objectos = null;
}
} catch (Exception e) {] //Ignore exceptions.
try { //Close socket.
if (socket != null) {
socket.closeO;
socket = null;
}
} catch (Exception e) {} //Ignore exceptions.
this.stop(); //stop the thread
)//end of MyStopQ
synchronized void waitForConnected() (
try {
wait();
} catch (InterruptedException e)
(showMessage("waitQ error!");}
public boolean connectToServer(String ServerName,int ServerPort) (
if( already Connected) (
showMessage("already connected!");
yield();
return true;
}
67


try {
socket = new Socket(ServerName,ServerPort);
} catch (UnknownHostException e) {
showMessage("can't open socket on "+ServerName+"\ncheck server name.
this.MyStop();
return false;
} catch (IOException e) {
showMessage("ERROR: Can't open socket on the port "
+ ServerPort + (on host:\n + ServerName + ")An");
this.MyStop();
return false;
}
try {
os = new DataOutputStream(socket.getOutputStream());
objectos = new ObjectOutputStream(os);
is = new DataInputStream(socket.getlnputStream());
objectis = new ObjectlnputStream(is);
} catch (IOException e) {
showMessageC'Created socket, but can't open stream on it");
MyStopO;
return false;
}//end of try
if ((os != null) & (is != null) & (objectos != null) & (objectis != null)) {
UserName = socket.getLocalAddress().getHostName()+"::" + UserName;
Userldentity myname=new Userldentity(UserName);
WriteObjectToServer(myname);
alreadyConnected = true;
}//end of if
else {
showMessage("Error, try to connect again!");
MyStopO;
return false;
}//end of else
return true;
}//end of connectToServer()
public void WriteObjectToServer(Object obj) {
try {
if(objectos!=null)
obj ectos. writeObj ect(obj);
else {
if(DEBUG) System.out.println("objectos is null,stop the thread");
MyStopO:
}
} catch (IOException e) (
68


showMessage("can't write to server");
e.printStackTrace();
)
}
public void run() {
String received = null;
Object receivedObject = null;
if(DEBUG) System.out.println("\nenter run()...");
while(true) {
try {
if(objectis != null){
receivedObject = objectis.readObject();
if(receivedObject!=null) {
if(receivedObject instanceof String) {
NetDra w.sharedlnstance() .T extDisplay.
addTextFromRemote(receivedObject.toStringO);
}
if(receivedObjecl instanceof ObjectNode) {
NetDraw.sharedlnstance().drawArea.addreceivedObject(receivedObject);
if(DEBUG) System.out.println( receivedObject.toStringQ);
}//end of receivedObject!=null
receivedObject = null;
Jelse { //something wrong with network, stop the Thread
this.MyStopO;
}
] catch (EOFException e) (//no more data on stream
} catch (NullPointerException e) { //Stream doesn't exist.
showMessage("NOTE: Disconnected from serverAn");
MyStopO;
return;
} catch (IOException e) ( //Perhaps a temporary problem?
showMessage("NOTE: Couldn't read from socketAn");
//display.appendText("...DisconnectingAn");
MyStopO;
return;
) catch (Exception e) { //Unknown error. Throw tantrum.
showMessage("ERROR: Couldn't read from socketAn");
e.printStackT race();
MyStopO;
return;
}
69


}//end of while
}//end of run
public void showMessage(String str) {
System.out.println(ERROR:+str);
.}
public void showInformation(String str) {
System.out.println(INFO:+ str);
} //end of class NetWorkClient
^ 3)g fc ^ QJIlbCrRR 3ft^C5|C^C5^5|CSf!&jC5j<3jC?iCDjSjC5|C5jC5jtJjC5j^
import java.io.*;
class NumberRange implements Serializable{
long start,end;
int userid;
NumberRange(long s,long e){
start=s;
end=e;
NumberRange(long s,long e,int i)(
start=s;
end=e;
userid = i;
}
)//class NumberRange
70


Appendix B Source Code for the CGI Toolkit
# !/usr/local/bin/per]
#
# For DongQiu's Master thesis,University of Colorado
######################################################
require "./cgi-lib.pl";
use Fcntl;
SBaseCGl = "/cgi-bin/cgi-proxy/qiand";
SDBaseDir =
$cgi_lib'maxdata = 3000000;
$DelimitStr= "&!!&";
$DEBUG = 0;
###########Don't change between this line, to next comment line###
my ( %cgi_data, # The form data
%cgi_cfn, # The uploaded file(s) client-provided name(s)
%cgi_ct, # The uploaded file(s) content-type(s). These are
# set by the user's browser and may be unreliable
%cgi_sfn, # The uploaded file(s) name(s) on the server (this machine)
);
# Start off by reading and parsing the data. Save the return value.
# We could also save the file's name and content type, but we don't
# do that in this example.
$ret = &ReadParse(\%cgi_data,\%cgi_cfn,\%cgi_ct,\%cgi_sfn);
# A bit of error checking never hurt anyone
&CgiDie("Error in reading and parsing of CGI input") if [defined $ret;
&CgiDie("No data uploaded",
"Please enter it in the form.") if !$ret;
####################you can change now###########################
####################action="add" #############################
if ($cgi_data{'action') eq "add") {
&printHTTPHeader;
print "";
&DEBUG;
71


Sdbfilename = $cgi_data{'DBNAME'};
if (Sdbfilename eq "") {
&CgiDie("You did not specify DBNAME in HTML file.");
)
#######processing input field data #######
for Skey (keys %cgi_data) {
$cgi_data{$key} =~ s/[ \n\t\r\f]//go;
for ($cgi_data{$key}) (
s/A\s+//;
sAs+$//;
}
############ Write Form Data To Database ####################
if (-e "SDBaseDir/Sdbfilename") {
open (DB, "SDBaseDir/Sdbfilename");
SFileFlag = 0;
@KeyData = ;
close DB;
SFirstLine = $KeyData[0];
@AllFields = split (/SDelimitStr/, SFirstLine);
open (DB, "$DBaseDir/$dbfilename");
Sisnewflag = 0;
} else { #file doesn't exist, create a new one
open (DB, ">$DBaseDir/$dbfilename");
Sisnewflag = 1;
}
if (Sisnewflag == 1) { ##new file
for Skey (keys %cgi_data) { #write the field names
print DB "SkeySDelimitStr";
}
print DB "\n";
}
###for Skey (keys %cgi_data) ( ##write the data
Sfieldcount = @ AllFields;
for ($i=0; $i<$fieldcount; $i++) {
Skey = $AllFields[$i];
if($cgi_cfn($key) ne "") { ##indicate it's a file upload
Sglobalname = Skey;
$WriteFileName=&SaveOneUploadedFile($key);
print DB "SWriteFileNameSDelimitStr";
) else { ## normal data
72


print DB "$cgi_data( $key} SDelimitStr";
}
}##for $i/$key data
print DB "\n";
close DB;
print "";
exit;
}
####################end action = "add"#######################
#################### DEBUG ##################################
sub DEBUG {
&printHTTPHeader;
if($cgi_data{'DEBUG'} == 1 || $cgi_data{'DEBUG'} eq "1") {
SDEBUG = 1;
}
if($DEBUG == 1) {
print "Environment variabIes:
";
foreach $key (sort(keys %ENV)){
print "$key = $ENV($key}
";
}
print "Form data pairs:
";
for $key (keys %cgi_data) {
if($cgi_cfn{$key} ne "") ) ##indicate it's a file upload
print "$key = $cgi_cfn ($key}
\n";
Jelse {
print "$key = $cgi_data{$key}
\n";
}#if
}##for
print "To get rid of debug information,remove the DEBUG field in the HTML file

"
}
}#sub DEBUG
######################################################
#############################################################
# HELP FUNCTIONS: don't need to Change, if possible
#
#############################################################
# Print HTTP Header
sub printHTTPHeader {
73


if($headout == 0) {
print "Content-type: text/html\n\n";
Sheadout = 1;
##########Upload files #################################
#
# SaveOneUploadedFile: save one uploaded file, return its saved filename.
#
sub SaveOneUploadedFile {
. local (Sfilekey) = @_;
local (Snamewithpath) = $cgi_cfn{Sfilekey};
# remove the path from the whole filename
SUpLoadFileName = &GetFileName($namewithpath);
if($DEBUG == 1) {
print "Upload File Name: SUpLoadFileName  ";
}
# check if the file already exists, if so, add 1,2,3.. to the end
SWriteFileName = &GetWriteFileName($UpLoadFileName);
if($DEBUG == 1) {
print "New file name for it:$WriteFileName
";
}
#Write to file
open (IMAGEDB, ">$WriteFileName") || die "cannot open file!";
print IMAGEDB $cgi_data{Sfilekey};
close IMAGEDB;
return SWriteFileName;
#GetFileName: remove the path from a long file name
# return the true filename
sub GetFileName {
local (Sinfilename) =
@namearray = split(AV, Sinfilename);
Snumber = 0;
Snumber = @namearray;
Sfilename = $namearray[$number-l];
#GetWriteFileName: if a file already exist, then add "1 2 3.." to it.
# for example, if "back.gif exists, then turn the name to "backl.gif
sub GetWriteFileName {
74


local (Spreviousname) =
local $count=l;
local $partl,$part2;
@parts = split(A./, Spreviousname);
Spartl = $parts[0];
# print "
file aa:$partl
;
$part2 = $parts[l];
while (-e "Spreviousname") {
Spreviousname =
Spreviousname .= Spartl;
Spreviousname .= Scount; ...... ......
Spreviousname .=
Spreviousname .= Spart2;
$count++;
}
return Spreviousname;
)
####################end of UPload files######################3
75


# !/u sr/I oc al/b i n/perl
#
.# For DongQiu's Master thesis,University of Colorado
######################################################
require "./cgi-lib.pl;
use Fcntl;
SBaseCGI = "/cgi-bin/cgi-proxy/qiand";
SDBaseDir =
$cgi_lib'maxdata = 3000000;
$DelimitStr = "&!!&";
SDEBUG = 0;
Sheadout = 0;
###########Don't change between this line, to next comment line###
my ( %cgi_data, # The form data
%cgi_cfn, # The uploaded file(s) client-provided name(s)
%cgi_ct, # The uploaded file(s) content-type(s). These are
# set by the user's browser and may be unreliable
%cgi_sfn, # The uploaded file(s) name(s) on the server (this machine)
);
# Start off by reading and parsing the data. Save the return value.
# We could also save the file's name and content type, but we don't
# do that in this example.
$ret = &ReadParse(\%cgi_data,\%cgi_cfn,\%cgi_ct,\%cgi_sfn);
# A bit of error checking never hurt anyone
&CgiDie("Error in reading and parsing of CGI input") if Idefmed $ret;
&CgiDie("No data uploaded",
"Please enter it in the form.") if !$ret;
############deal with "GET" ############
if ($ENV('QUERY_STRING') ne "") (
&printHTTPHeader;
##for debug
#print "";
#print " $ENV{'QUERY_STRING'}
";
#for $key (keys %cgi_data) (
# print "$key = $cgi_data{$key}
";
#}
#prinl "";
#print "";
76


Sdbfilename = $cgi_data{'DBNAME'];
if (Sdbfilename eq "") {
&CgiDie("You did not specify DBNAME in HTML file.");
)
SOutputHTML = $cgi_data {OUTPUTHTML');
if (SOutputHTML eq "") {
&CgiDie("You did not specify OutputHTML in HTML file. e.g. use
OUTPUTHTML=aa.html");
}
&SearchAndCreateOutput;
exit;
}##$ENV {'QUERY_STRING')
############deal with POST##########
####################you can change now###########################
if ($cgi_data{'action'} eq "search") {
&printHTTPHeader;
Sdbfilename = $cgi_data{'DBNAME'};
if (Sdbfilename eq "") {
&CgiDie("You did not specify DBNAME in HTML file.");
}
SOutputHTML = $cgi_data{'OUTPUTHTML'};
if (SOutputHTML eq "") (
&CgiDie("You did not specify OutputHTML in HTML file.");
#######processing input field data #######
for Skey (keys %cgi_data) {
$cgi_dataf Skey} =- s/[ \n\t\r\f]/ /go;
for ($cgi_data($key}) (
s/A\s+//;
sAs+$//;
}
}
&SearchAndCreateOutput;
exit;
}
####################end action = "search"#######################
sub SearchAndCreateOutput}
############ Read Data From Database ####################
add" #############################
77


if (-e "$DBaseDir/$dbfilename") {
open (DB, "$DBaseDir/$dbfilename");
} else { #file doesn't exist, die
&CgiDie("Cannot find database file: $DBaseDir/$dbfilename.");
}
SFileFlag = 0;
@KeyData = ;
close DB;
SCounter = 0;
SFirstLine = $KeyData[0];
Stotallines = @KeyData;
OUTER: for($i=l; $i<$totallines; $i++) { #skip first line
$T empLine=$KeyData[$i];
@LineData = split (/SDelimitStr/, $TempLine);
1NNERFOR: for $key (keys %cgi_data) {
next INNERFOR if($cgi_data{$key} eq ##no input, skip
$index = &IndexOfKey($key);
next INNERFOR if($index == -1); ##hidden fields, skip
@TotalWords = split (//,$cgi_data{$key));
$wordcount= @TotalWords;
if($wordcount != 0) {
for($n=0; $n<$wordcount; $n++) {
next OUTER if ( not ($LineData[$index] =~ /$TotalWords[$n]/i));
}#end of for
}#end of if
}##INNERFOR $key
OR OUTER: $SearchResults[$Counter] = STempLine;
$Counter++;
}##for($i=l..
##############after search, present the result to user ###########
if($Counter == 0) {
print "\n \n Search Results:No Matches Found\n \n"
print "No entries were found that matched your keywords. Please go back and try
again.

\n";
&DEBUG;
print "";
exit;
} else {
Sprint "\n \n Search Results</tille>\n </head>\n";<br /> 78<br /> <br /><br /> ACreateOutputT able( @SearchResul ts);<br /> #print "<br> <br> \n";<br /> &DEBUG;<br /> }#end of if($Counter == 0)<br /> print "</body></htmI>";<br /> } #SearchAndCreateOutput<br /> ########<br /> #<br /> sub CreateOutputTable {<br /> my $counter=@_;<br /> my Smatch;<br /> if (-e "SOutputHTML") ( ## the output html template file<br /> open (FH, "SOutputHTML") || &CgiDie("cannot open file SOutputHTML.");<br /> ) else { #file doesn't exist, die<br /> &CgiDie("Cannot find HTML tempalate file: SOutputHTML.");<br /> @TpData = <FH>;<br /> close FH;<br /> Sfoundbeginrepeat = 0;<br /> $foundendrepeat= 0;<br /> Shtcount = @TpData;<br /> ###separate a HTML file to three sessions.<br /> for($k=0; $k<$htcount; $k++) {<br /> Slemp = $TpData[$k];<br /> Stemp =~ s/[ \n\t\r\f]/ /go;<br /> next if ( Stemp eq );<br /> Sret = &Contain($temp, "<BEGINREPEAT>");<br /> if (not (Sret)) (<br /> $beforerepeat[$k] = $TpData[$k];<br /> ) else {<br /> Sfoundbeginrepeat = $k;<br /> last;<br /> )<br /> printDEBUG("<br>BEGINREPEAT=$foundbeginrepeat<br>");<br /> #exit;<br /> 79<br /> <br /><br /> for($k=$foundbeginrepeat+l; $k<$htcount; $k++) {<br /> Stemp = $TpData[$k];<br /> $temp =~ s/[ \n\t\r\f]/ /go;<br /> next if ( $temp eq "");<br /> $ret = &Contain($temp, "<ENDREPEAT>");<br /> if( not ($ret)){<br /> $inrepeat[$k-$foundbeginrepeat-l] = $TpData[$k];<br /> }else {<br /> Sfoundendrepeat = $k;<br /> last;<br /> }<br /> printDEBUG("<br>EndRepeat = $foundendrepeat<br>");<br /> for($k=$foundendrepeat+l; $k<$htcount; $k++) {<br /> $afterrepeat[$k-$foundendrepeat-l] = $TpData[$k];<br /> }<br /> @AllFields = split (/SDelimitStr/, SFirstLine);<br /> Stcount = @AllFields;<br /> $results{ 'COUNT'} = $counter;<br /> print "<! before repeating >";<br /> &replaceValue( @beforerepeat);<br /> print "<! begin to repeat >";<br /> foreach Smatch (sort @_) { ## @_ is search result<br /> @tmpresults = split (/SDelimitStr/, Smatch);<br /> ### create hash table Sresults for every field.<br /> for($u=0; $u<$tcount; $u++) (<br /> Sheretmpone = $tmpresults[$u];<br /> if($heretmpone eq "") ( $heretmpone="\ ";}<br /> $results{ iic($AllFields[$u])} = Sheretmpone;<br /> }<br /> ############## Generate OUTPUT Results#################<br /> @reusepart = @inrepeat;<br /> &replaceVaIue( @reusepart);<br /> #######################################################<br /> }#foreach<br /> print "<! end repeat<br /> &replaceValue( @afteiTepeat);<br /> )#sub CreateOutputTable<br /> 80<br /> <br /><br /> ################<br /> #replaceValue: replace value in the html files, such as SresultsPfname'}<br /> # and print it out.<br /> # input: an array of html lines.<br /> #<br /> sub replaceValue{<br /> my (Scommand);<br /> my Stmpcommand;<br /> foreach $command (@_) {<br /> Scommand =~ s/#(\w+)#/$results(uc($l)}/eg;<br /> print Scommand;<br /> #####old way, eval Perl inside the HTML page<br /> #$command =~ sA"A\\"/go;<br /> ##run it<br /> #$tmpcommand = "print<br /> #$tmpcommand .=<br /> #$tmpcommand .= Scommand;<br /> #$tmpcommand .= "V";<br /> #eval (Stmpcommand);<br /> #####<br /> }#foreach<br /> )#replaceValue<br /> ################<br /> ##<br /> sub Contain {<br /> my ($strl,$str2) = @_;<br /> return (Sstrl =- 7$str2/i);<br /> wtmunMM<br /> TrTT 17 TJ It nil iT<br /> #IndexOfKey: from the first line of a database file, find a key's<br /> # index number. Use SFirstLine.<br /> #Return: if key is not in the line, return -1;<br /> #<br /> sub IndexOfKey {<br /> my Skey = @_[0];<br /> my $m = 0;<br /> my @KeysInFile= split (/SDelimitStr/, SFirstLine);<br /> my Stotal = @KeysInFile;<br /> if ((uc($key) eq "DEBUG") || (uc($key) eq "DBNAME") || (uc(Skey) eq "ACTION")) {<br /> return -1;<br /> }<br /> for($m=0; $m<$total; $m++) {<br /> if(uc($key) eq uc($KeysInFile[$m])) (<br /> &printDEBUG("\"$key\" is database field $m<br>");<br /> return $m;<br /> 81<br /> <br /><br /> }<br /> }<br /> &printDEBUG("\"$key\" not in database fie]ds.<br>);<br /> return -1;<br /> }#sub IndexOfKey<br /> #################################################################################<br /> #######<br /> ####################DEBUG ##################################<br /> # print a string as debug information<br /> sub printDEBUG {<br /> if($cgi_data{'DEBUG} == 1 || $cgi_data{'DEBUG'} eq "1") {<br /> SDEBUG = 1;<br /> }<br /> if($DEBUG == 1) {<br /> print "@_<br>";<br /> }<br /> }#printDEBUG<br /> #################### DEBUG ##################################<br /> # print form data pairs and environment variables<br /> #<br /> sub DEBUG {<br /> &printHTTPHeader;<br /> if($cgi_data{'DEBUG'} == 1 || $cgi_data{'DEBUG'} eq "1") {<br /> SDEBUG = 1;<br /> )<br /> if($DEBUG == 1) {<br /> print "<B>Environment variables:</B><BR>";<br /> foreach Skey (sort(keys %ENV)){<br /> print "Skey = $ENV{$key}<br>";<br /> print "<B>Form data pairs</B>:<br>";<br /> for Skey (keys %cgi_data) {<br /> if($cgi_cfn{$key} ne "") { ##indicate it's a file upload<br /> print "Skey = $cgi_cfn{$key}<br>\n";<br /> }else {<br /> print "Skey = $cgi_data{$key) <br>\n";<br /> }#if<br /> }##for<br /> print "To get rid of debug information,remove the DEBUG field in the HTML file<BR><BR>";<br /> 82<br /> <br /><br /> }<br /> }#sub DEBUG<br /> ######################################################<br /> #############################################################<br /> # HELP FUNCTIONS: don't need to Change<br /> # Print HTTP Header<br /> sub printHTTPHeader {<br /> if (Sheadout = 0) {<br /> print "Content-type: text/html\n\n";<br /> Sheadout = 1;<br /> }<br /> }<br /> 83<br /> <br /><br /> References<br /> 1) CAD definition: http://whatis.com/cad.htm<br /> 2) Jeffrey Star, John Estes. Geographic Information Systems: an introduction.<br /> Prentice-Hall, Inc. 1990<br /> 3) GIS definition: http://whatis.com/gis.htm<br /> 4) AutoDesk Inc.s Home Page: http://www.autocad.com<br /> 5) GraphiSofts Home Page: http://www.graphisoft.com<br /> 6) E. Domeshek and J. Kolodner (1992). A Case-Based Design Aid for<br /> Architecture. Proceedings of the Second International Conference on Artificial<br /> Intelligence and Design. J.S. Gero, editor. The Netherlands: Kluwer Academic<br /> Press, pp 497-516.<br /> 7) Craig Zimring, Ellen Y. Do et al. Using post-occupancy evaluation to aid<br /> reflection in conceptual design: Creating a case-based design aid for<br /> architecture. Design Decision Support Systems, Conference for Architecture &<br /> Planning, Vaals, Switzerland, 1994<br /> 8) ESRIs Home Page: http://www.esri.com<br /> 9) Maplnfos Home Page: http://www.mapinfo.com<br /> 10) Genasyss Home Page: http://www.genasys.com<br /> 11) Berners-Lee,T., Cailliau, R. et al. The World-wide Web. Communications of the<br /> ACM 37, 8(Aug. 1994), 76-82.<br /> 12) Saul Greenberg, Mark Roseman, Dave Webster, Issues and Experiences<br /> Designing and Implementing Two Group Drawing Tools, Proceedings of 25th<br /> Annual Hawaii International Conference, 1992, Vol. 4., P. 139-150<br /> 13) Habanero http://havefun.ncsa.uiuc.edu/habanero/<br /> 84<br /> <br /><br /> 14) Jada http://www.cs.unibo.it/~rossi/jada/<br /> 15) Como http://www4.informatik.uni-erlangen.de/Projects/promondia/<br /> 16) ColdFusion http://www.allaire.com/Products/index.cfm<br /> 17) Tango http://www.pervasive.com/<br /> 18) WODA http://itc.fgg.uni-lj.si/woda/<br /> 19) HTTP protocol, http://www.cis.ohio-state.edu/htbin/rfc/rfc2068.html<br /> 20) JAVA language, http://www.javasoft.com<br /> 21) Jeffry D., Michael E. Using CGI. Que Corporation, 1996<br /> 22) Berners-Lee T., Masinter L. et al. Uniform Resource Locators (URL). Internet<br /> RFC<br /> 23) PERL http://language.perl.com/info/synopsis.html<br /> 24) VRML http://webopedia.intemet.eom/TERM/V/VRML.html<br /> 25) Cosmo Player: http://cosmo.sgi.com<br /> 26) JAVA 3D<br /> http://www.javasoft.com/products/java-media/3D/collateral/presentation/<br /> 27) Java3D and VRML Working Group<br /> http:// w w w. web3d.org/Workin gGroups/vrml -j av a3 d/<br /> 28) Gross, M.D., The Electronic Cocktail Napkin computer support for working<br /> with diagrams, Design Studies, 1996, Volume 17, No. 1, p 53-69<br /> 85<br /> <br /><br /> </div> </td> </tr> </tr> </table> </section> <!-- Close the presentation table --> </td> </tr> </table> <!-- Hidden field is used for postbacks to indicate what to save and reset --> <input type="hidden" id="item_action" name="item_action" value="" /> <!-- Close microdata itemscope div --> </section> <script type="text/javascript" src="http://cdn.sobekrepository.org/includes/jquery-ui-draggable/1.10.3/jquery-ui-1.10.3.draggable.min.js"></script> </form> <!-- Footer divisions complete the web page --> <div id="aurariaitem-footer"> <table id="aurariaitem-footer-table"> <tr style="vertical-align: top;"> <td style="width:260px;"> <span class="auraria-footerOffWhite">©Auraria Library</span><br /> <div id="sobek">Powered by <a href="http://sobekrepository.org">SobekCM</a></div> </td> <td style="text-align:center;"><a href="http://library.auraria.edu/siteindex/">Library Site Index</a> | <a href="http://library.auraria.edu/info/frequently-asked-questions-faqs">Library FAQs</a> | <a href="http://library.auraria.edu/services/researchhelp">Ask Us</a> | <a href="http://library.auraria.edu/contact/comments">Send a Comment</a></td> <td style="text-align:right;width:260px;"><img src="http://cdn.sobekrepository.org/instances/auraria/logo-footer.png" class="aurariaitem-logo" alt="Aurarian Library"/></td> </tr> </table> </div> </body> </html>