TirochH
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by TirochH
-
-
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
-
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
-
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
-
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
-
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>
- create a directory "js" and copy your actual files and additional jquery v2.2.3 and d3 v4.12
- create a HTML "jack.html" based on my example (insert the few lines from the style-sheet)
- create a my.js from my codepen (just copy)
- 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
-
1
-
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
-
Dear Sahil, dear Greensock support,
i learned that I have exactly define what I want:
I want a callback function that returns the rotation position where I touched (not dragged) the wheel.
e.g.: .onTouchwithoutDrag or .onTouchwithoutMove or .onTap or .onClick. (.onClick exists, but with annother functionality).
THIS IS THE SAME REQUIREMENT DEFINITION - IN OTHER WORDS - AS YOU (SAHIL) POSTED ON MONDAY 11:03 AM.
All other input should only be a more detailed explanation.
I hope that this is more clear. I do not want a UI functionality. This I build by my own.
But it is clear, I need this functionality to build a UI. But from my view, all people who use Greensock Draggable build - more or less - a high sophisticated (animated) UI by their own.
The only reason, why I used external libraries is to ease my life and not make it more complicated. This is the message I want send. Thats the reason I discussed this topic more intensively and more emotional.
I read in this forum, that the business model from Greensock based on the principle to extend their functionality. The question from me is, in which direction? This is the job from Greensock to clearly define this. I also expect that the support help users such me to define a way that solves the problem, for me and for Greensock.
But my minimal expectaction is to get an anwer. A positive nor negative. No answer is the situation now.
Sorry.
Hans
-
7 hours ago, OSUblake said:
For screen coordinates...
........
But there's a big gotcha. If the element has rotation/skew applied to it, the coords might not be what you are expecting. The getBoundingClientRect method returns a rectangle that is axis-aligned, like I explain here for getBBox.
.............
my viewpoint is:
we need a draggable KNOB in 2 variants:
- one with the greensock's functionality (its a knob that spins)
- a second with the functionality of https://radmie.github.io/ng-knob/ (this is, what needed functionality I described)
From my point of view is this functionality with low manpower possible to build in Draggable-alternate (=working name)
When you look in the code from ng-knob. you need only few lines-of-code.
To combine this functionality global is a hard way and only necessary in some preselected parts,
Hans
-
Sorry,
noone from greensock can help?
Hans
-
12 minutes ago, OSUblake said:
I think that is so you can use it with pointerX/pointerY properties, which are like pageX/pageY. However, I'm not exactly sure as I just noticed the rotationOrigin properties today, so @GreenSock would need to clarify their intended use.
Thank you for your idea's.
I also think that GreenSock need to clarify this.
My expectation is a integrated functionality, comparable with ng-knob.
The other alternative is, that I implement it with the same logic as ng-knob. I think it is d3.js
I have to explore it. The svg's in my example based on d3 v4.
Hans
-
I don't find an example from the draggable knob that does following (based on my codepen live example):
- knob is on position 15 percent
- I tap (touch) on position 70 percent
- knob moves to position 70 percent
It is only possible to tap and move (drag) to that position.
I don't find anything in your docu. A "simple" answer from you will be "tap or touch" is not "drag". But this doesn't help me.
A link that explains what I want. https://radmie.github.io/ng-knob/
My link to my codepen live example. I want only show the missed functionality (compared to the upper example, based on ng-knob). For a review it's to complex.
But interesting for you. Hopefully. When you want play with different predefined variants than change line 20 in "JS".
See the Pen eGqbNL by TirochH (@TirochH) on CodePen
Here a link from a "simple" example from "Greensock" with the same missed functionality (with rotation angle, instead percentage).
See the Pen eWNRpe by PointC (@PointC) on CodePen
Hans
-
Now I reduced my code again.
I have insert always 'absolute'. Nothing change as I want.
Hans
PS: I add this also direct in CSS. You are right.
Than it is O K:
But I want use it without CSS: How I insert the identical in javascript?
-
please can you help me.
what is not right on my svg graphic (via snap.js).
why the circles not overlap ?
Hans
See the Pen OmxaJo?editors=0010 by TirochH (@TirochH) on CodePen
-
My problem is, that my new knob from my posting (2;28 PM) is no SVG. Its build only with HTML "<DIV>"s.
See the link to the codepen.
Hans
-
HI,
1. the starting position (position; 0) has not the defined color. Based on your logic, the color should be green. You are right "nothing is initialized.
Bur how you initialize?
2. how you select the. stroke, that I get the color from yellow to red.
3. have you a demo ?
Hans
-
Thank you, it runs.
For your info: The result of the knob:
See the Pen eWpWJm by TirochH (@TirochH) on CodePen
Annother questions:
1. when I start from rotation x, how I can "initialize", that at start I have the right color ?
2. when I want go from color (rotation 0) "yellow orange red", what I have to do?
3. Alternative to the color circle;
- round circles around the knob
- init state (rotation = 0): white or transparent- state by rotation = x, all circles from 0 to x, are on (color, color depending of rotation)
Hans
-
Thank you very much. I like your Vektor Grafik.
I adapt your codeine.
see:
See the Pen ZKGwdK?editors=0010 by TirochH (@TirochH) on CodePen
I want change the color of the wheel, dependent of the rotation. Can you help me.
Hans
-
Good Morning,
how I can use the attached "greenDial.svg" instead "knob.png".
I want change the color of the enclosed green svg-based circle.
Hans
See the Pen ywpet by GreenSock (@GreenSock) on CodePen
-
Dear Carl,
thank you very much for your answer. It was the first time I worked with your solution.
I learned also important basic knowledge in the area of Javascript.
My native language is German, and not English. Sorry.
But in the meantime I solved the most, but not all Problems.
I integrate the following two examples in my Home-Automation Solution. See following pictures:
and here the codepen-link to my Example 1:
See the Pen oWNoeX?editors=0010 by TirochH (@TirochH) on CodePen
and the codepen example 2:
See the Pen bWGoKw?editors=0010 by TirochH (@TirochH) on CodePen
The animation features are amazing.
You see not very often. Pure javascript, no HTML, no CSS. I love this approach.
Please can you look over the code and give me a feedback.
Following are not totally solved:
- the start value
- the interaction with the touch features, I copied this solution from Chris Gannon
- the snap feature in example 2, should be 5%
Please look about this code in example 2, with th jQuery.plugin (see codepen).
In codepen, it does not run. But in my "simple" solution it runs perfect.
The reason I need this, because I get by "ElementById" a Null-Pointer return.
This is special by the "SVG".
function initSVG(){$('#dial-line-bg').waitUntilExists(function(){oarg.item.xxapi.dialLineBg = document.getElementById('dial-line-bg'); //SVGTweenMax.set(oarg.item.xxapi.dialLineBg, {position:'absolute',alpha:0.1});});I have more questions, but I find. This is enough for the first step.
I want integrate your amazing features in my Home-Automation Solution.
Examples are for "dimming" the light or volume of radio, etc.
Greetings from Vienna.
Its a little country in Europe.
Hans
-
I adapt following Example from Chris Gannon
In DEMO-Mode it runs perfect. But I have Problem with the integration in my App for Home-Automation,
IN your demos you start always from the body-tag. I use in my tests different tags.
In the example (3rd attachment ) I used the "container" tag.
I have it on my screen on the top position. The wheel run perfect.
But not on the right position in the popup window (down-right). I want the Picture with a predefined size (240x240).
Additional Questions:
How I get a value from the wheel? Or how I put a Value to the wheel? Your predefined value "initialFace" don't work........Hans
^^^
draggable knob - positioned by tap (touch)
in GSAP
Posted
Dear Jack,
thank you.
I have one Problem found. "snap" does not run. "liveSnap" runs.
When I have a misunderstanding please extend your codepen.
Hans