B4J Tutorial [ABMaterial] Creating the diagram..

Discussion in 'B4J Tutorials' started by Mashiane, Apr 17, 2018.

  1. Mashiane

    Mashiane Expert Licensed User

    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

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

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

    :)
     

    Attached Files:

    Last edited: Apr 17, 2018
    Widget, alwaysbusy, Anser and 3 others like this.
  2. Mashiane

    Mashiane Expert Licensed User

    Turning the Grid on, shows the grid and the AddNumbers methods puts the RCs. These can be circles / squares.

    GridOn.png
     
    amaxco and joulongleu like this.
  3. joulongleu

    joulongleu Member

    Hi:Mashian:wow very good,Can add click event ? thank you.
     
  4. Mashiane

    Mashiane Expert Licensed User

    Will try, but cannot promise, so far the interactive property is faulty directly from the source.
     
    joulongleu likes this.
  5. Mashiane

    Mashiane Expert Licensed User

    Grid Refresher Source Code

    ABMGrid.png

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

    joulongleu Member

  7. Mashiane

    Mashiane Expert Licensed User

    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

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

    Attached Files:

    joulongleu likes this.
  8. joulongleu

    joulongleu Member

    Yes,very good Thank you,How to change theme?
     
  9. Mashiane

    Mashiane Expert Licensed User

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

    joulongleu Member

    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: Apr 19, 2018
    Mashiane likes this.
Loading...