Page 1 of 1

Custom Vertical slider

Posted: Tue May 14, 2013 8:42 pm
by Terryfic
Hi All

I am trying to create a custom vertical slider consisting of a simple round knob that the user can drag up or down a line to change a value in a textbox. I have seen some excellent examples on the forums for horizontal sliders but I don't understand the code well enough yet to convert these to a vertical format. For example, this is a great little slider by Bernd Niggemann (Home made slider.rev): http://forums.runrev.com/phpBB2/viewtop ... =20&t=5743

Exactly what I want...I just need it to be vertical.

Many thanks

Terry

Re: Custom Vertical slider

Posted: Tue May 14, 2013 9:19 pm
by dunbarx
Hi.

This sort of thing can be as ornate as you wish, should you roll your own, or use Bernd's. I just want to make sure you know that the native slider can be either horizontal or vertical. Just set it as you need to.

Or do you want a custom one, and just need to know how to make an object or image track a fixed line? Write back if so...

Craig Newman

Re: Custom Vertical slider

Posted: Wed May 15, 2013 7:32 pm
by Terryfic
Hi Craig

It does need to be a custom slider. For my app, the knob will be quite small, circular, and the vertical track will not be visible. As I said, my need is just to be able to code one of the horizontal examples as vertical.

Hope you can help.

Regards

Terry

Re: Custom Vertical slider

Posted: Wed May 15, 2013 10:16 pm
by dunbarx
Ah.

OK. Make a line graphic and an oval graphic. Name the oval "thumb1". Name the line "tLine".
Color the oval and make it opaque. Place the oval onto the line. Do not hide the line just yet, but you will.

Put this in the script of the oval graphic:

on mouseMove
if intersect(grc "thumb1",grc "tLine") and the mouse is down then set the loc of grc "thumb1" to item 1 of the loc of grc "tLine" & "," & item 2 of the mouseLoc
end mouseMove

One line of code. Now there is a problem with this, and you will see it, and I leave it to you to fix it. But do you see what is going on? There are other ways to do this, and I hope you try a few. Look up "is within" in the dictionary for a head start on those.

When you do fix the small but pesky bug, hide the line.

Craig Newman

Re: Custom Vertical slider

Posted: Fri May 17, 2013 8:08 pm
by Terryfic
Hi Craig

Sorry for the delay in replying (I've been away for a few days). I can't get this to work and can't see what the bug is.

Regards

Terry

Re: Custom Vertical slider

Posted: Fri May 17, 2013 9:28 pm
by dunbarx
Hi.

Did you do everything? Name the two objects? Make the oval opaque? Place the oval somewhere onto the line? If you did all that, it will work.

What happens? Nothing? An error?

Craig Newman

Re: Custom Vertical slider

Posted: Fri May 17, 2013 9:38 pm
by Simon
Hi Terry,
It's working for me except at the ends when the thumb no longer intercepts tLine, so:

Code: Select all

on mouseMove
   if item 2 of the mouseLoc > item 2 of line 1 of the points of grc "tLine" and \ 
         item 2 of the mouseLoc < item 2 of line 2 of the points of grc "tLine" then
      if intersect(grc "thumb1",grc "tLine") and the mouse is down then \
            set the loc of grc "thumb1" to item 1 of the loc of grc "tLine"  & "," & item 2 of the mouseLoc
   end if
end mouseMove
Simon

Re: Custom Vertical slider

Posted: Fri May 17, 2013 10:32 pm
by dunbarx
Dang it, Simon,

I wanted Terry to run into this headlong and have to fix it.

Craig

EDIT:

Terry. You now have to fix this a different way. Write back.

Craig Newman

Re: Custom Vertical slider

Posted: Fri May 17, 2013 10:47 pm
by Simon
Drats!
I had a feeling there was a reason for you to leave that.
Me and my big mouth!

There is still the slider value that needs doing...

BTW Excellent one liner.

Simon

Re: Custom Vertical slider

Posted: Sat May 18, 2013 4:41 pm
by Terryfic
Hi Guys

I got Craig's one-liner to work (I think I accidentally deleted a character from one of the object names the first time). I figured out what you were trying to do but couldn't get Simon's code to work. My workaround is rather simple. As all the sliders will be in the same vertical location on the stack (Top = 50, Bottom =250) I have done it like this:

on mouseMove
if item 2 of the mouseLoc > 250 then exit mousemove
if item 2 of the mouseLoc < 50 then exit mousemove
if intersect(grc "thumb1",grc "tLine") and the mouse is down then set the loc of grc "thumb1" to item 1 of the loc of grc "tLine" & "," & item 2 of the mouseLoc
end mouseMove

Seems to work fine.

Thanks for all you help. I am now going to have a crack at setting up all the sliders and the values so it probably won't be too long before I'm back. :)

Regards

Terry

Re: Custom Vertical slider

Posted: Mon Jun 03, 2013 3:35 pm
by JGonz
Hi,

just played a bit with this, great!
Just one problem: When moving really fast the slider may end up outside the lines boundaries, and is not accessible anymore this way ...

So I added this to the sliders script:

Code: Select all

On mouseleave
   if item 2 of the loc of grc "thumb1" < item 2 of line 1 of the points of grc tLine then
      set the loc of grc "thumb1" to item 1 of the loc of grc "tLine" & "," & item 2 of line 1 \
      of the points of grc tLine
   else if item 2 of the loc of grc "thumb1" > item 2 of line 2 of the points of grc tLine then
      set the loc of grc "thumb1" to item 1 of the loc of grc "tLine" & "," & item 2 of line 2 \
      of the points of grc tLine
   end if
end mouseleave
Now it jumps back in such a case :)
But that's still not enough - for some strange reason the slider still might end outside the lines boundries, Mr. Murphy is everywhere ...

What will the user do? Let's hope it double-clicks it:

Code: Select all

On mousedoubleup
   set the loc of grc "thumb1" to item 1 of the loc of grc "tLine" & "," &  \
         round((item 2 of line 1 of the points of grc "tLine" + \
         item 2 of line 2 of the points of grc "tLine")/2) 
end mousedoubleup
Full reset :)

Have fun!
And thx for the ideas, learned something new :)