TirochH

draggable knob - positioned by tap (touch)

Recommended Posts

HI  JACK, HI SAHIL,

after longer interrupt time my example runs - thanks your help. My problem was, that the "this.rotationOrigin" is implemented only in the latest version of the Greensock-Library". I need longer to realize this.

 

In my Application  it runs the feature "Positioned by Mouse-Click" on a MAC with Safari or Chrome,  always with the newest updates on  all levels.

But my Application on the iPad - with "Touch Interface" it doesn't  run the feature "Positioned by Finger-Tap".

 

Here my example on the end of this posting (sorry it is complex). Here it runs with the "Touch Interface".

Can you give me an idea, what I can do to solve this problem?

 

Additional Statement:

I found the problem.  When I insert the plugin's with the "web-link from the codepen.io" it run's OK with a local browser. But after a short time I get the "Wups, you are using a members-only plugin". 

When I insert the plugin's with the correct "legal members-only" downloaded files, the position-by-finger-tap doesn't run on the iPad, on the Mac (with mouse-click) all runs OK.

From my point-of-view, it's the responsibility from Greensock to solve this problem.

 

Final:  

 The utility  "Draggable.min.js" is the problem.  With the utility "Draggable.js" all runs OK.

 

Feedback/Impression:

My impression is, when you are a "Newbie" it is more difficult to get a "good" and "quick" answer.

 I personally need "days" to find the "right" answer.  Sorry, for this feedback to the support.

But your products are fine.

 

Additional "Newbie" question for a quick help:

My enclosed sample is a lightbulb dimmer knob  (0%  to 100%).

For example: The knob is positioned by 20%. When I tap on 80% the knob jumps "quick" to 80%. I want a smooth transition to the new position (with reduced more slowly at start and end). Can you give me a short recommendation. 

 

Hans

 

Here my "codepen.io"-example, nearly 100% of the code based on JavaScript. With no html and nearly no css (used only to include the "digital font" in the "codepen.io"-environment) and SVG (scaleable-vector-graphic) based on d3 version 4 and Greensock's GSAP:

https://codepen.io/TirochH/pen/RjaNWL

 

Share this post


Link to post
Share on other sites

Hi @TirochH. I'd really like to help, but I'm having a difficult time understanding what exactly you're asking and it's extremely difficult to troubleshoot a codepen that has almost 800 lines of code and is using a different library. 

 

I'd be happy to look at a reduced test case. Can you provide one that shows just the isolated GSAP problem? 

 

Also, were you saying that Draggable.min.js acted differently than Draggable.js? If so, would you please provide those files along with a reduced test case that demonstrates that? I can't imagine how it could possibly be the case unless maybe you're using an old version of the min.js and a newer .js one. The only difference is minification, and nobody else has reported any such problem and I know that a lot of people use the .min.js one. Again, if there's truly a problem, I definitely want to fix it. I just need some evidence and/or a way to see the problem in action.

 

Did you also mean to say that there's a members-only plugin (ThrowPropsPlugin?) that only works properly in the codepen-specific flavor as opposed to the members-only "official" download? And the version numbers match? Again, I'm baffled. Can you provide a reduced test case?  

 

 

  • Like 1

Share this post


Link to post
Share on other sites
10 hours ago, GreenSock said:

Hi @TirochH.

I'd be happy to look at a reduced test case. Can you provide one that shows just the isolated GSAP problem? 

....

 

Dear Jack,

I want reproduce this error in a reduced test case, based on your codepen (https://codepen.io/GreenSock/pen/dZYWEY). But I failed.

 

My example - with members-only downloaded files - I cannot build on codepen. You need the codepen pro license.

My error is only reproduce-able on iOS.

 

I want, that you test only following simple test-case (with the complex code) to verify if the posted error is reproduce-able.

You have only following steps, based on my HTML-example:

 

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>jack.html - test for hans</title>
    <script src="js/d3.v4.12.js"></script>
    <script src="js/jquery.v2.2.3.js"></script>
    <script src="js/ThrowPropsPlugin.min.js"></script>
    <script src="js/Draggable.min.js"></script>
    <!--script src="js/Draggable.js"></script-->
    <script src="js/TweenMax.min.js"></script>
  <style>
    svg {
      position:absolute;
    }
    /*
    insert code from codepen
    */
  </style>
  </head>
  <body>
    <script src="my.js"></script>
  </body>
</html>
  1. create a directory "js" and copy your actual files and additional jquery v2.2.3 and d3 v4.12
  2. create a HTML "jack.html"  based on my example (insert the few lines from the style-sheet) https://codepen.io/TirochH/pen/RjaNWL
  3. create a my.js from my codepen (just copy) https://codepen.io/TirochH/pen/RjaNWL
  4. run the "jack.html" on iOS, to see if my error is reproduce-able.

My project runs now, without complications. But only with "Draggable.js", not with "Draggable.min.js".

The only question is, why is this mistake? 

All described Greensock-Files are loaded from the member-section from Club Greensock (PlugIn's v1.20.3).

 

Thanks

 

Hans

  • Like 1

Share this post


Link to post
Share on other sites
On 3.12.2017 at 4:03 AM, GreenSock said:

Hi @TirochH. I'd really like to help, but I'm having a difficult time understanding what exactly you're asking and it's extremely difficult to troubleshoot a codepen that has almost 800 lines of code and is using a different library. 

 

I'd be happy to look at a reduced test case. Can you provide one that shows just the isolated GSAP problem? 

 

Also, were you saying that Draggable.min.js acted differently than Draggable.js? If so, would you please provide those files along with a reduced test case that demonstrates that? I can't imagine how it could possibly be the case unless maybe you're using an old version of the min.js and a newer .js one. The only difference is minification, and nobody else has reported any such problem and I know that a lot of people use the .min.js one. Again, if there's truly a problem, I definitely want to fix it. I just need some evidence and/or a way to see the problem in action.

 

Did you also mean to say that there's a members-only plugin (ThrowPropsPlugin?) that only works properly in the codepen-specific flavor as opposed to the members-only "official" download? And the version numbers match? Again, I'm baffled. Can you provide a reduced test case?  

 

 

 

Dear Greensock Support,

 

please answer .?

 

Thanks

 

Hans

Share this post


Link to post
Share on other sites

Hi Jack,

 

following Questions are open:

 

1. Is the Draggable.min.js / Draggable.js error reproduce-able ?

 

And some additional questions:

 

2. Position-by-tap smooth rotation to the new position.

 

 In  your proposed example  there is a "jump" to the new positon. Who you extend the solution, that a smooth rotations will be down ?

 

3.  Differentiate between "short tap" and "tap-and-move"

      Variant 3.1:  A "short tap" should rotatate smoothly" to the new "tapped position"

      Variant 3.2:  In some cases I want suppress variant 3.1, depending on a "condition"

      Variant 3.3:  tap-and-move should be possible, this is different to variant 3.a, now the "the rotation jumps to the new "tapped"

        position and moves from the "tapped" position. When you tap-and-move I want the "old"  solution to begin the movement

        starting from the old existing position  without jumping to the "tapped" position.

 

Thanks

 

Hans

Share this post


Link to post
Share on other sites

I followed all those steps and tested on iOS for you. I saw no difference when using Draggable.js vs. Draggable.min.js. I'm not sure what's causing the difference on your end. 

 

If you need any further assistance, please provide a reduced test case that clearly illustrates the issue. As for the long/short press, perhaps you could simply use the onClick for the short tap and the onDrag would only fire if they start dragging, thus it's the press-and-drag you're looking for. In case it's helpful, there's also a timeSinceDrag() method. 

  • Like 1

Share this post


Link to post
Share on other sites
9 hours ago, GreenSock said:

I followed all those steps and tested on iOS for you. I saw no difference when using Draggable.js vs. Draggable.min.js. I'm not sure what's causing the difference on your end. If you need any further assistance, please provide a reduced test case that clearly illustrates the issue.

 

Interesting. I expect an Error. But it runs with draggable.js without problems.

 

9 hours ago, GreenSock said:

As for the long/short press, perhaps you could simply use the onClick for the short tap and the onDrag would only fire if they start dragging, thus it's the press-and-drag you're looking for. In case it's helpful, there's also a timeSinceDrag() method. 

 

Thank you  for this proposal. It  runs with no problems. I changed "onPress" with "onClick" and delete the Code-Line with "this.startdrag(rt)".

 

 Two additional questions:

 

1. when I "drag" with the mouse or fingers a rotation of 100 degrees "Darggable" will return a rotation value of approximately 60 degrees. Is it possible to return the 100 % instead of 60%?

 

2. onClick position, smoothly change from the old position to the new position. Can you give me an example, how you solve this.

 

I think thats the last 2 questions I have for this controls.

 

Thanks

 

Hans

Share this post


Link to post
Share on other sites

1. I already provided 2 demos that showed how to make it work perfectly (degrees matched where the mouse position was), but if you're asking me to dig into your 700+ lines of code in a complex demo that uses a different framework (D3) and isolate where the logic may be wrong, that's not something I have the time to do, sorry. Hopefully you can take one of my earlier demos and apply the same concepts to get it to work in your complex project.

 

2. Here's an updated demo of a previous one I provided, and it now has an animated (gradual) change on press, but an instant update whenever dragged: 

 

 

I hope that helps. Happy tweening/dragging :)

  • Like 4

Share this post


Link to post
Share on other sites
On 7.12.2017 at 8:46 PM, GreenSock said:

1. I already provided 2 demos that showed how to make it work perfectly (degrees matched where the mouse position was), but if you're asking me to dig into your 700+ lines of code in a complex demo that uses a different framework (D3) and isolate where the logic may be wrong, that's not something I have the time to do, sorry. Hopefully you can take one of my earlier demos and apply the same concepts to get it to work in your complex project.

 

2. Here's an updated demo of a previous one I provided, and it now has an animated (gradual) change on press, but an instant update whenever dragged: 

 

I hope that helps. Happy tweening/dragging :)

 

Hi Jack,

thank you for your input. I think, I solved my problems. Sorry for the 700+ lines. I don't  want and never expect that you analyze this code.

 

But now I create a very compact codepen  (Draggable / d3). With 127 lines "js", 0 lines "css", 0 lines "html".

I think this codepen is also helpful for other people. It's "pure" JavaScript with no line "css" and no line "html".

 

Your demo has 157 lines (101 "js", 33 "css" and 23 "html). Including "blank lines, sorry.

 

My Solution runs perfectly.

 

Some questions:

1. I need for dragging function "rtDial", you not, why?

2. function rtArc, look at  (-rtOffset), why I need this and you not ?  


I think we use different versions of  the SVG.

 

Hans 

Share this post


Link to post
Share on other sites

It seems like that's another way of asking me to do the same thing - analyze all your code, compare it to my working demo, and troubleshoot the logic in yours. Sorry, I just don't have the time to do that. If you have a GSAP-specific question, I'd be happy to answer it. 

 

Glad you got things working well now. 

 

Good luck with your project, Hans. Best wishes. 

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.