Hi,

 

Image Diagram button in the jbpm-console is an amazing functionality providing an image of the process with the current activity node highlighted. Following is an example of how such a functionality can be added into a custom workflow application.

 


Firstly the process is deployed and is started.

The process looks something like this :

ImageDemo.png

 

There are a couple of tasks. So it moves to the Node First Task immediately as its instance is started.

 

Now. To get the current activity node Name->

 

// Listing all the active tasks for Process Instance ID : procId.

// Name of the current activity is obtained.

 



List<?> list;


list = taskService.createTaskQuery().processInstanceId(procId).list(); 


String taskName = ((Task)list.get(0)).getName();

 

Now that we have the current active node name, we can find out the coordinates of this activity by ->

 



int H = repositoryService.getActivityCoordinates(((ProcessDefinition)list.get(0)).getId(), "First Task").getHeight();


int W =  repositoryService.getActivityCoordinates(((ProcessDefinition)list.get(0)).getId(), "First Task").getWidth();


int X =  repositoryService.getActivityCoordinates(((ProcessDefinition)list.get(0)).getId(), "First Task").getX();


int Y =  repositoryService.getActivityCoordinates(((ProcessDefinition)list.get(0)).getId(), "First Task").getY();

 

Now I take an html file.

 

and use the image pixels to create a div with the original size of the image ->

 

<div style="width:1024px; height:768px; background-color:#ffffff;">

  <div style="position:relative;top:-1;left:-1;" />

  <img src="ImageDemo.png" style="position:absolute;top:0;left:0" />"


And a relative-positioned div with the coordinates I obtained from the java class.

 

<div style="position:absolute;top: 88px;left: 76px;width:50px;height:50px; z-index:1000;background-image: url(Untitled.png);background-repeat:no-repeat;\"></div>

 

Note that the 2nd div should be relative to the first one.

 

After I run this html file I get the UI something like this ->

 

Screenshot.png

Hope this is helful in some way.

 

Regards.