Android Question Convert this code to B4X Code

[walterf25]

Hi everyone, I am working on a B4X custom view, this is the second time I ever try to do this, I have taken several pieces of code from various places, the over all goal is to get something like this library that can be used for both B4A and B4i, so far I have everything working fine but only for B4A, that's why I need you guy's expert help to convert the following code to B4X code.

private Sub MyCorner(Color As Int, Radius As Int) As Bitmap
    Dim B As Bitmap
    Dim R As Int = 80dip+20dip/2''mBase.Height/2
    Dim Gr As Int = 80dip + 20dip'' mBase.Height
    Dim Rect1 As Rect
    Dim mpath As Path
    Dim RectF As JavaObject
  
    RectF = RectF.InitializeNewInstance("android.graphics.RectF", Null)
    B.InitializeMutable(Gr,Gr)
    Rect1.Initialize(R/4, R, Gr-(R/4), Gr)
  
    C.Initialize(Ball)
    Dim x0 As Float = C.TargetView.GetBitmap.Width/2.0
    Dim y0 As Float = C.TargetView.GetBitmap.Height - Radius / 3.0
  
    mpath.Initialize(x0, y0)
    Dim jo As JavaObject
    jo = mpath
    jo.RunMethod("moveTo", Array As Object(x0, y0))

    Dim x1 As Float = C.TargetView.GetBitmap.Width / 2.0 - Sqrt(3) / 2.0 * Radius
    Dim y1 As Float = 3 / 2 * Radius
    jo.RunMethod("quadTo", Array As Object((x1 - 2*Density), (y1 - 2*Density), x1, y1))
    Dim f1, f2, f3, f4 As Float
    f1 = C.TargetView.GetBitmap.Width / 2.0 - Radius
    f2 = 0
    f3 = C.TargetView.GetBitmap.Width / 2.0 + Radius
    f4 = 2.0 * Radius
    RectF.RunMethod("set", Array As Object(f1, f2, f3, f4))
    rect.Initialize(f1 + 8dip, 10dip, C.TargetView.GetBitmap.Width - 20dip, 35dip)
    Dim f5, f6 As Float
    f5 = 150
    f6 = 240
    jo.RunMethod("arcTo", Array As Object(RectF, f5, f6))
    jo.RunMethod("close", Null)
    C.DrawPath(mpath, Color, True, 1)
    C.DrawRect(rect, Colors.RGB(164, 212, 232), True, 20dip)

    Return C.TargetView.GetBitmap
End Sub

The result from this code is the following image below:

The small bubble on top of the slider indicator gets created with the above code, I took some parts from this library created by @Star-Dust and some other parts from @klaus Xlimitbar demo here, thanks to both of these guys for their work, it definitely helped me to accomplish this, however I still need help to convert the above code to B4X so that I can get this working for B4i.

I am including the project for anyone to contribute if anyone else feels like adding their 2 cents, essentially what I would like is to convert this entire code so that it can be used on B4A and B4i and B4J if needed as well, as you guys can see most of it is pretty much done except for the part that is entirely just for Android which uses the JavaObject library, I know there's a B4XPath and B4XCanvas libraries but I can't figure out how to do the arcTo, or quadTo functions using the B4XPath.

Any ideas how to?

Thanks in advance everyone.

Walter

 

[klaus]

I have begun to look at your project and have some remarks.
- The height of the bar is very small, it is difficult to get it move, the position of the finger must be very accurate on the line.
- When the user sets a different height, the lines and the circle are not drawn well.
- You use B4A objects, they should be converted into B4XViews to be cross-platform.
- The display could be done a bit different than how you did it.
Do you allow me to make modifications ?

 

[walterf25]

I have begun to look at your project and have some remarks.
- The height of the bar is very small, it is difficult to get it move, the position of the finger must be very accurate on the line.
- When the user sets a different height, the lines and the circle are not drawn well.
- You use B4A objects, they should be converted into B4XViews to be cross-platform.
- The display could be done a bit different than how you did it.
Do you allow me to make modifications ?

Hi Klaus, thanks for the comments, yes I am aware of all those points you mentioned, I wasn't done with it yet ? converting all the other objects to B4xViews is very easy, but please go ahead and modify away, I will be sharing this custom view with the forums anyway.

Thanks Klaus.

Walter

 

[klaus]

Here you are.

I converted your project into a B4XPages project. It is much easier to develop cross-platform projects.

Modifications:
1. I changed the Ball view from a Label into a B4XView (Panel) to be able to draw onto it.
You used a Label and Reflection to draw onto it which is B4A specific.
The Ball view has a fixed size.
2. I replaced the routine MyCorned by new InitBall routine which draws the marker.
It is an oval with a triangle, does not look too bad. Yours was more sophisticated with quadratic curves.
What i found 'strange' is that you defined a square view with 80dip x 80dip and display it afterwards with a size of 50dip x 55dip.
I set it directly to 35dip x 50dip which looks almost like yours, but a fixed size.
3. I removed the firsttrack view, which represents the background line, and draw this line directly onto the Panel in setValue.
4. I removed the thumb view (the circle) and draw the circle directly with the front line in setValue.
This implies that I draw the lines not from the beginning of the Panel til its end, but with an offset which is the circle radius, maybe you could set it to the half of the height.
5. In the setValue routine, i removed the second parameter Click, it is not used.
You used setValue and getValue the wrong way. Routines with lower-case set and get prefixes are supposed to be property routines and the setValue should have only one parameter, you had two. If you really want the Click parameter you need to change it.
6. I removed all original not used code and left only the new. I found that keeping all the code used and the commented not used code more difficult to read.
It is easy to compare having both projects side by side.

As the Ball view is added onto the parent view of the BubbleSlider, be aware that depending on the parent view the Ball might not be displayed or only partly.
To see this, move the BubbleSlider, in the Designer, to almost on top and you see that the Ball will be outsides the visible part.

Well, i played a bit more with your project and did not just answer your question in the first post.

Screenshot:

Attached the B4XPages project.
Tested with B4A and B4J. Unfortunately, i have not tested it with B4i, i have currently problems with it.

EDIT: New version, also tested with B4i in the next post.

 

[klaus]

I have tested it now also with B4i, and made some minor modifications.
Attached the latest project.

 

[walterf25]

I have tested it now also with B4i, and made some minor modifications.
Attached the latest project.

Wow, thank you so much Klaus,

Here you are.

I converted your project into a B4XPages project. It is much easier to develop cross-platform projects.

Modifications:
1. I changed the Ball view from a Label into a B4XView (Panel) to be able to draw onto it.
You used a Label and Reflection to draw onto it which is B4A specific.
The Ball view has a fixed size.
2. I replaced the routine MyCorned by new InitBall routine which draws the marker.
It is an oval with a triangle, does not look too bad. Yours was more sophisticated with quadratic curves.
What i found 'strange' is that you defined a square view with 80dip x 80dip and display it afterwards with a size of 50dip x 55dip.
I set it directly to 35dip x 50dip which looks almost like yours, but a fixed size.
3. I removed the firsttrack view, which represents the background line, and draw this line directly onto the Panel in setValue.
4. I removed the thumb view (the circle) and draw the circle directly with the front line in setValue.
This implies that I draw the lines not from the beginning of the Panel til its end, but with an offset which is the circle radius, maybe you could set it to the half of the height.
5. In the setValue routine, i removed the second parameter Click, it is not used.
You used setValue and getValue the wrong way. Routines with lower-case set and get prefixes are supposed to be property routines and the setValue should have only one parameter, you had two. If you really want the Click parameter you need to change it.
6. I removed all original not used code and left only the new. I found that keeping all the code used and the commented not used code more difficult to read.
It is easy to compare having both projects side by side.

As the Ball view is added onto the parent view of the BubbleSlider, be aware that depending on the parent view the Ball might not be displayed or only partly.
To see this, move the BubbleSlider, in the Designer, to almost on top and you see that the Ball will be outsides the visible part.

Well, i played a bit more with your project and did not just answer your question in the first post.

Screenshot:

View attachment 138675

Attached the B4XPages project.
Tested with B4A and B4J. Unfortunately, i have not tested it with B4i, i have currently problems with it.

EDIT: New version, also tested with B4i in the next post.

Thank you Klaus I can see you had some fun, thanks for all your comments.

As I mentioned on my first post, I am not an expert on creating custom views, I can wrap a Java library without any issues, I guess I should spend some more time playing around creating custom views to understand better.

A lot of the code on my first try was borrowed from other parts, but yes I was aware that I needed to clean it up. I have looked deeply at your code and you make it look so easy, your code is very neat and short and very easy to read. Again thanks for your wisdom I definitely need to find some more time to play with custom views.

Cheers,
Walter