1 2 Previous Next 53 Replies Latest reply on Oct 21, 2014 1:25 PM by serbenny

    Scrubbing a wheel and turning a pot with Edge Animate!

    AmintaAdobe Level 1

      Hi all!

       

      With the wonderful Edge Animate and the external JQuery Ui library (for the drag), I've made a wheel that you can move with a scrubber-bar.

       

      The original, super-useful code from wich I started is made by JackPister in this thread: http://forums.adobe.com/message/4752554#4752554.

       

      I've used Jquery Ui for dragging so I've simplified the code.

       

       

      Here's a  prototype: http://www.terredainventare.it/edge/wheel/Wheel.html.

       

      Here are the Edge project files: http://www.terredainventare.it/edge/wheel/Wheel.zip

       

       

      Now, (almost) all is working, but I have two question for the Forum readers and the Edge Animate experts and staff:

       

      1) do you see that when I hover with the mouse on the scrubber, the wheel moves? Why this?

       

      2) What if I would (and I want!) build a circular scrubber that moves together with the wheel? I'm more explicit with these picture. It would be like a pot that you move dragging the handle!!

       

      Pot wheel with handle.jpeg

       

       

      Many thanks for your help!!!

       

      Davide

        • 1. Re: Scrubbing a wheel and turning a pot with Edge Animate!
          JackPitsker

          Thanks, Davide! But I want to give most of the credit for this code to Darrell/Heathrowe since my code is just a slight modification of his original code.

           

          To your first questions (and others please correct me if I'm wrong), but I think the problem is that your code for the dragging is on the scrubber.mousemove event, so it is fired every time you move the mouse over the scrubber. I would instead put your drag code in the compositionReady event, and make some sort of flag that indicates when the scrubber is being dragged (true on scrubber.mousedown and then false on document.mouseup, in case it gets dragged off of the scrubber). You would then have a script for document.mousemove that only runs if the flag is true, and have that function be the one that does all the rotating. You don't need to make the scrubber draggable. Just put its position where the mouse is as long as it's not past the beginning or the end of the bar.

           

          As for your second question, that would be similar, but would involve a bit more tricky math to calculate the mouse position and determine where the rotation should be. I don't know what that formula would be, but  the process would be similar. But instead of making the scrubber move horizontally, you would rotate it around with the "pot", or even just make it part of the pot and rotate the whole thing. The tricky part would be figuring out the mouse position in relation to the center of the pot, but I'm sure there is some formula out there for that. I just don't know what it would be.

           

          Hope that helps!

          • 2. Re: Scrubbing a wheel and turning a pot with Edge Animate!
            AmintaAdobe Level 1

            Thanks for you quick feedback, Jack!

             

            1) Yes, your/Darrel's solution it's sure more elegant but I need to use JQuery Ui library so I can use the handle-option to build the handle of the pot.... Any hint about the use of JQuery Ui for dragging without this tedious "over" effetct?

             

            2) Here http://threedubmedia.com/code/event/drag I've found this code:

             

            <script type="text/javascript">

            jQuery(function($){

               $('.drag')

                  .drag('start',function( ev, dd ){

                     if ( !$.data( this, 'circle' ) )

                        $.data( this, 'circle', {

                           radius: 160,

                           centerX: dd.originalX + 160 + 30,

                           centerY: dd.originalY + 30

                        });

                  })

                  .drag(function( ev, dd ){

                     var data = $.data( this, 'circle' ),

                     angle = Math.atan2( ev.pageX - data.centerX, ev.pageY - data.centerY );

                     $( this ).css({

                        top: data.centerY + Math.cos( angle ) * data.radius - 30,

                        left: data.centerX + Math.sin( angle ) * data.radius - 30

                     });

                  });

            });

            </script>


            <h1>Circular Drag Demo</h1>

            <p>Drag the boxes around the page, they only move along a circular path.</p>

            <div class="drag" style="left:60px;">&bull;</div>

            <div class="drag" style="left:170px;">&bull;</div>

            <div class="drag" style="left:280px;">&bull;</div>


            <style type="text/css">

            body {

               background: #FFF url("http://threedubmedia.com/inc/img/circles.gif") no-repeat 0px 0px;

               }

            .drag {

               position: absolute;

               border: 1px solid #89B;

               background: #BCE;

               height: 58px;

               width: 58px;

               top: 180px;

               cursor: move;

               text-align: center;

               font: 24px/62px "Courier New", Courier, monospace;

               filter: alpha(opacity=75);

               -moz-opacity: 0.75;

               opacity: 0.75;

               }

            </style>

             

            Do you think can be useful?

             

             

            Many many thanks!!!

             

            Davide

            • 3. Re: Scrubbing a wheel and turning a pot with Edge Animate!
              JackPitsker Level 1

              Sorry, I'm not familiar with JQuery UI. But I would say you just need to get away from having the code on the scrubber's mousemove...that's the source of your problem.

               

              As for the other code, that looks like what you will need. I don't have the time to figure out how you might implement it, though...I'm at work right now. And all I would be doing is probably what you would do anyway - just trying stuff to see what works. But it looks like the right kind of thing! Good luck!

              • 4. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                AmintaAdobe Level 1

                Hi Jack!

                 

                I've joined the two codes above and I made an animation that - unfortunately - doesn't work :-(

                 

                This is the live animation: http://www.terredainventare.it/circle/Dragcircle.html (you drag the red rectangle - that is the scrubber - but the wheel doesn't move), there are the Edge files: http://www.terredainventare.it/circle/Dragcircle.zip.

                 

                Anyway, I think that to make this worki it would need only understand what value assign to the "relativeX" variable:

                 

                 

                 

                yepnope(

                 

                 

                {

                 

                 

                // Include jquery.event.drag plugin, "A jquery special event plugin that makes the task of adding complex drag interactions, to any element, simple and powerful" http://threedubmedia.com/code/event/drag

                 

                 

                nope:[

                'jquery.event.drag-2.2.js',

                'jquery.event.drag.live-2.2.js'

                 

                 

                 

                 

                ],

                 

                 

                complete: init

                 

                 

                }

                 

                 

                );

                 

                 

                 

                 

                //when yepnope has loaded everything execute init();

                 

                 

                function init (){

                 

                 

                sym.$('.drag')

                      .drag('start',function( ev, dd ){

                         if ( !$.data( this, 'circle' ) )

                            $.data( this, 'circle', {

                               radius: 100,

                 

                 

                               // originalX (Number) -> The starting horizontal position of the drag "target" element.

                                                                  // originalY (Number) -> The starting vertical position of the drag "target" element.

                 

                 

                               centerX: dd.originalX + 100 + 30,

                               centerY: dd.originalY + 30

                            });

                      })

                      .drag(function( ev, dd ){

                         var data = $.data( this, 'circle' ),

                         angle = Math.atan2( ev.pageX - data.centerX, ev.pageY - data.centerY );

                         $( this ).css({

                            top: data.centerY + Math.cos( angle ) * data.radius - 30,

                            left: data.centerX + Math.sin( angle ) * data.radius - 30

                         });

                      });

                 

                 

                 

                 

                var scrubber = sym.$("scrubber");

                 

                 

                // perimeter of the circle

                 

                 

                var circle =  2 * (Math.PI * 80);

                 

                 

                 

                 

                // scrubWidth is equal to the perimeter of the circle minus the width of the scrubber

                 

                 

                var scrubWidth = circle - scrubber.width();

                 

                 

                 

                 

                // relativeX = ev.pageX - data.centerX ???????

                 

                 

                var relativeX = ev.pageX - data.centerX

                 

                 

                var perc = Math.ceil( (relativeX/scrubWidth) * 2000 );

                 

                 

                sym.getComposition().getStage().getSymbol("ruota").stop(perc);

                 

                     

                 

                }

                 

                 

                Any idea?

                 

                Many thanks in advance!


                Davide

                • 5. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                  JackPitsker Level 1

                  I'm not too clear on how that ThreeDubMedia plugin works, but it looks like the scrubber and the wheel are both on two separate event triggers or something, because when you click on the scrubber, just that moves, and when you click on the wheel, that tries to rotate around a completely different point. I'm sorry I don't have time to figure it out right now. I only get these notifications when I'm at work.

                   

                  I would say that your best bet is to just use one event (mousedown on the scrubber, for example) to set the mousemove event going. Then use the position of the mouse to figure out the rotation and use that to calculate a rotation for both the scrubber and the wheel. You would also listen for a mouseup on the whole screen to remove the mousemove event. Also, the scrubber should be rotating around a center point that is the center of the wheel. As it is now, it is having its x,y coordiantes set, so it it orbiting around the center point without rotating, which I don't think is exactly what you want. There is an "angle" variable being figured out in your code above; you may be able to use that to figure out the rotation. It may be in radians instead of degrees (often the case when figuring point coordinates from an angle), so you would probably have to get the formula for converting radians to degrees.

                   

                  Sorry I can't be more helpful than that. In Darrell's code, there is a way to set up a mousemove function that is triggered by the mousedown on the scrubber and released by the mouseup. You would just have to figure out how to use the above code to figure out the angle and then use that to set the rotation of both the scrubber and the wheel.

                  • 6. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                    AmintaAdobe Level 1

                    Hi Jack!

                     

                    Your suggestions were VERY PRECIOUS to me! So - starting from this and from the Darrel's code - I (ALMOST) worked out to drag a element along a circular path (don't mind the "scrubble-animation" code, for the moment).

                     

                    Here's the result: http://www.terredainventare.it/wheel/Wheeldragme.html

                     

                    Here are the project files: http://www.terredainventare.it/wheel/Wheeldragme.zip

                     

                     

                    And here's the code:

                     

                    var dragme = false;

                     

                     

                    $(function () {

                       var scrubber = sym.$("scrubber");

                     

                     

                        scrubber.mousedown(function() { dragme = true })

                        $(document).mouseup(function() { dragme = false })

                        $(document).mousemove(function(e) {

                            if(dragme){

                     

                     

                     

                     

                           // coordinates of the scrubber on the start

                     

                     

                                        var originX = 251

                     

                     

                                          // var originY = 223

                     

                     

                                        var originY = 27

                     

                     

                     

                     

                                          // FIXED coordinates of the center of the circle

                     

                     

                            var centerX = 275

                            var centerY = 226

                     

                     

                     

                     

                     

                     

                            // FIXED radius of the circle

                     

                     

                            var radius  = 100

                     

                     

                     

                     

                     

                     

                            // angle in degrees; Math.atan2(x, y) -> gives angle in radiants, so -> radiants to degrees = (radiants*180)/MAth.PI

                            // we set the sign "minus" (" - ") before the expression to rotate scrubber clockwise, because atan2 rotate counter-clockwise

                     

                     

                            var angle = -(Math.atan2(e.pageX - originX, e.pageY - originY))

                     

                     

                     

                     

                     

                     

                     

                     

                            // x and Y are the coordinates of a point on circle (applied formula to calculate them)

                     

                     

                                          var Xc = (centerX + (Math.cos( angle ) * radius) );

                                          var Yc = (centerY + (Math.sin( angle ) * radius) );

                     

                     

                     

                     

                              scrubber.offset({

                                 left: Xc,

                                  top: Yc

                             });

                     

                     

                    All ok? Unfortunately, not: as you can see trying my example, the drag and the mouse positions don't match :-(

                     

                    Any hint?

                     

                    It would useful also for the other users if anyone from Staff can help us: drag an object along a circular path can be very very useful in the interactivty projects!!!

                     

                     

                    Still many many thanks!!

                     

                    Davide

                    • 8. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                      AmintaAdobe Level 1

                      Hi Tim!

                       

                      First of all: MANY MANY THANKS!

                       

                      I worked hard on this topic and you resolved it so brilliantly!!

                       

                      Now, I hope I'm not bothering you if I submit to you two last questions.

                       

                      1) The most important question is: why the scrubber-method doesn't work completely correct? I've reimplemented and adapted your scrubble-forum-code in Edge but, when I drag the red square around the circle, the Symbol "animation" play strangely...

                       

                      Heres' the final result: http://www.terredainventare.it/circle/Wheeldragme.html

                       

                      Here are the project files: http://www.terredainventare.it/circle/DragcircleFIXED.zip

                       

                       

                      2) I compared side by side my previous circular-dragging code with the best one you showed me: I corrected a little error but the final result is seems to me identical tough the final behaviour it is not:

                       

                      "your" code:

                       

                      var angle = Math.atan2( e.pageX - data.centerX, e.pageY - data.centerY );

                            var posTop = Math.ceil((data.centerY + (Math.cos( angle ) * data.radius)));

                            var posLeft = Math.ceil((data.centerX + (Math.sin( angle ) * data.radius)));

                            /*

                            var posTop = Math.ceil((data.centerY + (Math.cos( angle ) * data.radius)) - 30);

                            var posLeft = Math.ceil((data.centerX + (Math.sin( angle ) * data.radius)) - 30);

                            */

                       

                       

                            ui.position.top = posTop;

                            ui.position.left = posLeft;

                       

                       

                      "my" code:

                       

                              var angle = Math.atan2(e.pageX - centerX, e.pageY - centerY);

                       

                      var Xc = Math.ceil(centerX + (Math.cos( angle ) * radius) );

                      var Yc = Math.ceil(centerY + (Math.sin( angle ) * radius) );

                       

                      scrubber.offset({

                                   left: Xc,

                                    top: Yc

                               });

                       

                       

                       

                      Still many many thanks, Tim!!!


                      Davide

                      • 9. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                        TimJaramillo Level 4

                        Hey Davide, can you explain more on what you're trying to accomplish? Are you trying to keep the North cardinal point, pointing at your red handle, as you rotate the red handle around the circle?

                         

                        I'm not sure why your code is acting differently than mine. I'd have to throw some console logs in there to see what's going on.

                        • 10. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                          AmintaAdobe Level 1

                          Hi Tim!

                           

                          Regarding the scrubbling, I would that - when I drag to the right the red handle starting from north point, the wheel follows the handle to the right, rotating clockwise. So, at the start we have N at the north point and, ending the rotation of 360^ at... the north too!

                           

                          Can I ask you how do you get console logs in this case? I suppose it's very useful for the 'debugging'!

                           

                          Still many thanks!

                           

                          Davide

                          • 11. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                            TimJaramillo Level 4

                            Hey Davide,

                             

                            Your cardinal direction spinning wheel rotates via timeline animation, yea? If so, you can use the utility function "_getTranslation" below to calculate what frame to scrub to, based on the position of the scrubber. Put it in the drag function. This "_getTranslation" function basically takes 2 sets of min/max values and an input value, and returns a translated output value. Note that you will have to figure out how to convert your Math.atan2 values to degrees, before passing the values to this utility function.

                             

                            /* description of parameter variables

                            sym.minInput = minimum rotation angle

                            sym.maxInput = maximum rotation angle

                            sym.minOutput = 0 (first frame of cardinal symbol)

                            sym.maxOutput = number of frames in cardinal symbol

                            sym.inputNumber = current rotation of scrubber (you will have to figure out how to convert your atan2 values to degrees)

                            */

                             

                            sym._getTranslation = function(sym.minInput, sym.maxInput, sym.minOutput, sym.maxOutput, sym.inputNumber) {

                                                var translatedVal = ((sym.inputNumber - sym.minInput) * (sym.maxOutput -sym.minOutput)/(sym.maxInput - sym.minInput) ) + sym.minOutput;

                                                return translatedVal;

                                      }

                             

                            Regarding console.log:

                            console.log("testVar = "+testVar); is EXTREMELY useful. I use all the time to get values, and find where code is breaking, etc.

                             

                            To show console log,

                            in Safari: Develop/Show Error Console

                            in Chrome: View/Developer/Javascript Console/Console

                            in FF: Tools/Web Developer/Web Console (or even better, install Firebug)

                            • 12. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                              AmintaAdobe Level 1

                              Hi Tim!

                               

                              Your ANSWER was so useful!!!

                               

                              Thanks to you, I learned how to see the variable values in the console. In this way, I got to know the "minInput and maxInput" of your PERFECT function and I got to work the interactive animation!!!

                               

                               

                              Can I take advantage of your experience for a last question?

                               

                              Working with Firefox Web Console, I can get the values of different variables but I can't get directly the value returned by the function you suggested? Why?

                               

                              I attach a screenshot of the Console.

                               

                              ConsoleLogShot.jpeg

                               

                               

                              And here is it the animation working http://www.terredainventare.it/wheel/Wheeldragme.html and here are the project files: http://www.terredainventare.it/wheel/DragcircleOK.zip.

                               

                               

                              Still MANY THANKS, I've learned a LOT from you?

                               

                               

                              Davide

                               

                               

                              PS: did you ever thinked about to write a JQuery/Edge JS course? Your explanations are fantastic!

                              • 13. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                TimJaramillo Level 4

                                Hey Davide,

                                 

                                The function I provided requires that you pass in the 5 parameters when you call it. I've altered your code a bit, moving all vars to the top of the code (the javascript engine actually does this when it compiles- it's called hoisting), and changing how the Translation function is called (need to call it on drag). Now the Translation function's return value is showing in the console log.

                                 

                                Revised file:

                                www.timjaramillo.com/code/edge/_source/DragcircleOK_tj_1105_2012.zip

                                 

                                And thanks for the kind words! Over the past 10 years, as I was learning Flash/AS3, I've learned so much from kind folks on forums who share their knowledge (I'm still learning new javascript, html stuff!), so I try to pass on any knowledge I have to others as well. Us web developers have to stick together!

                                • 14. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                  AmintaAdobe Level 1

                                  Hi Tim!

                                   

                                  Again your help was EXTREMELY USEFUL!

                                   

                                  Thanks to you, I learned what is and how it wroks the "hoisting" in JS: here - for the forum - are two very useful links on the matter:

                                   

                                  http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-javascript-hoisting-explained/ (in english)

                                   

                                  http://www.etnassoft.com/2010/12/26/hoisting-en-javascript/ (in spanish)

                                   

                                  Still much more important, you reminded me that - everytime a function has arguments - we NEED to recall those to make it work!

                                   

                                  So, finally, I've made a "final version" of the code and, in the right spirit of mutual collaboration between developers (less or more clever ;-) ), I've commented it line by line, hoping that could useful for others like it was useful for me!

                                   

                                  Here the final result: http://www.terredainventare.it/wheel/Wheeldragme.html

                                   

                                  And here are the project files with the commented code: http://www.terredainventare.it/wheel/DragcircleFINAL.zip

                                   

                                   

                                   

                                  Still many thanks!

                                   

                                  Davide

                                  • 15. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                    jsiemens3

                                    Hi everyone

                                    I was very interested in the possible application of the code but on an iPad, with features touch and I'm not sure how to do it

                                    Still many thanks!

                                    • 16. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                      AmintaAdobe Level 1

                                      Hi!

                                       

                                      You can simply load the JQuery Ui Touch Punch Library: http://touchpunch.furf.com/

                                       

                                      It map touch events to their mouse event analogs.

                                       

                                      Davide

                                      • 17. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                        resdesign Adobe Community Professional & MVP

                                        Thanks Tim for your example. It works perfectly for my purpose!

                                        • 18. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                          resdesign Adobe Community Professional & MVP

                                          Tim,

                                          I have one question - besides dragging the green dot I also want to be able to drag the blue line to form an angle in the circle, at the same time I drag the dot so I suppose I should have a symbol including the line and the dot but in that case the whole symbols drags around the arc (not really what I want). I offsetted the line so when it rotates in Edge, it rotates along the arc of the circle. However, I am not sure how to accomplish the same drag with the line so it rotates from the center point where the orgin of the line resides. Any input?  I suppose I need to use rotate.

                                           

                                          11-20-2012 9-45-08 AM.png

                                          • 19. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                            TimJaramillo Level 4

                                            Hi resdesign, as a caveat- I am far far from being a mathematician.

                                             

                                            My first thought would be to approach this from a simplistic perspective. You can embed your "line to show angle" in the rotating circle, so as the circle rotates, the line rotates with it.

                                             

                                            If that doesn't fit the bill, you can try rotating the "line to show angle" by leveraging the "sym.wheelCurrentRotation" var from my example.

                                             

                                            Let us know how it goes!

                                            • 20. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                              resdesign Adobe Community Professional & MVP

                                              Thank you Tim. I still have not found the way to get this to work because basically I need a fixed point for the line so that only the top moves along the arc of the angle.

                                              Moreover, I am not very good at coding and I am not sure where to put the alert in the code when the drag stops to get the feedback. I have

                                                          var angleSize = Math.round(angle).toFixed(0);

                                                          alert("The size of the angle is: " + angleSize + "degrees.");

                                               

                                              Where should it go? I looked at the jqueryUI docs but could not make it work.

                                               

                                              I tried:

                                              stop: function(){

                                                                            var angleSize = Math.round(angle).toFixed(0);

                                                                            alert("The size of the angle is: " + angleSize + " degrees.");

                                                           }

                                               

                                              but it just does not work.

                                              • 21. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                TimJaramillo Level 4

                                                Hey resdesign, I'm not quite following- can you post another image, showing how you want the line to rotate?

                                                 

                                                In terms of alerting the angle when the dragging stops, it looks like there's a "stop" event for draggable: http://api.jqueryui.com/draggable/. You can add this "stop" event in the same manner as the current "drag" event that's in the code.

                                                 

                                                Currently the angle is nested in the drag function. There is a var in there called "angle": (var angle = Math.atan2( e.pageX - data.centerX, e.pageY - data.centerY );)

                                                 

                                                You can make this angle a global var "sym.angle" at top of the code, then it will be accesible in both the "drag" and "stop" events.

                                                 


                                                 


                                                • 22. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                  resdesign Adobe Community Professional & MVP

                                                  Thanks for the reply. I tried  stop but then nothing works. You probably did not see the code since I added it after.

                                                   

                                                  Below is the explaination of what I am trying to do. Basically, when I drag the green dot, I want the line to follow and when I stop, I want an alert to show the size of the angle.

                                                   

                                                  11-20-2012 12-31-40 PM.png11-20-2012 12-34-30 PM.png

                                                  • 23. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                    resdesign Adobe Community Professional & MVP

                                                    By the way, the second picture was done manually to show what I want it to accomplish.

                                                    • 24. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                      resdesign Adobe Community Professional & MVP

                                                      If I nest the line below is what I get because the center is not fixed.

                                                      11-20-2012 12-39-04 PM.png

                                                      • 25. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                        Jerry Witt Level 2

                                                        I think if you just have the blue stick with the green ball on top and you do not allow it to drag at all, but only rotate around the circle's center point, you should get what you want.

                                                         

                                                        Then, in psuedo code, you'd say: Alert: "the new angle is " (90 - blue_stick(angle). So you drag the blue stick 10 defrees and you get an alert saying "the new angle is 80".

                                                         

                                                        Now I see your follow-up question is for the actual code and where to place it. I'm not so much help there.

                                                        • 26. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                          resdesign Adobe Community Professional & MVP

                                                          Jerry

                                                          Well, I tried different things

                                                          1. If I nest the blueline under the green dot, it moves with it as expected except that the bottom does not stay at the center.
                                                          2. if I make a symbol with both the dot and the line, same as above.

                                                           

                                                          The code works as far as giving me the angle size when I put it under drag but of course it is the wrong place.

                                                          When I add the stop lines from jquery after the drag function , it brakes all (no drag).

                                                           

                                                          stop: function(){

                                                                                        var angleSize = Math.round(angle).toFixed(0);

                                                                                        alert("The size of the angle is: " + angleSize + " degrees.");

                                                                       }

                                                           

                                                          Here is the file:

                                                          https://www.box.com/s/ha5p6ysh7ftxw5u880pw

                                                          • 27. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                            Jerry Witt Level 2

                                                            Well, at least I see the issue now. The code used on that wheel at the top of this thread (and in your EA file) doesn't really rotate the symbol around a center. It constrains the symbol to a circular path. You can see it in the example at http://www.terredainventare.it/wheel/Wheeldragme.html. The square does not rotate.

                                                             

                                                            I guess what I am suggesting is some new custom code. I wish I had the skill set to do it for you. I suspect that if you were to set the radius to 0 (zero) and the center to the registration point of the stick with the ball on it, it may work.

                                                             

                                                            if(!drag.data('circle'))

                                                                        {

                                                                         drag.data( 'circle', {

                                                                            radius : 0,

                                                                              centerX : 297,

                                                                              centerY : 212

                                                                          });

                                                                      }

                                                             

                                                            (Although mucking about in your files I wasn't able to do it.)

                                                            • 28. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                              resdesign Adobe Community Professional & MVP

                                                              Right - I tried that too. This is driving me nuts!

                                                              • 29. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                                TimJaramillo Level 4

                                                                Hey resdesign, I agree with Jerry. The OP was looking for unique functionality, different from yours.

                                                                 

                                                                Here is an example of dragging to rotate a circle (done with custom code, not jQuery. includes snapping to points too!). Perhaps you can use this, and put your "B" line as a static graphic on top of the rotating circle beneath? Your grey circle and line "A" would be nested in 1 symbol, replacing the wheel in my example.

                                                                 

                                                                example:

                                                                www.timjaramillo.com/code/edge/drag_rotate/test.html

                                                                 

                                                                source:

                                                                www.timjaramillo.com/code/edge/_source/drag_rotate_wheel.zip

                                                                • 30. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                                  resdesign Adobe Community Professional & MVP

                                                                  Thanks Tim. I think I may be able to use your example to get what I want. I'll let you know and post the result.

                                                                  • 31. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                                    resdesign Adobe Community Professional & MVP

                                                                    I got it almost working as I want.

                                                                    Now how do I get the feedback for the angle. I just want to use an alert.

                                                                     

                                                                     

                                                                    alert("The angle is: " + angle + " degrees");

                                                                    • 32. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                                      TimJaramillo Level 4

                                                                      Hey res, in the sym.onMouseOut function, add:

                                                                       

                                                                      alert("The angle is: " + sym.wheelCurrentRotation + " degrees");

                                                                      • 33. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                                        resdesign Adobe Community Professional & MVP

                                                                        Thank you so much for your help Tim. How can I credit this for you. Do I need to start a new thread?

                                                                        Actually I put it in sym.rotate function. That way I have a constant feedback.

                                                                        var angleSize = Math.round(angle).toFixed(0); 

                                                                                  sym.$("feedback").html("The angle is: " + angleSize + "&deg;");

                                                                         

                                                                        It is almost working.

                                                                        11-20-2012 4-08-00 PM.png

                                                                        • 34. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                                          TimJaramillo Level 4

                                                                          Glad you're on the right path resdesign!

                                                                           

                                                                          I think if you click "helpful" on my post where I supplied the source code, I will get a few sweet points (not sure if only the OP can do that though?)

                                                                          • 35. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                                            resdesign Adobe Community Professional & MVP

                                                                            Actually now, the only thing I need to change is the angle count so it is going in the other direction, that is increase counterclock instead of clockwise.

                                                                            • 36. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                                              resdesign Adobe Community Professional & MVP

                                                                              OK - I put helpful in a couple of places since I cannot hit CORRECT.

                                                                              I have a few tweaks and then I will post the file in case someone wants to use it.

                                                                              • 37. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                                                resdesign Adobe Community Professional & MVP

                                                                                Tim,

                                                                                One more question. Is there a way to get this "wheel"to go in the other direction - Counterclock - so that the angle goes from 0 to 360 when going in reverse direction? Still messing with the code to fit my needs!

                                                                                • 38. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                                                  resdesign Adobe Community Professional & MVP

                                                                                  Hey Tim,

                                                                                  Any idea how to have the number in the other direction- right now it goes from zero to 360 starting on the rights and going down clockwise but I want the opposite, going from zero to 360 going counterclockwise. I do not seem to be able to do that.

                                                                                  • 39. Re: Scrubbing a wheel and turning a pot with Edge Animate!
                                                                                    TimJaramillo Level 4

                                                                                    Hey resdesign, sorry- missed your Q earlier today.

                                                                                     

                                                                                    By default, rotation is clockwise, so to go the other way you'd need a slick formula.

                                                                                     

                                                                                    I think the formula below should give you your flipped angle:

                                                                                    360 - originalAngle = myFlippedAngle;

                                                                                    1 2 Previous Next