B4A Library AMTileView 1

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.

#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.

Default Tiles

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

Tile with Badge

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

 

[Mashiane]

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

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, 0dip, 0dip, Activity.Width, Activity.Height)
End Sub



Sub tv_TileClicked(value As String)   
   Log(value)
End Sub

 

[Mashiane]

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

'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)

 

[Mashiane]

Live Tiles...

'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)

 

[Mashiane]

The templated tile...

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

 

[Mashiane]

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

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, 0dip, 0dip, Activity.Width, Activity.Height)

 

[asales]

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

 

[Mashiane]

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

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!

 

[asales]

The images is fixed with refresh, but I get this error when I try to compile the example .zip.

java.io.FileNotFoundException: /data/user/0/com.Mashy.TileView/cache/content.html: open failed: ENOENT (No such file or directory)

 

[Mashiane]

The images is fixed with refresh, but I get this error when I try to compile the example .zip.

java.io.FileNotFoundException: /data/user/0/com.Mashy.TileView/cache/content.html: open failed: ENOENT (No such file or directory)

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

 

[asales]

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

The latest version works fine.
Thanks!

 

[Mashiane]

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.

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

AMSlider and AMRangeSliders

AMRating (vertical / horizontal, variety of shapes)

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

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

 

[Mashiane]

The AMGroupButton 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

 

[Mashiane]

The AMRating 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

 

[Mashiane]

The AMRadialMenu 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(Activity, 0dip,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

 

[Mashiane]

The AMRadialSlider 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(Activity, 0dip,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

 

[Mashiane]

The AMSlider and AMRangeSlider

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

 

[MarcoRome]

Hey @Mashiane really fantastic

 

[Mashiane]

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.

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"

 

[MarcoRome]

Great