More Complex Demos


Forking Module

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.

To run a more complex demo, you can choose any combination of the image filter modules and follow the steps below:
(Here the 'FlipFilter' and 'NegativeFilter' modules are used for example)

  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 io module button to get a list of InputModule and OutputModule as yellow colored buttons.
  2. Click on InputModule , 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 image.
  3. Place the OutputModule in the editor in the same way. You should get the (empty) output applet frame popup.Place another one in the same way to view the output from the second filter module.(You may also choose to use the DisplayModule present in the util directory for displaying the output)
  4. Click image directory button in the module tree palette to get the list of imaging modules.
  5. Place the FlipFilter module in the editor in the same way as described for I/O modules.
  6. Place the NegativeFilter module in the editor in the same way.
  7. Click the util directory button in the modules tree palette and place the OneTwoDemux module in the editor.

    Now you should have totally 6 icons in your editor palette, one each for each of the modules that you've selected.To connect these modules and run them follow the steps below :

  8. Place the OneTwoDemux module above the InputModule in the editor window by clicking and draging the modules and click the green dot on the OneTwoDemux module and drag the mouse towards the port pin of the InputModule and release the mouse when it is over the module's port pin.This will instantiate a connection between the two modules. Once connected you should see a connection represented as blue reclinear lines
  9. Connect the other two port pins of the OneTwoDemux to the input ports(triangular pins) of the two filters that you have selected in a similar way.
  10. Connect the output ports of these two filter modules to the two OutputModules

    Now you should see all your modules connected using the blue lines.

  11. Press run button on the Control Panel to run the module. You should see the frog flipped in one of the OutputModule applet and an output from the Negative filter module in the other. The output should look like the screen shown below.
  12. 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 various modules

    Click here to run the demo on a remote server