Drawing a line between multiple slider 'thumbs'

[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.

[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

[calmrr3]

Haha! Yes, this project is going to be.. interesting!

I'll look into it and have a go, thanks for your help!

[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

[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!

[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

[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

[Simon]

Craig,

...is a real project

Took me a couple of reads, but yes.
I think better written as
...is a REAL project

Simon

[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!

[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

[calmrr3]

Solution ( I think ) I just divided it by 7

Code: Select all

 set the blendlevel of img "strip1" to tThumbPos/7 

[Simon]

it's what I thought.

Simon

[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..

[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...

[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