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.

 

[Adam888]

Good~

 

[Adam888]

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

 

[derez]

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.

 

[Adam888]

Cool, You are right. It's a scrollview on it. Thank you~

 

[derez]

You should call size before the adding of the scrollview.

 

[Adam888]

Thank you~ It's good.

 

[derez]

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.

 

[derez]

Ver 7.1, see first post.

 

[rbghongade]

Simply beautiful and elegant too!

 

[alienhunter]

Hi ,

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

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

 

[derez]

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

 

[alienhunter]

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

thank you very much David

 

[tmf]

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]

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]

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]

Search for "guages" and you'll find more.

 

[LUIZ NAVARRO]

Deal all,

How I can enable or disable a circle seekbar?

Tks a lot,
Luiz

 

[derez]

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]

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:

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 :

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]

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:

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