B4A Library AMTileView 1

Discussion in 'Additional libraries, classes and official updates' started by Mashiane, Jan 20, 2017.

  1. Mashiane

    Mashiane Expert Licensed User

    Ola

    Library & Example Download

    Latest Version: 113 - 13/04/2017

    The AMTileView Library is a WebView based library using HTML5 Components, JavaScript and CSS

    The following components are included

    • AMPage
    • AMRadialMenu
    • AMRadialSlider
    • AMSlider
    • AMGroupButton
    • AMRotator
    • AMTile
    • AMTileView
    • AMDialog
    • AMTab (partial)

    This library uses the WebViewExtras library to trap javascript events and pass them to your b4a application. I have written an article here about how this was wrapped up.

    I had initially thought of separate items, but due to these components being related, I consolidated everything into one library, the library including the necessary and required js and css files and are maintaining everything in this post.

    The library files are now suffixed by the version code, thus on the dropbox folder, download ...113.jar with its linked xml file if that is the latest version etc etc.

    Version 113 Additions (AMDialog and AMTab Video)

    Some events have been changed for consistency. These are still fired from the page class.

    Code:
    #Event: TileClicked (value As String)
    #Event: TabButtonClicked (value As String)
    #Event: RadialMenuClicked (value As String, childIndex as string)
    #Event: GroupButtonClicked (value As String)
    #Event: RadialSliderChanged (element as String, Value as string)
    #Event: RangeSliderChanged (element as String, Value as string)
    #Event: RatingChanged (element as string, value as string)
    #Event: DialogClosed (element as string, Value as string)
    #Event: DialogOpened (Value as string)
    #Event: Loaded ()
    #Event: RangeSliderRead(value1 as string, value2 as string)
    The AMTab button click events are trappable, just need to add images. A partial listview has also been added but will be beefed up for more functionality. The AMDialog events and returned values are also trappable, see source code. Also the AMMenu has been changed to AMRadialMenuItem.

    My initial Post

    Well, I'm kinda of excited right now. It's been a hectic two days, but finally here is it. I;m working on a book app that will contain a couple of books which will have text to speech. I wanted something better in terms of a dashboard, so I decided to explore some javascript components and came up with this.

    NB: The examples in the attached files are the latest on the use and functionality. Some changes were made for consistency..



    First, thanks for the WebViewExtras library that enables one to trap javascript commands and pass them to B4A.

    Known Issues:
    The tile with badge uses a 48px image.

    Small Tiles: These can now have a background and are clickable.

    small tiles.png


    Default Tiles

    defaulttiles.png

    Live Times: these can be times each running at each own's interval

    livetiles.png

    Tile with Badge

    badge.png

    You can indicate the background color of each page[/CODE]
     

    Attached Files:

    Last edited: Apr 13, 2017
  2. Mashiane

    Mashiane Expert Licensed User

    A simple example on how to create a tile...

    Code:
    Sub Globals
        
    'These global variables will be redeclared each time the activity is created.
        'These variables can only be accessed from this module.
        Private tv As AMTileView
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
        
    'Do not forget to load the layout file created with the visual designer. For example:
        tv.Initialize(Me, "tv",0dip,0dip,100%x,100%y)
       
        
    'METHOD 3: Add a badge
        'create a tile with a badge
        Dim badge As AMTile
        badge.Initialize(
    "badge","Inbox","notes.png",True)
        badge.SetBadge(
    "88","10","80")
        tv.AddTile(badge)
        tv.Render
        
    Activity.AddView(tv.asview, 0dip0dipActivity.Width, Activity.Height)
    End Sub



    Sub tv_TileClicked(value As String)   
       
    Log(value)
    End Sub
     
    MarcoRome and Johan Schoeman like this.
  3. Mashiane

    Mashiane Expert Licensed User

    The kids photo... there are various properties that you can set for the tile...

    Code:
    'METHOD 2 : use an image class and set properties
        'use an imageclass to add an image
        Dim tile As AMTile
        tile.Initialize(
    "kids""Kids""kids.jpg"True)
        tile.SetImageClass(
    "imageclass")
        
    'tile.ImagePosition = tile.EnumImagePosition.topright
        tile.AllowSelection = True
        
    'tile.BackgroundColor = "green"
        tile.TileSize = tile.EnumTileSize.large
        
    'tile.CaptionAlignment = tile.EnumCaptionAlignment.normal
        'tile.CaptionPosition = tile.EnumCaptionPosition.innertop
        tv.AddTile(tile)
     
    Johan Schoeman likes this.
  4. Mashiane

    Mashiane Expert Licensed User

    Live Tiles...

    Code:
    'METHOD 4: LiveTiles
        Dim lt As AMTile
        lt.Initialize(
    "livetile","People","",False)
        lt.SetAsLiveTile(lt.EnumTileSize.small, lt.EnumLiveTileType.slide , lt.EnumRenderMode.windows)
        lt.AddLiveTileImage(
    "Pretty""1.png"True)
        lt.AddLiveTileImage(
    "Car""r8-coupe.png"True)
        lt.AddLiveTileImage(
    "Kids""kids.jpg"True)
        tv.AddTile(lt)
       
        
    Dim lt As AMTile
        lt.Initialize(
    "livetilex","People","",False)
        lt.SetAsLiveTile(lt.EnumTileSize.medium, lt.EnumLiveTileType.carousel , lt.EnumRenderMode.windows)
        lt.AddLiveTileImage(
    "Pretty""1.png"True)
        lt.AddLiveTileImage(
    "Car""r8-coupe.png"True)
        lt.AddLiveTileImage(
    "Kids""kids.jpg"True)
        tv.AddTile(lt)
       
        
    Dim lt As AMTile
        lt.Initialize(
    "livetiley","People","",False)
        lt.SetAsLiveTile(lt.EnumTileSize.large, lt.EnumLiveTileType.slide , lt.EnumRenderMode.windows)
        lt.AddLiveTileImage(
    "Pretty""1.png"True)
        lt.AddLiveTileImage(
    "Car""r8-coupe.png"True)
        lt.AddLiveTileImage(
    "Kids""kids.jpg"True)
        tv.AddTile(lt)
     
    Johan Schoeman likes this.
  5. Mashiane

    Mashiane Expert Licensed User

    The templated tile...

    Code:
    tv.Initialize(Me, "tv",0dip,0dip,100%x,100%y)
        
    'METHOD 7: Google
        Dim ge As AMTile
        ge.Initialize(
    "ge","Windows Store","google.png",True)
        ge.TileSize = ge.EnumTileSize.wide
        ge.BackgroundColor = 
    "#3086e5"
        ge.SetWidthHeightFloat(
    "70px","70px","left")
        ge.SetTileMargin(
    "77px""white")
        ge.SetTemplateMargins(
    "35px""10px")
        ge.SetCaptionDescriptionSub(
    "Google Search""The world's information""Free")
        tv.AddTile(ge)
        tv.Render
     
    Johan Schoeman likes this.
  6. Mashiane

    Mashiane Expert Licensed User

    The small tiles, the first variable passed is the key for that tile to be passed to the click event..

    Code:
    tv.Initialize(Me, "tv",0dip,0dip,100%x,100%y)
        
    'METHOD 1 : Add Simple Image
        tv.AddSmallTile("rsa","RSA","rsa.png",True)
        tv.AddTileWithSize(
    "phone","Call","phone.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "calendar","Calendar","calendar.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "camera","Camera","camera.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "contacts","Contacts","contact.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "twitter","Twitter","twitter.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "clock","Clock","clock.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "map","Map","map.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "fb","Facebook","fb-logo.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "notes","Notes","notes.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "weather","Weather","weather.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "music","Music","music.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "mm","MindMap","mindmap.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "msg","Messages","messaging.png",True,tv.EnumTileSize.small)
        tv.AddTileWithSize(
    "set","Settings","setting.png",True,tv.EnumTileSize.small)
        tv.Render
        
    Activity.AddView(tv.asview, 0dip0dipActivity.Width, Activity.Height)
     
  7. asales

    asales Well-Known Member Licensed User

    Some files are missing from example code:
    content.html, 1.png, kids.jpg, r8-coupe.png, google.png
     
  8. Mashiane

    Mashiane Expert Licensed User

    Can you click the refresh button on the "Files" tab? for the pngs you can use your own pngs as that is a variable that can be changed. That should fix the it!
     
  9. asales

    asales Well-Known Member Licensed User

    The images is fixed with refresh, but I get this error when I try to compile the example .zip.
    Code:
    java.io.FileNotFoundException: /data/user/0/com.Mashy.TileView/cache/content.html: open failed: ENOENT (No such file or directory)
     
  10. Mashiane

    Mashiane Expert Licensed User

    Are you using the latest version of the library? Please use version 106 as this matter was resolved, use the same download link...
     
    asales likes this.
  11. asales

    asales Well-Known Member Licensed User

    The latest version works fine.
    Thanks!
     
    Mashiane likes this.
  12. Mashiane

    Mashiane Expert Licensed User

    What's New

    1. First, this library is based on JavaScript and Css components. Will write about that soon.
    2. The Radial Menu has been revamped and can be centered on screen.
    3. Added a AMRotator, AMGroupButton, AMRating, AMSlider, AMRadialSlider (these are the stable ones).

    AMRotator: Image slideshow.. you slide your images vertically / horizontally.

    rotator.png

    AMGroupButton - for now these work best in LandScape mode...

    group.png

    AMSlider and AMRangeSliders

    sliders.png

    AMRating (vertical / horizontal, variety of shapes)

    rating.png

    AMRadialSlider (you can use this to zoom in / zoom out)

    radial slider.png


    AMTileView - this is using the ios theme, looks better and more tiles per page..

    SmallTiles.png

     

    Attached Files:

    MarcoRome likes this.
  13. Mashiane

    Mashiane Expert Licensed User

    The AMGroupButton Code

    Code:
    Sub Globals
        
    'These global variables will be redeclared each time the activity is created.
        'These variables can only be accessed from this module.
        Private gb As AMGroupButton
        
    Private pg As AMPage
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
        
    'Do not forget to load the layout file created with the visual designer. For example:
        'Activity.LoadLayout("Layout1")
        Activity.Title = "AMGroupButton"
        
    'initialize a tile view
        pg.Initialize(Me,"pg")
        pg.AddToActivity(
    Activity,0dip,0dip,100%x,100%y)
        gb.Initialize(pg,
    "gb")
        gb.AddButton(
    "all""Apple""ios.png"True)
        gb.AddButton(
    "read""Android","android.png",True)
        gb.AddButton(
    "unread""Windows""windows.png"True)
        gb.AddToPage
        pg.Render
    End Sub

    Sub pg_GroupButtonClick(value As String)
       
    Activity.Title = value
    End Sub
     
    MarcoRome likes this.
  14. Mashiane

    Mashiane Expert Licensed User

    The AMRating Code

    Code:
    Sub Globals
        
    'These global variables will be redeclared each time the activity is created.
        'These variables can only be accessed from this module.
        Private rating As AMRating
        
    Private pg As AMPage
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
        
    'Do not forget to load the layout file created with the visual designer. For example:
        'Activity.LoadLayout("Layout1")
        Activity.Title = "AMRating"
        
    'initialize a tile view
        pg.Initialize(Me,"pg")
        pg.HasScrollPanel = 
    True
        pg.AddToActivity(
    Activity,0dip,0dip,100%x,100%y)
        rating.Initialize(pg,
    "rating")
        rating.SetPrecision(pg.EnumPrecision.Half)
        rating.SetValue(
    "1.5")
        rating.AddToPage
        
    'bl
        Dim bl As HTMLElement
        bl.Initialize(
    "","div")
        bl.AddContent(
    "<br><br>")
        pg.AddElement(bl)
        rating.Initialize(pg,
    "rating1")
        rating.SetPrecision(pg.EnumPrecision.Full )
        rating.SetValue(
    "2")
        rating.shape = pg.EnumShape.heart
        rating.orientation = pg.enumorientation.vertical
        rating.maxvalue = 
    7
        rating.SetValue(
    2)
        rating.AddToPage
        
        pg.Render
    End Sub

    Sub pg_RatingChange(element As String, value As String)
        
    'show the name of the menu selected
        'value returns the index of the selected item
        Activity.Title = element & ", " & value
    End Sub
     
  15. Mashiane

    Mashiane Expert Licensed User

    The AMRadialMenu Code

    Code:
    Sub Globals
        
    'These global variables will be redeclared each time the activity is created.
        'These variables can only be accessed from this module.
        Private rm As AMRadialMenu
        
    Private pg As AMPage
        
    Private renderMode As String
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
        
    'Do not forget to load the layout file created with the visual designer. For example:
        'Activity.LoadLayout("Layout1")
        Activity.Title = "AMRadialMenu"
        pg.Initialize(Me, 
    "pg")
        pg.addtoActivity(
    Activity0dip,0dip,100%x,100%y)
        rm.Initialize(pg, 
    "rm","settings.png""windowsback.png"True)
        
    'center the radial menu on the page
        rm.Position = rm.EnumRadialMenuPosition.none
        
    'rm.Position = rm.EnumRadialMenuPosition.righttop
        'rm.enableAnimation = False
        'rm.BackgroundColor = "red"
        rm.renderMode = renderMode  
        
    'rm.Radius = "100"
        'rm.renderMode = pg.EnumRenderMode.android
       
        
    'add individual menu items
        rm.AddMenuItem("google""Google""""google.png"True)
        rm.AddMenuItem(
    "music""Music",  """music.png"True)
        rm.AddMenuItem(
    "direction""Direction""""map.png"True)
        rm.AddMenuItem(
    "message""Message""300""messaging.png"True)
        rm.AddMenuItem(
    "mindmap","Mind Map","","mindmap.png"True)
        rm.AddMenuItem(
    "camera""Camera""5""camera.png"True)
        rm.AddMenuItem(
    "map""Map","","map.png"True)
        rm.AddMenuItem(
    "twitter""Twitter","","twitter.png"True)
        rm.Addtopage
        pg.Render
        
    Activity.AddMenuItem3("IOS""cmdIOS",LoadBitmap(File.DirAssets,"ios.png"),True)
        
    Activity.AddMenuItem3("Flat""cmdFlat",LoadBitmap(File.DirAssets,"flat.png"),True)
        
    Activity.AddMenuItem3("Android""cmdAndroid",LoadBitmap(File.DirAssets,"android.png"),True)
        
    Activity.AddMenuItem3("Windows""cmdWindows",LoadBitmap(File.DirAssets,"windows.png"),True)
    End Sub

    Sub cmdIOS_click
        rm.SetRenderMode(pg.EnumRenderMode.ios7)
        renderMode = pg.EnumRenderMode.ios7
        
    Activity.Title = "IOS7"
        rm.show 
    End Sub

    Sub cmdFlat_click
        rm.SetRenderMode(pg.EnumRenderMode.flat) 
        renderMode = pg.EnumRenderMode.flat
        
    Activity.Title = "Flat"
        rm.show
    End Sub

    Sub cmdAndroid_click
        rm.SetRenderMode(pg.EnumRenderMode.android)
        renderMode = pg.EnumRenderMode.android
        
    Activity.Title = "Android"
        rm.show
    End Sub

    Sub cmdWindows_click
        rm.SetRenderMode(pg.EnumRenderMode.windows)
        renderMode = pg.EnumRenderMode.windows
        
    Activity.Title = "Windows"
        rm.show
    End Sub

    Sub pg_MenuClicked(value As String, childIndex As String)
        
    'show the name of the menu selected
        'value returns the index of the selected item
        Log(value)
        
    Log(childIndex)
        
    Dim menu As String = rm.GetID(value)
        
    'update the badge
        rm.UpdateBadgeValue(value,value)
        
    Activity.Title = menu
    End Sub

    Sub pg_Loaded()
        
    Log("Loaded...")
        rm.Show
    End Sub
     
    MarcoRome likes this.
  16. Mashiane

    Mashiane Expert Licensed User

    The AMRadialSlider Code

    Code:
    Sub Globals
        
    'These global variables will be redeclared each time the activity is created.
        'These variables can only be accessed from this module.
        Private rs As AMRadialSlider
        
    Private pg As AMPage
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
        
    'Do not forget to load the layout file created with the visual designer. For example:
        'Activity.LoadLayout("Layout1")
        Activity.Title = "AMRadialSlider"
        pg.Initialize(Me, 
    "pg")
        pg.addtoActivity(
    Activity0dip,0dip,100%x,100%y)
        rs.Initialize(pg, 
    "rs","50")
        rs.labelspace = 
    "50"
        rs.rendermode = pg.EnumRenderMode.ios7
        rs.AddTick(
    30)
        rs.AddTick(
    35)
        rs.AddTick(
    40)
        rs.AddTick(
    45)
        rs.AddTick(
    50)
        rs.AddTick(
    55)
        rs.AddTick(
    60)
        rs.AddTick(
    65)
        rs.Addtopage
        pg.Render
        
    Activity.AddMenuItem3("Open","cmdOpen"LoadBitmap(File.DirAssets,"settings.png"),True)
    End Sub

    Sub cmdOpen_Click
        rs.show
    End Sub

    Sub Activity_Resume

    End Sub

    Sub Activity_Pause (UserClosed As Boolean)

    End Sub


    Sub pg_RadialSliderChange(element As String, value As String)
        
    'show the name of the menu selected
        'value returns the index of the selected item
        Activity.Title = element & ", " & value
    End Sub

    Sub pg_Loaded()
        
    Log("Loaded...")
        rs.Show
    End Sub
     
  17. Mashiane

    Mashiane Expert Licensed User

    The AMSlider and AMRangeSlider

    Code:
    Sub Globals
        
    'These global variables will be redeclared each time the activity is created.
        'These variables can only be accessed from this module.
        Private slider As AMSlider
        
    Private rslider As AMRangeSlider
        
    Private pg As AMPage
    End Sub

    Sub Activity_Create(FirstTime As Boolean)
        
    'Do not forget to load the layout file created with the visual designer. For example:
        'Activity.LoadLayout("Layout1")
        Activity.Title = "AMSlider"
        
    'initialize a tile view
        pg.Initialize(Me,"pg")
        pg.AddToActivity(
    Activity,0dip,0dip,100%x,100%y)
        
    Dim el As HTMLElement
        el.Initialize(
    "","div")
        el.AddContent(
    "<br><br>")
        pg.AddElement(el) 
        
    slider.Initialize(pg,"slider""1000","0","200","100")
        
    slider.AddToPage
        el.Initialize(
    "","div")
        el.AddContent(
    "<br><br>")
        pg.AddElement(el)
        rslider.Initialize(pg,
    "rslider","2000","0","200","100")
        rslider.SetStartEnd(
    "300","1500")
        rslider.ShowValues = 
    True
        rslider.addtopage
        pg.Render
        
    Activity.AddMenuItem3("Values""cmdValues",  LoadBitmap(File.DirAssets,"inbox.png"),True)
    End Sub

    Sub Activity_Resume

    End Sub

    Sub cmdValues_Click
        rslider.GetValues
    End Sub

    Sub Activity_Pause (UserClosed As Boolean)

    End Sub

    Sub pg_RangeSliderChange(element As String, value As String)
        
    'show the name of the menu selected
        'value returns the index of the selected item
        Activity.Title = element & ": " & value
    End Sub

    'result of getvalues
    Sub pg_RangeSliderRead(value1 As String, value2 As String)
        rslider.StartValue = value1
        rslider.EndValue = value2
        
    Activity.Title = value1 & "," & value2
    End Sub

    Sub pg_Loaded()
        rslider.refresh
    End Sub
     
  18. MarcoRome

    MarcoRome Expert Licensed User

    Mashiane likes this.
  19. Mashiane

    Mashiane Expert Licensed User

    Version 110: RadialMenu Updates..

    1. Ability to change the arrow color
    2. Ability to change the badge background color
    3. Ability to change the image height/width
    4. Ability to change text background color and size
    5. Ability to change the nested active/child color
    6. Ability to change the outer circle color.

    Code:
    rm.Radius = 200
        rm.ArrowColor = 
    "teal"
        rm.ItemBackgroundColor = 
    "teal"
        rm.BadgeCircleColor = 
    "orange"
        
    'rm.ImageHeight = "32px"
        'rm.ImageWidth = "32px"
        'rm.TextSize = rm.EnumTextSize.smaller
        rm.TextColor = "white"
        rm.NestedActiveColor = 
    "transparent"
        rm.NestedChildrenColor = 
    "transparent"
        rm.OuterCircleColor = 
    "transparent"
    RadialMenu.png
     
    eps and MarcoRome like this.
  20. MarcoRome

    MarcoRome Expert Licensed User

    Great :D
     
    Mashiane likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice