B4J Library [ABMaterial] MashFlowChart

Yes!!!!

Finally, found the right component for my intentions. This is rather an exciting time. In my project management webapp im doing i wanted to add a decision tree i.e. a flowchart as part of a lessons module. This is going to come handy.

Wrapped from https://github.com/adrai/flowchart.js

1. You can add a st-art and e-end, an operation, a condition, a parallel, a subroutine and inputoutput.
2. You can theme each node with a FlowState (fill, fontcolor, fontweight, fontsize, yes-text and no-text)
3. You can set the color of each connecting line.

NB: Recommended Use

1. Add all your nodes that you will need per type
2. Define the FlowStates (if necessary) and apply these
3. Add Connections
3. Add Colors for lines.

MashFlowChart.png


In BuildPage..

B4X:
page.AddExtraJavaScriptFile("custom/raphael.min.js")
    page.AddExtraJavaScriptFile("custom/flowchart.min.js")
    page.AddExtraJavaScriptFile("custom/flowchart.plugin.js")

In ConnectPage

I have prefixed each node caption with the node key, e.g. st, e, etc. The start and end nodes should always be st and e respectively, other nodes can have their unique names. The flow states are like themes for each node. Methods that end with 'Right' mean the node will be added to the right of its source node. So to start each flow chart, first add a start and an end and then add other nodes per methods provided.

B4X:
Dim mfc As MashFlowChart
    mfc.Initialize(page,"mfc")
    mfc.AddStart("st: Start","past","http://www.google.com",True)
    mfc.AddEnd("e: End","","http://www.google.com",False)
    mfc.AddOperation("op1","op1: My Operation","past","",False).ConnectStart("op1").ConnectRight("op1","cond").ColorStart("op1","red")
    mfc.AddOperation("op2","op2: Stuff","current","",False).ConnectEnd("op2")
    mfc.AddSubroutine("sub1","sub1: My subroutine","invalid","",False).ConnectLeft("sub1","op1")
    mfc.AddCondition("cond","cond: Yes or No?","approved","http://www.google.com",False).IfYesConnectRight("cond","c2").IfNoConnect("cond","para").Color("cond","c2","red")
    mfc.AddCondition("c2","c2: Good idea","rejected","",False).IfYesConnect("c2","io").IfNoConnectEnd("c2")
    mfc.AddInputOutput("io","io: catch something...","request","",False).ConnectEnd("io").ColorEnd("io","cyan")
    mfc.AddParallel("para","para: parallel tasks","","",False).Path1Bottom("para","sub1").Path2Right("para","op2")
 
    'set flow states, this applies a theme to the flowchart
    mfc.AddFlowStateFill("future","#FFFF99").AddFlowStateFill("invalid","#444444").AddFlowStateFill("request","blue")
    mfc.AddFlowState("past","#CCCCCC","","12","","","")
    mfc.AddFlowState("current","yellow","red","bold","","","")
    mfc.AddFlowState("approved","#58C4A3","","","12","APPROVED","n/a")
    mfc.AddFlowState("rejected","#C45879","","","12","n/a","REJECTED")
     
    page.Cell(2,1).AddComponent(mfc.ABMComp)

Without the flowstates...

WithoutFlowState.png


Enjoy..
 

Attachments

  • MashFlowChart.bas
    9.9 KB · Views: 293
Last edited:

Mashiane

Expert
Licensed User
Longtime User
A simpler example showing key names etc... (added shortcut methods)

SimpleFlow.png


B4X:
Dim fc As MashFlowChart
    fc.Initialize(page,"fc1")
    fc.AddStart1.AddEnd1.AddOperation1("op1","My Operation").AddSubroutine1("sub1","My SubRoutine").AddCondition1("cond","Yes or\nNo")
    fc.AddInputOutput1("io","Catch something")
    fc.Connect("st","op1").Connect("op1","cond")
    fc.IfYesConnect("cond","io").IfNoConnect("cond","sub1").ConnectRight("sub1","op1")
    fc.Connect("io","e")
    page.Cell(2,1).AddComponent(fc.ABMComp)
 

Mashiane

Expert
Licensed User
Longtime User
You can also highlight a particular element properties as depicted below. This covers everything so far that will meet my needs.

Element.png


With this one, I just adjusted the example above and just added a FlowState for the node.

B4X:
Dim fc As MashFlowChart
    fc.Initialize(page,"fc1")
    fc.AddStart1.AddEnd1.AddSubroutine1("sub1","My SubRoutine").AddCondition1("cond","Yes or\nNo")
    fc.AddOperation("op1","My Operation","current","",False).AddFlowState("current","red","yellow","red","bold","","","")
    fc.AddInputOutput1("io","Catch something")
    fc.Connect("st","op1").Connect("op1","cond")
    fc.IfYesConnect("cond","io").IfNoConnect("cond","sub1").ConnectRight("sub1","op1")
    fc.Connect("io","e")
    page.Cell(2,1).AddComponent(fc.ABMComp)

Enjoy!
 

Attachments

  • MashFlowChart.bas
    10.4 KB · Views: 284

Mashiane

Expert
Licensed User
Longtime User
Hi:Mashiane in https://github.com/adrai/flowchart.js i can't find flowchart.plugin.js
Thank you
You can actually remove that line. This thing didn't want to work and i had to tweak it. From searches it seemed a lot of other people had the same challenge I was having. After finding the solution the plugin was not necessary. Will also update Dropbox soon.
 

joulongleu

Active Member
Licensed User
Longtime User
Hi:Mashiane:Recently, there is a task related to flowchart. I Want to use MashFlowChart but can't make the following function. Can MashFlowChart do this?Thank You.
 

Attachments

  • ttt.png
    ttt.png
    329.5 KB · Views: 281

Mashiane

Expert
Licensed User
Longtime User
Hi:Mashiane: use the 'parallel' node,but EnumPosition only right, left ,bottom , top,2 bottom only 1 can show,how to use 'mermaid' it can 2 'to-one' ,https://mermaidjs.github.io/,Thank you.
The source code for all my components is available for learning, you can write your own component to work with mermaid. Sadly Im bushed at the moment. All the best..
 
Top