CHI 97 Electronic Publications: Late-Breaking/Short Talks
CHI 97 Prev CHI 97 Electronic Publications: Late-Breaking/Short Talks Next

A Method for Graphical Input on the WWW

Lesley M. Parks & Ernest A. Edmonds
LUTCHI Research Centre
Department of Computer Studies
Loughborough University
Loughborough
Leicestershire LE11 3TU
UK
email: L.M.Parks@lboro.ac.uk, E.A.Edmonds@lboro.ac.uk

ABSTRACT

Using the World Wide Web (Web) is rapidly becoming one of the main ways in which people interact with computers. However, although the Web has permitted a rich variety of hypertext output, input has, until recently, been restricted to text or simple menu choices. The advent of languages like Java, which permit interactive programs to be included on a page, clearly changes what is possible. This contribution discusses the requirement for graphical input on the Web and describes an initial implementation which permits graphical objects to be manipulated on a Web page to provide input for subsequent analysis and computation.

Keywords

WWW, Java, graphical interaction, constraints, semantics

© 1997 Copyright on this material is held by the authors.



INTRODUCTION

The aim of the Web project [1] was to build a distributed hypermedia system and it has been hailed as a significant enabling technology. As a means of providing access to hypertext documents, containing text, images, sound and video to a widely distributed audience, it has proved remarkably successful. Hypertext documents, however, facilitate only very limited user interaction. Initially, a mouse-click allowed the selection of a further document from a the restricted set of links defined in the current page. The later addition of forms within Web pages extended the possibilities of more user centred interaction by providing menus and user text input facilities. Furthermore, augmenting the standard Web server processing facilities on the host machine with specialised CGI scripts, permits the document provider to generate more user centred information. User input captured via a form can be processed on the server and the results returned to the client for display to the user. This technique is used by Web search engines to provide a list of relevant documents for users. The same approach can be used to return a document which has been composed and formatted dynamically from information retrieved from an existing knowledge-base system [5] instead of the static pre-prepared html page that was the bedrock of the initial Web system. Languages like Java [4], which enable 'programs' (applets) to be incorporated on a page for execution by the client, permit additional interactive capabilities to be offered.

The particular extension which is the focus of this contribution is the provision of an interactive graphics facility which allows semantic knowledge to be attached to graphical objects. The usefulness of this concept has long been recognised, e.g. Murray et al, [7]. Edmonds & Candy [2] discuss the effectiveness of providing a domain expert with computer tools which support highly interactive use of visual data and also a means of specifying the knowledge both graphically and in text form.

THE CONCEPT

The central concept is to provide manipulable but constrained graphical objects with a Web page that can be used to provide input to the server. Thus a page may provide objects that the user can select, position and configure within the given constraints. The objects are just like those found in a direct manipulation drawing system. In addition, however, the server can be provided with the object's state and, hence, it is used to provide input.

The requirement for Semantic Graphical Objects (SGO) to provide users with a method of graphically representing domain knowledge, was identified during the FOCUS project [3,6] which also identified a requirement for an Editor (SGOE) for such objects. A set of seven essential properties were identified for a SGOE [7] that would enable users to design their own graphical objects for manipulation and drawing and to use these semantically meaningful objects to annotate a bit-mapped image. It is this set of requirements which are being addressed in the work described here. The task was to provide, as a Java applet, a simple object generator and test-bed for trialing graphical interactive objects on the Web. As in FOCUS, the objects were to be constructed from a combination of graphics primitives (lines, circles, ellipses, boxes) with semantic information (constraints & textual descriptions). The data defining such an object was to be capable of being stored in and retrieved from a knowledge base accessible from a Web server. The results of the user's interaction with the object was to be returned to the server.

THE JAVA TOOLS

In the Web SGO, a primitive component of an interactive object is specified by two focal points plus some further definition data. These focal points both locate the primitive on the canvas and provide loci of interaction between the user and the interactive object being tested on screen. The points themselves can be anchored or free and a primitive is defined by two points plus a visual representation of that primitive (line, oval, arc, circle, rectangle) and/or a constraint that defines the dynamic geometric relationship between the points (e.g. a fixed horizontal, vertical or diagonal distance apart; maintaining left_right or above_below orientation; maintaining a fixed angle with respect to the axes of the co-ordinate system). A textual description appropriate to the semantic meaning implied by that primitive to the user can also be included. An individual focal point may be part of more than one primitive. Thus an object such as a manikin representing a human automobile occupant can be constructed from a set of focal points with connecting shapes and constrained behaviour. For example four lines of fixed length semantically representing the torso, thigh, shin and foot in the case of the manikin, would have five focal points.

An object which has been defined can be manipulated interactively on a Web page. To interact with the object the user performs a mouse-down action on a focal point of the object and drags the mouse across the canvas. How that primary focal point is allowed to move with respect to other points within the object is dependent upon the defined constraints and the current state of those points. If the primary point itself is not anchored but is linked to another point which is anchored then any constraint between these points must be evaluated as the mouse is moved. Otherwise, a movement applied to the primary focal point must be propagated through related points until points are reached which either have no further connections or are anchored. The relative co-ordinate position of the non-anchored points is maintained during the move thus automatically satisfying any geometrical constraints. If an anchored point is reached then any applicable constraint must be executed to ensure that the actual move that transpires does not transgress its requirement. Currently, the system by default assumes that the user intends the primary focal point to be unanchored.

Taking the manikin as an example, if none of its points are anchored and the user's primary point of focus is the conjunction of the torso and thigh, then the whole manikin moves to reflect the mouse movement accurately. On the other hand, if the upper body point is anchored and the torso is of fixed length, then the primary point of focus is constrained to a circular movement with the anchored neck point as its centre and body length as radius.

The user might apply constraints with no visible graphical manifestation. Given an anchored point representing a seat headrest position, then the top of the manikin's torso might be constrained to be forward of that position. Another constraint might be imposed to keep the same torso point above the manikin's knee joint. If the user moves his or her primary point of focus to top of the torso then, with the base of the torso and knee joints both anchored, the movement of the torso is constrained to an arc with an outline which lies to the right of the headrest and above the knee.

Technical Evaluation

The Web page containing Semantic Graphical Objects is accessed and run from a remote client machine with a Java compatible browser. A message containing a specification of the manipulated object can be sent to a knowledge base on the server either via the Web daemon, as is done with forms, or by opening a Java socket to a process on the server specifically configured to accept such messages on behalf of the knowledge base.

Initial feedback suggests that, although a little sluggish, the dynamic interactive response time of the Web interface is sufficiently fast to be within the bounds of user acceptability. Thus proof of concept has been achieved.

CONCLUSION

The concept of a means of capturing graphical input on the Web and a prototype implementation has been described. The next step will be to use them within wider applications for full user evaluation in a specific task context. Following this the tools will be used themselves to develop a Web based editor as discussed above.

REFERENCES

1. Berners-Lee, T., Notification of new material, in W3 archive 1990, http://www.w3.org/pub/WWW/DesignIssues/Notification.html

2. Edmonds, E.A.& Candy, L. Computer Support for Concept Engineering Design: Enabling Interaction with Design Knowledge, Journal of Systems Engineering and Electronics, 7, 2, 1996, 55-71.

3. Edmonds, E.A., Murray, B.S., Ghazikhanian, J. & Heggie, S.P., The re-use and integration of existing software: a central role for intelligent user interface, Monk, Diaper & Harrison (Eds), People and Computers VII, Cambridge Univ. Press, Cambridge, 1992, pp 415-427.

4. Java: Programming for the Internet. Available as http://sunsite.doc.ic.ac.uk/packages/java-http/

5. Medyckyj-Scott, D., Cuthbertson, M., Newman, I., Discovering environmental data: metadatabases, network information resource tools and the GENIE system, Int. J. Geographical Information Systems, 10, 1, 1996, 65-84.

6. Murray, B.S., Candy, L., Edmonds, E.A., User centred complex systems design: combining strategy, methods and front-end technology, Benyon & Palanque (Eds), Critical Issues in User Interface Systems Engineering, Springer-Verlag, London, 1996 Ch.10 pp 169-187.

7. Murray, B.S., Edmonds, E.A., Candy, L., Foster, T.J., Constructing Semantic Graphical Objects. Santo (Ed.), Proceedings of Third Int. Conf. on Computational Graphics & Visualisation Techniques: COMPUGRAPHICS '93, Univ. Lisbon, Portugal, 1993, 46-57.


CHI 97 Prev CHI 97 Electronic Publications: Late-Breaking/Short Talks Next

CHI 97 Electronic Publications: Late-Breaking/Short Talks