High fidelity slider

[ewpatton]

Describe the desired feature

The Slider component maps the min/max values into the range 0-100, so if you have a range that does not easily map into that range the values reported can be off. For example, if you have min/max of 0, 200, the slider will only report values in steps of 2. The proposal would be for a new property on the Slider to control whether the values are mapped into 0, 100 or not.

Give an example of how this feature would be used

Consider a slider for picking an angle between 0...359. Each step on the slider will be roughly 3.59, but if you wanted to pick 60 degrees, for example, you couldn't.

Why doesn't the current App Inventor system address this use case?

The App Inventor system causes the problem by its design. This would give more flexibility to people that need it.

Why is this feature beneficial to App Inventor's educational mission?

Users may be surprised when they get values that make no sense due to the internal mapping that the Slider creates. This would make it easier for beginners/students to make use of this component.

[preetvadaliya]

as per my understanding,
by default maximum value of slider is 100. see this

How MIT App Inventor set value ?

MIT App Inventor get MIN and MAX value from user and map user's range into [0, 100](default app inventor range) and by default step value is 1 so each and every time it increases value by 1.

As per given example
MIN = 0
MAX = 359
STEP = (MAX - MIN)/100 = 3.59

now we want to get 60 from slider but we can not get 60 because to get 60 we need to move 16.71... step and it is not possible because step is int value.

How to Overcome this issue?

we need to set slider's MIN and MAX from user using these methods ...
MIN
seekbar.setMin(int min) see this
MAX
seekbar.setMax(int max)see this
INCREMENT
seekbar.incrementProgressBy(int diff)see this

for given example..
MIN = 0
MAX = 359
INCREMENT = 1

[ewpatton]

Yes, that's the theory of it. The real challenge is designing and adding a property to control this in such a way that existing apps continue to work, it's backwards compatible with the old companion, and meets the above behavior.

[preetvadaliya]

@ewpatton i want to work on this issue can you please assign it to me ?

[ewpatton]

@preetvadaliya Done.

[preetvadaliya]

@ewpatton I want to discuss about my progress on this issue,

Progress

I removed default value setting logic of MIT App Inventor and implemented my own logic for setting value, instead of mapping user's range into [0, 100] I set min and max value directly slider and by default step value is 1 so we can get each value of user's range.
It is also work correctly for both positive and negative range for example
Ex.
[-500, -100] = -500, -499, ... -101, -100
[-100, 100] = -100, -99, ... 0 ... 99, 100

In case of float step value(0.5, 0.3 etc...)

Let suppose we want to get 0.5, 1, 1.5, ... so our step value is 0.5 in that case we need to multiply current progresses into 0.5
Condation
MIN value and MAX value must be multiple of step value

@ewpatton I need your suggestion.

Thanks
Preet Vadaliya

[patryk84a]

How about a little change that won't affect old projects?

https://community.appinventor.mit.edu/uploads/short-url/tYlcoeKDaG862yWgj0TbYaI40SG.txt

I've also added the TouchUp event there, which can also be useful when we just need the final value from the slider.

[patryk84a]

Why hasn't this simple fix been implemented for 2 years? After all, just introduce a new property:

@DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_NON_NEGATIVE_INTEGER,
      defaultValue = "100")
@SimpleProperty(description = "Sets the graduation",
      userVisible = true)
  public void Graduation(int value) {

   seekbar.setMax(value);
    graduation = value;}
    
 @SimpleProperty(category = PropertyCategory.APPEARANCE,
      description = "Returns the slider increase.", userVisible = true)
  public int Graduation() {
    return graduation;
  }

Set default value on 100, default value in old component:

graduation = 100;

Set max value for slider:

seekbar.setMax(graduation);

Change procedure seekbarPozition including gradation value:

private void setSeekbarPosition() {
    float seekbarPosition = ((thumbPosition - minValue) / (maxValue - minValue)) * graduation;

    if (DEBUG) {
      Log.d(LOG_TAG, "Trying to recalculate seekbar position "
        + minValue + "/" + maxValue + "/" + thumbPosition + "/" + seekbarPosition);
    }

    // Set the thumb position on the seekbar
    seekbar.setProgress((int) seekbarPosition);
  }

In addition, you can add a touch up event to get the thumb positions only when you touch up.

[ewpatton]

@preetvadaliya Did you ever finish an implementation? If not, maybe @patryk84a could submit a PR for this issue?