This is an example of a Process Flow Diagram (PFD) Editor written entirely in JavaScript using the GLG Extended API. The PFD editor allows the user to create a process flow diagram by placing and connecting process equipment and attaching data sources for real-time updates. The flow diagram may be updated with live data while it is being edited. A saved diagram may be loaded into a simple Web viewer which displays the diagram and updates it with real-time data.
The user interface and the dynamic icons of the PFD editor were built using the GLG Graphics Builder. The resulting drawing was saved into a file which is then loaded in a JavaScript program on a web page. The GLG API is used to handle user interaction with the drawing.
The GLG Demo Download contains the desktop versions of this demo implemented in C/C++/C# and Java that provide the same functionality as the JavaScript version. The drawing and the programming logic are shared between all versions of the demo with only syntax differences in the source code. More information
The Diagram Editor provides a sample implementation of the following features:
The Object Palette contains custom data-driven icons created in the GLG
Graphics Builder. To create a diagram node, click on a desired node icon
in the palette, then click in the drawing to position the node.
The palette also contains link buttons for connecting nodes with links as
described below.
To connect two nodes with a link, click on a link icon in the Object
Palette, then click on two nodes in the drawing to be connected.
Some nodes have more than one connection point; connection points are
highlighed when the mouse moves over them.
On mobile devices with a touch screen, single finger dragging may
be used to select a connection point of icons with multiple connection
points. To create a link between two nodes with multiple connection
points, touch and drag over the desired connection point of the first
node. When the touch moves over the connection point, the point is
highlighted with a large green circle, which makes it possible to select
the desired point. Releasing the touch over the selected point connects
the start point of the link.
Repeat touch and drag for the second node to select the end point
of the link.
Two finger touch may be used to scroll and zoom the page while in
the link creation mode.
There are two modes for creating nodes and links. In the default creation mode, the editing mode is restored to the Selection mode after creating each node or link. To create several nodes, the user has to click on a node icon each time before clicking in the drawing to position the node.
The Creation Mode toolbar button toggles between the default creation mode and the "sticky" creation mode.
In the "sticky" mode, the creation mode stays active to allow the user to create several nodes or links in a row by repeatedly clicking in the drawing area, without a need to click on the node or link icon each time. To exit object creation mode, click on the Select icon in the Object Palette or disable the "sticky" mode using the Creation Mode toolbar button.
The demo uses custom data to keep track of what nodes are connected. This may be used by an application for traversing connected nodes. The connectivity information is stored when the digram is saved and restored when the saved diagram is loaded.
The flow diagram can be extended by adding custom connectivity
rules and other application-specific features.
More information
The editing mode is activated by pressing the Select button in the Object Palette. In the editing mode, you can move nodes and connecting links with the mouse, edit their properties and perform other editing operations using the toolbar buttons.
In the demo, the name of the selected object is displayed in the selection display area at the bottom. In an application, a custom handling can be performed when an object is selected or unselected.
Prompts and error messages are displayed in the message area at the bottom of the diagram. The errors are also displayed in an alert dialog and logged to the broser console.
The Properties toolbar button may be used to popup the Properties Dialog for the selected object. In this demo, the dialog is used for editing custom data properties associated with the object, but the graphical properties (such as colors, etc.) may be edited the same way using either a color palette or a text box. The custom data are attached to the object: they are saved when the diagram is saved and restored when the saved diagram is loaded.
The Data Source text box of the Properties dialog may be used to define the data source of live data to update the graphical icon in the drawing. For example, a data source providing a tank level may be associated with a tank object to display changing data from a live data source. The objects in the diagram may be updated with live data while they are being edited.
The Select button next to the Data Source text box of the Properties Dialog brings the list of available data sources to choose from. In an application, the list of the data sources may be queried from a process database or a PLC.
The Cut toolbar button may be used to delete a node or link, and the Paste button may be used to undo the Cut action.
Hover a mouse over any button to display a tooltip. On mobile devices, touch and hold a button to display its description.
The Save toolbar button demonstrates saving the created diagram as a JSON string. This string can be sent to a server for persistent storage. The JSON string is also printed to the console for information and debugging.
The Load toolbar button loads a previously saved diagram. In the demo, it loads a diagram from the JSON string generated by the Save action. In an application, the JSON string containing a previously saved diagram can be loaded from a server.
The Print toolbar button can be used to print the diagram web page using the browser's native print dialog.