B4J Library [ABMaterial] Deciding on a Christmas gifts using Mermaid

Mashiane

Expert
Licensed User
Ola

A long time ago I was requested to come up with a mermaid custom component for ABM. So Im taking a break today from everything and looking at it for @joulongleu

Chritsmas.png


I should be having this working soon, and the code seems to be simple enough..

B4X:
shop.Initialize(Page,"shop").FlowChart.TopBottom
    shop.AddRectangle("a","Christmas")
    shop.AddRoundEdges("b","Go shopping")
    shop.AddRhombus("c","Let me think")
    shop.AddRectangle("d","Laptop")
    shop.AddRectangle("e","iPhone")
    shop.AddRectangle("f","fa:fa-car Car")
    shop.ArrowText("a","b","Get money")
    shop.Arrow("b","c")
    shop.Arrow("c","d")
    shop.Arrow("c","e")
    shop.Arrow("c","f")
1. We are doing a flowchart. There are a variety of components
2. It should be a top to bottom flowchart, there are a variety, LR, RL, BT etc.
3. We need to decide on what to get for Christmas gift.
4. We need to go shopping but also get money.
5. We also need to think about the present to buy.

Component to be uploaded soon! Watch this space!
 

Mashiane

Expert
Licensed User
The swimlanes kinda stuff seems to be working too..

swimlanes.png


B4X:
sg.Initialize(Page,"sg").FlowChart.TopBottom
    sg.AddRectangle("c1","c1").AddRectangle("c2","c2")
    sg.AddRectangle("a2","a2").AddRectangle("a1","a1")
    sg.AddRectangle("b1","b1").AddRectangle("b2","b2")
    sg.Arrow("c1","a2")
    sg.AddSubGraph("one").Arrow("a1","a2").EndSubGraph
    'another subgraph
    sg.AddSubGraph("two").Arrow("b1","b2").EndSubGraph
    'another subgraph
    sg.AddSubGraph("three").Arrow("c1","c2").EndSubGraph
 

Mashiane

Expert
Licensed User
One can use a variety of different arrows between connections..

1. Create rectangles A to I
2. Between each rectangle, use the various types of links
Arrows.png


B4X:
links.Initialize(Page,"links").FlowChart.LeftRight
    links.AddRectangle("a","A").AddRectangle("b","B").AddRectangle("c","C").AddRectangle("d","D").AddRectangle("e","E").AddRectangle("f","F")
    links.AddRectangle("g","G").AddRectangle("h","H").AddRectangle("i","I")
    links.Arrow("a","b")
    links.OpenLink("b","c")
    links.OpenLinkText("c","d","Open Link Text")
    links.ArrowText("d","e","Arrow Text")
    links.ArrowDotted("e","f")
    links.ArrowDottedText("f","g","Dotted Text")
    links.ArrowThickLine("g","h")
    links.ArrowThickLineText("h","i","Think Line Text")
 

Mashiane

Expert
Licensed User
Wanting a flowchart starting from the right to the left is also easy peasy... I have added here a clickable node that opens a website on a new tab. Hovering on "Click Me" node changes the mouse pointer to a hand automatically.

RL.png


B4X:
mer2.Initialize(Page,"merx1").FlowChart.RightLeft
    mer2.AddRectangle("start","Start")
    mer2.AddRectangle("stop","Click Me")
    mer2.OpenLinkText("start","stop","OpenLinkText")
    mer2.AddURL("stop","http://www.mbangas.com","Anele's Website")
 

Mashiane

Expert
Licensed User
This fortunately has different shapes that one can add too..

shapes.png



B4X:
mer1.Initialize(Page,"mer1").FlowChart.LeftRight
    mer1.AddRectangle("start","Rectangle")
    mer1.AddRoundEdges("step1","Rounded Edges")
    mer1.AddCircle("step2","Circle")
    mer1.AddRhombus("step3","Rhombus")
    mer1.AddSymetricShape("stop","Stop")
    mer1.Arrow("start","step1")
    mer1.ArrowDotted("step1","step2")
    mer1.ArrowDottedText("step2","step3","My link") 
    mer1.ArrowThickLine("step3","stop")
 

Mashiane

Expert
Licensed User
I think its kinda nice that one can style the nodes using pure css. This off course needs some knowledge of css. Check it out!

stylesx.png


B4X:
styles.Initialize(Page,"styles1").FlowChart.LeftRight
    styles.AddRectangle("a","A")
    styles.AddRectangle("b","B")
    styles.AddRectangle("c","C")
    styles.AddRectangle("d","D")
    styles.ApplyClass("a","aclass")
    styles.ApplyClass("b","bclass")
    styles.ApplyClass("c","cclass")
    styles.Arrow("a","b").Arrow("b","c").Arrow("c","d")
One can use InjectCSS to add the CSS class definition..

B4X:
.aclass > rect {
fill:#FF0000 !important;
stroke:#FFFF00 !important;
stroke-width:4px !important;
}
.bclass > rect {
fill:#f9f !important;
stroke:#333 !important;
stroke-width:4px !important;
}
.cclass > rect {
fill:#ccf !important;
stroke:#f66 !important;
stroke-dasharray:5, 5 !important;
stroke-width:2px !important;
}
 

Mashiane

Expert
Licensed User
As noted earlier, one can use font awesome icons on their flowchart.. This explodes on that example.

faexample.png


B4X:
oe.Initialize(Page,"oe").FlowChart.TopBottom
    oe.AddRectangle("b","fa:fa-twitter For peace").AddRectangle("c","fa:fa-ban forbidden")
    oe.AddRectangle("d", "fa:fa-spinner").AddRectangle("e", "A fa:fa-camera-retro perhaps?")
    oe.Arrow("b","c").Arrow("b","d").Arrow("b","e")
 

Mashiane

Expert
Licensed User
A left to right flowchart is also easily done...

decisiontree.png


B4X:
fc.Initialize(Page,"fc").FlowChart.LeftRight
    fc.AddRectangle("a","Hard edge")
    fc.AddRoundEdges("b","Round edge")
    fc.AddRhombus("c","Decision")
    fc.AddRectangle("d","Decision one")
    fc.AddRectangle("e", "Decision two")
    'add connections
    fc.Arrow("a","b")
    fc.Arrow("b","c")
    fc.ArrowText("c","d","One")
    fc.ArrowText("c","e","Two")
 

Mashiane

Expert
Licensed User
Then there was sequence diagrams..

SequenceDiagrams.png


1.

B4X:
sd.Initialize(Page,"sd").SequenceDiagram
    sd.AddParticipant("a","Alice")
    sd.AddParticipant("j","John")
    sd.AddSequence("a","j","Hello John, how are you?")
    sd.AddSequenceDotted("j","a","Great!")

2.

B4X:
sd1.Initialize(Page,"sd1").SequenceDiagram
    sd1.AddParticipant("a","Alice")
    sd1.AddParticipant("j","John")
    sd1.AddSequence("a","j","Hello John, how are you?").ActivateParticipant("j")
    sd1.AddSequenceDotted("j","a","Great!").DeActivateParticipant("j")
3.

B4X:
sd2.Initialize(Page,"sd2").SequenceDiagram
    sd2.AddParticipant("a","Alice")
    sd2.AddParticipant("j","John")
    sd2.AddSequence("a","j","Hello John, how are you?").ActivateParticipant("j")
    sd2.AddSequence("a","j","John, can you hear me?").ActivateParticipant("j")
    sd2.AddSequenceDotted("j","a","Hi Alice, I can hear you!").DeActivateParticipant("j")
    sd2.AddSequenceDotted("j","a","I feel great!").DeActivateParticipant("j")
 

Mashiane

Expert
Licensed User
Sequence Diagrams with notes..

Notes.png


1.

B4X:
sd3.Initialize(Page,"sd3").SequenceDiagram
    sd3.AddParticipant("j","John")
    sd3.AddNoteOnRightOfParticipant("j","Text in note")
2.

B4X:
sd4.Initialize(Page,"sd4").SequenceDiagram
    sd4.AddParticipant("a","Alice")
    sd4.AddParticipant("j","John")
    sd4.AddSequence("a","j","Hello John, how are you?")
    sd4.AddNoteOverParticipants("a","j","A typical interaction")
 

Mashiane

Expert
Licensed User
SDs with loops, else, alt statements

loops.png


1.

B4X:
sd5.Initialize(Page,"sd5").SequenceDiagram
    sd5.AddParticipant("a","Alice")
    sd5.AddParticipant("j","John")
    sd5.AddSequenceNoArrow("a","j","Hello John, how are you?")
    sd5.AddLoop("Every Minute").AddSequenceDottedNoArrow("j","a","Great!").AddEnd
2.

B4X:
sd6.Initialize(Page,"sd6").SequenceDiagram
    sd6.AddParticipant("a","Alice")
    sd6.AddParticipant("b","Bob")
    sd6.AddSequence("a","b","Hello Bob, how are you?")
    sd6.AddAlt("is sick").AddSequence("b","a","Not so good :(")
    sd6.AddElse("is well").AddSequence("b","a","Feeling as fresh as a daisy")
    sd6.AddEnd
    sd6.AddOpt("Extra Response").AddSequence("b","a","Thanks for asking")
    sd6.AddEnd
 

Mashiane

Expert
Licensed User
It has some kind of gantt chart too..

gantt.png


B4X:
gt.Initialize(Page,"gt").GanttChart.DateFormat("YYYY-MM-DD")
    gt.AddSection("Phase 1")
    gt.AddTask("t1","Task 1","2018-10-08","2018-10-31",0,False)
    gt.AddTask("t5","Task 5","2018-11-01","2018-11-15",10,False)
    gt.AddSection("Phase 2")
    gt.AddTask("t2","Task 2","2018-10-20","2018-10-25",100,True)
    gt.AddTask("t6","Task 6","2018-10-22","2018-10-25",20,False)
    gt.AddSection("Phase 3")
    gt.AddTask("t3","Task 3","2018-11-01","2018-11-10",10,True)
    gt.AddSection("Phase 4")
    gt.AddTask("t4","Task 4","2018-11-11","2018-11-30",100,False)
    gt.AddTask("t7","Task 7","2018-12-01","2018-12-25",20,False)
 
Top