Question

I need to write a C++ GUI such that user can make a flowchart / pipeline by selecting several blocks from a toolbar and putting them into a window and connecting them in some order which he wants and then program runs the flowchart. (For simplicity just consider each block’s task is to print some number. My problem is GUI)

Does anyone ever try a similar thing / any experience?

Is it possible to make such a GUI in WxWidget or any other Graphics/Window-form library?

Is it possible to use VTK to make the GUI?

Do you know of any similar open source work?

Answer 1

I have developed several apps with GUIs that do this sort of thing.

The one I am most pleased with is called VASE: A GUI used to create the layout, set parameters and view results of a process flow simulator.

It is not a trivial task, though once you have done one or two, there are many ideas that you can reuse and it goes quickly.

The two biggest challenges drawing the lines connecting the objects ( as you can see, even in VASE, this problem is not completely solved ) and storing that layout in a format that can be easily recovered and redrawn.

Is there any particular issue you need help with?

If you want a really, really, simple example to get you started I have re-implemented a couple of basic features ( all nice and clean, no copyright restrictions ) – left click to select, drag to move, right click to connect.

Here is the source code repository – http://66.199.140.183/cgi-bin/vase.cgi/home

Here’s what it looks like

I have implemented a simplified connector, which I call a pipe. To give you a flavour of how to do this kind of stuff, here is the code to add a pipe when the user right clicks

/**

  User has right clicked

  If he right clicks on a flower
  and there is a different flower selected
  then connect the selected flower to the right clicked flower

  if he right clicks on empty background
  create a new flower

*/
void cVase::MouseRightDown( wxMouseEvent& event )
{
    // find flower under click
    iterator iter_flower_clicked = find( event.GetPosition() );

    // check there was a flower under click
    if( iter_flower_clicked != end() ) {

        // check that we have a selected flower
        if( ! mySelected )
            return;
        // check that selected flower is different from one clicked
        if( mySelected == (*iter_flower_clicked) )
            return;
        // construct pipe from selected flower to clicked flower
        myPipe.push_back(cPipe( mySelected, *iter_flower_clicked ));

    } else {

        // no flower under click
        // make one appear!
        cFlower * pflower  = Add();
        pflower->setLocation( event.GetPosition() );
    }
    // redraw everything
    Refresh();
}

And here is the code to draw a pipe

/**

 Draw the pipe

 From starting flower's exit port to ending flower's entry port

*/
void cPipe::Paint( wxPaintDC& dc )
{
    dc.SetPen( *wxBLUE_PEN );
    dc.DrawLine( myStart->getExitPort(), myEnd->getEntryPort() );
}

You can see the rest of the wxWidgets code that ties all this together by browsing the source code repository.