Canvas Tools Zoom Palette Edit Buttons Tabs Icons Pages

Groupboard Designer JavaScript Admin Guide

This document describes how to use Groupboard Designer's JavaScript User interface. For information on the more advanced topics in administrating the Groupboard, see the Administration Guide.


Groupboard Designer thumbnail

1  Design Canvas
      Press the left mouse button to draw on the canvas. Press the right mouse button to bring up an edit menu.
 
2  Line Size
 
    Sizes  Use these to choose how thick your drawing line is.
 
    Design Tools
 
    Freehand  Draws freehand lines.
Line  Draws straight lines. When you enter line mode, a dialog box will appear where you can select the line style. You can choose to have arrow-headed lines and callout boxes. To draw a callout box, drag the mouse to draw the line and then type in the text for the callout box followed by RETURN.
Oval  Use for ovals and circles. To get a perfect circle hold down your shift key whilst drawing.
Rectangle  Use to draw rectangles and squares. Again hold down the shift key for perfect squares.
Polygon  Use to create polygons.
Filled Oval  Draws solid circles and ovals.
Filled Rectangle  For solid squares and rectangles.
Filled Polygon  For solid polygons.
Hatched Polygon  For transparent shaded polygons.
Text  Places words on your drawing.
Flood Fill  Fills an area with the current colour.
Highlighter  Highlighter tool - draws transparent lines.
Eraser  Selects an eraser tool (white colour/large size).
Place Image  Use this to place an image into a design, much like a stamp.
Tool Library  Use to draw, load and save complicated shapes quickly. For instructions, see the Advanced Features Guide
 
3  Zoom, Select, Point and Pan
 
    Zoom to 100%  Resets the zoom level to 100%
Zoom In  Zoom in to the design.
Zoom Out  Zoom out from the design.
Select  Allows you to select a single object or range of objects. Either click with the mouse on the object you wish to select or click and hold the mouse button and a rectangle will appear. All objects will be selected that fall within the rectangle when you release the mouse button. Holding down the 'Shift' key selects a square area.
Pointer  Use this, much like a laser pointer to highlight items on all users' screens.
Pan  Use to pan the image, left, right up or down.
 
4  Colour Palette
 
    Palette  Pick one of these with your mouse to draw in that colour.
Colours  Press this button to open an extended palette of colours.
 
5  Edit Controls
 

You can select areas to be copied or deleted by clicking on the 'Select' tool. To select an individual object, just click on the object using the mouse. To select an area, click on a blank part of the canvas and then drag the mouse. All objects within the area will be selected.

Selected objects can be moved by clicking and holding the mouse on one of the selected objects and then dragging to the new position.

You can delete individual points in a polygon by clicking on the vertex and pressing the DELETE key. A new polygon point can be inserted by clicking on a vertex and pressing the INSERT key. Polygon vertices can be moved by selecting the vertex and then dragging it.

    Undo / Redo  With this you can undo a single action, or redo it again.
Cut  Cuts any selected items from the design canvas and places them into the clipboard.
Copy  Copies any selected items within the canvas into the clipboard.
Paste  Pastes any items from the clipboard into the canvas.
Delete  Deletes the selected items from the canvas.
Select All  Selects all items on the design canvas.
Select None  Clears any selection so that there are no items within the canvas selected.
 
6  Other Controls
 
    Allow drawing*  Untick this checkbox to prevent normal (non-admin) users from drawing on the whiteboard.
Allow clearing*  Untick this checkbox to prevent normal users from clearing the whiteboard.
Allow loading*  Untick this checkbox to prevent normal users from loading pictures.
Drawing log*  Brings up a window that shows people's drawing actions.
Ban list   Displays the ban list, a list of IP addresses which have been banned from this Groupboard.
Board info   Opens the board information window containing the various board options and settings.
Chat*  Shows the chat window to allow you to talk to other users.
Messages   Displays the message board window.
Constant Thickness    Ticking this checkbox will mean that the thickness of the lines of the design will not change as you zoom in and out.
Gridlines    Allows you to display a grid to help with drawing. Can be set to snap design elements to it, making straight lines much easier.
Set background   Replace the white background with an image you can draw on top of.
Upload background   Allows you to upload an image from your computer to the Groupboard to be used as a background (you will then need to use the Set Background button to view the picture).
Upload DXF   This button allows you to upload an Autocad DXF file from your computer to the Groupboard as an image (you will then need to use the Load button to view the image).
Clear   Clear the entire design canvas ready for a new design.
Save   Store away your drawing into the gallery.
Load   Take an image from the gallery so you can draw on it some more.
Print   Prints the contents of the whiteboard.
Help   Get some help (come here).

The buttons marked with a * will only appear when using the multi-user version of the board.
 
7  Page Tabs and Useful Links
      Use the tabs to switch between different versions of the board:
  • Click on 'Multi-User' to draw or mark-up with the other users also logged on to your Groupboard Designer.
  • Click on 'Single-User' to draw or mark-up by yourself.
  • Click on 'Gallery' for a list of pictures which have been previously saved.
  • The drop-down screen resolution menu allows you to change the whiteboard size to fit in 1024x768, 1280x1024 or 1920x1200 screens. Note that all users should use the same size, otherwise unexpected results may occur.
 
    Use the links to see useful pages like this user guide.
 
7  Icons
      If any icons have been uploaded to your board, simply click on the icon and then click on the whiteboard to paste the icon onto the board. Please see the Admin Guide for details on uploading icons to the board.
 
7  Pages
      Use the page controls to move between different whiteboard "pages". Initially there is just one page, but if you press the Next button you can add more pages. Move back to an existing page by using the Prev/Next buttons, or by choosing the page from the drop-down menu. By default the pages are named 1, 2, 3, etc., but you can rename the pages by simply editing the page name (to the right of "Clear All Pages"). When you Save or Load a design, all pages are saved/loaded together.

Advanced Features Guide
Administration Guide