Whiteboard Module

Return to the Module Documentation Index

This module is for use only with FlashChat 4.5.3 or higher.

The Idea

This is a very basic drawing module, which has two possible modes of operation: as a real-time shared whiteboard, which requires Flash Communication Server (recently renamed by Macromedia to Flash Media Server), or as a simple drawing program that allows you to share your drawing with other users, which does not require Flash Communication Server. In other words, to take full advantage of this module, you'll need FlashComm, but you can still use it with a more limited set of features if FlashComm is not available on your server. Specifically, the real-time shared drawing feature will not be available without FlashComm.

Setup

Locate the 'config.php' file within FlashChat's 'inc' folder. Open using a good text editor, like Textpad, and be very careful not to introduce PHP errors while editing. Be sure to backup your original config.php file, just in case you need to restore it.

Scroll down to the 'module' settings, and change the 'path' property to match the SWF path of the whiteboard module. For example, like this:

	 'module' => array(
        'anchor'  => 0,
        'path'    => './modules/whiteboard/whiteboard.swf',
        'stretch' => true,
        'float_x' => 300,
        'float_y' => 200,
        'float_w' => 100,
        'float_h' => 100,
	 ),

I recommend setting 'anchor' to 0, and 'stretch' to true for this module, so that the whiteboard drawing area will stretch to accomodate the full space available to it. You can ignore float_x, float_y, float_w, and float_h for now. If you change 'anchor' to -1, then you may wish to adjust the float values.

The important thing is to ensure that 'path' is set correctly. If you put the module files in a folder other than "whiteboard", or if you recompiled the SWF using a different name, then obviously you'll have to adjust the 'path' value accordingly.

Now, there are two changes that must be made in the whiteboard config.xml file. At the top of this file there is an "fcs" tag and a "framework" tag. Be sure that the framework URL contains the correct path to "engine.php". By default this is modules/whiteboard/framework/engine.php, but if you have put the whiteboard in a different location, you should adjust this path accordingly. If this URL path doesn't work, try "./modules/whiteboard/framework/engine.php" (i.e., add "./" before the word "modules").

If you have Flash Communication server (also known as "Flash Media Server"), then you should edit the fcs URL as well. Please consult your FCS documentation to determine the correct port and path to insert here.

The format of the fcs url is:

protocol:[//host][:port]/appname/[instanceName]

Your "appname" should remain "whiteboard", and the instance name should remain "chat'. You may set the framework URL to the fully-unqualified path to engine.php, which is located in the "framework" sub-folder of the whiteboard module, as shown below. Obviously, you should change this to match your own system's settings.

Please be aware that when you start the whiteboard for the first time, two new database tables will be created: [prefix]_whiteboard_msg, and [prefix]_whiteboard_drawings, where [prefix] is the table prefix that was specified during installation of FlashChat. Thus, I strongly recommend that you BACKUP your entire database before using the whiteboard. Although these are "create table" statements only, it's a good idea to perform a backup when ANY change is made to your database. Your MySQL configuration must allow "Create Table" statements for this to work.

New tables that are created on "first run" of the whiteboard. If the whiteboard is not working for you, confirm that these tables have been created using phpMyAdmin or phpFlashMyAdmin.

Flash Communication Server / Flash Media Server (optional)

If you have FlashComm, you may follow these steps to permit real-time whiteboard sharing. This means that two users will be able to simultaneously draw on the whiteboard, and instantly view each other's changes. Locate the "applications" folder within the Flash Communication Server MX folder on your system. In my own MS Windows system, this was located at the following path:

C:\Program Files\Macromedia\Flash Communication Server MX\applications\

If you are using Flash Media Server, the path is probably something like this:

C:\Program Files\Macromedia\Flash Media Server 2\applications\

This will likely be different for you. Create a sub-folder called "whiteboard", and copy the "main.asc" file, which comes with this module, to this new folder. The "main.asc" file is probably located in the "flash_source" or "src" folder, which comes with the whiteboard files. In other words, something like this:

FlashComm Screenshot

To help get us started, we'll monitor the connections from the module. If you are using Flash Communication Server, open the "flashcom_help" folder, then open the "html" subfolder, then the "admin" folder, then "admin.html". This will show the login page. Login using the administrative login which you established when installing Flash Communication Server (this is NOT the FlashChat login).

Admin Login

If you are using Flash Media Server, then you would open "fms2_console.htm", which is located in the Flash Media Server root folder. This screen will look something like this after login. Within FlashChat, I've clicked on the "Share with User" button to connect to Flash Media Server. When you do this, you should see a new connection in the FMS console. If you don't, then you might have an incorrect setting in config.xml, or Flash Media Server might not be properly running.

Usage

The whiteboard is not a full-featured drawing program. It's designed as more of a "sketch pad" for sharing ideas. There are a lot of things missing: you cannot create complex polygons of N-points, you cannot change the background color, etc. At some point in the future, there will likely be an "Advanced Whiteboard" module with more features. This whiteboard module is intended to be a very basic interface for sharing ideas, not advanced drawings.

Here are a few basic features...

Bottom Toolbar Tools: The whiteboard includes a pen tool for freeform drawing, and a shape tool for basic shape drawing. If you double-click on the shape tool, you will get a popup of additional shapes to choose from. The cut / copy / paste tools are fairly self-explanatory, as is the text tool and color changer. To select objects and move them around the drawing area, click on the arrow tool in the lower left corner. Depending on the version of the whiteboard module you are using, you may also be able to adjust the border size and color of shapes. The fill color can be set using the primary color palette, which is situated immediately to the right of the selection tool.

When you choose the "Send to User" or "Share with User" buttons, the other user will be presented with an option to save their current drawing, or discard it. This is necessary because their drawing area will be completely erased to make room for your drawing! Your drawing will be saved in XML format in the whiteboard_drawings table in MySQL.

If you double-click on the Text tool button, you will be able to adjust the font style and default size. Please note that after a text object has been added to the stage, you should adjust the size by resizing the text object.

If you have multiple objects on a stage, and simply need to re-order them so that layers in the back appear in the foreground, you can click on the layer re-ordering button, in the lower left corner of the bottom toolbar:

Top Toolbar Tools: At the top of the screen, there is a "Send To User" button that allows you to share the whiteboard with another user. The other user must also have the whiteboard module loaded. When you send your whiteboard to another user, you are merely giving them a screenshot of your whiteboard - this is NOT real-time sharing! However, if you click on the "Share With User" button, then this will establish a FlashComm connection between you and the other user, allowing real-time shared drawing. In other words, any change by User X is immediately viewed by User Y and vice-versa. The "Save/Load" icon allows you to save your whiteboard or load an existing whiteboard, and the "Trash" icon at the top-right clears the whiteboard screen.

When the "Share with User" button is clicked, and a connection to Flash Media Server or Flash Communication Server is established, your drawings will be instantly viewable by the user you are sharing with. Please note that in the current system, you can only do this with ONE other user - it's not yet a multi-user drawing system. However, you can "Send to User" to as many other users as you wish, so others can still see what you've drawn.

Click here to download a nice AVI video of two users sharing the whiteboard in real-time! This AVI has been compressed using WinRar, so you'll need to decompress it before viewing.