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.
Anyway, this is how this looks as posted in that article and here is the code of how it came into being...
In BuildPage
In ConnectPage
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.
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.
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
Last edited: