B4A Class Input Slider Class

I'm not quite sure where to post this, but while testing the beta, I came up with an input slider class that allows simple use of images to create interesting sliders similar to the seek bars we are used to.

I thought it may be useful to share as it's using a few of the new functions (all without problems I should say). And obviously you can tailor it to your needs.

If you get a chance to have a look, let me know how it works for you.

V1.00 attached

Steve

@Erel. perhaps we should have a new section in the forum for shared classes/code modules as I think these will far outnumber libraries in the future.

19/6/2012 - V1.01 attached
07/02/2014 V1.02 - Added released callback, called when the slider is released.
07/02/2014 Added InputSlider CustomView V1.00 (iscv.zip) see post #7
15/02/2015 Added InputSlider CV1-1 minor updates required for MidiSystem, Download and compile to library.
NOTE: This will break existing code as it uses get/setters for most variables, so if you have an existing app, use the old version. If you have compiled it to a library, give this one a different name before compiling.

3/4/2017 - InputSlider1-2 : Added a Steps options to allow discrete value changes. see post #22
 

Attachments

  • is.zip
    12 KB · Views: 863
  • is1-02.zip
    12.2 KB · Views: 559
  • iscv.zip
    14.1 KB · Views: 578
  • inputslidercv1-2.zip
    15.3 KB · Views: 462
Last edited:

Erel

B4X founder
Staff member
Licensed User
Longtime User
The InputSlider class is really nice.
The type of the callback module variable should be Object, not String.

This allows you to use Me instead of specifying the name:
B4X:
is1.Initialize(Me,"is1",Activity,10dip, 10dip,300dip,26dip)
It also allows you to initialize this object from a different class (using Me again).
For example I can create a class that changes the volume and uses your slider for the UI. So the slider will be an instance variable of the VolumeChanger class.
 

stevel05

Expert
Licensed User
Longtime User
The type of the callback module variable should be Object, not String.

This allows you to use Me instead of specifying the name:

Thanks Erel, that makes sense now, I did try using Activity but it failed.

Updated to V1.01 in original post.
 

stevel05

Expert
Licensed User
Longtime User
Erel, could you move this thread to the Libraries/classes forum.

Thanks

Steve
 

stevel05

Expert
Licensed User
Longtime User
Created InputSlider as a CustomView (see post #1). Add add it via designer and or in code.

To add in code call the Initialize and setup methods.

If there are image files in the files directory with the names sliderbg.jpg, sliderbgv.jpg and sliderbtn.png they will automatically be loaded. Or you can add other images using the methods available. Includes the release callback.
 

JordiCP

Expert
Licensed User
Longtime User
Hi Stevel05! I was just updating a post to state that I use this class (a little bit modified) in the new version for my app, and saw this update!

I still use the previous version, will have a look at the new when I can.

Don't know if it may be useful for others (in my case it was), but changed it to support double or triple buttons. If you want I can send you the changes (after cleaning my code)
 

stevel05

Expert
Licensed User
Longtime User
Yes, please do, the more options the better:)
 

JordiCP

Expert
Licensed User
Longtime User
Hi Stevel05

I attach your 1.02 version and example, with the modifications I used for my app (and tried to clean)

Basically there are 3 major differences

* Added support for up to three pointers (when more than one, at this moment it will load its own pointers, just as an example)
* Option to accepts only discrete values: when set, the slider will only take integer values amb move accordingly
* If you load a Null backgroundImage, it will try to draw something nice (I say "try" because I am not good at design, but the code is there and can be modified)

The code is pretty much the same (added params to the Initialize method, added callbacks and setting methods for the additional pointers when there is more than one) and is still compatible with the methods and callbacks for the standard case.

The only thing to remark is that I changed the internal coordinate system so that the calculations would be done from the center of the pointers (sorry, I use to do such things), so this part is different (but also correct)



Hope it can be useful
 

Attachments

  • is-102-modified.zip
    32.6 KB · Views: 457

DaveW

Active Member
Licensed User
Longtime User
Thank you JordiCP, a range slider was just what I was looking for!
 

DaveW

Active Member
Licensed User
Longtime User
Steve & Jordi,

I have taken the liberty of making a version 1.03 of the input slider. This one does not use any external graphics, the pointers are all drawn in code to emulate the normal Android sliders (such as you see when changing the volume etc.). The only difference from the default Android version is you can set the size and color of the pointers. If color is set to -1 the default blue color is used. The pointers are drawn to fit the the view's height / width, line widths are also scaled accordingly. Disabled, Pressed and Focused modes are not supported, just the Normal appearance.
 

Attachments

  • InputSlider2.zip
    10.5 KB · Views: 351
  • inputslider2.png
    inputslider2.png
    17.2 KB · Views: 610

stevel05

Expert
Licensed User
Longtime User
Thanks Dave, more options:)
 

DaveW

Active Member
Licensed User
Longtime User
Got a bit inspired after lunch :). Added Disabled and Pressed modes to the slider.
 

Attachments

  • InputSlider104.zip
    11.3 KB · Views: 321
  • inputslider3.png
    inputslider3.png
    19 KB · Views: 391

DaveW

Active Member
Licensed User
Longtime User
... Still looking for any way to avoid real work...
I have converted the code to work as a Custom View. I have also added a 'Reverse' property. This will draw the line from the slider to the bottom or right edge of the view. The readout values are also reversed to match. This only has an effect on the single slider version, double and triple sliders always draw their line between the end sliders.

The zip file contains the class module and a demo program that illustrates most aspects of the view (I hope).

I should point out that all the changes I have made are cosmetic only. The guts of the module that do the clever stuff of sensing and reacting to touches is 100% from the original class created by Steve!
 

Attachments

  • screenshot 105.jpg
    screenshot 105.jpg
    19.7 KB · Views: 499
  • InputSlider105.zip
    13.1 KB · Views: 435

stevel05

Expert
Licensed User
Longtime User
Yes, you should be able to do that using the custom view versions. Unless I misunderstand your question.
 
Top