More Complex 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.
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)
- 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.
- 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.
- 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)
- Click image directory button in the module tree palette to get
the list of imaging modules.
- Place the FlipFilter module in the editor in the same way as described for
I/O modules.
- Place the NegativeFilter module in the editor in the same way.
- 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 :
- 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
- 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.
- 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.
- 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.
- 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