Home | Demos | Products
Mobile Devices Note: The process symbols in this demo use attachment points that are intended for the desktop use. For mobile devices with small screens, simpler process symbols with a single attachment point in the center of a symbol may be used, as shown in the Diagram Demo.
The Diagram Editor provides a sample implementation of the following features:
The Object Palette contains custom dynamic 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 create a link between two nodes, click on a link icon, then click on two nodes in the drawing to be connected.
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.
Two types of objects are available for creating a diagram: node objects and edge (connector) objects. To connect two nodes, select the edge type from the palette, then select two nodes in the drawing. Some nodes have more than one connection point; connection points are highlighed when the mouse moves over them.
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.
The editing mode is activated by pressing the Select button in the Object Palette. In the editing mode, you can move nodes and edges 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.