InnovationQ will be updated on Sunday, Oct. 22, from 10am ET - noon. You may experience brief service interruptions during that time.
Browse Prior Art Database

Using static JPEG images of workflow diagrams as graphical monitor background pictures in HTML

IP.com Disclosure Number: IPCOM000124408D
Original Publication Date: 2005-Apr-19
Included in the Prior Art Database: 2005-Apr-19
Document File: 4 page(s) / 32K

Publishing Venue



Disclosed is a method that allows users of workflow systems to see a graphical diagram with visual indicators of where they are in the workflow and also hot spots on the graphical diagram that they can select with a mouse to drill down into the workflow for additional information, as needed.

This text was extracted from a PDF file.
This is the abbreviated version, containing approximately 39% of the total text.

Page 1 of 4

Using static JPEG images of workflow diagrams as graphical monitor background pictures in HTML

The disclosed method is to use a graphical modeling tool to generate a static graphical image of the workflow diagram and save it as a JPEG file. In addition the modeling tool will create artifacts that are used as a graphical monitor application. The method exploits the HTML markup standard and uses the Image tag (img) to load the workflow diagram image into a web browser, then it exploits the image mapping tags of the browser to create hotspots on the workflow diagram. These hotspots are HTML HREF links that are used to launch web pages that show details of nodes in the diagram. The browser AREA tag is used to specify the hotspots. These hotspots provide drill down capability to the end user of the graphical workflow monitor. In addition, a JavaScript function is also created by the graphical modeling tool. This function contains information about the workflow hotspots and node locations, which can be used to overlay graphical images on top of the workflow diagram image. These overlay images can be check marks, arrows, etc, that provide visual feedback to an end user of the workflow status. This is implemented with the HTML division tag (DIV). Although there are many existing usages of the HTML tags, there are no existing workflow modeling tools that exploit these tags to and generate HTML pages that contain information about workflows and that the workflows can be graphically monitored with a web browser.

The method works by using a graphical workflow modeling tool to draw a workflow diagram. When the diagram is saved into a workflow system, in addition, a HTML page is generated with the program logic necessary to monitor a workflow process. In addition a JPEG image is also saved to a file. The user of the modeling tool is allowed to specify the location of where these files are to be created on their computer.

Below is an example of a generated HTML page.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8"> <TITLE>Test CM Workflow Monitor</TITLE> </HEAD> <BODY LANG="en-US"> <img src="test.jpg" usemap="#test" alt="Details"> <map id="test" name="test" > <area shape="CIRCLE" coords="21,190 ,20" href="cmmonitor.html?Start" target="_blank" alt="Details"> <area shape="CIRCLE" coords="121,190 ,20" href="cmmonitor.html?VerifyClaim" target="_blank" alt="Details"> <area shape="CIRCLE" coords="221,190 ,20" href="cmmonitor.html?AnnotateExceptons" target="_blank" alt="Details"> <area shape="CIRCLE" coords="323,62 ,20" href="cmmonitor.html?ApproveForProcessing" target="_blank" alt="Details"> <area shape="CIRCLE" coords="421,190 ,20" href="cmmonitor.html?Stop" target="_blank" alt="Details"> </map> <script type="text/javascript" language="JavaScript"> <!-- usage example: //--> <!-- <script type="text/javascript" language="JavaScript"> //--> <!-- setNodeStatus...