B4J Tutorial [ABMaterial] Creating the diagram..

Ola

For a while I've been thinking about this. I wanted to use a custom component that I could run inside ABM to try and explain my follow up post on Harri's thread. The discussion has been about the 'template' and on continuing with the video posted there about ABM, took a look back before I delve into the other crucial things.

You can find the article.

Below is the image used there and the source code of generating it. Ok, this is just to show off the power of what one can do with ABM.

ABMBeast.png


Anyway, this is how this looks as posted in that article and here is the code of how it came into being...

In BuildPage

B4X:
page.AddExtraJavaScriptFile("https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js")
    page.AddExtraJavaScriptFile("custom/SimpleDiagram-0.2.min.js")
    page.AddExtraCSSFile("custom/SimpleDiagram-0.2.css")

In ConnectPage

B4X:
Dim msd As MashSimpleDiagram
    msd.Initialize(page,"msd",35,70,30,False)
    msd.Clear
    'msd.AddNumbers
    msd.AddNode2(7,15,6,14,"ABMaterial")
'    msd.AddNode2(5,41,5,42, "ABMApplication")
'    msd.AddNode2(7,41,7,42, "ABMCacheControl")
'    msd.AddNode2(9,41,9,42, "ABMCacheScavenger")
'    msd.AddNode2(11,41,11,42, "ABMErrorHandler")
'    msd.AddNode2(13,41,13,42, "ABMRootFilter")
'    msd.AddNode2(15,41,15,42, "ABMShared")
'    msd.AddNode2(17,41,17,42, "ABMUploadHandler")
'    msd.AddNode2(19,41,19,42, "DBM")
'    msd.AddNode2(21,41,21,42, "ABMPageTemplate")
'    msd.AddNode(10,30,"Template")
    msd.AddNode2(4,25,3,24,"WebApp")
    msd.AddNode2(3,33,3,34,"VPS")
    'msd.AddNode2(6,25,7,24,"Pages")
    'msd.AddNode2(6,31,7,29,"ABMPageTemplate1..N")
 
    'add connections
'    msd.AddConnection("Template","ABMaterial")
'    msd.AddConnection("ABMApplication","Template")
'    msd.AddConnection("ABMCacheControl","Template")
'    msd.AddConnection("ABMCacheScavenger","Template")
'    msd.AddConnection("ABMErrorHandler","Template")
'    msd.AddConnection("ABMRootFilter","Template")
'    msd.AddConnection("ABMShared","Template")
'    msd.AddConnection("ABMUploadHandler","Template")
'    msd.AddConnection("DBM","Template")
'    msd.AddConnection("ABMPageTemplate","Template")
    msd.AddConnection("ABMaterial","WebApp")
    msd.AddConnection("WebApp","VPS")
    'msd.AddConnection("Pages","WebApp")
    'msd.AddConnection("ABMPageTemplate1..N","Pages")
 
    'change shape to square
'    Dim lst As List
'    lst.Initialize
'    lst.Add("ABMApplication")
'    lst.Add("ABMCacheControl")
'    lst.Add("ABMCacheScavenger")
'    lst.Add("ABMErrorHandler")
'    lst.Add("ABMShared")
'    lst.Add("DBM")
'    lst.Add("ABMPageTemplate")
'    msd.MakeSquare(lst)
 
    'msd.AddBox(11,1, 14,7)
    'msd.AddBox(11,18,13,7)
 
    'form controls
    msd.AddNode2(12,3,12,4,"Input Controls")
    msd.AddLabel1(13,4,"ABMCheckBox")
    msd.AddLabel1(14,4,"ABMCombo")
    msd.AddLabel1(15,4,"ABMDateTimePicker")
    msd.AddLabel1(16,4,"ABMDateTimeScroller")
    msd.AddLabel1(17,4,"ABMFileInput")
    msd.AddLabel1(18,4,"ABMEditor")
    msd.AddLabel1(19,4,"ABMInput")
    msd.AddLabel1(20,4,"ABMPatternLock")
    msd.AddLabel1(21,4,"ABMRadioGroup")
    msd.AddLabel1(22,4,"ABMRange")
    msd.AddLabel1(23,4,"ABMSignaturePad")
    msd.AddLabel1(24,4,"ABMSlider")
    msd.AddLabel1(25,4,"ABMSwitch")
    msd.AddLabel1(26,4,"ABMUpload")
    msd.AddLabel1(27,4,"ABMInputBox")
    msd.AddLabel1(28,4,"ABMPercentSlider")
    msd.AddLabel1(29,4,"ABMStarRating")
 
    'buttons
    msd.AddNode2(12,9,12,10,"Buttons")
    msd.AddLabel1(13,10,"ABMActionButton")
    msd.AddLabel1(14,10,"ABMButton")
 
    'media
    msd.AddNode2(12,16,12,17,"Media")
    msd.AddLabel1(13,17,"ABMAudioPlayer")
    msd.AddLabel1(14,17,"ABMImage")
    msd.AddLabel1(15,17,"ABMImageSlider")
    msd.AddLabel1(16,17,"ABMVideo")
    msd.AddLabel1(17,17,"ABMFlexWall")
    msd.AddLabel1(18,17,"ABMParallax")
    msd.AddLabel1(19,17,"ABMCard")
    msd.AddLabel1(20,17,"ABMList")
    msd.AddLabel1(21,17,"ABMCanvas")
    msd.AddLabel1(22,17,"ABMPDFViewer")
    msd.AddLabel1(23,17,"ABMBadge")
    msd.AddLabel1(24,17,"ABMChip")
    msd.AddLabel1(25,17,"ABMLabel")
    msd.AddLabel1(26,17,"ABMDivider")
    msd.AddLabel1(27,17,"ABMSVGSurface")
    msd.AddLabel1(28,17,"ABMCodeLabel")
    msd.AddLabel1(29,17,"ABMMessageBox")
    msd.AddLabel1(30,17,"ABMFileManager")
    msd.AddLabel1(31,17,"ABMSocialShare")
 
    'layouts
    msd.AddNode2(12,22,12,23,"Layouts")
    msd.AddLabel1(13,23,"ABMContainer")
    msd.AddLabel1(14,23,"ABMCustomComponent")
    msd.AddLabel1(15,23,"ABMSmartWizard")
    msd.AddLabel1(16,23,"ABMTabs")
    msd.AddLabel1(17,23,"ABMModalSheet")
    msd.AddLabel1(18,23,"ABMPage")
    msd.AddLabel1(19,23,"ABMTable")
    msd.AddLabel1(20,23,"ABMTableMutable")
 
 
    'navigation
    msd.AddNode2(12,31,12,32,"Navigation")
    msd.AddLabel1(13,32,"ABMNavigationBar")
    msd.AddLabel1(14,32,"ABMPagination")
 
 
    'security
    msd.AddNode2(6,53,6,54,"Security")
    msd.AddLabel1(7,54,"ABMSocialOAuth")
    msd.AddLabel1(8,54,"ABMCaptcha")
    msd.AddLabel1(9,54,"ABMFirebaseAuth")
 
 
    'events
    msd.AddNode2(12,40,12,41,"Events")
    msd.AddLabel1(13,41,"ABMCalendar")
    msd.AddLabel1(14,41,"ABMChronologyList")
    msd.AddLabel1(15,41,"ABMPlanner")
     
    'tools
    msd.AddNode2(9,45,9,46,"Reporting & Other")
    msd.AddLabel1(10,46,"ABMReport")
    msd.AddLabel1(11,46,"ABMChart")
    msd.AddLabel1(12,46,"ABMFrappeChart")
    msd.AddLabel1(13,46,"ABMPivotTable")
    msd.AddLabel1(14,46,"ABMGoogleMap")
    msd.AddLabel1(15,46,"ABMChat")
    msd.AddLabel1(16,46,"ABMGenerator")
    msd.AddLabel1(17,46,"ABMGridBuilder")
    msd.AddLabel1(18,46,"ABMConzole")
    msd.AddLabel1(19,46,"ABMXTR")
    msd.AddLabel1(20,46,"ABMFirebaseStorage")
 
    'connections
    msd.AddConnection("Security","ABMaterial")
    msd.AddConnection("Tools","ABMaterial")
    msd.AddConnection("Events","ABMaterial")
    msd.AddConnection("Navigation","ABMaterial")
    msd.AddConnection("Layouts","ABMaterial")
    msd.AddConnection("Media","ABMaterial")
    msd.AddConnection("Input Controls","ABMaterial")
    msd.AddConnection("Buttons","ABMaterial")
    msd.AddConnection("Reporting & Other","ABMaterial")
 
    'add a connection style
    msd.AddLineStyle("Security","color:red;")
    msd.AddLineClass("Security","red")
    page.Cell(2,1).AddComponent(msd.ABMComp)

NB: Whilst developing this component I ran into a snag and AB checked it out for me. It is flawed indeed and I am sure there is something better that I can use. After I used his recommendations about the errors I made, it helped me to finalize it.

The SimpleDiagram itself is based on a premise of a GRID. Everything you see sits on a RC cordinate system. In other news, this made me think of a joining-the-dots app for my kids.

:)
 

Attachments

  • MashSimpleDiagram.bas
    9.4 KB · Views: 560
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Grid Refresher Source Code

ABMGrid.png


B4X:
Sub SmallGrid
    'intro
    Dim intro As MashSimpleDiagram
    intro.Initialize(page,"intro",1,1,62,False)
    page.Cell(2,1).AddComponent(intro.ABMComp)
    
    'small 62
    'large 97
    'medium 81
    Dim small As MashSimpleDiagram
    small.Initialize(page,"small",12,12,62,True)
    'row 1
    small.AddBox(1,1,12,1)
    small.AddLabel1(1,1,$".AddCells12(1,"")"$)
    
    'row 2
    small.AddBox(2,1,6,1)
    small.AddBox(2,7,6,1)
    small.AddLabel1(2,1,$".AddCellOS(2,0,0,0,6,6,6,"")"$)
    small.AddLabel1(2,7,$" [OR] .AddCellOS(1,0,0,0,6,6,6,"") X 2"$)
    
    'row 3
    small.AddBox(3,1,5,1)
    small.AddBox(3,6,7,1)
    small.AddLabel1(3,1,$".AddCellOS(1,0,0,0,5,5,5,"")"$)
    small.AddLabel1(3,6,$".AddCellOS(1,0,0,0,7,7,7,"")"$)
    'row 4
    small.AddBox(4,1,4,1)
    small.AddBox(4,5,8,1)
    'row 5
    small.AddBox(5,1,3,1)
    small.AddBox(5,4,9,1)
    
    'row 6
    small.AddCellOS(6,1,0,2)
    small.AddCellOS(6,3,0,10)
    small.AddLabel1(6,3,$".AddCellOS(1,0,0,0,2,2,2,"").AddCellOS(1,0,0,0,10,10,10,"")"$)
    
    'row 7
    small.AddCellOS(7,1,0,1)
    small.AddCellOS(7,2,0,9)
    small.AddCellOS(7,11,0,2)
    small.AddLabel1(7,2,$".AddCellOS(1,0,0,0,1,1,1,"").AddCellOS(1,0,0,0,9,9,9,"").AddCellOS(1,0,0,0,2,2,2,"")"$)
    
    'row 8
    small.AddCellOS(8,1,0,11)
    small.AddCellOS(8,12,0,1)
    
    'row 9
    small.AddCellOS(9,1,0,10)
    small.AddCellOS(9,11,0,2)
    
    'row 10
    small.AddCellOS(10,1,0,9)
    small.AddCellOS(10,10,0,3)
    
    'row 11
    small.AddCellOS(11,1,0,8)
    small.AddCellOS(11,9,0,4)
    small.AddLabel1(11,1,$".AddCellOS(1,0,0,0,8,8,8,"").AddCellOS(1,0,0,0,4,4,4,"")"$)
    
    
    'row 12
    small.AddCellOS(12,1,0,7)
    small.AddCellOS(12,8,0,5)
    
    page.Cell(2,1).AddComponent(small.ABMComp)
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
Hi: @Mashiane:AddCellOS not in MashSimpleDiagram.bas
To avoid confusion even with myself I renamed the method to AddCellRCOS for Row,Cell,Offset,Size. Here is the updated source code..

Explaining Offsets

B4X:
Sub Offsets
    Dim offset As MashSimpleDiagram
    offset.Initialize(page,"offset",12,12,62,True)
   
    offset.AddBox(1,1,12,1)
    offset.AddLabel1(1,1,$".AddCells12(1,"") i.e. 1R=12C"$)
   
    offset.AddCellRCOS(2,1,1,11)
    offset.AddLabel1(2,2,$".AddCellOS(1,1,1,1,11,11,11,"") i.e. 1+11=12"$)

    offset.AddCellRCOS(3,1,2,10)
    offset.AddLabel1(3,3,$".AddCellOS(1,2,2,2,10,10,10,"") i.e. 2+10=12"$)

    offset.AddCellRCOS(4,1,0,2)
    offset.AddCellRCOS(4,3,8,2)
    offset.AddLabel1(4,3,$".AddCellOS(1,0,0,0,2,2,2,"").AddCellOS(1,8,8,8,2,2,2,"")"$)
   
    offset.AddLabel1(5,4,$"i.e. 2+8+2=12"$)
   
    page.Cell(2,1).AddComponent(offset.ABMComp)
   
End Sub

offsets.png
 

Attachments

  • MashSimpleDiagram.bas
    9.6 KB · Views: 445

Mashiane

Expert
Licensed User
Longtime User
Yes,very good Thank you,How to change theme?
I didnt go that far my friend. It it is has some style properties but I havent been able to figure out how to make them work yet. It's a not so perfect component anyway, thus the willingness not to explore it any further. I will see what I can achieve tonight, perhaps will be lucky...
 

joulongleu

Active Member
Licensed User
Longtime User
Hi Mashiane: Thank you all,I find the SimpleDiagram-0.2.css , can change color
as follows:
svg.simple-diagram .box {
fill: rgb(255, 255, 255);
fill-opacity: 0.5;
stroke: #FFF;
stroke-width: 0px;
shape-rendering: crispEdges;
}
 
Last edited:
Top