Round Circular Knob Object

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

magice
Posts: 457
Joined: Wed Mar 18, 2009 12:57 am

Re: Round Circular Knob Object

Post by magice » Tue Apr 23, 2013 3:06 pm

Sturgis
That is awesome. I was looking for something like atan2 but I had no idea what to look under in the dictionary. Thanks for that tip.

sturgis
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 1685
Joined: Sat Feb 28, 2009 11:49 pm

Re: Round Circular Knob Object

Post by sturgis » Tue Apr 23, 2013 3:15 pm

Unfortunately, I just read the actual first posting and.. my response in no way meets the requirements! DOH! Still works pretty well for what it is though.

As far as not "snapping" to the mouseloc, could be treated as an offset instead. Store the angle for the mouseloc on mousedown, then on mousemove calc the offset.


The graphic itself looks very nice, but it would almost be easier (ok, it would definitely be easier) to use just a round graphic, no line. And a separate line as the dial so that it can start at 0 angle being vertical. Makes all the other mental gymnastics MUCH easier.


Once that is done, you can use the following code library for all kinds of neat things. (you can of course adjust for the 90 degree offset, but its a pain in the tookus)

Heres the code library, there is stuff that may not be useful (like the lat/lon distance calc) but here goes anyway:

Code: Select all

## takes 2 points, px,py starting, px2, py2, ending and returns vector offsets
function pointsToVec px,py,px2,py2
   return px2-px,py2-py
end pointsToVec

/*
Takes an object reference and returns the x or y position of the object
Examples:
get xLoc(the long id of field "myfield")
get yLoc(the long id of grc "mygrc")
*/ 
function xLoc pObject
   return item 1 of the loc of pObject
end xLoc

function yLoc pObject
   return item 2 of the loc of pObject
end yLoc

##Return the length of the vector.
##vX and vY are the offset distances from the starting point
## then uses pythag Theorem to calc the distance
function vLength vX,vY
   return sqrt((vX * vX) + (vY * vY))
end vLength

## Takes vector as the offset distance between points for x and y
## calculates the degrees using atan2 * 180 / pi
function vToDegrees vX, vY
   return atan2(vx,vy) * 180/pi
end vToDegrees

## takes degrees and changes to radians
function dToRadians pDegrees
   return pDegrees / 180 * pi
end dToRadians

## takes radians and converts to degrees
function rToDegrees pRadians
   return pRadians * 180 / pi
end rToDegrees

## takes length and the angle in radians and returns vector as x,y offsets
function aLenToVector pLen pAngle
   return pLen * sin(pAngle),pLen * cos(pAngle)
end aLenToVector

## Get unit vector.
## Returns vector offsets whos vector length = 1 based on vector x and vector y
## make sure if vector length is 0, handle the error. 
function uVector vX,vY
   if  vLength(vx,vy) is not 0 then
      return vx/vLength(vx,vy) ,vy/vLength(vx,vy)
   else
      return 0,0
   end if
end uVector

## return left and right normals
function LRNormals px,py
   return -py,px,py,-px
end LRNormals

## add 2 vectors
function vAdd vx,vy,vx2,vy2
   return vx + vx2,vy + vy2
end vAdd


## find the dot product of 2 vectors
## positive dp means the vectors are additive
## negative means they're subtractive
## IE positive they go generaly the same direction
## negative they go generally the opposite direction. 
## 0 = perpendicular movement
function dotProd vx,vy,vx2,vy2
   return vx*vx2 + vy * vy2
end dotProd


##Projection-- still learning so not sure yet where this falls into things. 
function vProj vX,vY,vX2,vY2
   return dotProd(vx,vy,vx2,vy2) * vx2,dotProd(vx,vy,vx2,vy2) * vy2
end vProj



## pR is radius, the lats and lons are decimal reperesntaions of the start and end point
function calcDist pR,plat1,plon1,plat2,plon2
   ## convert to radians
   put plat1 / 180 * pi into lat1
   put plon1 / 180 * pi into lon1
   put plat2 / 180 * pi into lat2
   put plon2 / 180 * pi into lon2
   
   put lat2 - lat1 into dlat
   put lon2 - lon1 into dlon
   
   put (sin(dlat/2))^2 + cos(lat1) * cos(lat2) * (sin(dlon/2))^2 into a
   put 2 * atan2( sqrt(a),sqrt(1-a)) into c
   
   return pR * c
end calcDist

theotherbassist
Posts: 115
Joined: Thu Mar 06, 2014 9:29 am

Re: Round Circular Knob Object

Post by theotherbassist » Sat Apr 23, 2016 12:14 pm

I know it has been a while since this thread has gotten any action...

But just for fun (ha, like I didn't need it for something too :wink: ), I took bn's script and adapted it for use with images instead of graphics. I know that's no big feat, but I figured somebody else might find it useful.

So, anyway, images:

Why not just keep the rotating graphic and use your image as the background "fill" pattern? Well, it seems the fill won't rotate with the graphic.

All you have to do is change "startAngle" to "angle" in the code. And make sure you change the "me"s that angle-change in the knob background image to the name of your pointer image (not all the "me"s!--only the ones that change the angle). This way the bg still responds to mouse movements but never changes its own angle.

The biggest problem I've encountered is that upon changing the angle of images, they jitter. Check out the middle knob to see the effect. Perhaps there is a way around this.

I skirted the issue (mostly) by making the knob background and pointer separate images. Check out the far-right knob (the control, not the nationalist next door :x ). The pointer still jitters, but it's far less noticeable than the whole knob wobbling. You'd probably always want background and pointer to be separate images anyway to preserve the angle of any light/shadow effects you have in your graphics. You wouldn't want the angle of your "room light" changing when you rotate the knob.

I suppose you could sub the pointer image for a sliver of a circular graphic, like in the original.

Yes, I know I could have made a less-redundant version that doesn't have essentially the same code in both the bg and pointer images. But that wasn't the point (ha), so I didn't approach it from that angle (ha). You can easily fix this when you roll out (ha) your own spin (ha) on this version.

Sorry about those puns. :roll:

Cheers,
theotherbassist
Attachments
Obi-Wan Ka-Knob-i [from Knob 06 bn] ToB.zip
(4.53 KiB) Downloaded 231 times

mwieder
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3581
Joined: Mon Jan 22, 2007 7:36 am
Contact:

Re: Round Circular Knob Object

Post by mwieder » Sat Apr 23, 2016 7:16 pm

(trying hard to ignore the puns)

I think some of the jitteryness is due to the fact that there are exit calls after lock the screen but before unlocking it. So the reference count can get messed up if the values aren't being set.

Here's my take on it... I made a behavior button because I got tired of all the copy-and-pasta work, and I put the heavy lifting into the mouseMove handler instead of having trackTheMouse messages flying around every 16 milliseconds. Otherwise mostly the same, and I think the action looks smoother now.
Attachments
Obi-Wan Ka-Knob-i2.livecode.zip
zipped updated knob file
(4.42 KiB) Downloaded 220 times

Post Reply