Page 1 of 2
Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 7:02 pm
by calmrr3
Hi,
I have multiple scroll bars and I would like to draw a line between the thumbs of each of them and then hide the sliders themselves ( I'm guessing I would do this in the blend properties).
So in the below image all that will be visible is a line representing the waveform/ position of each of the thumbs. The joining lines need to stretch so that the thumbs can still be moved.

Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 7:28 pm
by Simon
Hi calmrr3,
Wow this is a fun one!

I think you'll want to use "points"
You have the thumbPosition which you will have to scale for your vertical distance.
Your horizontal distance comes from the scrollbar locations.
I just made up a stack for fun and the thing I don't like is when setting the points of a line, the line is not curved but jaggy. You might want curved lines.
Simon
Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 7:30 pm
by calmrr3
Haha! Yes, this project is going to be.. interesting!
I'll look into it and have a go, thanks for your help!

Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 7:35 pm
by Simon
One thing to watch out for is that the thumbPosition that is displayed is not necessarily the thumbPosition value. ummm... it's value can be 9.997 but it will display 10, so "round" is your friend here.
Oh, and all that is because you must set the points of a line to a whole number (not 9.997).
Simon
Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 7:38 pm
by calmrr3
Thanks, do you know if there are any tutorials or anything on using 'points' I can't seem to find anything and i've never used 'points' before,
Thanks again!
Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 7:53 pm
by dunbarx
Hi.
Make a simple experiment and you will be an expert. Make a line graphic, and set its points to a handful of, er, points. Like:
100,100
125,125
150,125
200,100
You can do this under script control, or in the inspector. What Simon alluded to is a real project, if you wanted to smooth the final line graph representation into a "sine-like" curve.
Craig
Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 7:59 pm
by Simon
Here is one:
http://lessons.runrev.com/s/lessons/m/4 ... line-graph
But it's not too difficult to figure out, just draw a line on your card (probably have it not visible till you need it) then just set the points to x,y one line for each of the points needed. That would be 20 lines in your case.
Quick Tip:
Put this in your card
Code: Select all
on mouseMove
put the mouseLoc
end mouseMove
That will give you a general idea of the numbers you should be generating for the points
Simon
Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 8:07 pm
by Simon
Craig,
...is a real project
Took me a couple of reads, but yes.
I think better written as
...is a
REAL project
Simon
Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 8:26 pm
by calmrr3
Okay, so I have 20 lines each going from the thumb of one scrollbar to the next. I have set the end value of the scroll bar to 704 (the mouseLoc value given to the bottom of the scroll bar) so now i think it's a case of getting the thumbPos value of one scrollbar and then setting it as the y value for the first point (x-value wont change and I just get this from the mouseLoc) and then i will do the same to get the end point of the line } x 20 times.
PROBLEM:
The thumbPos of the sliders are changing the blend level of the image beside it (this image is divided into 20 'strips' each with a scroll bar to adjust the opacity of it). SO the blend level only goes up to 100 but I need a scale of 700.
(I hope all that made sense!)
Thanks!
Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 8:44 pm
by Simon
Hi calmrr3,
I always get to this point and kick myself for not paying more attention in math class
liveCode does not error on setting a blendLevel to 56.7 so see if you can figure out how to divide the scrollbar value.
Craig is the maths guy here, he'll correct me.
Simon
Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 9:27 pm
by calmrr3
Solution ( I think ) I just divided it by 7
Code: Select all
set the blendlevel of img "strip1" to tThumbPos/7
Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 9:39 pm
by Simon

it's what I thought.
Simon
Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 9:49 pm
by calmrr3
Code: Select all
on mouseUp
set the points of "line1" to 90, the thumbPos of "Scrollbar1"
130, thumPos of "scrollbar2"
create line
end mouseUp
The above script doesn't work but hopefully it shows what I am trying to do. Although the line won't actually move as I drag the thumb - it will only redraw the line on mouseUp..
Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 9:52 pm
by Simon
You are missing the object type...
as in "set the label of button "button1" to "Click Here""
Checkout scrollbarDrag in the dictionary, see if that helps animate things more.
Simon
Edit: Not sure if you can set the points before the object is created...
Re: Drawing a line between multiple slider 'thumbs'
Posted: Tue Nov 05, 2013 10:13 pm
by calmrr3
Code: Select all
on scrollbardrag tThumbPos
set the blendlevel of img "strip1" to tThumbPos/7
set the points of graphic "line1" to 90,the thumbpos of scrollbar "scrollbar1" +20 & return & 130,the thumbpos of scrollbar "scrollbar2"+20
end scrollbardrag
This seems to work, although the line only moves in real time with the thumb of scroll bar 1, when I move the thumb of scrollbar 2 the line only moves (jumps) into position on mouseUp