2017년 8월 18일 금요일

Multi 'rate' sliders


Working on a new little app and I needed a way to set a value (battery capacity) that has a fairly large range (almost 2 magnitudes of order or 100-10,000). While big steps of 500 are appropriate at the high end I need a much finer resolution at the low end - like in steps of 10.  I could have substituted a spinner and programmed specific values but this was not optimal because of the unknown number of value possibilities.  ie. with a spinner or listpicker you have to either know all the possible values, or program list management. A spinner or listview/picker with over 50 possible values doesn't really work.  So here's my solution.

Three sliders with three different Min/Max pairs. In the example below sldBatterysizeSmall is min 50 max 420, sldBatterysize is min 300 max 2600 and slBatterysizeLarge is min 2000 max 10,000. For clarity I collapsed the set label.text but each uses easy math to set the text from min - max rounded to 10, 50, and 500 respectively. Having 3 sliders with 3 unique .PositionChanged events makes everything quite tidy.  The fun part is that the sliders sit next to each other in an arrangement and only one is visible at a time.  Controls makes them automatically switch as required. Effectively I've tripled the width of the screen for the purpose of the slider.
With a mouse using the emulator it operates a bit strangely if you do not let up the mouse button when the slider you're dragging is set to invisible. Even though it's invisible you are still dragging it, so things look really 'off'. In fact it's possible to Un Hide two of the sliders at once. On a touch screen device, however, it's quite natural to lift your finger when the slide jumps left or right and 'regrab' it. Thus the operation seems pretty natural.  You do have to take care to set the overlapping in such a way that each of your required settings is possible. You don't want your users frustrated trying to set something between the sliders. 

I s'pose it would be even easier to make a logarithmic or exponential rate slider but for multiple ranges with different rounding precision requirements this might be just the ticket. I attempted to do this by changing the min-max of a slider dynamically. That does not work.

--
Yup. The steps or resolution of the slider is handled in setting the label text with rounding (not shown in my pic). With three, or more, sliders I can extend the range of the control without taking up more screen space or reducing the number if steps (unless I want to).

--
How about a multi-turn logarithmic knob linked to a label?
Set up a square canvas with a big ball in the middle and a
rotating sprite (line) atop it that will spin around the ball center
as you drag it.

As you turn the knob, multiply or divide the label value by some
constant factor per degree of rotation.

The Format as Decimal block can be used for precision management,
depending on order of magnitude.

--
ha.. now you have me researching UX and UI design. The drawing and animation opens up lots of possibilities for behaviour and limitless design. 

--
Here is a way to have one dial use two different scales of values.
The scale is selected by clicking either of the scale buttons at the top.


--
You really got me thinking with that one Scott. Couldn't put it down until I came up with an iPod style infinite wheel control.  It's not appropriate for the app where I'm using the slider above in but it gives ultimate control of speed, resolution, and an infinite range. It does chew up a chunk of screen space and of course it has to be a square.  Gonna post it in a new topic. 

--
High five!

--

댓글 없음:

댓글 쓰기