LiveCode Forums.

Posted: **Thu Dec 18, 2008 6:16 pm**

Hi folks,

I'd like to be able to make a rotating selector (knob). I've looked through the resources and I can't find one anywhere. Has anyone made such a thing in Revolution?

Cheers

jim H

Posted: **Fri Dec 19, 2008 12:55 am**

Hi Jim,

I take a shot at it, it is neither polished nor probably the best way to make a rotating selector but here it goes.

create an oval graphic, in the inspector set its opacity to true, set its arcangle to 350, set its startangle to 90, the its fillcolor or backgroundcolor to anything you like.
Now set the script of this graphic to

Code: Select all

local tTrack, x1, y1
on mouseDown
    put the loc of me into tCenterLoc
    put item 1 of tCenterLoc into x1
    put item 2 of tCenterLoc into y1
    put true into tTrack
    send "trackTheMouse" to me in 1 milliseconds
end mouseDown

on mouseUp pMouseBtnNum
    put false into tTrack
end mouseUp

-- in case the mouseUp is outside the boundaries of this graphic
on mouseRelease pMouseBtnNum
    put false into tTrack
end mouseRelease

on trackTheMouse
    if tTrack then
        put the mouseloc into tNewCoordinates
        put item 1 of tNewCoordinates into x2
        put item 2 of tNewCoordinates into y2
         
        put x1-x2 into oppositeLeg
        put y1-y2 into adjacentLeg
        
        -- I lifted this from someone's code, don't remember who it was
        put round (abs(atan2(adjacentLeg,oppositeleg)*180/pi-180)) into tAbsAngle
        
        set the startangle of me to tAbsAngle
        send "TrackTheMouse" to me in 5 milliseconds
    end if
end trackTheMouse

click into the graphic and move the mouse with the button down. this should get you started. With the tAbsAngle you can do your adjustment.

Scott Rossi from Tactile Media has done very elaborate interface elements for revolution, http://www.tactilemedia.com/
I just dont see whether he has a dial or rotating selector/knob.
cheers
bernd

Posted: **Fri Dec 19, 2008 2:01 am**

Perfect as far as I can see!

Thanks a million.

Jim H

Posted: **Fri Dec 19, 2008 2:02 am**

I started to look at this but Bernd has given a more complete solution already. I did it with an imported image of a knurled knob with a white dot on and linking the angle to the thumbPosition of a slider, which can be hidden and used more programmatically in the scripts than having to calculate the rotation of the knob. At least so I thought.

Anyway, Malte has probably got a brilliant single liner of clean syntax using AE (I really must get more familiar with it - everything I've seen so far is fantastic).

Posted: **Fri Dec 19, 2008 8:19 am**

Thanks Sparkout *blushes*

But actually not for a knob.

I could give you few liners for custom sliders if you want though <g>. If your interested I'll try to whip up a small stack.

Cheers,

Malte

Posted: **Fri Dec 19, 2008 1:46 pm**

Well you needn't blush Malte, it's not false praise. A custom slider demo would be great if you felt like it Malte, but don't go to any trouble.

And just as a familiarisation exercise, I played with AE to make a rotating knob, which works very nicely.

I made a picture (basically a circle with serrated edge to look like thumb knurls) of a knob (it happened to be 60x60 pixels) and a small circle a few pixels across to be the marker dot on the knob, and imported those to the card.

I added a button "btnDot", set its icon to be the id of the dot image, which I hid. I set the button to be transparent and dragged it over the image "imgRotatingKnob".

Then it was literally a case of just setting its constraint, and adding a handler, ie

Code: Select all

set the constrainCircular of button "btnDot" to the loc of image "imgRotatingKnob",20

Code: Select all

on constrainCircularCallback
   set the angle of image "Knob60" to abs (360 - findAngle (the loc of me, the loc of image "imgRotatingKnob"))
end constrainCircularCallback

How brilliant and efficient is that?! (One day I'll be an AE expert, I promise. Up to now I've only ever dabbled with a few things, but everything I've seen has astonished me how clean and effective you can make handlers in AE.)

Using an image for the knob means that on changing its angle there are edge artifacts, but that doesn't matter too much in this case as I was making a knurled edge on purpose anyway - but I'm sure it could be adapted to make the button edges crisper - perhaps using a few different images at various in between angles and showing/hiding the right ones in the callback instead.

Posted: **Sat Dec 20, 2008 2:42 pm**

I first thought that Scott Rossi has knobs as part of his tm|gauge pack, but it seems there's "only" gauges there.

I did make a stack once that is very similar to a knob, using graphics. It is an attempt for a user interface that allows one to distribute percentages. All the small circles and triangles are draggable, needs Animation Engine to work:

http://homepage.mac.com/bvg/ae/pie_control_2.rev

Posted: **Sat Dec 20, 2008 3:40 pm**

I uploaded a knob to revonline username berndniggemann : "turning knob with graphics". It is made of graphics and shows that by combining graphics and playing around with inkmode and blendlevel one can do something like a knob. The one I posted is rather ugly. Designers have vast room to improve on it....
I made it because basically the same can be done with an image but the image 'wobbles' when it is rotated, whereas the graphics dont. You would set the script of the image to the script above, just instead of

Code: Select all

 set the startangle of me to tAbsAngle

you put

Code: Select all

 set the angle of me to tAbsAngle

Maybe I just didnt find the right way to turn an image.
bernd

LiveCode Forums.

Rotating knob dial

Rotating knob dial