Share My Creation PFDMaker - create, view or operate Process Flow Diagrams

PFDMaker is a suite of B4J applications to create, view or operate Process Flow Diagrams (PFD).

Developed as a personal challenge (and for personal use) to create all kind of PFDs.
The main focus has been on Chemical Engineering diagrams, but evolving for Flowcharts and more like Electrical shapes.

There are 4 applications:
* PFDCreator - create PFDs using objects drag & dropped on a canvas
* PFDViewer - view PFDs created by the PFDCreator
* PFDOperator - operate or control PFDs created by the PFDCreator
* PFDShapeMaker - create object shapes used by the PFDCreator.

The developments are in progress, but decided to share the source code of the B4J project PFDCreator.

PFDCreator
An application to create all kind of simple Process Flow Diagrams (PFDs) using objects (shapes) which are dragged & dropped on a Drawing Board (Canvas).
A PFD contains objects which are shapes with properties.
The properties define the object shape position, size, colors, text & format, but also its value, unit, operate flag and more.
There are a number of predefined shapes, the basic shapes but also dedicated shape types to create flowcharts, process instrumentation & piping diagrams or electrical circuits.

MainPage

Shape Types with Shapes

Resize Object and Show Index

B4XDialog Examples

PFD Shape Types
The PFDCreator has initially following shape types:

• Basic - Common shapes which can be used by all PFD types.
• Flowchart - Shapes, like terminator, process, decision used to create flowcharts.
• PID - Shapes for Process Instrumentation & Piping (PID) diagrams.
• Electrical - Shapes to create electrical circuit diagrams.

Notes

• The PFDCreator application is provided as a B4J project with source code which requires B4J IDE to run (Windows).
• The PFDCreator has been evolved from the idea to create simple PIDs. The application has become rather complex and has room for improvements.
• The included predefined shapes, created as methods use different ways to draw on the canvas. This is because evolving how to draw shapes. Considering using B4XPath as method only.
• To enhance the PFDCreator with more shape types and shapes, lookup the development notes (DEVNOTES.md).
• This B4J project is provided AS-IS and be aware that developments are ongoing which might lead to concept or code changes.

Source Code
The source code of the B4J Project PFDCreator is attached.
Created with B4J v10.0 (64 bit), Java JDK 19.0.2.
Internal libraries: jCore, jFX, B4XPages, XUI Views, Json, DesignerUtils, ByteConverter, BCTextEngine.
Additional libraries: AsyncCanvas, jReflection.
Also published on GitHub.

Installation
Unzip pfdcreator.zip to a folder of choice.
Copy the files from the AdditionalLibraries folder to the B4J Additional libraries folder.
Load PFDCreator.b4j in the B4J IDE.

Documentation

• README.md
• DEVNOTES.md
• TODO.md
• IDEAS.md
• PFDCreator.hlp

Video
A video showing how to create a very simple flowchart using the PFDCreator.

Licence
GNU General Public License v3.0 - Developed for personal use only. See file LICENSE.

Credits to Anywhere Software and the B4X Community for sharing libraries, hints&tips.

Last Change
20241220 - See POST #4. PFDCreator - major update and source code sharing.
20241024 - See POST #3. PFDCreator - added menu-bar, clv shape selector, object properties enhanced, reworked B4X module structure, draw mode select.
20240903 - Early preview version shared on the B4J Forum.

 

[rwblinn]

Update POST #1
Added short PFDCreator example video showing some basics = not all possibilities are shown (would probably take an hour).

 

[rwblinn]

Update POST #1
Progress made mainly on the PFDCreator application.

Highlights

• Added classic menu-bar with structure file, copy, draw, tools and help actions.
• Changed the customlistview Shapes to select (drop on the PFD Drawing Board) a shape from text to image. The images are created from an external shape definition file with JSON format which is also used to draw the shapes on the canvas PFD Drawing Board.
• Re-worked the B4X module structure. Each shape type i.e. Basic, Flowchart, PID (or others) have a dedicated code module with drawing methods. All shapes are drawn using the canvas draw methods, esp. B4XPath. Challeging have been shapes using arc's or bezier curves.
• Added shapes. Note: Started to use ChatGPT to create shapes on the canvas - interresting how code generation evolves in iterations = some are good, some are bad.
• Object properties added and redesigned the form layout. Properties are used depending shape.
• Added draw mode Select to select & move multiple objects (using arrow buttons).

 

[rwblinn]

Update POST #1
PFDCreator major update and sharing the PFDCreator B4J source code.
A video shows how to create a very simple flowchart using the PFDCreator.

Changelog

NEW: Key management - Support for some keys, like move object(s) using the arrow keys; Control+O, Control+S; Delete.
NEW: Resize an object (after selection) via mouse touched by using 5 rectangles = object + 4 corners.
NEW: Font DEFAULTITALIC, DIGITAL (slows down moving objects).
NEW: Menu Object > Remove Selected - Remove objects selected with drawmode Selected.
NEW: Menu Tools > Show Index - Helper to show the object index within a red circle below the object.
NEW: Menu Tools > PFD Background Color - Colorpicker dialog to set the background color of the PFD canvas. ISA-101 recommendation is RGB 221,221,221 (224 also used) or 192,192,192.
NEW: Menu Tools > Select to Code - Create a shape, select and generate B4X subroutine code, i.e. DrawMyShape.
NEW: Menu Tools > Debug - Enable debug info to the log, added to the settings as "debug": false.
NEW: Menu Help > Help & About: Help file using custom dialog with BBCodeView.
NEW: Toolbar > Main - Open PFD file.
NEW: PFD Definition File - Properties: "pfdbackgroundcolor", with value ARGBD, like "FFE0E0E0" (i.e. RGB 224,224,224); "hint" displayed at bottom Object Properties; "method" used to create new shape from select area.
NEW: Object Properties - Hint label which is defined as key "hint" in the PFD shapes definitiion file pfdcreator.shp.
NEW: PFDShapesBasic - Shapes: Connector lines between 2 objects: CONNECTORLLINE, CONNECTORULINE, CONNECTORZLINE; Solid line rotated; Pixel; TextArrow; Path.
NEW: PFDShapesBasic - DrawTextRotated used for all shapes having text, like label, textbox.
NEW: PFDShapesPID - TrendIndicator to use for operate, data set in object value in JSON format. This is experimental.
NEW: PFDShapesPID - ISA-101 Shapes BINARYSTATEINDICATOR, DATACONNECTORLINE, NUMERICDATA, PRIMARYPROCESSLINE, SECONDARYPROCESSLINE.
NEW: PFDShapesElectrical - Shape type Electrical. Started with some shapes (to play with): 7SEGMENTDISPLAY, CAPACITOR, CIRCUITCONNECTOR, RESISTOR, RESISTORALTERNATE, VALUEUNIT.
NEW: Helper - Many additionals methods, to mention WordWrapString used by all shapes having text; Various color conversions painttoint and intto paint.
NEW: Application icon (PNG 16x16px).
NEW: Started writing development notes in file DEVNOTES.md (planned to create PDF format).
UPD: Moved menu Tools > PFD Description to menu File > PFD Description.
UPD: Mainform - Changed size to width 1600, height 1000. Panes for object list, shape selector, object properties width 250.
UPD: Helpfile - Reworked the help file using BBCodeView.
UPD: Various fixes.