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: 
			
		
	
							 
				 
 
		 
 
		 
 
		 
 
		 
 
		 
 
		