Layered Drawing and Display Tool
Tomasz Major
TANGO Interactive shared object oriented drawing tool, Wbd, provides functionality
similar to the one of Microsoft PowerPoint, although its focus is shifted
toward drawing rather than preparing presentations. It offers all of the
standard drawing tools available in commercial applications: rectangles,
ovals, polygons, arrows, free-forms, text, etc.
New, custom-made objects can be imported and become
fully functional components inside the whiteboard. Objects may be just shapes but
also active components (e.g. video player) performing complicated operations
while wbd is in the play mode.
Wbd content sharing via TANGO Interactive is based on the master-master relationship,
which means that every participant has equal rights to perform editing.
In other words, unlike many other products, our whiteboard supports concurrent drawing.
Changes of the state of every object are reflected in other participants'
whiteboards immediately, with few exceptions, such as resizing, moving
or changing some object's properties. In these cases, updates are broadcast
as soon as the modifying action terminates.
Wbd works as a standalone Java application, as an applet embedded
in the Web page, or collaboratively within the TANGO Interactive framework.
General remarks
- buttons in the left hand menu will be called icons
- hints appear when the
mouse goes over an icon
- names of widgets in the text below corresponds to hints or labels on widgets
- status bar at the bottom line shows status of any action and objects drawn as well as hints
- any coordinates or dimensions are presented in convention "first vertical (top to bottom) than
horizontal (left to right)"
Selecting existing object
- to select an object: click it (selection points shall appear)
- to transfer selection to another object:
- press Tab (focus moves to the next object toward the top layer); or
- press ShiftTab (focus moves to the previous object)
- to select multiple objects:
drag mouse over objects (selected area will be outlined during dragging)
Moving and resizing selected object
- to move: drag the object (do not drag selection points)
- to resize: drag one of the
object's selection points
Object creation and deletion
- to delete selected objects: press Delete key or
Delete icon
- to delete all and start new page: press
New icon
- to create new object: click one of the object icons, click it and:
Rectangle: drag the desired shape
Oval: drag the bounding box for the oval
Polygon: click position of the corners, double click the last one
Line/Arrow: drag from the beginning to the head of the arrow
FreeForm: drag the desired shape
Text: click the position of text
TextBlock: drag the width of the bounding box
TextBlockWithBullets: click the position or drag the width of the bounding box
Foil: click the position or drag the width of the bounding box
Foilset: click the position
- some objects might be created automatically:
- Container: as an effect of group/ungroup operation, and when new page is loaded
- Image:
when GIF or JPEG file are imported
- to clone selected objects: press
Clone icon
- to import an object: select the location and press Add
button
Structural operations in container
- to group selected objects: press
Group icon
- to ungroup selected objects: press
Ungroup icon
- to bring a selected object to front of another object: press
BringForward icon (each stroke moves object only one layer)
- to send backward a selected object: press
SendBackward icon
Editing selected object
- to edit properties of an object: press CtrlSpace or double click the object (property editor dialog will appear)
- to edit object: press Space (dashed frame will appear around the object), edition is object dependent:
- Rectangle:
no edition
- Oval:
no edition
- Polygon:
dragging contour points,
creation (press key N)
and deletion (key D)
of contour points
- Line/Arrow:
dragging beginning and end
- FreeForm:
same as polygon
- Text:
entering text,
popular Emacs key combinations
(Alt->,
Alt<-,
CtrlSpace,
AltW,
CtrlW,
CtrlY,
CtrlK),
CtrlShiftL/
CtrlShiftC/
CtrlShiftR
for alignement and anchoring (left/center/right respectively)
- TextBlock:
editing text as in Text object, highlighting,
AltN/
AltS/
AltC/
AltK/
AltL
for changing font style
(normal/strong/cite/keyboard/strong keybord respectively)
- Foil:
same as Container
- Foilset:
same as Foil
- Image:
no edition
- Container: doing anything as if it were embedded
whiteboard (the main panel of the whiteboard is a container) - see Editing
Container
- to quit editing: press ShiftSpace (dashed frame will
disappear, object will remain selected)
Editing container
- Container is a component that receives special attention
because all objects are created in containers
and belongs to containers (except the most external one).
The vital functionality of the whiteboard
described in different chapters
is in fact the functionality of containers.
- Edition of a container is the same as the edition of the main board
(the main panel of the whiteboard is also a container).
The following key shortcuts are available:
- N/I/C - create new object/import an object/clone selected object
- D/ShiftD - delete selected object/delete all objects
- E - edit properties of selected object or of this container if nothing selected
- L/ShiftL - bring forward/send backward selected object
- G/ShiftG - group selected objects/ungroup selected object
- M/ShiftM - copy selected object to clipboard/paste from clipboard to the center of this container
- O/S - open/save currently edited object
Importing and exporting objects
- GIF and JPEG images, files in wbd format and plain text can be imported from external sources
- any whiteboard creation can be saved in wbd
format with links to images
- to import from Web: press
Import icon, select URL and press Add or Replace button
- to export to Web: press
Export
icon and choose a URL - only HTTP protocol is accepted
- to open: press
Open icon and select a file - only wbd format is accepted
- to save: press
Save icon and choose a file name - a
file in wbd format will be created
- to print: press
Print icon
Sending updates in Tango
- the system works in master-master mode:
- each participant have equal rights to perform editing
- initialization data is delivered by one participant
- updates are not always sent immediately:
- creating - after creation is completed
- moving, resizing - when mouse raised
- modifying properties - when Apply or OK buttons are pressed in a Property Editor
- editing - after exiting editing mode
- other actions - immediately
- some control over Tango session is provided by the
Tango dialog
Appendix A: Most important key combinations and shortcuts
Tab | transfer focus to the next object (toward the top layer)
|
ShiftTab | transfer focus to the previous object
|
Space | enter editing mode (one object must be selected)
|
ShiftSpace | quit editing mode
|
CtrlSpace | show property editor (one object must be selected)
|
Delete | delete selected object |
Appendix B: Known limitations
- the size of the main container cannot be changed any
other way than by using New
or Replace operation
- ftp protocol is not supported for importing or exporting
- images in wbd objects open from local files cannot be
shared
TANGO Interactive support group
Last modified: Wed Feb 23 10:38:46 EST 2000