B4J Library [ABMaterial] MashFlowChart

Discussion in 'B4J Libraries & Classes' started by Mashiane, Apr 27, 2018.

  1. Mashiane

    Mashiane Expert Licensed User

    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..

    Code:
    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.

    Code:
    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..
     

    Attached Files:

    Last edited: Apr 27, 2018
  2. Mashiane

    Mashiane Expert Licensed User

    A simpler example showing key names etc... (added shortcut methods)

    SimpleFlow.png

    Code:
    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)
     
    joulongleu likes this.
  3. Mashiane

    Mashiane Expert Licensed 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.

    Code:
    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!
     

    Attached Files:

    XbNnX_507 and joulongleu like this.
  4. joulongleu

    joulongleu Member

  5. Mashiane

    Mashiane Expert Licensed User

    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 likes this.
  6. joulongleu

    joulongleu Member

    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.
     

    Attached Files:

    • ttt.png
      ttt.png
      File size:
      329.5 KB
      Views:
      43
  7. Mashiane

    Mashiane Expert Licensed User

    Hi @joulongleu , I think this only supports 1 'to-fro' joins only. Check the documentation perhaps there could be something, or perhaps try and use the 'parallel' node.
     
    joulongleu likes this.
  8. joulongleu

    joulongleu Member

    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.
     
    Mashiane likes this.
  9. Mashiane

    Mashiane Expert Licensed User

    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..
     
    amaxco and joulongleu like this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice