Re: [fltk.development] [RFE] STR #2951: DoubleSlider for selecting low and high values within min/max range
On 14 Apr 2013, at 13:57, Duncan Gibson wrote: I have an application with a colour bar type legend which does not give the required resolution, so I needed to be able to adjust the low and high values in an intuitive but minimally invasive way on screen. I hacked together the following demonstrator, drawing some inspiration from Fl_Slider. The features I required were: - a vertical slider - possibility of setting min and max values of continuous range (no step) - possibility to move low and high sliders (min = low high = max) I then hacked it further to fit directly with the rest of my application. Questions: 1. Does anybody know of a similar widget out there? 2. Is it worth factoring out a separate DoubleValuator base class? 3. Apart from vertical/horizontal what other features are needed? 4. Does it require min/low/high/max fields? 5. Would a floating tooltip with feedback be enough? (eg Greg's TipWin) I'd be willing to have a go a this, but can't provide any timeframes. Coming to this party late, but I just remembered that Jason Bryan's FLU widgets have a double-slider widget. His pages at OSC.edu appear to be gone but the mirror here still seems to be working: http://src.gnu-darwin.org/ports/x11-toolkits/flu/work/FLU_2.14/ His FLU_Dual_Slider might be relevant, to see how what he did compares. He derived a pile of new fltk based widgets, so there may be clues in that work for a template for future derivations? ___ fltk-dev mailing list fltk-dev@easysw.com http://lists.easysw.com/mailman/listinfo/fltk-dev
Re: [fltk.development] [RFE] STR #2951: DoubleSlider for selecting low and high values within min/max range
DO NOT REPLY TO THIS MESSAGE. INSTEAD, POST ANY RESPONSES TO THE LINK BELOW. [STR New] Link: http://www.fltk.org/str.php?L2951 Version: 1.4-feature Well, Greg said it all.. ;-) That said, here's one addition from me. It'd be good to have the widget look like the other FLTK slider widgets for integration with other sliders. However, I'd also like it to have its own fancy look. Maybe both (selectable) would be good to have. (The ultimate option would be to provide a hook to enable own draw() functions, but that's probably too much effort.) So I think that making this DoubleSlider widget being able to use only one slider would be simple and offer an opportunity to use it (and its maybe different look) as a normal lider widget as well, depending on an option or flag - need not be its own class name. Link: http://www.fltk.org/str.php?L2951 Version: 1.4-feature ___ fltk-dev mailing list fltk-dev@easysw.com http://lists.easysw.com/mailman/listinfo/fltk-dev
[fltk.development] [RFE] STR #2951: DoubleSlider for selecting low and high values within min/max range
DO NOT REPLY TO THIS MESSAGE. INSTEAD, POST ANY RESPONSES TO THE LINK BELOW.
[STR New]
Link: http://www.fltk.org/str.php?L2951
Version: 1.4-feature
I have an application with a colour bar type legend which does not give
the required resolution, so I needed to be able to adjust the low and
high values in an intuitive but minimally invasive way on screen.
I hacked together the following demonstrator, drawing some inspiration
from Fl_Slider. The features I required were:
- a vertical slider
- possibility of setting min and max values of continuous range (no step)
- possibility to move low and high sliders (min = low high = max)
I then hacked it further to fit directly with the rest of my application.
Questions:
1. Does anybody know of a similar widget out there?
2. Is it worth factoring out a separate DoubleValuator base class?
3. Apart from vertical/horizontal what other features are needed?
4. Does it require min/low/high/max fields?
5. Would a floating tooltip with feedback be enough? (eg Greg's TipWin)
I'd be willing to have a go a this, but can't provide any timeframes.
Link: http://www.fltk.org/str.php?L2951
Version: 1.4-feature// test program to demonstrate DoubleSlider concept
//
// compile using 'fltk-config --compile filename.cxx'
#include FL/Fl.H
#include FL/Fl_Box.H
#include FL/Fl_Group.H
#include FL/Fl_Window.H
#include FL/fl_draw.H
// Double slider widget:
// program sets min and max values, and then user can move sliders
// to reduce the high and low values within this range.
//
class DoubleSlider : public Fl_Box
{
// everything is public as this is just a proof-of-concept
public:
int loPos, hiPos; // pixel position of top of low and high sliders
int top, bottom;// pixel position of top and bottom of range
int clickOffset;// difference between top of slider and mouse
bool loClicked, hiClicked; // which slider has been selected
double lolo, lo, hi, hihi; // min, low, high and max values
DoubleSlider(int X, int Y, int W, int H, char* T=0)
: Fl_Box(X, Y, W, H, T)
{
box(FL_DOWN_BOX);
lolo = lo = 0.0;
hihi = hi = 1.0;
loClicked = false;
hiClicked = false;
clickOffset = 0;
top = Y;
bottom = Y + H;
hiPos = Y;
loPos = Y + H - W;
}
~DoubleSlider()
{
}
// draw within the interior of the box
//
void draw(int X, int Y, int W, int H)
{
int upper = top + Fl::box_dy(box());
int lower = bottom - Fl::box_dy(box());
// calculate widget positions of sliders
hiPos = upper + ((lower-upper - W) * (hihi - hi) / (hihi - lolo));
loPos = upper + ((lower-upper - W) * (hihi - lo) / (hihi - lolo));
// draw background line linking sliders
Fl_Color black = active_r() ? FL_FOREGROUND_COLOR : FL_INACTIVE_COLOR;
draw_box(FL_THIN_DOWN_BOX, X+W/2-2, hiPos+W/2, 4, loPos-hiPos, black);
// draw sliders
fl_draw_box(FL_UP_BOX, X, hiPos, W, W, selection_color());
fl_draw_box(FL_UP_BOX, X, loPos, W, W, selection_color());
// add the lines across the middle of the sliders
int xi = X + Fl::box_dx(FL_UP_BOX);
int wi = W - Fl::box_dw(FL_UP_BOX);
fl_color(fl_darker(selection_color()));
fl_rectf(xi, hiPos+W/2-1, wi, 3);
fl_rectf(xi, loPos+W/2-1, wi, 3);
}
void draw()
{
if (damage() FL_DAMAGE_ALL)
{
draw_box(FL_FLAT_BOX, selection_color());
draw_box(box(), x(), top, w(), bottom-top, selection_color());
}
draw( x() + Fl::box_dx(box()),
top + Fl::box_dy(box()),
w() - Fl::box_dw(box()),
bottom- top - Fl::box_dh(box()));
}
int onPush(int X, int Y, int W, int H, int mX, int mY)
{
if (X mX mX X+W hiPos mY mY hiPos+W)
{
loClicked = false;
hiClicked = true;
clickOffset = mY - hiPos;
return 1;
}
if (X mX mX X+W loPos mY mY loPos+W)
{
loClicked = true;
hiClicked = false;
clickOffset = mY - loPos;
return 1;
}
loClicked = false;
hiClicked = false;
clickOffset = 0;
return 0;
}
int onDrag(int X, int Y, int W, int H, int mX, int mY)
{
int upper = top + Fl::box_dy(box());
int lower = bottom - Fl::box_dy(box());
double value;
mY = mY - clickOffset;
if (hiClicked == true)
{
mY = (mY upper) ? mY : upper;
mY = (mY loPos-W) ? mY : loPos-W;
value = lolo + (lower-W - mY) * (hihi - lolo) / (lower-W - upper);
if (value != hi)
{
hi = value;
redraw();
}
return 1;
}
if (loClicked ==
Re: [fltk.development] [RFE] STR #2951: DoubleSlider for selecting low and high values within min/max range
DO NOT REPLY TO THIS MESSAGE. INSTEAD, POST ANY RESPONSES TO THE LINK BELOW. [STR New] Link: http://www.fltk.org/str.php?L2951 Version: 1.4-feature Oh, I forgot to say: I needed to align the slider with an existing widget, which is itself pretty idiosynchratic, so added the top and bottom members to allow adjusting the alignment after the other had resized itself. Thinking about it afterwards, it would have been better to correct the existing idiosynchratic widget, and rely on the Fl_Box boundary for any alignment. So the top/bottom stuff will likely be removed. D Link: http://www.fltk.org/str.php?L2951 Version: 1.4-feature ___ fltk-dev mailing list fltk-dev@easysw.com http://lists.easysw.com/mailman/listinfo/fltk-dev
Re: [fltk.development] [RFE] STR #2951: DoubleSlider for selecting low and high values within min/max range
DO NOT REPLY TO THIS MESSAGE. INSTEAD, POST ANY RESPONSES TO THE LINK BELOW. [STR New] Link: http://www.fltk.org/str.php?L2951 Version: 1.4-feature Can't say regarding [1] or [2]. For [3], I'd say google for double slider widget and range slider and see what you can gather in the way of options. And maybe check out those widget's API to see if they have anything clever. I guess such things can be used for everything from temperature to date ranges. For the latter, it sounds like a app-provided callback could be used to convert numeric values to/from strings such as dates. Options I noticed from doing the above google searches: a graticule option drawing an optional box between the tabs ability to drag the above box (to move both tabs locked together) option to show text fields above and below the tabs options for text fields to be editable options for text fields to include up/down arrows options for text fields to be integer vs. float support Fl::scheme(gtk+) (and possibly plastic) arrow shaped tabs instead of raised rectangles (tinypic link below) option to show high/low values above or to side of slider at all times (instead of as a tooltip),eg: http://content.w3avenue.com/2009/components/jquery-ui-slider-from-select-element/cover.jpg data string callback (or virtual method) that lets the app convert numeric values to app defined strings (such as int-date conversion) Also: this little 'gif video' is neat; a bit over the top with features, but it shows the 'dragging tab lock' mentioned above: http://www.slicer.org/slicerWiki/images/6/6b/VolumesModuleWindowLevelSliderPopup.gif Also: http://dribbble.s3.amazonaws.com/users/58823/screenshots/303390/slider.png http://i48.tinypic.com/2ebsn5i.jpg Regarding [4], yes, I think a min/max for the entire range would be needed, unless you wanted it to be a fixed 0.0 to 1.0 range slider, which might simplify the API, but makes the user's job harder. (Seems the widget should try to support values the app would want, including ints, floats, and perhaps even strings as described above) Of course doing all the above is probably too much, but perhaps it'll give some idea as to how to design the widget so that such features could be provided by the app by its overloading the widget. Link: http://www.fltk.org/str.php?L2951 Version: 1.4-feature ___ fltk-dev mailing list fltk-dev@easysw.com http://lists.easysw.com/mailman/listinfo/fltk-dev
Re: [fltk.development] [RFE] STR #2951: DoubleSlider for selecting low and high values within min/max range
DO NOT REPLY TO THIS MESSAGE. INSTEAD, POST ANY RESPONSES TO THE LINK BELOW. [STR New] Link: http://www.fltk.org/str.php?L2951 Version: 1.4-feature Oh, and for [5], I think tooltips would be good for some but not all cases.. text fields that are always visible would probably be needed very much as well.. perhaps an option for one or the other or both. Definitely try to plan so the user can override things like draw() and perhaps being responsive to FL_WHEN_CHANGED (so the callback is called during dragging) or on FL_WHEN_RELEASE (only called back when the user is done moving a tab) If you have an option for drawing a box between the tabs, I guess plan it so that the box is reactive to Fl::scheme(gtk+) or plastic so that the box drawing style inherits e.g. gradient behavior.. perhaps even the tabs themselves, and the widget's trough.. Link: http://www.fltk.org/str.php?L2951 Version: 1.4-feature ___ fltk-dev mailing list fltk-dev@easysw.com http://lists.easysw.com/mailman/listinfo/fltk-dev
Re: [fltk.development] [RFE] STR #2951: DoubleSlider for selecting low and high values within min/max range
DO NOT REPLY TO THIS MESSAGE. INSTEAD, POST ANY RESPONSES TO THE LINK BELOW. [STR New] Link: http://www.fltk.org/str.php?L2951 Version: 1.4-feature Oops, and responsive to keyboard navigation. This means: o responding to FL_FOCUS to handle drawing the focus box (or not based on focus visibility) o possibly allowing the two tabs to be keyboard selectable via Tab and Shift-Tab o responding to the arrow keys to let the user alter the tab positions (perhaps the arrow key step value to be selectable in the widget's API), o Perhaps even a separate step rate for Ctrl-Arrows o Probably respond to left/right arrow for horiz slider or up/down arrow for vert slider Perhaps some of the arrow behavior comes for free if you derive from FLTK's existing valuator widgets. Link: http://www.fltk.org/str.php?L2951 Version: 1.4-feature ___ fltk-dev mailing list fltk-dev@easysw.com http://lists.easysw.com/mailman/listinfo/fltk-dev
Re: [fltk.development] [RFE] STR #2951: DoubleSlider for selecting low and high values within min/max range
DO NOT REPLY TO THIS MESSAGE. INSTEAD, POST ANY RESPONSES TO THE LINK BELOW. [STR New] Link: http://www.fltk.org/str.php?L2951 Version: 1.4-feature ..and don't forget to take into account handling deactivation, affecting how the widget draws itself, etc. It occurs to me maybe I should write an article or make a video or something on how to make an FLTK widget, all the wacky details and implications. I wish I had one when I was writing Fl_Tree and Fl_Table, as there's a lot of stuff about keyboard nav and when() that I didn't know about until much later.. making it hard to go back and retrofit..! Link: http://www.fltk.org/str.php?L2951 Version: 1.4-feature ___ fltk-dev mailing list fltk-dev@easysw.com http://lists.easysw.com/mailman/listinfo/fltk-dev
