B4A Library [Class] Vertical, Horizontal and Circle Seekbars

Two things that are missing in the core Seekbar -
1. Vertical Seekbar
2. Control of the colors.

the Attached Vertical seekbar class has both. I added a horizontal seekbar class to be compatible with the vertical.

The two classes are independent.

In the photo you can see the core seekbar as well for comparison.

Edit: Version 2 - correction of mistake + addition of caret size method.
Edit: Version 3 - improvement of looks - the caret is shown completely at the edges.
Edit: Version 4 - uses the Double Gradient Drawable class [Class] Double Gradient Drawable and the number of views and complexity is reduced meanungfully.
Edit: Version 5 - without the gradient class.
Edit: version 6 - works as a custom view in the designer (b4a ver. 2.71). use the "text" property to define the max value of the bar. If you want to define the view by code, use "initialize", then "CodeCreateView" . In the example, Vbarcv is defined by code and Hbarcv by the designer as customview.
Edit: Ver. 6.1 - ver 6 worked nicely until I tried it on a different size device... Now it works. The example includes "size" class to adapt.

Edit: Ver 7 includes a CircleSeek Class. Like the Vertical and Horizontal bars, it can be defined as custom view in the designer or by code. If defined by designer put MaxValue as Text and True as Tag if you want to have the knob. If defined by code, call CodeCreateView right after initialization.
The picture shows one circle with colors set and the lower is with default colors and knob.
Important: you must call setValue at least once for the view to be displayed.

Edit: Ver 7.1 adds another display option - with long arrow as the knob (see photo). Selection done between 3 options to put as Tag in the custom view :- 0 -no knob, 1 - short knob, 2-long knob , or in CodeCreateView call as WithKnob.

Edit: Version 7.2 - circlebar allows for small value changes although the display is with no fractions (changing some values to double).
Edit: Version 7.3 - circlebar looks fine on high resolution devices (I didn't notice but it was bad before...), by increasing the lines density.
Edit: Ver 8.0 now has min value and max value. Also additional class named CicrleScale is added to the group, with vintage kind of display - hand and scale. There is also a possibility to add a shadow to the hand (like in the lower object) using my shadow class which is attaced as well.
 

Attachments

  • Circle7.1.png
    Circle7.1.png
    100.1 KB · Views: 2,912
  • circlscale.png
    circlscale.png
    48.5 KB · Views: 2,093
  • Seekbars_8.zip
    14 KB · Views: 1,763
  • circleScale.zip
    18.5 KB · Views: 1,148
Last edited:

Adam888

Member
Licensed User
Longtime User
Hello, My screen size is 1024x768
It show me an error. Is the size problem?
 

Attachments

  • err.jpg
    err.jpg
    87.4 KB · Views: 274
Last edited:

derez

Expert
Licensed User
Longtime User
It is not a problem of the size, it is a problem of some view that is not initialized or not added to a parent.
 

derez

Expert
Licensed User
Longtime User
Ver 7 includes a CircleSeek Class. Like the Vertical and Horizontal bars, it can be defined as custom view in the designer or by code. If defined by designer put MaxValue as Text and True as Tag if you want to have the knob. If defined by code, call CodeCreateView right after initialization.
The picture in the first post shows one circle with colors set and the lower is with default colors and knob.
Important: you must call setValue at least once for the view to be displayed.
 
Last edited:

alienhunter

Active Member
Licensed User
Longtime User
Hi ,

i got a problem , i use +1 the seek bar doesnt move anymore just once

B4X:
If p.Tag>10 AND p.Tag <16 Then
cc1.Value=cc1.Value+1
End If
see seek.jpg

but if i cc1.Value=cc1.Value+2 there is a problem it is moving only +1
see seek2.jpg
any clues ?

thanks AH
 

Attachments

  • seek.jpg
    seek.jpg
    4.4 KB · Views: 304
  • seek2.jpg
    seek2.jpg
    3.9 KB · Views: 295

derez

Expert
Licensed User
Longtime User
You are right, this is because some variables are defined as int.
I changed Maxv , position and Value to double, now it works.
first post updated to 7.2
 
Last edited:

tmf

Member
Licensed User
Longtime User
I am wondering how to speed up this class, I defined an array of 9 of them and even updating them 2 times a second causes the software to slow down. I even went into the code and coded it for 4 loops of circle drawing instead of the 10 that was default, this I thought would have a large impact, but it did not seem to do much at all.... any thoughts?

Thanks!
 

derez

Expert
Licensed User
Longtime User
Are you using the bars as gauges ? The intended use is as a controller - to be able to change the value using your finger, and that doesn't require such a rate of update. I you are after a gauge - there are other in the forum which are probably more suited for the job.
I believe you refer to the circular bar, since there is the drawing of circles to get the gradient effect, which in the linear bars is simpler because I use drawables. Try working with them , they should work faster.
 

tmf

Member
Licensed User
Longtime User
Yes sorry I am using them as a guage and not an input "device" so I can see the issue.... I can only find a library called jfxtraguages but its for B4J not B4A.... do you know of any others?
 

derez

Expert
Licensed User
Longtime User
Like most of the views classes, they use "AsView" method to define the base view.
So, if you have a cs as circleseek object, use cs.AsView.Enabled
 

aeropic

Active Member
Licensed User
Longtime User
Hi David,

It's an awesome class which brings a touch of "class" to our applications. ;)
Many thanks and congratulations for this.

I'm using the circleseek (I love them)... I get a weird problem when using them from the designer

If I script the designer (from your example) with:
B4X:
cs.width = 20%x
cs.height = 20%x

there is no effect on the size of the circleseek...

At the opposite defining them from code seems to work fine :

B4X:
cs2.Initialize(Me,"cs2")
cs2.CodeCreateView(31%x,31%x,100, cs2.SHORT_KNOB)
Activity.AddView(cs2.AsView,20%x,60%y,40%x,40%x)

Is this normal ?

Thanks
Alain
 

derez

Expert
Licensed User
Longtime User
If I change the commented line it works like you want, otherwise you change only the base size but not Cbase which is the common base to both ways of definition:
B4X:
Private Sub DesignerCreateView(base As Panel, Lbl As Label, Props As Map)'ignore
    S = Min(Lbl.Width, Lbl.Height)
    ds = 0.005 * S
    Cbase.Initialize("Cbase")
'    base.AddView(Cbase,0,0,S,S)
     base.AddView(Cbase,0,0,base.width,base.Height)
    maxv = Lbl.text
    Cwith =  Lbl.Tag
    ContinueCreation
End Sub
 
Top