Jump to content
Search Community

draggable knob - positioned by tap (touch)

TirochH test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

  • 4 weeks later...

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:

See the Pen RjaNWL by TirochH (@TirochH) on CodePen

 

Link to comment
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
Link to comment
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 (

See the Pen dZYWEY by GreenSock (@GreenSock) on CodePen

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

    See the Pen RjaNWL by TirochH (@TirochH) on CodePen

  3. create a my.js from my codepen (just copy) 

    See the Pen RjaNWL by TirochH (@TirochH) on CodePen

  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
Link to comment
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

Link to comment
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

Link to comment
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
Link to comment
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

Link to comment
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: 

See the Pen oorWvm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

I hope that helps. Happy tweening/dragging :)

  • Like 4
Link to comment
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  (

See the Pen EoYWpZ by TirochH (@TirochH) on CodePen

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

Link to comment
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
Link to comment
Share on other sites

  • 8 months later...
  • 1 year later...

Hi....I found the way to drag the knob following a circular path, and I understood the role of the server. Just another question (to be sure that my mind is clear
enough): If I wanted the server to keep the state both of the angle (from 0 to 6,28 rad) and of the position of the knob (>= minvalue and <= maxvalue), I would be forced to create another command because "onScroll" gets only one value as data from the javascript file, am I right?

 

order pcb

Link to comment
Share on other sites

@FreddyRindos Hello and welcome to the GreenSock forums!

 

3 minutes ago, FreddyRindos said:

I would be forced to create another command because "onScroll" gets only one value as data from the javascript file, am I right?

I don't understand. onScroll is an event callback, so you can give it a function and in that function you can send whatever data you want to your server. Maybe adding some code would help us understand? A new thread might be a good idea so people who posted in this thread don't get all the notifications. See this thread for how to create a minimal demo:

 

Link to comment
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.
×
×
  • Create New...