Collaboratory Demos


After the WebFlow Editor applet finished loading, you should see four frames: base editor frame (with a rectangular grid), pallete frame (with a module tree), control frame (with create, run and destroy checkboxes) and a properties frame (with Apply,Revert and Close).You can close the Properties frame. It is not being used currently.

You can either run the chat, whiteboard or imaging toolkit demo in the collaboratory mode. Here we will be using the imaging toolkit modules.

To run a collaboratory demo, follow the steps below:

  1. Click on modules and then demo (in the module tree palette) to get a list of module directories located in this directory such as collab, image, io, etc. in white. Click the collab module button to get a list of several modules as yellow colored buttons.
  2. Click on ImageClient and move the mouse cursor into the editor frame, click again there to place the module. You should get a popup viewer applet frame for this module with a frog's image and some buttons and text input areas.
  3. Repeat the previous step to get one more applet frame.
  4. Place the ImageServer module in the editor in the same way.There will not be any visual popup for this step.
  5. To connect these module ports, click on a color port pin of the ImageClient module and drag the mouse towards the port pin of the ImageServer module (this way you draw a connection line), and then release the mouse button (when the line connects both ports) to instantiate the connection. Similarly connect the other ImageClient module to the other port pin of the ImageServer You should get both connections represented as blue reclinear curves.
  6. Press run button on the Control Panel to run the module. You should see the "Collaborate" buttons becoming active at this time.
  7. Type in a name in the text input next to the "Collaborate" button and click Collaborate. This is make the "Say" button in the same applet frame active.
  8. Repeat the previous step for the other applet frame with a different name in the text input.
  9. Once both the "Say" buttons are active in both the applet frames, you can type in something in the text input next to the "Say" button and click "Say" to send the message. You should see the same message appearing on the text area in the other applet window. You can repeat this procedure from the other applet window now.
  10. Also, once this works fine, you can click on one of the buttons provided on top to see the effects of various filters being made on the other frame as well.
  11. Press destroy button on the Control Panel. All popup frames should disappear and the editor frame should be cleared. You can now edit another graph and run it or just go to some other page in your browser. Click here for more information on Collaboratory Modules

    Click here to run the demo on a remote server

    The output of this demo should look like this :