Wish Add image borders radius parameter in SMM (B4XImageView)

TILogistic

Expert
Licensed User
Longtime User
Sometimes I want to see images in SMM with rounded corners and I have to resort to external routines to do it.

And reviewing the SMM code, I see the feasibility of adding the image corner radii parameter (B4XImageView).

Greetings

SMMViews:
Public Sub AddMedia(RequestSet As SMMediaRequestSet, MEDIA As SMMedia, Request As SMMediaRequest)
    #if SMM_DEBUG
    Log("AddMedia: " & MEDIA.Meta.Key)
    #End If
    Dim Target As B4XView = RequestSet.Target
    CancelRequest(Target)
    Dim ViewType As Int = MediaTypeToViewType(MEDIA.Meta.MediaType, Request)
    Dim sm As SMMView = GetView(ViewType, MEDIA.Meta.Key)
    Target.Color = Request.Extra.GetDefault(mManager.REQUEST_BACKGROUND, mManager.DefaultBackgroundColor)
    TargetToSMMViews.Put(Target, sm)
    Target.AddView(sm.mBase, 0, 0, Target.Width, Target.Height)
    Dim FadeAnimation As Int = Request.Extra.GetDefault(mManager.REQUEST_FADE_ANIMATION_DURATION, mManager.DefaultFadeAnimationDuration)
    If FadeAnimation > 0 Then
        sm.mBase.Visible = False
        sm.mBase.SetVisibleAnimated(FadeAnimation, True)
    Else
        sm.mBase.Visible = True
    End If
    Select ViewType
        Case VIEW_TYPE_B4XIMAGEVIEW
            Dim x As B4XImageView = sm.CustomView
            x.RoundedImage = Request.Extra.GetDefault(mManager.REQUEST_ROUNDIMAGE, False)
            x.ResizeMode = Request.Extra.GetDefault(mManager.REQUEST_RESIZE_MODE, mManager.DefaultResizeMode)
            x.Bitmap = MediaToBitmap(MEDIA)
            #if B4A
            If mManager.IsWebPAnimated (MEDIA) Then
                Dim decoder As JavaObject
                Dim Drawable As JavaObject = decoder.InitializeStatic("android.graphics.ImageDecoder").RunMethod("decodeDrawable", Array(MEDIA.Media))
                x.mBase.GetView(0).As(View).Background = Drawable
                If GetType(Drawable) = "android.graphics.drawable.AnimatedImageDrawable" Then
                    Drawable.RunMethod("start", Null)
                End If
            End If
            #End If
        Case VIEW_TYPE_GIFVIEW

example:

1.gif
 
Last edited:

TILogistic

Expert
Licensed User
Longtime User
Test attached.

Does not apply the border radius in the main panel if its value is specified with SetColorAndBorder(0, 0, 0, 30).

1708421355444.png

Note:
Looking at the B4XImageView code, the UpdateClip routine is applied without border radii, if the value (mCornersRadius) is not provided.

Using the external routine it works:
1708421588174.png
 

Attachments

  • B4JProject.zip
    20.7 KB · Views: 35

Erel

B4X founder
Staff member
Licensed User
Longtime User
Your solution is good.

Call this sub for the parent panel:
B4X:
Public Sub SetRectangleClip(pnl As B4XView, CornersRadius As Double)
    pnl.SetColorAndBorder(0, 0, 0, CornersRadius)
    #If B4J
    Dim Rectangle As JavaObject
    Dim cx = pnl.Width, cy = pnl.Height As Double
    Rectangle.InitializeNewInstance("javafx.scene.shape.Rectangle", Array(cx, cy))
    If CornersRadius > 0 Then
        Rectangle.RunMethod("setArcHeight", Array(CornersRadius))
        Rectangle.RunMethod("setArcWidth", Array(CornersRadius))
    End If
    pnl.As(JavaObject).RunMethod("setClip", Array(Rectangle))
    #Else If B4A
    pnl.As(JavaObject).RunMethod("setClipToOutline", Array(CornersRadius > 0))
    #End If
End Sub
 

TILogistic

Expert
Licensed User
Longtime User
Is it feasible to add the (CornersRadius) parameter to SMM in future versions?

use them in the extras whenever you want

B4X:
    Extra.Put(SimpleMediaManager1.REQUEST_ROUNDIMAGE, False) 'Only Extras default False
    Extra.Put(SimpleMediaManager1.REQUEST_CORNERSRADIUSIMAGE, 30) 'Only Extras default 0
 
Last edited:

TILogistic

Expert
Licensed User
Longtime User
Your solution is good.

Call this sub for the parent panel:
B4X:
Public Sub SetRectangleClip(pnl As B4XView, CornersRadius As Double)
    pnl.SetColorAndBorder(0, 0, 0, CornersRadius)
    #If B4J
    Dim Rectangle As JavaObject
    Dim cx = pnl.Width, cy = pnl.Height As Double
    Rectangle.InitializeNewInstance("javafx.scene.shape.Rectangle", Array(cx, cy))
    If CornersRadius > 0 Then
        Rectangle.RunMethod("setArcHeight", Array(CornersRadius))
        Rectangle.RunMethod("setArcWidth", Array(CornersRadius))
    End If
    pnl.As(JavaObject).RunMethod("setClip", Array(Rectangle))
    #Else If B4A
    pnl.As(JavaObject).RunMethod("setClipToOutline", Array(CornersRadius > 0))
    #End If
End Sub

Yes, I have done what you say, applying the routine to the SMM container panel and others.

As shown in post:

B4X:
Sub CustomListView1_VisibleRangeChanged (FirstIndex As Int, LastIndex As Int)
    For Each i As Int In PreoptimizedCLV1.VisibleRangeChanged(FirstIndex, LastIndex)
        Dim Item As CLVItem = CustomListView1.GetRawListItem(i)
        Dim Data As TypeImageData = Item.Value
      
        Dim p As B4XView = xui.CreatePanel("")
        Item.Panel.AddView(p, 0, 0, Item.Panel.Width, Item.Panel.Height)
        p.LoadLayout("item")

        For x = 0 To 3
            Dim ItemParent As B4XView = p.GetView(x)
            Dim MediaPanel As B4XView = ItemParent.GetView(0)
            Dim MediaLabel As B4XView = ItemParent.GetView(1)

            MediaLabel.Text = Data.IndexOfFirstImage + x
            Dim URL As String =  $"https://picsum.photos/id/${Data.IndexOfFirstImage + x}/200/300.jpg"$
          
          
'            SimpleMediaManager1.SetMedia(MediaPanel,URL)
            SimpleMediaManager1.SetMediaWithExtra(MediaPanel, URL, "", Extra)

            SetRectangleClip(ItemParent, 30) 'Rectangle View (CornersRadius)
        Next
    Next
  
    'The purpose of this call is to find panels that are no longer in the views tree and cancel any ongoing request that is no longer relevant.
    'It also happens automatically from time to time but in this case, as many requests are sent frequently, it is better to force it to trim the cache.
    'Note that you need to add HU2_PUBLIC to the build configuration.
    SimpleMediaManager1.TrimMediaCache
End Sub

and fixes the image rounding error.
1708457743503.png
1708458592443.png
 
Last edited:
Top